# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 32 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=32 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [scenario-inspiration](https://affpapa.org/en/nevibecode/skills/scenario-inspiration.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 429 installs — A skill for creative tasks with no direction yet: it gathers references, proposes concepts to pick between, and turns the pick into a moodboard. - [muse](https://affpapa.org/en/nevibecode/skills/muse.md) — skill · simota · Claude Code, Codex, Cursor +3 · 711 installs — A skill for design tokens: defines color, spacing, typography and shadows, then moves existing code onto semantic tokens. - [swiftui-design-principles](https://affpapa.org/en/nevibecode/skills/swiftui-design-principles.md) — skill · arjitj2 · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that hands your coding agent fixed rules for spacing, type and color in SwiftUI and WidgetKit, so the UI reads as a native app instead of generated markup. - [mapbox-cartography](https://affpapa.org/en/nevibecode/skills/mapbox-cartography.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2100 installs — A skill that feeds your agent cartographic rules: layer hierarchy, color palettes, typography and zoom strategy for Mapbox styles. - [openrouter-images](https://affpapa.org/en/nevibecode/skills/openrouter-images.md) — skill · OpenRouterTeam · Claude Code, Codex, Cursor +3 · 471 installs — This skill talks to OpenRouter's Image API to draw from a text prompt or rework an existing picture with instructions. - [kinetic-typography](https://affpapa.org/en/nevibecode/skills/kinetic-typography.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2200 installs — Generates expressive kinetic text animations, split-text reveals, and variable font effects in CSS, GSAP, Framer Motion, and Remotion. - [shadcn](https://affpapa.org/en/nevibecode/skills/pedronauck-shadcn.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 369 installs — Guides AI agents through shadcn/ui and Radix UI best practices. - [template-builder-ui](https://affpapa.org/en/nevibecode/skills/template-builder-ui.md) — skill · sentdm · Claude Code, Codex, Cursor +3 · 2900 installs — Helps design and audit tenant-facing Sent v3 template builders, preview interfaces, channel validation, and lifecycle states before submitting to providers. - [scenario-text-overlay](https://affpapa.org/en/nevibecode/skills/scenario-text-overlay.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 397 installs — Deterministically renders text cards and overlays to transparent PNGs for compositing on Scenario media. - [motion](https://affpapa.org/en/nevibecode/skills/motiondivision-motion.md) — skill · motiondivision · Claude Code, Codex, Cursor +3 · 717 installs — This skill guides Motion and CSS animation work, finds docs and examples, and helps inspect performance issues. - [tailwindcss-mobile-first](https://affpapa.org/en/nevibecode/skills/tailwindcss-mobile-first.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2100 installs — A skill that walks your coding agent through mobile-first responsive design with Tailwind CSS v4. - [scenario-gemini-image](https://affpapa.org/en/nevibecode/skills/scenario-gemini-image.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 392 installs — Guides image generation and natural-language edits with Google Gemini models on Scenario via MCP. - [blender-materials](https://affpapa.org/en/nevibecode/skills/blender-materials.md) — skill · RobLe3 · Claude Code, Codex, Cursor +3 · 1600 installs — Creates and assigns PBR materials in Blender through Principled BSDF: metals, glass, plastic, fabric, skin. - [minimalist](https://affpapa.org/en/nevibecode/skills/tasteskill-minimalist.md) — skill · tasteskill · Claude Code, Codex, Cursor +3 · 319 installs — A web design skill that generates section reference images, analyzes them, and only then writes the frontend. - [redesign](https://affpapa.org/en/nevibecode/skills/educlopez-redesign.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 469 installs — Redesigns web apps and sites without breaking existing SEO, brand colors, or conversion forms. - [scenario-formats](https://affpapa.org/en/nevibecode/skills/scenario-formats.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 394 installs — A decision ladder for shipping one approved master at many sizes and ratios through Scenario. - [scenario-video-editing](https://affpapa.org/en/nevibecode/skills/scenario-video-editing.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 383 installs — MCP skill for editing existing Scenario footage with tool models instead of new generations. - [ui-web](https://affpapa.org/en/nevibecode/skills/ui-web.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 393 installs — Design skill enforcing WCAG 2.1 AA accessibility, Tailwind CSS tokens, dark mode contrast, and glassmorphic UI patterns. - [wcag-accessibility-audit](https://affpapa.org/en/nevibecode/skills/wcag-accessibility-audit.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 1600 installs — Checks websites and web apps against WCAG 2.1 and 2.2, exposing accessibility barriers and reviewing A, AA, or AAA conformance. - [industrial-brutalist](https://affpapa.org/en/nevibecode/skills/industrial-brutalist.md) — skill · tasteskill · Claude Code, Codex, Cursor +3 · 311 installs — A skill for sites in industrial brutalism and tactical telemetry style. - [scenario-grok-imagine-image](https://affpapa.org/en/nevibecode/skills/scenario-grok-imagine-image.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 373 installs — Generates and edits images with Grok Imagine models on Scenario via MCP. - [scenario-ideogram](https://affpapa.org/en/nevibecode/skills/scenario-ideogram.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 381 installs — A skill for generating and editing images with Ideogram models on Scenario over MCP: in-image text, transparent PNGs, background removal. - [scenario-seedream](https://affpapa.org/en/nevibecode/skills/scenario-seedream.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 372 installs — Generates and edits images with ByteDance Seedream models on Scenario via MCP. - [quieter](https://affpapa.org/en/nevibecode/skills/educlopez-quieter.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 451 installs — An AI-coding skill that lowers visual noise in an interface: less motion, simpler layout, calmer color. - [writing-for-interfaces](https://affpapa.org/en/nevibecode/skills/writing-for-interfaces.md) — skill · andrewgleave · Claude Code, Codex, Cursor +3 · 1100 installs — Guides UI text drafting, error message rewrites, and button labels to keep interface copy aligned with product voice. - [imagencn](https://affpapa.org/en/nevibecode/skills/imagencn.md) — skill · Agents365-ai · Claude Code, Codex, Cursor +3 · 1700 installs — Generates images through DashScope, Ark, Hunyuan, FLUX, and OpenAI APIs. - [scenario-reve](https://affpapa.org/en/nevibecode/skills/scenario-reve.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 367 installs — Controls Scenario's Reve v2.1 and Reve Remix image models over MCP for prompt-only generation, instruction edits, and multi-image blending. - [scenario-mai-image](https://affpapa.org/en/nevibecode/skills/scenario-mai-image.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 375 installs — A skill for driving Microsoft MAI Image models on Scenario over MCP: text-to-image and instruction-based image edits. - [bolder](https://affpapa.org/en/nevibecode/skills/educlopez-bolder.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 445 installs — A skill that gives an interface more character: wider layout variance, more motion, one signature detail. - [scenario-luma-video](https://affpapa.org/en/nevibecode/skills/scenario-luma-video.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 366 installs — Generates and edits video using Luma Ray models on Scenario via MCP. - [graphic-content-creation](https://affpapa.org/en/nevibecode/skills/graphic-content-creation.md) — skill · vivy-yi · Claude Code, Codex, Cursor +3 · 316 installs — Structures multi-slide image carousels for Xiaohongshu. - [scenario-orbit-views](https://affpapa.org/en/nevibecode/skills/scenario-orbit-views.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 365 installs — Builds consistent multi-angle views and 360 turnarounds of a subject from a single image using Blender and Scenario MCP. - [game-studio](https://affpapa.org/en/nevibecode/skills/game-studio.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 50 installs — Helps choose a stack and plan a browser game from its core loop through playtesting. - [swiftui-animation](https://affpapa.org/en/nevibecode/skills/jamesrochabrun-swiftui-animation.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 567 installs — Guides AI coding agents through building SwiftUI spring animations and Metal shader effects on iOS and macOS. - [mermaid-diagrams](https://affpapa.org/en/nevibecode/skills/hoodini-mermaid-diagrams.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 407 installs — A skill that teaches your agent Mermaid syntax: flowcharts, sequence, class and ER diagrams, Gantt charts. - [visual](https://affpapa.org/en/nevibecode/skills/visual.md) — skill · nick-vels · Claude Code, Codex, Cursor +3 · 537 installs — Connects KIE API models via VelsVisual CLI to generate images and videos directly inside your coding agent. - [gpt-image-1-5](https://affpapa.org/en/nevibecode/skills/gpt-image-1-5.md) — skill · intellectronica · Claude Code, Codex, Cursor +3 · 615 installs — Generates and edits images using OpenAI's GPT Image 1.5 model. - [presentation-generator](https://affpapa.org/en/nevibecode/skills/presentation-generator.md) — skill · glebis · Claude Code, Codex, Cursor +3 · 320 installs — Builds neobrutalist presentations with Agency brand colors: interactive HTML, PNG slides and PDF. - [create-component](https://affpapa.org/en/nevibecode/skills/create-component.md) — skill · AEM Dev Agent · Claude Code, Codex, Cursor +3 · 1000 installs — Generates complete AEM components with HTL markup, Sling Models, dialogs, and tests. - [isometric-animation](https://affpapa.org/en/nevibecode/skills/isometric-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — A skill for isometric and 2.5D animation: stacked layers, extruded blocks, exploded diagrams and gentle camera drift. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=33 ## 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