# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 33 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=33 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [whiteboard-animation](https://affpapa.org/en/nevibecode/skills/whiteboard-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — Guides agents in generating VideoScribe-style whiteboard explainers with animated SVG strokes and a marker hand following the pen tip. - [diagram-animation](https://affpapa.org/en/nevibecode/skills/diagram-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1500 installs — A coding-agent skill that turns a static diagram or chart into a step-by-step reveal: nodes, edges, labels, growing bars. - [explainer-video](https://affpapa.org/en/nevibecode/skills/explainer-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1500 installs — Walks the agent through the full pipeline: script, storyboard, scene build, narration and caption sync. - [exporting-to-png](https://affpapa.org/en/nevibecode/skills/exporting-to-png.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 401 installs — Teaches the agent to render code snippets, Mermaid diagrams, terminal logs, and SVG files into PNG images via CLI utilities or headless browsers. - [godot-ui](https://affpapa.org/en/nevibecode/skills/godot-ui.md) — skill · Zate · Claude Code, Codex, Cursor +3 · 2700 installs — Gives the agent working knowledge of Godot Control nodes, themes and common screens. - [ui-design](https://affpapa.org/en/nevibecode/skills/ui-design.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 installs — Makes the agent output a design specification — palette, fonts, layout — before it writes any interface code. - [frontend-design-review](https://affpapa.org/en/nevibecode/skills/frontend-design-review.md) — skill · microsoft · Claude Code, GitHub Copilot · 237 installs — This skill reviews and creates frontend interfaces with checks for design quality, accessibility, and design-system use. - [aceternity-ui](https://affpapa.org/en/nevibecode/skills/aceternity-ui.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 1500 installs — This skill gives your agent the Aceternity UI playbook: 100+ animated React components for Next.js with Tailwind. - [scenario-blender-previs-storyboard](https://affpapa.org/en/nevibecode/skills/scenario-blender-previs-storyboard.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 339 installs — Turns scripts into 3D previs, storyboards, and animatics in Blender. - [responsive-web-design](https://affpapa.org/en/nevibecode/skills/responsive-web-design.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that steers your coding agent toward mobile-first CSS with Flexbox, Grid and media queries. - [structured-artifact](https://affpapa.org/en/nevibecode/skills/structured-artifact.md) — skill · haowjy · Claude Code, Codex, Cursor +3 · 387 installs — A skill for building structured HTML artifacts: the agent decides how to present the content first, then picks the tools. - [generating-images](https://affpapa.org/en/nevibecode/skills/spencerpauly-generating-images.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 388 installs — This skill generates and edits images through the OpenAI Image API on gpt-image-2. - [iphone-duo-design-review](https://affpapa.org/en/nevibecode/skills/iphone-duo-design-review.md) — skill · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 584 installs — Reviews iOS interface designs for the foldable iPhone Duo across closed, open, book, tabletop, and tent poses. - [nextjs-shadcn](https://affpapa.org/en/nevibecode/skills/nextjs-shadcn.md) — skill · laguagu · Claude Code, Codex, Cursor +3 · 835 installs — A skill that steers the agent through building Next.js interfaces with shadcn/ui, picking typography, theme, backgrounds and motion for the product. - [roblox-game-design](https://affpapa.org/en/nevibecode/skills/roblox-game-design.md) — skill · TabooHarmony · Claude Code, Codex, Cursor +3 · 1300 installs — Designs core loops, invisible onboarding, game economies, and retention phases for Roblox experiences. - [markdown-html-orchestrator](https://affpapa.org/en/nevibecode/skills/markdown-html-orchestrator.md) — skill · Alireza Rezvani · Claude Code · 46 installs — Routes long Markdown documents, code reviews, and slide decks to the right converter, which writes a standalone HTML file. - [presentation-creator](https://affpapa.org/en/nevibecode/skills/mblode-presentation-creator.md) — skill · mblode · Claude Code, Codex, Cursor +3 · 881 installs — Builds slide decks with narrative structure, slide copy, and speaker notes from raw ideas or docs. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/mindrally-tailwindcss.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1500 installs — Tells the agent how to write TailwindCSS: utility classes in markup, mobile-first breakpoints, dark mode through the dark: variant. - [photo-composition-critic](https://affpapa.org/en/nevibecode/skills/photo-composition-critic.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 643 installs — A skill that critiques photographs: composition, colour harmony and aesthetic scoring, with concrete fixes. - [video-motion-graphics](https://affpapa.org/en/nevibecode/skills/video-motion-graphics.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 2400 installs — Applies Disney's 12 animation principles to After Effects and Premiere Pro workflows. - [mobile-touch](https://affpapa.org/en/nevibecode/skills/mobile-touch.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that steers your coding agent through gesture, haptic and animation work on iOS and Android. - [scenario-blender-grease-pencil](https://affpapa.org/en/nevibecode/skills/scenario-blender-grease-pencil.md) — skill · scenario-labs · Claude Code, Codex, Cursor +3 · 305 installs — Controls Grease Pencil v3 in Blender 5.x via Python for 2D rigs, fills, and frame-by-frame animation. - [css-animation-creator](https://affpapa.org/en/nevibecode/skills/css-animation-creator.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 805 installs — A coding-agent skill for writing CSS animations, transitions, micro-interactions and scroll effects. - [frontend-accessibility-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-accessibility-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 863 installs — A skill with 7 accessibility rules for React: semantic markup, screen readers, keyboard support, user preferences. - [css-architecture](https://affpapa.org/en/nevibecode/skills/css-architecture.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 959 installs — A skill that gives your coding agent conventions for structuring CSS with BEM, SMACSS and CSS-in-JS. - [pulsar-haptics](https://affpapa.org/en/nevibecode/skills/pulsar-haptics.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 380 installs — Integrates Software Mansion Pulsar haptic feedback across mobile and web frameworks. - [blender-lighting](https://affpapa.org/en/nevibecode/skills/blender-lighting.md) — skill · RobLe3 · Claude Code, Codex, Cursor +3 · 1200 installs — Configures studio, outdoor, and cinematic lighting in Blender scenes using automated Python recipes via MCP. - [animation-designer](https://affpapa.org/en/nevibecode/skills/animation-designer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that hands your agent ready-made web animation patterns: page transitions, component reveals, parallax and micro-interactions. - [lorem-ipsum](https://affpapa.org/en/nevibecode/skills/lorem-ipsum.md) — skill · intellectronica · Claude Code, Codex, Cursor +3 · 511 installs — Generates structured lorem ipsum filler text using a bundled Python script. - [product-design](https://affpapa.org/en/nevibecode/skills/product-design.md) — skill · mblode · Claude Code, Codex, Cursor +3 · 825 installs — A skill that settles interaction choices, action scope, reversibility and reachable states before anyone builds the UI. - [book-illustrator](https://affpapa.org/en/nevibecode/skills/book-illustrator.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 453 installs — Guides the creation of children's book artwork for ages 0–12, covering color theory, character design, and composition. - [design-mirror](https://affpapa.org/en/nevibecode/skills/design-mirror.md) — skill · brightdata · Claude Code, Codex, Cursor +3 · 340 installs — This skill reads a website’s visual language and applies it to an existing codebase. - [maplibre-cartography](https://affpapa.org/en/nevibecode/skills/maplibre-cartography.md) — skill · maplibre · Claude Code, Codex, Cursor +3 · 419 installs — A skill of cartographic rules for MapLibre GL JS: label and icon colors, layer order, contrast. - [ui-refactor](https://affpapa.org/en/nevibecode/skills/ui-refactor.md) — skill · LovroPodobnik · Claude Code, Codex, Cursor +3 · 494 installs — Applies systematic design guidelines to help coding agents clean up messy layouts, define spacing scales, and pick accessible color schemes. - [hig-foundations](https://affpapa.org/en/nevibecode/skills/hig-foundations.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 730 installs — A skill that hands your agent Apple Human Interface Guidelines foundations: color, typography, SF Symbols, dark mode, accessibility. - [character-design](https://affpapa.org/en/nevibecode/skills/character-design.md) — skill · fal-ai-community · Claude Code, Codex, Cursor +3 · 449 installs — Create character images and video while keeping a character’s defining features consistent. - [developer-portal-design](https://affpapa.org/en/nevibecode/skills/developer-portal-design.md) — skill · Samuel Berthe · Claude Code, Codex, Cursor +3 · 8100 installs — A skill that treats an external developer portal as a product: audiences, information architecture, the path to a first API call, RBAC. - [mobile-first-design](https://affpapa.org/en/nevibecode/skills/mobile-first-design.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 857 installs — A skill that sets the order of UI work: design the phone screen first, then scale to tablet and desktop. - [figma-use](https://affpapa.org/en/nevibecode/skills/figma-use.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 36 installs — This skill sets out how to use the Figma Plugin API through use_figma. - [generate-image](https://affpapa.org/en/nevibecode/skills/openclaudia-generate-image.md) — skill · OpenClaudia · Claude Code, Codex, Cursor +3 · 343 installs — Generates images from text prompts using OpenAI or Stability AI. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=34 ## 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