# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 12 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=12 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [fal-assets](https://affpapa.org/en/nevibecode/skills/fal-assets.md) — skill · rehan-remade · Claude Code, Codex, Cursor +3 · 1400 installs — Generates sprites, tileable textures, 3D models, SFX, and music via fal. - [ios-hig-design](https://affpapa.org/en/nevibecode/skills/ios-hig-design.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 8200 installs — Skill guides you through designing native iOS interfaces that follow Apple's Human Interface Guidelines. - [tailwind-4](https://affpapa.org/en/nevibecode/skills/tailwind-4.md) — skill · prowler-cloud · Claude Code, Codex, Cursor +3 · 612 installs — A skill that sets how the agent styles with Tailwind CSS 4: which classes go in className, when to use style, and when to build classes with cn(). - [transitions-ui-generation](https://affpapa.org/en/nevibecode/skills/transitions-ui-generation.md) — skill · Jakubantalik · Claude Code, Codex, Cursor +3 · 1100 installs — Add an animation that makes a page element look like an agent is building it. - [threejs-game-ui-designer](https://affpapa.org/en/nevibecode/skills/threejs-game-ui-designer.md) — skill · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3300 installs — Skill for designing game UIs in Three.js: HUDs, menus, pause and win screens, responsive layout for mobile and desktop. - [hairline-adopt](https://affpapa.org/en/nevibecode/skills/hairline-adopt.md) — skill · lucasmarkes · Claude Code, Codex, Cursor +3 · 1700 installs — Rebuilds an icon or logo from an SVG into an isometric line figure on the @lucasmarkes/hairline engine, with a gesture that answers the pointer. - [firecrawl-website-design-clone](https://affpapa.org/en/nevibecode/skills/firecrawl-website-design-clone.md) — skill · firecrawl · Claude Code, Codex, Cursor +3 · 33100 installs — Extracts a live website's visual system into DESIGN.md: tokens, components, logo, fonts and palette. - [goldie](https://affpapa.org/en/nevibecode/skills/goldie.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that turns an iOS or Android app into store assets: it walks the app on a simulator, frames the screenshots and renders a preview video for App Store and Google Play. - [cli-anything-krita](https://affpapa.org/en/nevibecode/skills/cli-anything-krita.md) — skill · HKUDS · Claude Code, Codex, Cursor +3 · 511 installs — Drives Krita from the command line: new projects, layer stacks, filters and export. - [top-design](https://affpapa.org/en/nevibecode/skills/top-design.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 7100 installs — Directs AI coding agents to build Awwwards-style web experiences with dramatic typography, orchestrated scroll motion, and a 10-point scoring rubric. - [display-glasses-with-jetpack-compose-glimmer](https://affpapa.org/en/nevibecode/skills/display-glasses-with-jetpack-compose-glimmer.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 1500 installs — Guidelines for building projected Android XR apps on display glasses with Jetpack Compose Glimmer: theming, focus and additive display behaviour. - [remocn](https://affpapa.org/en/nevibecode/skills/remocn.md) — skill · Remocn · Claude Code, Codex, Cursor +3 · 1700 installs — Finds and installs ready-made animations, transitions and UI parts for Remotion videos. - [html-wireframe](https://affpapa.org/en/nevibecode/skills/html-wireframe.md) — skill · plannotator · Claude Code, Codex, Cursor +3 · 1800 installs — Builds low-fidelity, self-contained HTML wireframes so you can test information hierarchy, navigation and task flow before any visual design happens. - [html-prototype](https://affpapa.org/en/nevibecode/skills/html-prototype.md) — skill · plannotator · Claude Code, Codex, Cursor +3 · 1800 installs — A skill that builds one self-contained HTML file: a static mockup or a working prototype with states, keyboard support and responsive layout. - [microinteractions](https://affpapa.org/en/nevibecode/skills/microinteractions.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 6700 installs — A skill for designing microinteractions: trigger states, button feedback, loading indicators. - [scenes-gathered-zine-v1-3](https://affpapa.org/en/nevibecode/skills/scenes-gathered-zine-v1-3.md) — skill · Zeejay0 · Claude Code, Codex, Cursor +3 · 802 installs — Turns a supplied photo into a vertical 3:5 zine poster: truthful photography, a source-derived abstract illustration field, and a torn paper edge. - [threejs-image-generator](https://affpapa.org/en/nevibecode/skills/threejs-image-generator.md) — skill · majidmanzarpour · Claude Code, Codex, Cursor +3 · 2900 installs — Generates and edits 2D game assets for Three.js using Google's Gemini image API. - [generative-ui](https://affpapa.org/en/nevibecode/skills/generative-ui.md) — skill · himself65 · Claude Code, Codex, Cursor +3 · 3200 installs — Provides design system rules and templates for interactive HTML and SVG widgets. - [design-artifact](https://affpapa.org/en/nevibecode/skills/design-artifact.md) — skill · plannotator · Claude Code, Codex, Cursor +3 · 1700 installs — Directs AI coding assistants to design clean HTML deliverables with thoughtful type and tokens instead of generic machine aesthetics. - [user-story-mapping](https://affpapa.org/en/nevibecode/skills/user-story-mapping.md) — skill · deanpeters · Claude Code, Codex, Cursor +3 · 2700 installs — This skill turns a user journey into activities, steps, and tasks, then helps group work into releases. - [lean-ux-canvas](https://affpapa.org/en/nevibecode/skills/lean-ux-canvas.md) — skill · deanpeters · Claude Code, Codex, Cursor +3 · 2700 installs — Facilitates Jeff Gothelf's Lean UX Canvas v2 to clarify business problems, surface assumptions, and design cheap experiments before coding. - [principle-experience-first](https://affpapa.org/en/nevibecode/skills/principle-experience-first.md) — skill · backnotprop · Claude Code, Codex, Cursor +3 · 5100 installs — A principle skill that shifts priority toward the user when product, UX, or feature-scope tradeoffs come up. - [hooked-ux](https://affpapa.org/en/nevibecode/skills/hooked-ux.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 6200 installs — Scores a product's engagement loop against the Hook Model and caps designs the Manipulation Matrix calls extractive. - [wpds](https://affpapa.org/en/nevibecode/skills/wpds.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 4000 installs — Feeds WordPress Design System docs to your agent through an MCP server, so UI work lands on real components and tokens instead of guesses. - [problem-statement](https://affpapa.org/en/nevibecode/skills/problem-statement.md) — skill · deanpeters · Claude Code, Codex, Cursor +3 · 2600 installs — Turn a user’s obstacle into a concise problem statement that captures their goal, what gets in the way, and why it matters. - [drawio](https://affpapa.org/en/nevibecode/skills/bahayonghang-drawio.md) — skill · bahayonghang · Claude Code, Codex, Cursor +3 · 8500 installs — Builds and edits draw.io diagrams through offline YAML specifications. - [clerk-custom-ui](https://affpapa.org/en/nevibecode/skills/clerk-custom-ui.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 55200 installs — A Clerk skill that has the agent build custom sign-in and sign-up forms with hooks, or restyle the pre-built components to fit your brand. - [visual-plan](https://affpapa.org/en/nevibecode/skills/visual-plan.md) — skill · BuilderIO · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a plain text plan into a document with diagrams, a file map and open questions you can comment on before the agent starts writing code. - [influence-psychology](https://affpapa.org/en/nevibecode/skills/influence-psychology.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 5800 installs — Evaluates copy, onboarding flows, and interfaces against seven ethical persuasion principles to score designs on a 10-point scale. - [design-everyday-things](https://affpapa.org/en/nevibecode/skills/design-everyday-things.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 5600 installs — A skill that walks an interface through the principles of The Design of Everyday Things: affordances, signifiers, constraints, feedback. - [videoagent-image-studio](https://affpapa.org/en/nevibecode/skills/videoagent-image-studio.md) — skill · wells · Claude Code, Codex, Cursor +3 · 5600 installs — This skill provides one-command access to Midjourney, Flux, Ideogram, and five other image models without storing API keys. - [gpt-image-2](https://affpapa.org/en/nevibecode/skills/gpt-image-2.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 84300 installs — Generates and edits images via OpenAI GPT Image 2 on RunComfy. - [shaders](https://affpapa.org/en/nevibecode/skills/shaders.md) — skill · shader-effects-inc · Claude Code, Codex, Cursor +3 · 548 installs — A skill for WebGPU visuals: animated backgrounds, gradients, glass, distortion and particles from the shaders component library in React, Vue, Svelte, Solid or plain JS. - [lean-ux](https://affpapa.org/en/nevibecode/skills/lean-ux.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 5500 installs — Turns interface work into declared assumptions, testable hypotheses and the cheapest experiment that answers the question. - [logo-creator](https://affpapa.org/en/nevibecode/skills/logo-creator.md) — skill · ReScienceLab · Claude Code, Codex, Cursor +3 · 3200 installs — Generate logo concepts, compare them, then crop, remove the background, and export a selected design as SVG. - [beautify-github-readme](https://affpapa.org/en/nevibecode/skills/beautify-github-readme.md) — skill · oil-oil · Claude Code, Codex, Cursor +3 · 1200 installs — Redesigns GitHub README pages or produces focused visual assets, from static SVG to PNG/WebP and opt-in GIFs. - [proto-persona](https://affpapa.org/en/nevibecode/skills/proto-persona.md) — skill · deanpeters · Claude Code, Codex, Cursor +3 · 2300 installs — Build a working profile of a target user from research, market signals, and team knowledge. - [guizang-material-illustration](https://affpapa.org/en/nevibecode/skills/guizang-material-illustration.md) — skill · op7418 · Claude Code, Codex, Cursor +3 · 1700 installs — Builds prompt plans and Guizang-style 3D illustrations from notes, articles, or chart screenshots. - [revenue-centric-design](https://affpapa.org/en/nevibecode/skills/revenue-centric-design.md) — skill · heliocosta-dev · Claude Code, Codex, Cursor +3 · 2000 installs — Guides SaaS and startup product design around conversion, retention, and monetization. - [bklit-ui](https://affpapa.org/en/nevibecode/skills/bklit-ui.md) — skill · bklit · Claude Code, Codex, Cursor +3 · 1200 installs — Installs Bklit UI chart components into a React or Next.js app, then shows how to compose series, axes and tooltips without hand-rolled SVG. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=13 ## 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