# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 36 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=36 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [frontend-designer](https://affpapa.org/en/nevibecode/skills/frontend-designer.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 335 installs — A skill that guides your agent through accessible, responsive component work: design tokens, modern CSS, patterns for React, Vue and Svelte. - [web-design-expert](https://affpapa.org/en/nevibecode/skills/web-design-expert.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 439 installs — Builds web layouts, visual brand identity, and OKLCH color palettes. - [tailwind-v4](https://affpapa.org/en/nevibecode/skills/tailwind-v4.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 812 installs — A skill that tells your coding agent how to set up Tailwind CSS v4: theme in CSS, design tokens, OKLCH colors and dark mode. - [color-theory-palette-harmony-expert](https://affpapa.org/en/nevibecode/skills/color-theory-palette-harmony-expert.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 430 installs — A skill for building color palettes and photo sequences: perceptual LAB and OKLCH spaces, earth-mover distance, warm and cool alternation. - [figma-code-connect](https://affpapa.org/en/nevibecode/skills/figma-code-connect.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 28 installs — Creates and updates Code Connect templates that tie Figma components to code snippets. - [motion-designer](https://affpapa.org/en/nevibecode/skills/motion-designer.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1600 installs — A skill that turns your coding agent into a motion designer: timing specs, easing curves and handoff notes for UI animation. - [app-store-screens](https://affpapa.org/en/nevibecode/skills/app-store-screens.md) — skill · Pika-Labs · Claude Code, Codex, Cursor +3 · 1700 installs — Creates a set of 5 to 6 App Store screenshots at 1290×2796 resolution from brand specs and app screens. - [build-a-brand](https://affpapa.org/en/nevibecode/skills/build-a-brand.md) — skill · Pika-Labs · Claude Code, Codex, Cursor +3 · 1700 installs — Builds a practical brand identity or a 14-16-page PDF guidelines deck from an idea, website URL, reference brands, or product photos. - [site-specification](https://affpapa.org/en/nevibecode/skills/site-specification.md) — skill · cline · Claude Code, Codex, Cursor +3 · 2100 installs — Turns brief website ideas or brand images into a JSON design specification with layout requirements, target audience, and Google Fonts. - [ui-design](https://affpapa.org/en/nevibecode/skills/mindrally-ui-design.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 981 installs — Gives the agent a checklist for interfaces: accessibility, responsive layout, performance. - [shadcn](https://affpapa.org/en/nevibecode/skills/pproenca-shadcn.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 724 installs — A skill with 58 shadcn/ui rules that tells your agent how to add components, build forms and keep accessibility intact. - [chrome-extension-ui](https://affpapa.org/en/nevibecode/skills/chrome-extension-ui.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 719 installs — A rule set for Chrome extension interfaces: when to use a popup versus a side panel, how to keep navigation keyboard-accessible, how to handle loading and errors. - [image-optimization](https://affpapa.org/en/nevibecode/skills/aj-geddes-image-optimization.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 656 installs — A skill that walks your agent through compressing images and picking modern formats. - [diagram-to-image](https://affpapa.org/en/nevibecode/skills/diagram-to-image.md) — skill · sugarforever · Claude Code, Codex, Cursor +3 · 508 installs — Converts Mermaid charts and Markdown tables into PNG images. - [brand-designer](https://affpapa.org/en/nevibecode/skills/brand-designer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 1300 installs — Walks you through building a brand identity: logo concepts, color palette, typography and guidelines. - [ux-audit-rethink](https://affpapa.org/en/nevibecode/skills/ux-audit-rethink.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 843 installs — Runs a full UX audit of a product using the IxDF framework and proposes redesign options. - [typography-expert](https://affpapa.org/en/nevibecode/skills/typography-expert.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 413 installs — Curates typeface pairings, fluid clamp scales, and variable font axes while retiring overused defaults like Inter, Roboto, and Montserrat. - [xiaohongshu-images](https://affpapa.org/en/nevibecode/skills/xiaohongshu-images.md) — skill · iamzifei · Claude Code, Codex, Cursor +3 · 2000 installs — Turns Markdown, HTML, or text into a styled page and a sequence of 3:4 images for Xiaohongshu. - [layout-paradigms-and-consistency](https://affpapa.org/en/nevibecode/skills/layout-paradigms-and-consistency.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 734 installs — Selects screen paradigms like feeds, boards, tables, and split views to maintain layout consistency across app pages and marketing funnels. - [information-architecture](https://affpapa.org/en/nevibecode/skills/aj-geddes-information-architecture.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 634 installs — Structures content, sitemaps, and taxonomies for web apps and documentation hubs. - [poster-design-generation](https://affpapa.org/en/nevibecode/skills/poster-design-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 2100 installs — This skill turns a text brief into poster artwork through each::sense: movie key art, concert flyers, product and travel visuals. - [canva-branded-presentation](https://affpapa.org/en/nevibecode/skills/canva-branded-presentation.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · 26 installs — Creates on-brand Canva presentation decks from briefs, raw outlines, or design links. - [data-visualization](https://affpapa.org/en/nevibecode/skills/data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 26 installs — This skill routes web visualization tasks, from chart selection to maps, software diagrams, and exports. - [color-accessibility](https://affpapa.org/en/nevibecode/skills/color-accessibility.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 619 installs — Guides accessible palette design under WCAG AA and AAA standards, including support for color blindness. - [web-design-guidelines](https://affpapa.org/en/nevibecode/skills/agent-skills-web-design-guidelines.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 896 installs — This skill checks web interfaces against accessibility and UX rules. - [sync-figma-token](https://affpapa.org/en/nevibecode/skills/sync-figma-token.md) — skill · firebenders · Claude Code, Codex, Cursor +3 · 676 installs — This skill diffs design tokens in code against Figma variables, reports drift, and applies changes only after you approve them. - [contour-to-mesh](https://affpapa.org/en/nevibecode/skills/contour-to-mesh.md) — skill · RobLe3 · Claude Code, Codex, Cursor +3 · 788 installs — Builds a Blender mesh straight from a contour or mask instead of approximate primitives. - [user-research-analysis](https://affpapa.org/en/nevibecode/skills/user-research-analysis.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 612 installs — A skill that turns interview transcripts and survey answers into themes, pain points and quotes you can act on. - [agency-agents-ai-specialists](https://affpapa.org/en/nevibecode/skills/agency-agents-ai-specialists.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 2100 installs — Swap in a specialist persona — frontend, backend, reviewer, UX — and let it carry the task with its own workflow. - [gsap](https://affpapa.org/en/nevibecode/skills/martinholovsky-gsap.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that teaches the agent GSAP animations: HUD panel entrances, status indicator transitions, scroll effects. - [landing-page-design](https://affpapa.org/en/nevibecode/skills/omer-metin-landing-page-design.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 447 installs — A skill that turns your agent into a landing page specialist, with reference files for building, diagnosing and validating pages. - [design-systems](https://affpapa.org/en/nevibecode/skills/design-systems.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 903 installs — Walks your agent through design tokens, a component library and accessibility rules in one project. - [canva-translate-design](https://affpapa.org/en/nevibecode/skills/canva-translate-design.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · 25 installs — Translates every text element in a Canva design and creates a separate copy. - [lower-thirds](https://affpapa.org/en/nevibecode/skills/lower-thirds.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1700 installs — Builds an animated name-and-role caption in the bottom band of the frame: it enters, holds long enough to read, and exits. - [21st-ui-build](https://affpapa.org/en/nevibecode/skills/21st-ui-build.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 installs — A skill for implementing pages and components in an existing web project: it reads your design context and tokens first, then searches 21st. - [modal-and-overlay-patterns](https://affpapa.org/en/nevibecode/skills/modal-and-overlay-patterns.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 686 installs — Rules for selecting and building overlays, from tooltips and drawers to blocking modals, using a unified shell and strict ARIA requirements. - [operational-expert-tool-ui](https://affpapa.org/en/nevibecode/skills/operational-expert-tool-ui.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 689 installs — Sets interface rules for dispatch, warehouse and logistics tools: data density over breathing room, status visible at a glance. - [prototype](https://affpapa.org/en/nevibecode/skills/adobe-prototype.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 524 installs — Renders a proposed page redesign into one self-contained static HTML file you can open in a browser and iterate on from chat. - [present](https://affpapa.org/en/nevibecode/skills/present.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 398 installs — Builds decks for design reviews, research readouts and pitches: an interview and an approved story outline first, then the slides. - [micro-interactions](https://affpapa.org/en/nevibecode/skills/micro-interactions.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that tells your coding agent how to animate buttons, toggles, checkboxes, loading indicators and notification badges. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=37 ## 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