# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 26 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=26 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [design-review](https://affpapa.org/en/nevibecode/skills/jezweb-design-review.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1400 installs — Reviews the visual quality of a web page or app and produces a findings report with screenshots. - [cro-optimization](https://affpapa.org/en/nevibecode/skills/cro-optimization.md) — skill · ognjengt · Claude Code, Codex, Cursor +3 · 1200 installs — Reads a landing page, by link or as HTML/CSS, and returns a conversion audit: what blocks signups, what to fix first. - [branding](https://affpapa.org/en/nevibecode/skills/branding.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1900 installs — A skill for brand strategy work: purpose, values, positioning, storytelling, voice. - [visionos-design-guidelines](https://affpapa.org/en/nevibecode/skills/visionos-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 932 installs — Supplies Apple Human Interface Guidelines for Apple Vision Pro to your coding agent. - [drawio-academic-skills](https://affpapa.org/en/nevibecode/skills/drawio-academic-skills.md) — skill · bahayonghang · Claude Code, Codex, Cursor +3 · 979 installs — A draw.io skill that prepares figures for a paper, thesis or IEEE/ACM submission: architecture diagrams, workflows, roadmaps and network topologies. - [drawio-logical-diagrams](https://affpapa.org/en/nevibecode/skills/drawio-logical-diagrams.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4000 installs — Generates draw.io native XML files for logical flowcharts, system architecture, BPMN, and UML diagrams. - [system-atlas](https://affpapa.org/en/nevibecode/skills/system-atlas.md) — skill · inkboard · Claude Code, Codex, Cursor +3 · 505 installs — Builds an interactive isometric architecture map and a matching SYSTEM.md twin from one data file, keeping design reviews and question tracking in sync. - [storytelling](https://affpapa.org/en/nevibecode/skills/storytelling.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 3100 installs — Gives design work a narrative structure: four canonical patterns so journeys, briefs and decks make people care instead of just showing data. - [create-tile-palette-or-rule-tiles](https://affpapa.org/en/nevibecode/skills/create-tile-palette-or-rule-tiles.md) — skill · Unity-Technologies · Claude Code, Codex, Cursor +3 · 995 installs — Build a 2D tile palette or set up a RuleTile that connects with nearby tiles as you paint. - [xiaohongshu-cover-generator](https://affpapa.org/en/nevibecode/skills/xiaohongshu-cover-generator.md) — skill · freestylefly · Claude Code, Codex, Cursor +3 · 1800 installs — This skill turns a topic into a Xiaohongshu-style cover image and drops the PNG into your current project folder. - [shot-composition](https://affpapa.org/en/nevibecode/skills/shot-composition.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2900 installs — Plans how a frame is staged: grid, focal point, depth layers and camera moves. - [animation-principles](https://affpapa.org/en/nevibecode/skills/animation-principles.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 3000 installs — Calculates timing, cubic-bezier curves, and stagger offsets for UI transitions. - [framer-motion-animator](https://affpapa.org/en/nevibecode/skills/framer-motion-animator.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 11100 installs — Generates smooth Framer Motion animations and micro-interactions in React. - [website-builder-setup](https://affpapa.org/en/nevibecode/skills/website-builder-setup.md) — skill · tenfoldmarc · Claude Code, Codex, Cursor +3 · 580 installs — Walks you through setting up a complete web design stack in Claude Code with UI/UX Pro Max, Framer Motion, and 21st.dev Magic. - [logo-animation](https://affpapa.org/en/nevibecode/skills/logo-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2800 installs — A coding-agent skill that builds logo motion: intros, app splashes, loader loops, SVG draw-ons. - [color-motion](https://affpapa.org/en/nevibecode/skills/color-motion.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2800 installs — Builds motion design palettes in OKLCH, fixes muddy CSS gradient midpoints, and resolves gamma shift issues in After Effects video renders. - [beat-sync-editing](https://affpapa.org/en/nevibecode/skills/beat-sync-editing.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2900 installs — Plans cut points from BPM, shapes sequence pacing, and maps transitions or retimes to an edit timeline. - [experience-lwc-design-generate](https://affpapa.org/en/nevibecode/skills/experience-lwc-design-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2100 installs — Creates Lightning Web Components from Figma designs or PRD specs. - [plaid](https://affpapa.org/en/nevibecode/skills/plaid.md) — skill · plaid-dev · Claude Code, Codex, Cursor +3 · 868 installs — Guides founders through idea discovery, validation, PRD creation, and execution. - [product-launch-motion](https://affpapa.org/en/nevibecode/skills/product-launch-motion.md) — skill · AbubakrChan · Claude Code, Codex, Cursor +3 · 585 installs — A skill that turns a product story into an MP4 launch film built from HTML scenes, with one morphing element, spring motion, a working cursor and edits locked to the music. - [art-direction](https://affpapa.org/en/nevibecode/skills/art-direction.md) — skill · rampstackco · Claude Code, Codex, Cursor +3 · 674 installs — Turns a creative ask into a brief for a photographer, illustrator or videographer, and scores finished work against the brand. - [motion-principles](https://affpapa.org/en/nevibecode/skills/motion-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1100 installs — A foundational motion design skill establishing timing budgets, easing curves, reduced-motion compliance, and jank prevention for Web, SwiftUI, and Compose. - [after-effects](https://affpapa.org/en/nevibecode/skills/after-effects.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2800 installs — Helps with Adobe After Effects expressions, export choices, performance issues, and project cleanup. - [localize](https://affpapa.org/en/nevibecode/skills/localize.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Adapts user experience and UI patterns across cultures and languages, covering RTL layouts, trust signals, and legal compliance. - [blueprint](https://affpapa.org/en/nevibecode/skills/ghaida-blueprint.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Builds service blueprints, ecosystem maps and dependency diagrams. - [investigate](https://affpapa.org/en/nevibecode/skills/investigate.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Runs user research from planning to synthesis: interview guides, surveys, usability tests, diary studies, and finding analysis. - [include](https://affpapa.org/en/nevibecode/skills/include.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Embeds digital accessibility and WCAG 2.2 standards directly into UI design workflows before handoff. - [specify](https://affpapa.org/en/nevibecode/skills/specify.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Turns an approved design into a handoff package for a team or a coding agent: the project's own artifacts plus one entry page. - [articulate](https://affpapa.org/en/nevibecode/skills/articulate.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Designs the words in a product: labels, errors, empty states, onboarding, tooltips. - [fortify](https://affpapa.org/en/nevibecode/skills/fortify.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Hardens interface flows against real-world failures: empty states, partial loading, network drops, and unhandled validation errors. - [evaluate](https://affpapa.org/en/nevibecode/skills/evaluate.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Runs a structured UX evaluation, ranks each issue by severity and names the design change that fixes it. - [intent](https://affpapa.org/en/nevibecode/skills/intent.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — The entry point for the Intent system: it sets project context, routes work to specialized skills and loads foundational UX knowledge. - [organize](https://affpapa.org/en/nevibecode/skills/organize.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Designs information architecture, navigation models, and taxonomy systems. - [journey](https://affpapa.org/en/nevibecode/skills/journey.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2800 installs — A skill for designing user-facing experiences: screen sequences, navigation, onboarding, checkout, error recovery. - [parallel-concepts](https://affpapa.org/en/nevibecode/skills/parallel-concepts.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 650 installs — Builds several genuinely different solutions to one problem while each still costs a sketch instead of a build. - [motion-background](https://affpapa.org/en/nevibecode/skills/motion-background.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2700 installs — Teaches your assistant to build subtle background animations like CSS mesh gradients or 2D canvas particle fields without hurting readability. - [concept-selection](https://affpapa.org/en/nevibecode/skills/concept-selection.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 648 installs — Picks one concept out of several against criteria fixed in advance, and records what each rejected concept was testing. - [logo-designer](https://affpapa.org/en/nevibecode/skills/logo-designer.md) — skill · neonwatty · Claude Code, Codex, Cursor +3 · 931 installs — This skill walks the agent through a short interview, generates several distinct SVG logo concepts, and builds a preview page for comparison. - [msw-painter](https://affpapa.org/en/nevibecode/skills/msw-painter.md) — skill · MSW-Git · Claude Code, Codex, Cursor +3 · 9700 installs — Draws a pixel-art sprite when msw-search finds no suitable RUID, then helps register the PNG as a resource. - [prompt-images](https://affpapa.org/en/nevibecode/skills/prompt-images.md) — skill · replicate · Claude Code, Codex, Cursor +3 · 2600 installs — Prompting guide for image generation and editing models on Replicate. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=27 ## 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