# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 37 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=37 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [tailwind](https://affpapa.org/en/nevibecode/skills/pymodel-tailwind.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 512 installs — A skill with 42 rules for Tailwind CSS v4: build setup, CSS generation, bundle size, theming. - [level-design](https://affpapa.org/en/nevibecode/skills/pluginagentmarketplace-level-design.md) — skill · pluginagentmarketplace · Claude Code, Codex, Cursor +3 · 563 installs — Walks through level structure, pacing, difficulty curve and storytelling through environment. - [blender](https://affpapa.org/en/nevibecode/skills/monumentalsystems-blender.md) — skill · MonumentalSystems · Claude Code, Codex, Cursor +3 · 531 installs — Quick reference for Blender workflows, shortcuts, rigging setups, and 3D export pipelines into Unity and Unreal Engine. - [repeated-component-alignment](https://affpapa.org/en/nevibecode/skills/repeated-component-alignment.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 678 installs — A coding-agent skill that keeps cards, list rows and tiles aligned when text lengths differ. - [ui-ux-pro-max-skill](https://affpapa.org/en/nevibecode/skills/ui-ux-pro-max-skill.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 2000 installs — Describe a product to get a proposed page structure, visual style, palette, and font pairing. - [tab-navigation](https://affpapa.org/en/nevibecode/skills/tab-navigation.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 674 installs — A skill for designing tabs: when they fit, how the strip and panel are built, and how keyboard navigation should behave. - [uml-and-software-architecture-visualization](https://affpapa.org/en/nevibecode/skills/uml-and-software-architecture-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 24 installs — This skill helps choose a notation and format for UML diagrams, architecture maps, workflows, and data models. - [social-media-image-sizes](https://affpapa.org/en/nevibecode/skills/social-media-image-sizes.md) — skill · Branding5 · Claude Code, Codex, Cursor +3 · 1800 installs — Validates image dimensions against rules for 9 social platforms and exports resized copies. - [voice-audio-engineer](https://affpapa.org/en/nevibecode/skills/voice-audio-engineer.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 367 installs — A skill that wires ElevenLabs into your agent for TTS, voice cloning, podcast production, transcription and voice UI work. - [awwwards-ui-skills](https://affpapa.org/en/nevibecode/skills/awwwards-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 560 installs — Enforces Awwwards-style UI constraints for AI agents using light mode, Inter typography, and a 4px spacing grid. - [coordinated-data-views](https://affpapa.org/en/nevibecode/skills/coordinated-data-views.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 668 installs — A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways. - [authentic-product-representation](https://affpapa.org/en/nevibecode/skills/authentic-product-representation.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 662 installs — Enforces truthful product visuals on landing pages and hero sections using real data instead of lorem ipsum. - [domain-expert-configuration](https://affpapa.org/en/nevibecode/skills/domain-expert-configuration.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 660 installs — Guides coding agents to build settings panels, solver controls, and constraint editors tailored for non-developer domain experts. - [nielsen-heuristics-audit](https://affpapa.org/en/nevibecode/skills/nielsen-heuristics-audit.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 739 installs — This skill walks an interface through Jakob Nielsen's 10 usability heuristics and returns a report with a severity rating for every finding. - [ui-audit](https://affpapa.org/en/nevibecode/skills/ui-audit.md) — skill · Tommy Geoco · Claude Code, Codex, Cursor +3 · 542 installs — Evaluates user interfaces against core UX guidelines from Making UX Decisions. - [extract](https://affpapa.org/en/nevibecode/skills/adobe-extract.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 496 installs — Crawls an existing website to extract its design tokens, palette, typography, and UI assets into stardust/current/. - [responsive-design](https://affpapa.org/en/nevibecode/skills/mindrally-responsive-design.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 830 installs — A skill that hands your coding agent a set of responsive design rules: mobile-first CSS, flexible layouts, media queries, adaptive images and type. - [orbital-hud-motion](https://affpapa.org/en/nevibecode/skills/orbital-hud-motion.md) — skill · RobLe3 · Claude Code, Codex, Cursor +3 · 714 installs — A skill that teaches an AI agent to build circular HUD and aura animations around a Blender subject from a reference, not from guesswork. - [direct](https://affpapa.org/en/nevibecode/skills/direct.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 488 installs — Translates freeform redesign intent into target specifications for an existing website. - [21st-ui-review](https://affpapa.org/en/nevibecode/skills/21st-ui-review.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1300 installs — Reviews existing UI for accessibility, responsive behavior and drift from the project's design system. - [21st-ui-explore](https://affpapa.org/en/nevibecode/skills/21st-ui-explore.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 installs — This skill sketches several genuinely different UI directions from your project's design system plus 21st references. - [prepare-migration](https://affpapa.org/en/nevibecode/skills/prepare-migration.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 487 installs — Orchestrates full-site redesign migration prep: crawls pages, confirms module catalogs, and builds design canon before running the migration. - [motion](https://affpapa.org/en/nevibecode/skills/mindrally-motion.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 812 installs — Guides coding agents to build hardware-accelerated animations using the Motion library in vanilla JavaScript and TypeScript. - [sound-engineer](https://affpapa.org/en/nevibecode/skills/sound-engineer.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 348 installs — Gives the agent working knowledge of spatial audio, procedural sound effects and UI sound for games and apps. - [Web Design Builder](https://affpapa.org/en/nevibecode/skills/web-design-builder.md) — skill · rknall · Claude Code, Codex, Cursor +3 · 416 installs — Turns a spec or a plain description into HTML5/CSS/JS, then checks accessibility and behaviour through Playwright MCP. - [web-motion-design](https://affpapa.org/en/nevibecode/skills/web-motion-design.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that tells your agent how to build CSS animations, JS transitions and React or Vue motion using Disney's 12 animation principles. - [character-design](https://affpapa.org/en/nevibecode/skills/omer-metin-character-design.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 400 installs — A skill that turns your coding agent into a character designer: silhouette, shape language, color and proportions. - [design-system-creation](https://affpapa.org/en/nevibecode/skills/design-system-creation.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 537 installs — A skill that lays out a design system: tokens, components, docs and governance. - [distinctive-frontend](https://affpapa.org/en/nevibecode/skills/distinctive-frontend.md) — skill · podo · Claude Code, Codex, Cursor +3 · 588 installs — Generates web interfaces with bold visual identity, replacing generic AI palettes and fonts with distinct themes like Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism. - [graphic-design](https://affpapa.org/en/nevibecode/skills/graphic-design.md) — skill · travisjneuman · Claude Code, Codex, Cursor +3 · 492 installs — A skill that hands your coding agent a graphic design reference: color, typography, grids, file formats. - [visualization-strategy-and-critique](https://affpapa.org/en/nevibecode/skills/visualization-strategy-and-critique.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 22 installs — Selects chart formats, designs dashboard layouts, and critiques data visualizations. - [map-animation](https://affpapa.org/en/nevibecode/skills/map-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 763 installs — A skill for Vox-style animated maps: the camera flies over a base map while pins drop, routes draw on and regions highlight. - [apple-ui-skills](https://affpapa.org/en/nevibecode/skills/apple-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 509 installs — Hands the agent a fixed set of Apple-style UI rules: light surfaces, Inter, a 4px grid. - [frontend-tailwind-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-tailwind-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 464 installs — Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. - [gsap](https://affpapa.org/en/nevibecode/skills/mindrally-gsap.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 769 installs — Tells your agent how to write GSAP animations: transforms over left/top, stagger, timelines, ScrollTrigger. - [figma-designer](https://affpapa.org/en/nevibecode/skills/figma-designer.md) — skill · zhaono1 · Claude Code, Codex, Cursor +3 · 807 installs — Turns a Figma file into design tokens, component specs and interaction states you can hand to planning or development. - [google-slides](https://affpapa.org/en/nevibecode/skills/google-slides.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 21 installs — Extracts design systems from existing Google Slides decks to build slides matching a reference template. - [figma-use-slides](https://affpapa.org/en/nevibecode/skills/figma-use-slides.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 21 installs — This skill guides agents using Figma's use_figma MCP tool within Figma Slides. - [msw-ui-kit](https://affpapa.org/en/nevibecode/skills/msw-ui-kit.md) — skill · MSW-Git · Claude Code, Codex, Cursor +3 · 1200 installs — This skill picks ready RUID palettes and interaction widgets from official MSWPackages so a game interface stays visually consistent. - [search](https://affpapa.org/en/nevibecode/skills/mobbin-search.md) — skill · mobbin · Claude Code, Codex, Cursor +3 · 342 installs — Tunes queries for Mobbin UI tools. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=38 ## 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