# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 22 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=22 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [critique-information-density](https://affpapa.org/en/nevibecode/skills/critique-information-density.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that critiques a rendered screen's density: cognitive load, content priority, scanning patterns and progressive disclosure. - [research-repository](https://affpapa.org/en/nevibecode/skills/research-repository.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Helps teams organize UX findings into a structured repository so research insights stay searchable, reusable, and linked to evidence. - [doherty-threshold](https://affpapa.org/en/nevibecode/skills/doherty-threshold.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — This skill sets response-time targets for interface interactions and suggests feedback patterns when a wait cannot be avoided. - [content-strategy](https://affpapa.org/en/nevibecode/skills/owl-listener-content-strategy.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Works out what content a product needs, where it lives and who owns it. - [millers-law](https://affpapa.org/en/nevibecode/skills/millers-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Chunks interface elements into groups of about four to fit working memory limits. - [design-system-governance](https://affpapa.org/en/nevibecode/skills/design-system-governance.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — This skill lays out how a design system changes over time: ownership, contribution, versioning, deprecation. - [design-debt-audit](https://affpapa.org/en/nevibecode/skills/design-debt-audit.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Takes stock of accumulated design inconsistencies across a product and returns a prioritised fix plan. - [von-restorff-effect](https://affpapa.org/en/nevibecode/skills/von-restorff-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — This skill guides coding agents to isolate a single primary action on a screen using visual contrast. - [hicks-law](https://affpapa.org/en/nevibecode/skills/hicks-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that applies Hick's Law — decision time grows with the number of simultaneous choices. - [fitts-law](https://affpapa.org/en/nevibecode/skills/fitts-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that makes your coding agent size and position controls by Fitts's Law. - [readable-measure](https://affpapa.org/en/nevibecode/skills/readable-measure.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Sets optimal typographic measure and line length across screen breakpoints. - [localization-design](https://affpapa.org/en/nevibecode/skills/localization-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Helps design UI for different languages, writing directions, and cultural contexts before translations arrive. - [law-of-common-region](https://affpapa.org/en/nevibecode/skills/law-of-common-region.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A Gestalt skill that tells your agent when to group elements with a container, background or border instead of spacing alone. - [survey-design](https://affpapa.org/en/nevibecode/skills/survey-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Guides the creation of unbiased survey questions, rating scales, and sample sizing. - [law-of-proximity](https://affpapa.org/en/nevibecode/skills/law-of-proximity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Applies the Law of Proximity to UI layouts, using spacing to show which elements belong together. - [search-ux](https://affpapa.org/en/nevibecode/skills/search-ux.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Guides the agent through search design: query input, suggestions, filters, results and the empty state. - [onboarding-design](https://affpapa.org/en/nevibecode/skills/onboarding-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Designs the first-run experience and activation path. - [claude-typer](https://affpapa.org/en/nevibecode/skills/claude-typer.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 1100 installs — Renders a clip where a line of text types itself out in a Claude-style window, then returns the path to the .mov it wrote. - [claude-design](https://affpapa.org/en/nevibecode/skills/claude-design.md) — skill · jiji262 · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that produces design artifacts in HTML: landing pages, decks, prototypes, posters and wireframes. - [jury](https://affpapa.org/en/nevibecode/skills/jury.md) — skill · juliobsz · Claude Code, Codex, Cursor +3 · 911 installs — Screenshots every page type, measures LCP, CLS, FPS and accessibility, then a blind critic scores the site and ranks fixes. - [SVG Logo Designer](https://affpapa.org/en/nevibecode/skills/svg-logo-designer.md) — skill · rknall · Claude Code, Codex, Cursor +3 · 8200 installs — Generates SVG logos from a brand description: several concepts, layouts and colour versions. - [prototype-prompt-generator](https://affpapa.org/en/nevibecode/skills/prototype-prompt-generator.md) — skill · stellarlinkco · Claude Code, Codex, Cursor +3 · 393 installs — Turns UI requirements into detailed, structured prompts for building HTML, CSS, or React prototypes. - [critique-color](https://affpapa.org/en/nevibecode/skills/critique-color.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 installs — The skill reviews colour choices on a single rendered screen, auditing contrast ratios, token consistency, and semantic colour meaning for accessible UI. - [styleseed](https://affpapa.org/en/nevibecode/skills/styleseed.md) — skill · bitjaru · Claude Code, Codex, Cursor +3 · 570 installs — A skill for building, fixing and inspecting UI while keeping the design decisions your project already made. - [animate-text](https://affpapa.org/en/nevibecode/skills/animate-text.md) — skill · pixel-point · Claude Code, Codex, Cursor +3 · 2700 installs — A catalog of 24 text animation specs. - [paper-poster-html](https://affpapa.org/en/nevibecode/skills/paper-poster-html.md) — skill · wanshuiyin · Claude Code, Codex, Cursor +3 · 311 installs — Builds academic conference posters as a single HTML file and renders print-ready PDFs using headless Chromium. - [procedural-fish-render](https://affpapa.org/en/nevibecode/skills/procedural-fish-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 1000 installs — Clones or updates the procedural-fish repository and exports procedural fish animation to a video file via Remotion. - [Agentic UX Design - Relationship-Centric Interfaces](https://affpapa.org/en/nevibecode/skills/agentic-ux-design-relationship-centric-interfaces.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — Guides AI interface design toward continuous memory, trust evolution, and co-planning instead of isolated screens. - [renaissance-architecture](https://affpapa.org/en/nevibecode/skills/renaissance-architecture.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — A skill that pushes the agent toward first-principles design instead of "X but for Y". - [kicad](https://affpapa.org/en/nevibecode/skills/kicad.md) — skill · aklofas · Claude Code, Codex, Cursor +3 · 1100 installs — Analyzes KiCad 5–10 projects and PDF schematics to catch DRC/ERC errors, trace power nets, and check boards before manufacturing. - [image-to-code](https://affpapa.org/en/nevibecode/skills/plugin87-image-to-code.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 719 installs — Reconstructs UI mockups and screenshots into token-driven accessible code with automated WCAG AA contrast validation. - [ios-design-guidelines](https://affpapa.org/en/nevibecode/skills/ios-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1900 installs — Applies Apple HIG rules when building or reviewing iPhone interfaces in SwiftUI or UIKit. - [interfaces-that-feel](https://affpapa.org/en/nevibecode/skills/interfaces-that-feel.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for reviewing a UI that works correctly but lands cold. - [critique-affordance](https://affpapa.org/en/nevibecode/skills/critique-affordance.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 installs — Audits rendered screens for interaction signals, state visibility, action discoverability, and primary CTA clarity. - [ux-audit](https://affpapa.org/en/nevibecode/skills/ux-audit.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2800 installs — This skill tests a live web app through browser interactions to catch usability, behavior, accessibility, and layout issues. - [web-asset-generator](https://affpapa.org/en/nevibecode/skills/web-asset-generator.md) — skill · alonw0 · Claude Code, Codex, Cursor +3 · 933 installs — Generates favicons, PWA app icons, and Open Graph social cards from logos, emojis, or text. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/galaxy-dawn-ui-ux-pro-max.md) — skill · Galaxy-Dawn · Claude Code, Codex, Cursor +3 · 506 installs — Turns a vague "make it look good" into a concrete design system: palette, typography, component rules and stack-aware notes. - [ruler-progress-render](https://affpapa.org/en/nevibecode/skills/ruler-progress-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 958 installs — Clones ruler-progress-animator and renders a ruler progress animation video using Remotion presets. - [icon-retrieval](https://affpapa.org/en/nevibecode/skills/icon-retrieval.md) — skill · antvis · Claude Code, Codex, Cursor +3 · 1600 installs — Searches for icons by keyword through an HTTP API, then pulls the SVG markup of the ones you pick with curl. - [business-design](https://affpapa.org/en/nevibecode/skills/business-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1400 installs — Helps a designer read a P&L, map competitors and argue decisions with metrics when a PM or CFO pushes back. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=23 ## 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