# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 11 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=11 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [landing-page-design](https://affpapa.org/en/nevibecode/skills/elayadesign-landing-page-design.md) — skill · elayadesign · Claude Code, Codex, Cursor +3 · 1800 installs — A skill that walks the agent through a landing page: intake questions and page structure first, then fixed rules for type, spacing and backgrounds. - [kumo-design](https://affpapa.org/en/nevibecode/skills/kumo-design.md) — skill · cloudflare · Claude Code, Codex, Cursor +3 · 1500 installs — Cloudflare product design rules for coding agents: guides layout, typography, dialogs, and animations in Kumo UI dashboards. - [game-ui-ux](https://affpapa.org/en/nevibecode/skills/game-ui-ux.md) — skill · gamedev-skills · Claude Code, Codex, Cursor +3 · 9900 installs — Engine-neutral game UI architecture skill for responsive layouts, screen stacks, gamepad focus, and event-driven HUD updates. - [visual-verdict](https://affpapa.org/en/nevibecode/skills/visual-verdict.md) — skill · Yeachan-Heo · Claude Code, Codex, Cursor +3 · 901 installs — A visual QA skill that compares generated UI screenshots against reference images and returns a structured JSON verdict for layout iterations. - [radix-ui-design-system](https://affpapa.org/en/nevibecode/skills/radix-ui-design-system.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1300 installs — Builds accessible design systems and headless UI components with Radix UI primitives. - [refero-design](https://affpapa.org/en/nevibecode/skills/refero-design.md) — skill · referodesign · Claude Code, Codex, Cursor +3 · 12000 installs — A research-led skill for UI and product design that grounds work in references before code. - [preline-theme-generator](https://affpapa.org/en/nevibecode/skills/preline-theme-generator.md) — skill · htmlstreamofficial · Claude Code, Codex, Cursor +3 · 1300 installs — Generates custom Preline UI theme CSS from brand colors or mood descriptions. - [image](https://affpapa.org/en/nevibecode/skills/vercel-labs-image.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1500 installs — Turns JSON specs into SVG and PNG images via Satori. - [material-3](https://affpapa.org/en/nevibecode/skills/material-3.md) — skill · hamen · Claude Code, Codex, Cursor +3 · 3300 installs — Walks an AI agent through Material Design 3: dynamic color, Jetpack Compose components, adaptive layout. - [pinned-comment](https://affpapa.org/en/nevibecode/skills/pinned-comment.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1300 installs — Creates a LinkedIn pinned comment and an image prompt in the author’s voice. - [pptx-visual-assets](https://affpapa.org/en/nevibecode/skills/pptx-visual-assets.md) — skill · kimtth · Claude Code, Codex, Cursor · 2600 installs — Places approved icons, images, SVGs, and diagrams onto editable PPTX decks with precise bounding boxes and verified rights. - [image-to-ui](https://affpapa.org/en/nevibecode/skills/image-to-ui.md) — skill · UIZZE · Claude Code, Codex, Cursor +3 · 63500 installs — Turn a screenshot, mockup, or sketch into working interface code. - [userinterface-wiki](https://affpapa.org/en/nevibecode/skills/userinterface-wiki.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 4500 installs — Handbook of 152 UI/UX rules for web interfaces. - [anti-ui-slop](https://affpapa.org/en/nevibecode/skills/anti-ui-slop.md) — skill (official GitHub) · UIZZE · GitHub Copilot · 967 installs — This skill helps coding agents build product-specific interfaces instead of generic UI. - [kill-ai-slop](https://affpapa.org/en/nevibecode/skills/kill-ai-slop.md) — skill · yetone · Claude Code, Codex, Cursor +3 · 3200 installs — Finds and removes the generic visual and copy tics that make a site look machine-generated. - [pptx-reference-deck-analysis](https://affpapa.org/en/nevibecode/skills/pptx-reference-deck-analysis.md) — skill · kimtth · Claude Code, Codex, Cursor · 2500 installs — Reads a PPTX reference deck without changing it, covering structure, theme, typography, layouts, and OOXML. - [pptx-deck-context](https://affpapa.org/en/nevibecode/skills/pptx-deck-context.md) — skill · kimtth · Claude Code, Codex, Cursor · 2500 installs — Locks down deck narrative, source citations, and visual styling before any slides or PPTX objects are authored. - [visual-explainer](https://affpapa.org/en/nevibecode/skills/visual-explainer.md) — skill · nicobailon · Claude Code, Codex, Cursor +3 · 755 installs — Generates self-contained HTML visual explanations with SVG diagrams, architectures, and animated flows. - [frontend-ui-dark-ts](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-ui-dark-ts.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1100 installs — Build dark-themed React interfaces with Tailwind CSS and Framer Motion. - [styles](https://affpapa.org/en/nevibecode/skills/styles.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 2200 installs — Walks an Android coding agent through moving a project onto the experimental Jetpack Compose Styles API, from Gradle opt-in to component-by-component migration. - [scroll-craft](https://affpapa.org/en/nevibecode/skills/scroll-craft.md) — skill · nateherkai · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that plans and builds a scroll-driven landing page: brief interview, section order, one emotional peak, dimensional hero, screenshot checks. - [cli-anything-drawio](https://affpapa.org/en/nevibecode/skills/cli-anything-drawio.md) — skill · HKUDS · Claude Code, Codex, Cursor +3 · 672 installs — A command-line harness over Draw.io: the skill hands your agent commands to build a diagram step by step and export it to PNG, PDF or SVG. - [api-design-principles](https://affpapa.org/en/nevibecode/skills/sickn33-api-design-principles.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1000 installs — Skill for designing REST and GraphQL APIs from scratch: architecture, versioning, error handling, and authentication that make APIs pleasant for other developers to consume. - [ux-heuristics](https://affpapa.org/en/nevibecode/skills/ux-heuristics.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 9400 installs — A skill that audits interface usability: it flags where users stall, rates each finding by severity, and tells you what to fix first. - [logo-design](https://affpapa.org/en/nevibecode/skills/logo-design.md) — skill · kaankiziltug · Claude Code, Codex, Cursor +3 · 1100 installs — Guides professional SVG logo and brand-mark design inside the agent, from the initial brief to geometry audits and icon exports. - [sparc-implement](https://affpapa.org/en/nevibecode/skills/sparc-implement.md) — skill · ruvnet · Claude Code, Codex, Cursor +3 · 734 installs — A skill that runs SPARC design phases: writes algorithm pseudocode, defines module boundaries and API contracts, then generates working code. - [web-typography](https://affpapa.org/en/nevibecode/skills/web-typography.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 9200 installs — This skill helps you select and configure typefaces for web projects: from choosing a font family to optimizing size, line height, and measure. - [refactoring-ui](https://affpapa.org/en/nevibecode/skills/refactoring-ui.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 9200 installs — Audits and polishes visual hierarchy, spacing scales, and color palettes in web interfaces. - [libraries-dev](https://affpapa.org/en/nevibecode/skills/libraries-dev.md) — skill · Jakubantalik · Claude Code, Codex, Cursor +3 · 1000 installs — Selects and integrates Libraries.dev React UI effects for AI interfaces, covering loaders, voice glows, animated borders, and bot avatars. - [ai-product](https://affpapa.org/en/nevibecode/skills/sickn33-ai-product.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 960 installs — Helps plan and assess LLM features, retrieval, validated outputs, latency, and cost controls. - [create-game-assets](https://affpapa.org/en/nevibecode/skills/create-game-assets.md) — skill · gamedev-skills · Claude Code, Codex, Cursor +3 · 7000 installs — A skill that carries a game's art from style brief and asset manifest to alpha checks and contact sheets. - [shadcn-svelte](https://affpapa.org/en/nevibecode/skills/vercel-labs-shadcn-svelte.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Pre-built definitions and implementations of 36 shadcn components for json-render apps. - [cli-anything-gimp](https://affpapa.org/en/nevibecode/skills/cli-anything-gimp.md) — skill · HKUDS · Claude Code, Codex, Cursor +3 · 617 installs — Provides a stateful image editing CLI built on Pillow and GIMP for AI agents. - [photo-abstract-editorial](https://affpapa.org/en/nevibecode/skills/photo-abstract-editorial.md) — skill · ZzzLc0405 · Claude Code, Codex, Cursor +3 · 740 installs — Turns a single photograph into a vertical diptych with an untouched upper image and an abstract lower panel. - [cli-anything-inkscape](https://affpapa.org/en/nevibecode/skills/cli-anything-inkscape.md) — skill · HKUDS · Claude Code, Codex, Cursor +3 · 605 installs — Stateful command-line interface skill for editing vector graphics in Inkscape, tracking project state in JSON, and manipulating SVG documents. - [database-schema-designer](https://affpapa.org/en/nevibecode/skills/softaworks-database-schema-designer.md) — skill · softaworks · Claude Code, Codex, Cursor +3 · 4300 installs — Design SQL and NoSQL data models with relationships, constraints, indexes, and migrations. - [qa-test-planner](https://affpapa.org/en/nevibecode/skills/qa-test-planner.md) — skill · softaworks · Claude Code, Codex, Cursor +3 · 4300 installs — Turns a feature description into a test plan, manual test cases, a regression suite or a bug report. - [figma-create-new-file](https://affpapa.org/en/nevibecode/skills/figma-figma-create-new-file.md) — skill · figma · Claude Code, Codex, Cursor +3 · 3500 installs — A skill that tells the agent how to create a Figma Design, FigJam or Slides file with the MCP create_new_file tool, including which plan and editor type to use. - [web-design-guidelines](https://affpapa.org/en/nevibecode/skills/web-design-guidelines.md) — skill · davila7 · Claude Code · 2076 installs — This skill checks UI files against current Web Interface Guidelines and reports findings by file and line. - [typeui-fundamentals](https://affpapa.org/en/nevibecode/skills/typeui-fundamentals.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Provides design principles for visual hierarchy, a 4-point spacing grid, typography, and WCAG rules. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=12 ## 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