# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 24 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=24 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [brand-identity](https://affpapa.org/en/nevibecode/skills/brand-identity.md) — skill · arnabbagxd · Claude Code, Codex, Cursor +3 · 2100 installs — Translates brand strategy into an actionable visual identity brief for designers. - [apply-aesthetic](https://affpapa.org/en/nevibecode/skills/apply-aesthetic.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 529 installs — Picks a visual direction — an archetype or a named design system — and resolves it into your project's tokens. - [Brand Guidelines Generator](https://affpapa.org/en/nevibecode/skills/brand-guidelines-generator.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 4700 installs — Generates brand style guides, typography rules, and color palettes. - [design-code](https://affpapa.org/en/nevibecode/skills/design-code.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 525 installs — This skill generates component and screen code for a requested framework. - [platform-conventions](https://affpapa.org/en/nevibecode/skills/platform-conventions.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — The skill maps what iOS and Android each mandate in their interfaces, where the two diverge, and when a single cross-platform design makes sense. - [law-of-continuity](https://affpapa.org/en/nevibecode/skills/law-of-continuity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — A skill about the Law of Continuity: alignment, arrows and lines set the path the eye follows across an interface. - [conversational-ux](https://affpapa.org/en/nevibecode/skills/conversational-ux.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Designs voice interfaces and chat dialogs: prompt structure and error reprompt ladders. - [law-of-closure](https://affpapa.org/en/nevibecode/skills/law-of-closure.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches the agent to build UI on implied boundaries: drop redundant borders, draw icons from minimal cues, and let negative space carry the structure. - [law-of-figure-ground](https://affpapa.org/en/nevibecode/skills/law-of-figure-ground.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that sorts out which layer of an interface reads as foreground and which as background, and helps you set that relationship on purpose. - [law-of-similarity](https://affpapa.org/en/nevibecode/skills/law-of-similarity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Applies the Gestalt Law of Similarity to group UI elements across distance using shared color, shape, and size. - [ideogram4](https://affpapa.org/en/nevibecode/skills/ideogram4.md) — skill · digitalsamba · Claude Code, Codex, Cursor +3 · 471 installs — Generates images with legible in-image text and brand color control via Ideogram 4. - [d2-diagram-creator](https://affpapa.org/en/nevibecode/skills/d2-diagram-creator.md) — skill · Jeremy Longshore · Claude Code, Codex, Cursor +3 · 345 installs — A skill that walks the agent through D2 diagram work and switches on when you mention d2. - [design-component](https://affpapa.org/en/nevibecode/skills/design-component.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 522 installs — Produces UI component specifications covering anatomy, 8 interactive states, tokens, and accessibility. - [rhino3d-scripts](https://affpapa.org/en/nevibecode/skills/rhino3d-scripts.md) — skill (official GitHub) · github · GitHub Copilot · 89 installs — Generates and debugs Rhinoceros 3D scripts across Python, VBScript, and C#. - [ux-writing](https://affpapa.org/en/nevibecode/skills/plugin87-ux-writing.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 517 installs — Write or review interface text, from button labels to errors and empty states. - [design-qa](https://affpapa.org/en/nevibecode/skills/plugin87-design-qa.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 516 installs — This skill sets up checks for tokens, contrast, accessibility, and visual regressions. - [brandkit](https://affpapa.org/en/nevibecode/skills/plugin87-brandkit.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 510 installs — Build a token-based design foundation from a product brief, with separate light and dark themes and contrast checks. - [aesthetic](https://affpapa.org/en/nevibecode/skills/aesthetic.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 714 installs — A skill that walks your coding agent through interface design: reading other people's layouts, generating design images, and iterating until they hold up. - [ui-designer](https://affpapa.org/en/nevibecode/skills/daymade-ui-designer.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 1600 installs — Extracts a design system from UI screenshots and prepares an implementation prompt for React. - [migrate-design-system](https://affpapa.org/en/nevibecode/skills/migrate-design-system.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 487 installs — Maps your design tokens to another system and back: Material 3, Apple HIG, Fluent 2, shadcn/ui, Radix. - [icon-set-generator](https://affpapa.org/en/nevibecode/skills/icon-set-generator.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1900 installs — Draws a set of SVG icons for one project: same grid, same stroke, same corners. - [prototype](https://affpapa.org/en/nevibecode/skills/plugin87-prototype.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 484 installs — Guides interface design across a five-tier fidelity ladder from content to code. - [tesseract-motion](https://affpapa.org/en/nevibecode/skills/tesseract-motion.md) — skill · mirage-hq · Claude Code, Codex, Cursor +3 · 3000 installs — Create editable motion graphics in Tesseract, from animated type and diagrams to overlays on supplied footage. - [tesseract-video](https://affpapa.org/en/nevibecode/skills/tesseract-video.md) — skill · mirage-hq · Claude Code, Codex, Cursor +3 · 3000 installs — An agent skill for editing existing footage locally with Tesseract: cuts, dialogue cleanup, sound mixing and graphics where they help. - [token-build](https://affpapa.org/en/nevibecode/skills/token-build.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 480 installs — Generate web and mobile theme files from DTCG JSON tokens, or wire the build into CI. - [axiom-accessibility](https://affpapa.org/en/nevibecode/skills/axiom-accessibility.md) — skill · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1200 installs — A skill for fixing and auditing accessibility in Apple apps: VoiceOver, Dynamic Type, contrast, touch targets, WCAG. - [figma-integration](https://affpapa.org/en/nevibecode/skills/plugin87-figma-integration.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 478 installs — Sync project tokens and components with Figma in either direction. - [serial-position-effect](https://affpapa.org/en/nevibecode/skills/serial-position-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that applies the serial position effect: it tells the agent which items belong first and last, and what lands in the memory valley. - [teslers-law](https://affpapa.org/en/nevibecode/skills/teslers-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — Applies Tesler's Law to help you balance complexity between the interface and the user. - [zeigarnik-effect](https://affpapa.org/en/nevibecode/skills/zeigarnik-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — A skill for designing progress bars, saved drafts and reminders about unfinished steps. - [peak-end-rule](https://affpapa.org/en/nevibecode/skills/peak-end-rule.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that finds the two moments users actually remember — the most intense one and the last — and helps you design them on purpose. - [jakobs-law](https://affpapa.org/en/nevibecode/skills/jakobs-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Applies Jakob's Law to evaluate whether breaking familiar UI conventions is worth the cognitive cost. - [governance](https://affpapa.org/en/nevibecode/skills/governance.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 474 installs — A skill that keeps a design system from drifting: it picks the SemVer level, runs the contribution flow, and retires old tokens with a migration path. - [revealjs](https://affpapa.org/en/nevibecode/skills/revealjs.md) — skill · ryanbbrown · Claude Code, Codex, Cursor +3 · 736 installs — This skill turns your content into a reveal.js presentation: an HTML file with slides plus CSS for the theme. - [qianwen-image-generation](https://affpapa.org/en/nevibecode/skills/qianwen-image-generation.md) — skill · QianWen-AI · Claude Code, Codex, Cursor +3 · 5600 installs — This skill creates and edits images with Wan and Qwen Image models. - [brand-packaging](https://affpapa.org/en/nevibecode/skills/brand-packaging.md) — skill · arnabbagxd · Claude Code, Codex, Cursor +3 · 1700 installs — Creates a structured packaging brief and unboxing flow for designers or manufacturers. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/arnabbagxd-brand-guidelines.md) — skill · arnabbagxd · Claude Code, Codex, Cursor +3 · 1800 installs — This skill turns scattered brand decisions into one standards document: logo, color, typography, voice, messaging and application rules. - [ipados-design-guidelines](https://affpapa.org/en/nevibecode/skills/ipados-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1200 installs — Apple Human Interface Guidelines for iPad, packaged as a skill: adaptive layouts, multitasking, sidebar navigation and pointer support. - [tailwind-v4-shadcn](https://affpapa.org/en/nevibecode/skills/tailwind-v4-shadcn.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 8100 installs — Sets up Tailwind CSS v4 with shadcn/ui, Vite, and React. - [nano-banana-pro](https://affpapa.org/en/nevibecode/skills/nano-banana-pro.md) — skill · intellectronica · Claude Code, Codex, Cursor +3 · 3200 installs — Generates and modifies images using Google's Gemini 3 Pro Image API. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=25 ## 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