# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 31 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=31 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [gsap-web](https://affpapa.org/en/nevibecode/skills/gsap-web.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2500 installs — Helps AI coding assistants write GSAP animations, from sequenced timelines and ScrollTrigger effects to SplitText, Flip, and Lenis smooth scroll. - [micro-interaction](https://affpapa.org/en/nevibecode/skills/micro-interaction.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2500 installs — A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. - [atomic-design-fundamentals](https://affpapa.org/en/nevibecode/skills/atomic-design-fundamentals.md) — skill · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 766 installs — Lays out UI components across the six Atomic Design levels, from tokens up to pages. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/pedro-nauck-tailwindcss.md) — skill · Pedro Nauck · Claude Code, Codex, Cursor +3 · 447 installs — Guides coding agents through Tailwind CSS v4 component styling using project tokens, explicit utility classes, and accessible layouts. - [scenario-textures](https://affpapa.org/en/nevibecode/skills/scenario-textures.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 500 installs — Orchestrates tileable texture generation, repeat-safe upscaling, and PBR material extraction via the Scenario MCP. - [gpt-taste](https://affpapa.org/en/nevibecode/skills/tasteskill-gpt-taste.md) — skill · tasteskill · Claude Code, Codex, Cursor +3 · 398 installs — Forces coding agents to generate layout images, analyze their typography and spacing, and only then write frontend code. - [app-icon](https://affpapa.org/en/nevibecode/skills/melvynx-app-icon.md) — skill · Melvynx · Claude Code, Codex, Cursor +3 · 396 installs — Generates dimensional iOS and Android app icons for Expo projects and crops them to store requirements. - [design-taste](https://affpapa.org/en/nevibecode/skills/design-taste.md) — skill · h3nryprod01 · Claude Code, Codex, Cursor +3 · 720 installs — This skill guides interface design and review, from visual direction to typography, layout, motion, and component states. - [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a screenshot, mockup or Figma export into working front-end code, then renders it and compares the result against the image. - [product-taste](https://affpapa.org/en/nevibecode/skills/product-taste.md) — skill · RefoundAI · Claude Code, Codex, Cursor +3 · 397 installs — A skill that helps you name why a product feels good and make hard calls before the numbers arrive. - [instagram-carousel](https://affpapa.org/en/nevibecode/skills/instagram-carousel.md) — skill · marcolang · Claude Code, Codex, Cursor +3 · 817 installs — Builds an Instagram carousel as a swipeable HTML preview and exports every slide as a ready 1080×1350 PNG. - [page-transition-animation](https://affpapa.org/en/nevibecode/skills/page-transition-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2300 installs — A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation. - [glassmorphism](https://affpapa.org/en/nevibecode/skills/glassmorphism.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that teaches your coding agent to build frosted glass panels: blurred backdrops, lit edges, layered shadows and SVG refraction. - [tool-foundation-sprint-approach-options](https://affpapa.org/en/nevibecode/skills/tool-foundation-sprint-approach-options.md) — skill · product-on-purpose · Claude Code, Codex, Cursor +3 · 622 installs — Facilitates the Day 2 morning step of a Foundation Sprint. - [presentation-design](https://affpapa.org/en/nevibecode/skills/presentation-design.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 2500 installs — A skill that shapes presentations around the audience: structure, visual clarity, cognitive load. - [tool-design-sprint-prototype-plan](https://affpapa.org/en/nevibecode/skills/tool-design-sprint-prototype-plan.md) — skill · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 installs — Creates Thursday’s Design Sprint planning pack: team roles, a prototype brief, and an interview script. - [tool-design-sprint-map-and-target](https://affpapa.org/en/nevibecode/skills/tool-design-sprint-map-and-target.md) — skill · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 installs — Guides Day 1 of a Design Sprint to produce the Monday artifact: long-term goal, customer map, HMW clusters, and target moment. - [tool-design-sprint-decide-and-storyboard](https://affpapa.org/en/nevibecode/skills/tool-design-sprint-decide-and-storyboard.md) — skill · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 installs — Runs Wednesday of a Design Sprint: art museum layout, heat map, speed critique, straw poll, the Decider's supervote and a 5-15 step storyboard. - [stop-describing-ui](https://affpapa.org/en/nevibecode/skills/stop-describing-ui.md) — skill · artouc · Claude Code, Codex, Cursor +3 · 717 installs — A skill that removes explanatory copy from interfaces: headings, empty states, button labels, helper text and onboarding. - [tool-design-sprint-sketch](https://affpapa.org/en/nevibecode/skills/tool-design-sprint-sketch.md) — skill · product-on-purpose · Claude Code, Codex, Cursor +3 · 616 installs — Runs day two of a Design Sprint: lightning demos plus the four-step independent sketch protocol. - [using-ui-stack](https://affpapa.org/en/nevibecode/skills/using-ui-stack.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 539 installs — Makes the agent build interfaces from fixed rules: an 8px grid, 60-30-10 colors, type scale, dark mode and interaction states. - [qt-figma-token-extraction](https://affpapa.org/en/nevibecode/skills/qt-figma-token-extraction.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 439 installs — Reads variables, text styles and tokens out of a Figma file, then writes design-tokens.json and working QML singletons built around one Theme. - [ios-liquid-glass](https://affpapa.org/en/nevibecode/skills/ios-liquid-glass.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 803 installs — An API reference for the Liquid Glass design system in iOS 26+. - [resend-design-skills](https://affpapa.org/en/nevibecode/skills/resend-design-skills.md) — skill · resend · Claude Code, Codex, Cursor +3 · 1200 installs — Routes coding agents to Resend visual identity rules and assets. - [ui-design](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — skill · frappe · Claude Code, Codex, Cursor +3 · 832 installs — A skill that gives the agent design rules for layout, type, color and spacing. - [qt-figma-component-generation](https://affpapa.org/en/nevibecode/skills/qt-figma-component-generation.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 437 installs — Reads Figma components over MCP and writes QML controls for Qt Quick Controls 2. - [mapbox-style-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-style-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2300 installs — Ready-made Mapbox layer setups for common maps: POI finders, real estate, navigation, delivery. - [hig](https://affpapa.org/en/nevibecode/skills/hig.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 786 installs — A local Markdown reference for Apple Human Interface Guidelines to check touch targets, Dynamic Type, system components, and App Review rules on demand. - [ai-native-ux](https://affpapa.org/en/nevibecode/skills/ai-native-ux.md) — skill · RefoundAI · Claude Code, Codex, Cursor +3 · 373 installs — Guides you through designing interfaces for probabilistic models: what the AI should decide and what stays with the human. - [tailwindcss-animations](https://affpapa.org/en/nevibecode/skills/tailwindcss-animations.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2400 installs — A Tailwind CSS skill covering built-in animation utilities, custom keyframes, transitions, reduced-motion and Framer Motion. - [scenario-image-editing](https://affpapa.org/en/nevibecode/skills/scenario-image-editing.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 443 installs — Edits existing images via Scenario MCP tool models: upscales to 4K, applies 3D LUT grades, and cuts out backgrounds. - [ui-design-system](https://affpapa.org/en/nevibecode/skills/samhvw8-ui-design-system.md) — skill · samhvw8 · Claude Code, Codex, Cursor +3 · 3200 installs — A skill for reviewing and building React interfaces with TailwindCSS, Radix UI and shadcn/ui. - [scenario-asset-analysis](https://affpapa.org/en/nevibecode/skills/scenario-asset-analysis.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 435 installs — Extracts style prompts and control maps from Scenario assets, plus searches catalogs by similarity. - [design-style-picker](https://affpapa.org/en/nevibecode/skills/design-style-picker.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 342 installs — Generates a batch of visual design directions and lets you choose from images instead of a written brief. - [frontend-design](https://affpapa.org/en/nevibecode/skills/agent-skills-frontend-design.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 2300 installs — Audits existing CSS, pulls out design tokens, and generates palettes, type scales and component templates. - [lottie-animation](https://affpapa.org/en/nevibecode/skills/lottie-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2100 installs — Gives your agent the wiring for After Effects vector animation: player setup, frame control, scroll effects and runtime recoloring. - [wireframe-prototyping](https://affpapa.org/en/nevibecode/skills/wireframe-prototyping.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 1400 installs — Sketch a UI and build a prototype before development starts. - [hand-drawn-diagrams](https://affpapa.org/en/nevibecode/skills/muthuishere-hand-drawn-diagrams.md) — skill · muthuishere · Claude Code, Codex, Cursor +3 · 620 installs — Draws hand-drawn diagrams, flowcharts, wireframes and page mockups as Excalidraw files. - [web-3d-asset-pipeline](https://affpapa.org/en/nevibecode/skills/web-3d-asset-pipeline.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 58 installs — Guides browser-game 3D assets from Blender cleanup to GLB or glTF preparation. - [window-management](https://affpapa.org/en/nevibecode/skills/window-management.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 58 installs — Configures macOS 15+ SwiftUI windows and scenes: toolbar chrome, drag regions, placement, and launch restoration. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=32 ## Refine [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ux](https://affpapa.org/en/nevibecode/tag/ux.md) · [image-generation](https://affpapa.org/en/nevibecode/tag/image-generation.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [typography](https://affpapa.org/en/nevibecode/tag/typography.md) · [html](https://affpapa.org/en/nevibecode/tag/html.md) · [design-tokens](https://affpapa.org/en/nevibecode/tag/design-tokens.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md