# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 34 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=34 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [webflow-cli:designer-extension](https://affpapa.org/en/nevibecode/skills/webflow-clidesigner-extension.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks the agent through the whole Designer Extension loop in Webflow: pick a template, init the project, serve it locally, bundle it for upload. - [webflow-cli:code-component](https://affpapa.org/en/nevibecode/skills/webflow-clicode-component.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 1000 installs — Configures React projects and deploys custom React components to Webflow Designer using Webflow CLI. - [webflow-cli:devlink](https://affpapa.org/en/nevibecode/skills/webflow-clidevlink.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 998 installs — Pulls Webflow Designer components into React and Next.js code, syncs later design edits, and shows what changed after each sync. - [21st-ai](https://affpapa.org/en/nevibecode/skills/21st-ai.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that runs the 21st AI loop from the terminal: sketch UI variants from a prompt, preview them in the browser, edit one in place, grab its code. - [ui-design-review](https://affpapa.org/en/nevibecode/skills/ui-design-review.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 1100 installs — Scores an interface across ten design dimensions: typography, color, spacing, hierarchy, consistency. - [nielsen-usability-heuristics](https://affpapa.org/en/nevibecode/skills/nielsen-usability-heuristics.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 976 installs — Audits UI components and interaction flows using Nielsen's usability heuristics. - [hig-components-layout](https://affpapa.org/en/nevibecode/skills/hig-components-layout.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 684 installs — Guides app navigation and layout architecture across Apple platforms based on the Human Interface Guidelines. - [hig-patterns](https://affpapa.org/en/nevibecode/skills/hig-patterns.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 685 installs — A skill with interaction patterns from Apple's Human Interface Guidelines: onboarding, loading, modality, notifications, search. - [appbuilder-ui-scaffolder](https://affpapa.org/en/nevibecode/skills/appbuilder-ui-scaffolder.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 716 installs — Generates React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM extensions. - [motion](https://affpapa.org/en/nevibecode/skills/motion.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that feeds your agent the Motion (Framer Motion) docs for React: drag-and-drop, scroll effects, layout transitions. - [bootstrap](https://affpapa.org/en/nevibecode/skills/mindrally-bootstrap.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — Tells the agent how to build interfaces with Bootstrap: grid, components, utilities, form validation. - [css](https://affpapa.org/en/nevibecode/skills/css.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — This skill hands the agent a set of CSS rules: Flexbox, Grid, custom properties, BEM and specificity control. - [hig-platforms](https://affpapa.org/en/nevibecode/skills/hig-platforms.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 666 installs — Provides Apple Human Interface Guidelines for multi-platform design across iOS, iPadOS, macOS, tvOS, visionOS, and watchOS. - [Skywork Design](https://affpapa.org/en/nevibecode/skills/skywork-design.md) — skill · SkyworkAI · Claude Code, Codex, Cursor +3 · 350 installs — Generates and edits images through the Skywork Image API: posters, logos, infographics, retouching. - [color-mode-and-theme](https://affpapa.org/en/nevibecode/skills/color-mode-and-theme.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 926 installs — Guides decisions on light versus dark modes, UI theme toggles, and design tokens without contrast pitfalls. - [ui-density](https://affpapa.org/en/nevibecode/skills/ui-density.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 915 installs — Matches information density to screen size and user expertise. - [hig-components-controls](https://affpapa.org/en/nevibecode/skills/hig-components-controls.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 655 installs — Applies Apple HIG principles to pickers, toggles, text fields, and inputs. - [form-design](https://affpapa.org/en/nevibecode/skills/dembrandt-form-design.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 916 installs — A skill for designing forms: helper text, placeholders, validation timing and submit button state. - [figma-generate-design](https://affpapa.org/en/nevibecode/skills/figma-generate-design.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 33 installs — Builds or updates composed Figma screens using design system components and styles. - [mobile-ux-optimizer](https://affpapa.org/en/nevibecode/skills/mobile-ux-optimizer.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 498 installs — Optimizes web interfaces for touchscreens, fixes dynamic viewport issues with dvh, and aligns touch targets with mobile platform guidelines. - [brand-visual-language](https://affpapa.org/en/nevibecode/skills/brand-visual-language.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 907 installs — A skill that ties border radius, type and icon style to your brand's personality. - [hig-components-dialogs](https://affpapa.org/en/nevibecode/skills/hig-components-dialogs.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 647 installs — Provides Apple Human Interface Guidelines for alerts, sheets, popovers, and digit entry views. - [hig-components-menus](https://affpapa.org/en/nevibecode/skills/hig-components-menus.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 643 installs — Guides button and menu architecture across Apple platforms based on official Human Interface Guidelines. - [hig-components-content](https://affpapa.org/en/nevibecode/skills/hig-components-content.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 641 installs — Provides Apple Human Interface Guidelines for content components like charts and collections. - [motion-and-storytelling](https://affpapa.org/en/nevibecode/skills/motion-and-storytelling.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 894 installs — A skill for designing transitions, scroll animations and onboarding motion. - [apple-ui-designer](https://affpapa.org/en/nevibecode/skills/apple-ui-designer.md) — skill · heyman333 · Claude Code, Codex, Cursor +3 · 865 installs — This skill directs AI agents to redesign mobile app screens according to Apple Human Interface Guidelines. - [hig-components-status](https://affpapa.org/en/nevibecode/skills/hig-components-status.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 636 installs — Provides Apple Human Interface Guidelines for progress indicators and status bars. - [fal-redesign](https://affpapa.org/en/nevibecode/skills/fal-redesign.md) — skill · fal-ai-community · Claude Code, Codex, Cursor +3 · 394 installs — Redesigns coded websites or generates greenfield landing pages using fal.ai, outputting a visual mock, Markdown build-spec, and design tokens. - [information-architecture](https://affpapa.org/en/nevibecode/skills/dembrandt-information-architecture.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 889 installs — Keeps a large app navigable: what to call each entity, how screens map to the data model, and when to ask before a destructive action. - [modular-scale-typography](https://affpapa.org/en/nevibecode/skills/modular-scale-typography.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 884 installs — Builds a ratio-based type scale where every font size links to a common base. - [figma-generate-library](https://affpapa.org/en/nevibecode/skills/figma-generate-library.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 32 installs — Skill to build a professional design system in Figma from your codebase. - [algorithmic-color-palette](https://affpapa.org/en/nevibecode/skills/algorithmic-color-palette.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 887 installs — Derives a full UI palette from one or two brand colours: state variants, brand-tinted greys, semantic colours. - [hig-components-search](https://affpapa.org/en/nevibecode/skills/hig-components-search.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 634 installs — Tells your agent how to design search, paging and breadcrumbs the Apple HIG way. - [gamification-loops](https://affpapa.org/en/nevibecode/skills/gamification-loops.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 567 installs — A skill for designing points, badges, streaks and leaderboards around motivation psychology. - [hig-inputs](https://affpapa.org/en/nevibecode/skills/hig-inputs.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 633 installs — A skill that feeds your agent Apple HIG guidance on input: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, focus. - [commercial](https://affpapa.org/en/nevibecode/skills/commercial.md) — skill · fal-ai-community · Claude Code, Codex, Cursor +3 · 391 installs — Coordinates commercial photo and video production via the genmedia CLI. - [user-flows-and-guided-paths](https://affpapa.org/en/nevibecode/skills/user-flows-and-guided-paths.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 879 installs — Guides the creation of multi-step wizards, checkout sequences, and onboarding journeys. - [design-system](https://affpapa.org/en/nevibecode/skills/design-system.md) — skill · Alireza Rezvani · Claude Code · 33 installs — Captures brand identity via a 10-question wizard and validates WCAG 2.2 AA contrast. - [responsive-paradigms](https://affpapa.org/en/nevibecode/skills/responsive-paradigms.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 875 installs — Sets responsive design guidelines for AI coding agents, treating mobile, tablet, and desktop as distinct interaction paradigms rather than a single scaled layout. - [gestalt-ui-organisation](https://affpapa.org/en/nevibecode/skills/gestalt-ui-organisation.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 879 installs — A skill that lays out controls by Gestalt principles so users see what belongs together without reading labels. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=35 ## 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