# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 3 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=3 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [wireframe-portal-title](https://affpapa.org/en/nevibecode/skills/wireframe-portal-title.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — This skill creates an animated 3D title that breaks through a wireframe portal and changes into a second phrase. - [canopy-part-title](https://affpapa.org/en/nevibecode/skills/canopy-part-title.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — A HyperFrames block where a canopy of leaves crosses the frame, parts, and uncovers two headlines. - [code-slice-hero](https://affpapa.org/en/nevibecode/skills/code-slice-hero.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Animates a tiled headline flip via WebGL 2 and Canvas 2D to reveal a rear phrase. - [glass-shard-title](https://affpapa.org/en/nevibecode/skills/glass-shard-title.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Turns a headline into flying glass panes: shards drift in through fog, rotate, and tile themselves into the letters. - [cuboid-carousel](https://affpapa.org/en/nevibecode/skills/cuboid-carousel.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — A skill that renders a 3D carousel of bevelled cuboids carrying card content: they fly in from the right, ride a wave, and exit left. - [kami](https://affpapa.org/en/nevibecode/skills/kami.md) — skill · tw93 · Claude Code, Codex, Cursor +3 · 13300 installs — A typesetting skill that builds documents from Kami templates: resumes, one-pagers, letters, portfolios, slide decks and landing pages. - [data-visualization](https://affpapa.org/en/nevibecode/skills/anthropics-data-visualization.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 13800 installs — Selects chart types based on data structure and produces Python visualization code in matplotlib, seaborn, and plotly. - [nuxt-ui](https://affpapa.org/en/nevibecode/skills/nuxt-ui.md) — skill · nuxt · Claude Code, Codex, Cursor +3 · 19800 installs — Guides AI agents in building interfaces with @nuxt/ui v4, covering semantic Tailwind CSS theming, layout patterns, and component selection. - [figma-implement-design](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 6700 installs — This skill turns Figma nodes into application UI code while preserving layout, tokens, assets, and visual details. - [bmad-agent-ux-designer](https://affpapa.org/en/nevibecode/skills/bmad-agent-ux-designer.md) — skill · bmad-code-org · Claude Code, Codex, Cursor +3 · 11800 installs — Activates Sally, a dedicated UX designer persona for crafting interaction design and interface specifications. - [bmad-ux](https://affpapa.org/en/nevibecode/skills/bmad-ux.md) — skill · bmad-code-org · Claude Code, Codex, Cursor +3 · 11600 installs — Captures UX vision into DESIGN.md and EXPERIENCE.md documents. - [frontend-patterns](https://affpapa.org/en/nevibecode/skills/frontend-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5900 installs — A skill for React and Next.js work: component patterns, state, data fetching, and render performance. - [imagegen](https://affpapa.org/en/nevibecode/skills/imagegen.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5700 installs — This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. - [playground](https://affpapa.org/en/nevibecode/skills/playground.md) — skill (official Anthropic) · Anthropic · Claude Code · 7967 installs — Builds interactive HTML playgrounds with controls, a live preview, and a generated prompt. - [app-store-screenshots](https://affpapa.org/en/nevibecode/skills/parthjadhav-app-store-screenshots.md) — skill · ParthJadhav · Claude Code, Codex, Cursor +3 · 15000 installs — Scaffolds a Next.js and ShadCN editor where you design and export App Store and Google Play screenshots. - [better-ui](https://affpapa.org/en/nevibecode/skills/better-ui.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 39300 installs — This skill sets concrete rules for surface details, icons, shadows, and motion. - [gpt-image-2-style-library](https://affpapa.org/en/nevibecode/skills/gpt-image-2-style-library.md) — skill · freestylefly · Claude Code, Codex, Cursor +3 · 4000 installs — Converts user ideas into production-ready GPT-Image2 prompts using the awesome-gpt-image-2 catalog. - [frontend-slides](https://affpapa.org/en/nevibecode/skills/frontend-slides.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5500 installs — Creates animation-rich HTML presentations from scratch or converts PPT/PPTX files into browser slides. - [web-design-engineer](https://affpapa.org/en/nevibecode/skills/web-design-engineer.md) — skill · ConardLi · Claude Code, Codex, Cursor +3 · 8700 installs — Directs your coding agent to craft polished web interfaces in HTML, CSS, JavaScript, and React. - [frontend-design-direction](https://affpapa.org/en/nevibecode/skills/frontend-design-direction.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5300 installs — Sets a product-specific direction for web UI and helps check hierarchy, content states, responsive behavior, accessibility, and rendered results. - [liquid-glass-design](https://affpapa.org/en/nevibecode/skills/liquid-glass-design.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5200 installs — A skill that feeds your coding agent the iOS 26 Liquid Glass patterns for SwiftUI, UIKit and WidgetKit. - [stitch::generate-design](https://affpapa.org/en/nevibecode/skills/stitchgenerate-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10800 installs — Turns a text prompt or an image into a finished UI screen through Stitch MCP, then edits it with targeted prompts. - [stitch::extract-design-md](https://affpapa.org/en/nevibecode/skills/stitchextract-design-md.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10600 installs — Extracts a complete DESIGN.md design system directly from frontend source files without building or rendering the project. - [blender-motion-state-inspection](https://affpapa.org/en/nevibecode/skills/blender-motion-state-inspection.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5000 installs — Inspects Blender characters and retargeted animations using bone coordinates and scene geometry instead of guesswork from screenshots. - [design-system](https://affpapa.org/en/nevibecode/skills/affaan-m-design-system.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5000 installs — Builds a design system out of the styles already in your repo, or audits them: tokens, a ten-point UI score, and a check for generic AI styling. - [better-typography](https://affpapa.org/en/nevibecode/skills/better-typography.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 34200 installs — Reviews interface typography and applies fixes through the project’s styling system. - [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4900 installs — This skill gives coding agents Remotion guidance for React video work, from animation and audio to captions, charts, and transitions. - [stitch::manage-design-system](https://affpapa.org/en/nevibecode/skills/stitchmanage-design-system.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10300 installs — Manages Stitch design systems through MCP tools: retrieves screen data, creates project-level tokens, and applies them to selected screens. - [stitch::code-to-design](https://affpapa.org/en/nevibecode/skills/stitchcode-to-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10200 installs — Moves an existing frontend into Stitch by extracting standalone HTML and a design system, then uploading both to a project. - [baseline-ui](https://affpapa.org/en/nevibecode/skills/baseline-ui.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 24200 installs — Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. - [baoyu-diagram](https://affpapa.org/en/nevibecode/skills/baoyu-diagram.md) — skill · JimLiu · Claude Code, Codex, Cursor +3 · 15400 installs — Builds dark-themed, standalone SVG technical diagrams, flowcharts, and mind maps directly inside your AI coding session. - [brand-landingpage](https://affpapa.org/en/nevibecode/skills/brand-landingpage.md) — skill · Travis D. Elliott · Claude Code, Codex, Cursor · 39476 installs — This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. - [stitch::upload-to-stitch](https://affpapa.org/en/nevibecode/skills/stitchupload-to-stitch.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 9900 installs — Uploads local images, mockups, extracted HTML, and design markdown to a Stitch project over HTTP, bypassing MCP base64 token limits. - [stitch::extract-static-html](https://affpapa.org/en/nevibecode/skills/stitchextract-static-html.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10000 installs — This skill saves a rendered app page as a standalone HTML file with CSS and images embedded. - [motion-advanced](https://affpapa.org/en/nevibecode/skills/motion-advanced.md) — skill · jeff · Claude Code, Codex, Cursor +3 · 4600 installs — Advanced gesture and animation patterns for React and Next.js. - [manim-video](https://affpapa.org/en/nevibecode/skills/manim-video.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — Builds technical explainers in Manim for graphs, system diagrams, and product walkthroughs. - [make-interfaces-feel-better](https://affpapa.org/en/nevibecode/skills/affaan-m-make-interfaces-feel-better.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — This skill helps review and refine interface details such as spacing, typography, interaction states, and motion. - [motion-patterns](https://affpapa.org/en/nevibecode/skills/motion-patterns.md) — skill · jeff · Claude Code, Codex, Cursor +3 · 4700 installs — A skill with reusable animation patterns for React and Next.js. - [better-colors](https://affpapa.org/en/nevibecode/skills/better-colors.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 32600 installs — Audits color systems, generates ramps, and maps semantic tokens to roles. - [ppt-generation](https://affpapa.org/en/nevibecode/skills/ppt-generation.md) — skill · bytedance · Claude Code, Codex, Cursor +3 · 5200 installs — Creates PPTX presentations by generating slide visuals and assembling them into PowerPoint decks. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=4 ## 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