# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 46 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=46 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [ux-writing-content-design](https://affpapa.org/en/nevibecode/skills/ux-writing-content-design.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 562 installs — Writes and critiques interface text: button labels, hints, empty states, errors, onboarding. - [depth](https://affpapa.org/en/nevibecode/skills/depth.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 537 installs — Establishes elevation scales, two-part shadows, and inset surfaces. - [ux-usability-foundations](https://affpapa.org/en/nevibecode/skills/ux-usability-foundations.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 559 installs — Guides an AI agent to design, review, and refine interfaces around usability principles, error prevention, and user mental models. - [imagery](https://affpapa.org/en/nevibecode/skills/imagery.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 533 installs — Audits UI photos, screenshots, and icons to fix contrast issues, preserve layout bounds, and align visual styles. - [clarify](https://affpapa.org/en/nevibecode/skills/aladicf-clarify.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 533 installs — Rewrites labels, error messages, empty states and CTAs so users know what happened and what to do next. - [information-architecture-navigation](https://affpapa.org/en/nevibecode/skills/information-architecture-navigation.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 556 installs — A skill for designing navigation, labels, taxonomy and search in a digital product. - [screensdesign-data](https://affpapa.org/en/nevibecode/skills/screensdesign-data.md) — skill · screensdesign-com · Claude Code, Codex, Cursor +3 · 1300 installs — Researches mobile apps, paywalls, and user flows via ScreensDesign MCP. - [frontend-design-review](https://affpapa.org/en/nevibecode/skills/dauquangthanh-frontend-design-review.md) — skill · DauQuangThanh · Claude Code, Codex, Cursor +3 · 458 installs — Audits UI mockups, design tokens, and components for WCAG 2.1 AA accessibility, responsive behavior, and design system consistency before engineering begins. - [optimize](https://affpapa.org/en/nevibecode/skills/aladicf-optimize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 536 installs — A skill that tracks down why an interface feels slow: load time, janky animations, heavy images, bloated bundles. - [bolder](https://affpapa.org/en/nevibecode/skills/bolder.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 535 installs — A skill for when a design feels too safe and generic. - [video-color-grading](https://affpapa.org/en/nevibecode/skills/video-color-grading.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 625 installs — Applies color grading and exposure fixes to video URLs through the each::sense API based on natural language prompts. - [framer-motion-scroll](https://affpapa.org/en/nevibecode/skills/framer-motion-scroll.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 803 installs — A Framer Motion skill that tells your agent how to build scroll-linked animations, parallax and progress indicators. - [delight](https://affpapa.org/en/nevibecode/skills/delight.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 523 installs — Adds joy and personality to interfaces: success states, empty screens, loading moments, hover details. - [mobile-design](https://affpapa.org/en/nevibecode/skills/manutej-mobile-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 545 installs — A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens. - [showcase](https://affpapa.org/en/nevibecode/skills/showcase.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 521 installs — Guides the agent to build technically ambitious web interfaces with View Transitions and WebGL rendering. - [k2f-invitation](https://affpapa.org/en/nevibecode/skills/k2f-invitation.md) — skill · suzheng · Claude Code, Codex, Cursor +3 · 2400 installs — Builds print or digital invitations from event details and tone notes. - [k2f-flyer](https://affpapa.org/en/nevibecode/skills/k2f-flyer.md) — skill · suzheng · Claude Code, Codex, Cursor +3 · 2400 installs — Drafts single-page promotional flyer blueprints with clear visual intent, tight word budgets, and a single call to action for the K2F engine. - [figma-design](https://affpapa.org/en/nevibecode/skills/figma-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 542 installs — A Figma skill covering components, auto layout, variables, prototyping and plugin development. - [extract](https://affpapa.org/en/nevibecode/skills/aladicf-extract.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 520 installs — Finds duplicated UI patterns, extracts them into shared components, sets up design tokens, and refactors existing calls. - [ai-elements](https://affpapa.org/en/nevibecode/skills/ai-elements.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 7 installs — This skill guides React AI interfaces built with ai-elements and shadcn/ui. - [quieter](https://affpapa.org/en/nevibecode/skills/quieter.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 513 installs — A coding-agent skill that cuts saturation, contrast and visual noise in a UI while keeping hierarchy and character. - [onboard](https://affpapa.org/en/nevibecode/skills/aladicf-onboard.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 521 installs — Designs a product's first run: what a new user sees, in what order, and how they reach their first win. - [security-ux](https://affpapa.org/en/nevibecode/skills/security-ux.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 519 installs — A skill for designing sign-in, MFA and account recovery screens so that security feels like control, not punishment. - [interaction-patterns-components](https://affpapa.org/en/nevibecode/skills/interaction-patterns-components.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 539 installs — Guides the agent through picking and critiquing UI interaction patterns and reusable components: navigation, tables, modals, forms, states. - [muapi-media-generation](https://affpapa.org/en/nevibecode/skills/muapi-media-generation.md) — skill · SamurAIGPT · Claude Code, Codex, Cursor +3 · 1100 installs — Produces generative images, video clips, and audio via muapi.ai right from the terminal. - [framer-motion-layout](https://affpapa.org/en/nevibecode/skills/framer-motion-layout.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 770 installs — Provides layout animation patterns for Framer Motion, covering shared element transitions with layoutId, reorderable lists, and exit sequences via AnimatePresence. - [forms-inputs-checkout](https://affpapa.org/en/nevibecode/skills/forms-inputs-checkout.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 524 installs — A skill for designing, critiquing and implementing forms, validation and checkout flows without breaking accessibility. - [framer-motion-gestures](https://affpapa.org/en/nevibecode/skills/framer-motion-gestures.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 766 installs — A skill covering Framer Motion gesture animations: drag, pan, tap, hover and focus. - [localize](https://affpapa.org/en/nevibecode/skills/aladicf-localize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 497 installs — Guides i18n architecture across UI layouts, ICU string formatting, RTL styles, and locale routing for multilingual web apps. - [architecture-rendering](https://affpapa.org/en/nevibecode/skills/architecture-rendering.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 590 installs — Creates architectural visuals from text, sketches, and floor plans through each::sense AI. - [framer-motion-variants](https://affpapa.org/en/nevibecode/skills/framer-motion-variants.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 759 installs — Teaches coding agents to coordinate Framer Motion animations using variants, staggered lists, and custom state machines. - [responsive-design](https://affpapa.org/en/nevibecode/skills/manutej-responsive-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 511 installs — Guides coding agents in mobile-first responsive layout work using CSS Grid, Flexbox, and fluid sizing. - [generative-illustration](https://affpapa.org/en/nevibecode/skills/generative-illustration.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 544 installs — Guides coding agents to build motion graphics from isolated AI vector assets and render deterministic Canvas animations to MP4. - [k2f-company-deck](https://affpapa.org/en/nevibecode/skills/k2f-company-deck.md) — skill · suzheng · Claude Code, Codex, Cursor +3 · 2200 installs — Turns company facts and brand inputs into an overview deck with positioning, proof and a contact slide. - [claude-skill-app-onboarding-questionnaire](https://affpapa.org/en/nevibecode/skills/claude-skill-app-onboarding-questionnaire.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 582 installs — Reads your app codebase and generates a questionnaire-style onboarding flow: copy, screen designs and working code in your framework. - [gsap-scrolltrigger](https://affpapa.org/en/nevibecode/skills/bbeierle12-gsap-scrolltrigger.md) — skill · Bbeierle12 · Claude Code, Codex, Cursor +3 · 604 installs — A skill for GSAP ScrollTrigger: tie animations to scroll position, pin sections, build parallax and snap points. - [muapi-media-editing](https://affpapa.org/en/nevibecode/skills/muapi-media-editing.md) — skill · SamurAIGPT · Claude Code, Codex, Cursor +3 · 1000 installs — This skill edits images and videos through muapi.ai, covering prompt-driven changes, upscaling, background removal, lip sync, and video effects. - [geist](https://affpapa.org/en/nevibecode/skills/geist.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 6 installs — This skill guides you through adding Geist Sans, Geist Mono, and Geist Pixel to a Next.js project. - [url-to-code](https://affpapa.org/en/nevibecode/skills/url-to-code.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 6 installs — Turns a live website into a working frontend app: captures elements, styles, interactions and assets via browser. - [get-context](https://affpapa.org/en/nevibecode/skills/get-context.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 6 installs — A design-brief gate for Codex. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=47 ## 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