# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 1 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 1025790 installs — This skill guides intentional visual design for new interfaces and redesigns. - [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · Matt Pocock · Claude Code · 1424476 installs — grill-me interviews you about a plan or design to expose gaps and sharpen decisions. - [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · Leonxlnx · Claude Code, Codex, Cursor +3 · 678700 installs — This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. - [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · Matt Pocock · Claude Code · 986201 installs — Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. - [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · Matt Pocock · Claude Code · 979543 installs — Stress-test a plan, decision, or idea through structured rounds of questions. - [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · Matt Pocock · Claude Code · 850344 installs — This skill helps design modules with small interfaces and hidden complexity. - [brainstorming](https://affpapa.org/en/nevibecode/skills/brainstorming.md) — skill · Jesse Vincent · Claude Code, Codex · 404045 installs — This skill clarifies a task before implementation by asking questions, checking context, and comparing approaches. - [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 1200000 installs — Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. - [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 1300000 installs — Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. - [media-use](https://affpapa.org/en/nevibecode/skills/media-use.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 1100000 installs — Finds or generates media for HyperFrames videos, including voiceovers, music, cutouts, and color grades. - [hyperframes-registry](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-registry.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 1000000 installs — Finds and installs about 450 ready-made HyperFrames blocks and components as editable source code. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/ui-ux-pro-max.md) — skill · nextlevelbuilder · Claude Code, Codex, Cursor +3 · 417000 installs — Equips coding agents with a local catalog of 119 UX guidelines, 74 font pairings, and 192 product palettes. - [impeccable](https://affpapa.org/en/nevibecode/skills/impeccable.md) — skill · pbakaus · Claude Code, Codex, Cursor +3 · 363400 installs — A skill for your coding agent that designs and reworks interfaces: landing pages, dashboards, forms, iOS and Android screens. - [canvas-design](https://affpapa.org/en/nevibecode/skills/canvas-design.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 121543 installs — Builds posters and visual art in .png and .pdf by first writing a design philosophy, then expressing it on the canvas. - [web-artifacts-builder](https://affpapa.org/en/nevibecode/skills/web-artifacts-builder.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 112122 installs — This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/brand-guidelines.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 109043 installs — Applies Anthropic's official brand colors and fonts to documents, slides and other artifacts. - [archify](https://affpapa.org/en/nevibecode/skills/archify.md) — skill · tt-a1i · Claude Code, Codex, Cursor +3 · 175500 installs — Creates checked diagrams and one-page explainers as standalone HTML. - [theme-factory](https://affpapa.org/en/nevibecode/skills/theme-factory.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 94921 installs — Applies preset color palettes and font pairs to slides, documents, and HTML pages. - [algorithmic-art](https://affpapa.org/en/nevibecode/skills/algorithmic-art.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 89081 installs — Creates p5.js generative art with seeded randomness and adjustable parameters. - [slack-gif-creator](https://affpapa.org/en/nevibecode/skills/slack-gif-creator.md) — skill (official Anthropic) · anthropics · Claude Code, Claude.ai · 75256 installs — This skill helps create animated GIFs for Slack and check their parameters. - [shadcn](https://affpapa.org/en/nevibecode/skills/shadcn-ui-shadcn.md) — skill · shadcn-ui · Claude Code, Codex, Cursor +3 · 123300 installs — A skill that keeps your agent on the rails with shadcn/ui: adds components, searches registries, fixes markup and builds a design system from your spec. - [figma](https://affpapa.org/en/nevibecode/skills/heygen-com-figma.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 334000 installs — Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. - [emil-design-eng](https://affpapa.org/en/nevibecode/skills/emil-design-eng.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 388200 installs — This skill guides UI polish, component details, and animation choices. - [review-animations](https://affpapa.org/en/nevibecode/skills/review-animations.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 256500 installs — Reviews UI animation and motion code against Emil Kowalski's design standards. - [apple-design](https://affpapa.org/en/nevibecode/skills/apple-design.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 244500 installs — Translates Apple's fluid interface principles from WWDC talks into web code with Pointer Events and spring physics. - [animation-vocabulary](https://affpapa.org/en/nevibecode/skills/animation-vocabulary.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 239000 installs — This skill maps a vague web animation description to the right term. - [improve-animations](https://affpapa.org/en/nevibecode/skills/improve-animations.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 224200 installs — Surveys motion and animation code across your project, then generates self-contained fix plans. - [find-animation-opportunities](https://affpapa.org/en/nevibecode/skills/find-animation-opportunities.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 208900 installs — Scans a codebase or UI for motion that would clarify states and interactions, while rejecting decoration that gets in the way. - [pick-ui-library](https://affpapa.org/en/nevibecode/skills/pick-ui-library.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 185400 installs — A skill that maps a frontend task to one library from Emil Kowalski's curated list: toasts, charts, OTP fields, virtualization, drag and drop. - [prototype](https://affpapa.org/en/nevibecode/skills/emilkowalski-prototype.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 174300 installs — The skill builds several genuinely different versions of one piece of UI and puts them behind a visual picker, so you flip through them live and keep the one that feels right. - [animate](https://affpapa.org/en/nevibecode/skills/animate.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 172700 installs — Builds UI animations from scratch following Emil Kowalski's motion philosophy. - [hallmark](https://affpapa.org/en/nevibecode/skills/hallmark.md) — skill · Nutlope · Claude Code, Codex, Cursor +3 · 70800 installs — A design skill for AI coding that keeps generated UIs from looking generated. - [ask-sonner](https://affpapa.org/en/nevibecode/skills/ask-sonner.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 140500 installs — A skill for the Sonner React toast library: how to mount the Toaster, which toast() call to use, and how to fix toasts that never show up. - [design-system](https://affpapa.org/en/nevibecode/skills/claudekit-design-system.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 43200 installs — This skill builds design tokens, component specs, and presentation slides. - [animate-expo](https://affpapa.org/en/nevibecode/skills/animate-expo.md) — skill · emilkowalski · Claude Code, Codex, Cursor +3 · 137900 installs — Builds React Native and Expo animations using Reanimated and Gesture Handler. - [design](https://affpapa.org/en/nevibecode/skills/design.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 41800 installs — Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers. - [ui-styling](https://affpapa.org/en/nevibecode/skills/ui-styling.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 41200 installs — A skill that helps your agent build accessible interfaces with shadcn/ui and Tailwind CSS: components, themes, dark mode, responsive layouts and canvas design. - [brand](https://affpapa.org/en/nevibecode/skills/brand.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 40500 installs — Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables. - [banner-design](https://affpapa.org/en/nevibecode/skills/banner-design.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 40000 installs — Generates banners for social media, ads, and web hero sections using HTML/CSS. - [slides](https://affpapa.org/en/nevibecode/skills/slides.md) — skill · claudekit · Claude Code, Codex, Cursor +3 · 39300 installs — Builds strategic HTML presentations using Chart.js and design tokens. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=2 ## 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