# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 35 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=35 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [visual-emphasis-and-hierarchy](https://affpapa.org/en/nevibecode/skills/visual-emphasis-and-hierarchy.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 874 installs — Enforces visual hierarchy rules in UI: button priorities, contrast, whitespace, and text emphasis. - [wcag-accessibility](https://affpapa.org/en/nevibecode/skills/wcag-accessibility.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 873 installs — This skill guides interface work against WCAG 2.2 AA, from contrast and keyboard access to form labels. - [button-states](https://affpapa.org/en/nevibecode/skills/button-states.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 877 installs — A skill that defines six states for interactive elements and derives hover and active colours from the base colour in HSL. - [core-animation](https://affpapa.org/en/nevibecode/skills/core-animation.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 400 installs — This skill helps an agent find QuartzCore documentation for layer properties, animations, and related APIs. - [hig-project-context](https://affpapa.org/en/nevibecode/skills/hig-project-context.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 628 installs — Writes one shared document about your Apple project so the other HIG skills stop asking the same setup questions. - [hig-components-system](https://affpapa.org/en/nevibecode/skills/hig-components-system.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 625 installs — Adds Apple HIG guidelines for widgets, Live Activities, complications, and alerts. - [component-family-consistency](https://affpapa.org/en/nevibecode/skills/component-family-consistency.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 874 installs — Keeps buttons, inputs, badges and pills on the same radius, colour logic, shadow, border and spacing. - [loading-states-and-perceived-performance](https://affpapa.org/en/nevibecode/skills/loading-states-and-perceived-performance.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 871 installs — A coding-agent skill that picks the right spinner, skeleton or progress bar and makes a slow interface feel faster. - [generate-ui-from-brand](https://affpapa.org/en/nevibecode/skills/generate-ui-from-brand.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 870 installs — Turns a site URL or a DESIGN.md file into design tokens, UX decisions and a UI spec you can paste into a project. - [micro-interactions](https://affpapa.org/en/nevibecode/skills/dembrandt-micro-interactions.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 869 installs — A skill for small purposeful animations: toggles, animated icons, success moments. - [databricks-app-design](https://affpapa.org/en/nevibecode/skills/databricks-app-design.md) — skill · databricks · Claude Code, Codex, Cursor +3 · 315 installs — Design data screens for custom Databricks Apps built with AppKit/React. - [hig-technologies](https://affpapa.org/en/nevibecode/skills/hig-technologies.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 620 installs — A skill that feeds your agent Apple HIG rules for Siri, Apple Pay, HealthKit, ARKit, iCloud and other system technologies. - [ui-design](https://affpapa.org/en/nevibecode/skills/pymodel-ui-design.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 513 installs — Frontend design guidelines covering 42 rules across 8 categories. - [color-palette-extractor](https://affpapa.org/en/nevibecode/skills/color-palette-extractor.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 609 installs — Pulls dominant colors out of an image, screenshot or website and turns them into a palette with contrast checks. - [ux-design](https://affpapa.org/en/nevibecode/skills/ux-design.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that hands your coding agent a set of UX rules, from user research to accessibility and responsive layout. - [lottie](https://affpapa.org/en/nevibecode/skills/lottie.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that steers your coding agent through Lottie work: dotLottie files, lazy loading, renderer choice and reduced-motion fallbacks. - [status-colors-and-errors](https://affpapa.org/en/nevibecode/skills/status-colors-and-errors.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 859 installs — A skill that sets rules for semantic status colours and error copy: how many colours to keep, what each one means, and how to write a message with a way forward. - [elevation-and-depth](https://affpapa.org/en/nevibecode/skills/elevation-and-depth.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 854 installs — Defines rules for shadows, border radius, and surface layering in CSS. - [extract-design](https://affpapa.org/en/nevibecode/skills/dembrandt-extract-design.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 853 installs — Extract colors, type, spacing, and component styles from a live website. - [sticky-and-fixed-elements](https://affpapa.org/en/nevibecode/skills/sticky-and-fixed-elements.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 855 installs — Decides what stays on screen while the user scrolls: sticky headers, bottom toolbars, floating action buttons, pinned table headers. - [data-display-and-selection](https://affpapa.org/en/nevibecode/skills/data-display-and-selection.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 855 installs — Guides the agent through data collections: view modes, row selection, mass actions, sorting, filters and search patterns. - [notifications-and-recovery](https://affpapa.org/en/nevibecode/skills/notifications-and-recovery.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 854 installs — A skill for designing notifications and error states: toasts, inline errors, banners and recovery paths. - [tui-design](https://affpapa.org/en/nevibecode/skills/tui-design.md) — skill · hyperb1iss · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for designing terminal interfaces: panel layouts, color schemes, keyboard navigation and async state. - [scroll-areas](https://affpapa.org/en/nevibecode/skills/scroll-areas.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 843 installs — Teaches coding agents to avoid inner scroll containers and restricts unavoidable scroll areas to a single axis in UI layouts. - [ui-context-and-scope](https://affpapa.org/en/nevibecode/skills/ui-context-and-scope.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 842 installs — Defines rules for user orientation in deep navigation layouts: breadcrumbs, visual section borders, and persistent impersonation banners. - [iphone-duo-dual-pane-patterns](https://affpapa.org/en/nevibecode/skills/iphone-duo-dual-pane-patterns.md) — skill · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 393 installs — Guides two-pane UI development for iPhone Duo, covering panel dimensions and hinge callbacks. - [real-world-metaphors](https://affpapa.org/en/nevibecode/skills/real-world-metaphors.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 841 installs — Helps you pick between a card, carousel, drawer and accordion when designing components and navigation. - [21st-design-sync](https://affpapa.org/en/nevibecode/skills/21st-design-sync.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1700 installs — Extracts shadcn and Tailwind CSS tokens from your project and publishes them as a public theme on 21st.dev using the 21st CLI. - [global-toolbar-controls](https://affpapa.org/en/nevibecode/skills/global-toolbar-controls.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 834 installs — Guides the layout and styling of language, currency, and unit selectors. - [webflow-mcp:designer-tools](https://affpapa.org/en/nevibecode/skills/webflow-mcpdesigner-tools.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 841 installs — Use this skill to create and edit Webflow pages, elements, styles, and components through MCP. - [figma-design-to-code](https://affpapa.org/en/nevibecode/skills/figma-design-to-code.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 30 installs — Guides an agent through implementing a Figma node in a project’s existing stack. - [framer-motion](https://affpapa.org/en/nevibecode/skills/dylantarre-framer-motion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1700 installs — This skill guides the agent in implementing Disney's 12 animation principles with Framer Motion in React. - [stock-photo-finder](https://affpapa.org/en/nevibecode/skills/stock-photo-finder.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 582 installs — A skill for searching multiple free stock photo sites at once with license, orientation, and palette filters. - [dembrandt](https://affpapa.org/en/nevibecode/skills/dembrandt.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 822 installs — Runs a UI/UX task through six ordered stages: brand, tokens, layout, components, polish, accessibility. - [premium-frontend-design](https://affpapa.org/en/nevibecode/skills/premium-frontend-design.md) — skill · kv0906 · Claude Code, Codex, Cursor +3 · 1400 installs — Guides coding assistants to build distinctive, motion-driven frontend interfaces. - [font-pairing-suggester](https://affpapa.org/en/nevibecode/skills/font-pairing-suggester.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 578 installs — Suggests font combinations for a given use case and shows heading hierarchy with examples. - [pixel-art](https://affpapa.org/en/nevibecode/skills/omer-metin-pixel-art.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 520 installs — This skill gives your agent working knowledge of pixel art: limited palettes, dithering, subpixel animation, tiles and retro hardware limits. - [webflow-mcp:flowkit-naming](https://affpapa.org/en/nevibecode/skills/webflow-mcpflowkit-naming.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 824 installs — Brings CSS class names in Webflow in line with the Flowkit system: audits what exists, generates new names, applies them through MCP tools. - [presentation-design-enhancer](https://affpapa.org/en/nevibecode/skills/presentation-design-enhancer.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 573 installs — Turns text-heavy slides into visual storytelling, suggesting layout changes, icons and ways to show data. - [dashboards-and-real-time-visualization](https://affpapa.org/en/nevibecode/skills/dashboards-and-real-time-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 29 installs — Designs dashboards and live data visualization systems. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=36 ## 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