# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 19 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=19 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [spacing-system](https://affpapa.org/en/nevibecode/skills/spacing-system.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. - [heuristic-evaluation](https://affpapa.org/en/nevibecode/skills/heuristic-evaluation.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — This skill reviews interfaces against Nielsen’s heuristics and domain criteria, then rates finding severity. - [presentation-creator](https://affpapa.org/en/nevibecode/skills/presentation-creator.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 2900 installs — Creates interactive React and Vite slide decks with Sentry styling. - [animejs](https://affpapa.org/en/nevibecode/skills/animejs.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — A skill that feeds your coding agent Anime.js syntax: timelines, stagger, SVG morphing and keyframe sequences. - [apple-hig-expert](https://affpapa.org/en/nevibecode/skills/apple-hig-expert.md) — skill · Alireza Rezvani · Claude Code · 662 installs — Audits iOS, macOS, watchOS, and visionOS interfaces against Apple HIG. - [figure-spec](https://affpapa.org/en/nevibecode/skills/figure-spec.md) — skill · wanshuiyin · Claude Code, Codex, Cursor +3 · 456 installs — Builds editable SVG diagrams from structured FigureSpec JSON. - [liquid-metal-border](https://affpapa.org/en/nevibecode/skills/liquid-metal-border.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guides React work with animated metal-fx WebGL borders for buttons, cards, and selected controls when visual states need a metallic frame. - [beam-glow-states](https://affpapa.org/en/nevibecode/skills/beam-glow-states.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A React skill that wires the border-beam animated edge glow into loading, selected, current, focus and pressed states. - [no-ai-design-slop](https://affpapa.org/en/nevibecode/skills/no-ai-design-slop.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A passive quality gate for UI work: it flags reflex design choices and common interface defects while you build or revise a screen. - [documentary-brutalist-agency](https://affpapa.org/en/nevibecode/skills/documentary-brutalist-agency.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for building creative agency and portfolio sites: billboard typography, hard black-and-white chapters, documentary collages. - [thinking-orbs](https://affpapa.org/en/nevibecode/skills/thinking-orbs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guides coding agents to implement animated AI status indicators using the React thinking-orbs package. - [editorial-service-booking](https://affpapa.org/en/nevibecode/skills/editorial-service-booking.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guidance for service websites with appointments, from editorial treatment browsing to booking states that retain each selection. - [operational-enterprise-ai](https://affpapa.org/en/nevibecode/skills/operational-enterprise-ai.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for building or reworking enterprise product pages: system boundaries, approvals, audit, exceptions and rollback. - [generate-reference-inspired-brand-worlds](https://affpapa.org/en/nevibecode/skills/generate-reference-inspired-brand-worlds.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Generates original brand campaign worlds from visual references without copying protected signature assets. - [audit-reference-originality](https://affpapa.org/en/nevibecode/skills/audit-reference-originality.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Compares a shipped site with its reference corpus and flags overlaps in copy, brands, numbers, images and code. - [browser-video-recording](https://affpapa.org/en/nevibecode/skills/browser-video-recording.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Renders 60 fps 4:3 4K browser demo videos from in-app browser screenshots. - [add-shader-cursor-trail](https://affpapa.org/en/nevibecode/skills/add-shader-cursor-trail.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Installs a WebGPU hero effect: a twinkling white halftone trail that follows the pointer, with chromatic ripples and film grain. - [shaders-cursor-ripples](https://affpapa.org/en/nevibecode/skills/shaders-cursor-ripples.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Adds interactive WebGPU fluid distortion over existing images using the Shaders library. - [slide-maker](https://affpapa.org/en/nevibecode/skills/slide-maker.md) — skill · addsumtech · Claude Code, Codex, Cursor +3 · 1200 installs — Builds, redesigns, and critiques .pptx slide decks from documents, code, or rough notes. - [rive-interactive](https://affpapa.org/en/nevibecode/skills/rive-interactive.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2600 installs — A skill for Rive: state machines, input handling and data binding in React. - [lightweight-3d-effects](https://affpapa.org/en/nevibecode/skills/lightweight-3d-effects.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2600 installs — A skill for decorative 3D elements and micro-interactions: pseudo-3D illustrations, animated backgrounds, tilt on hover. - [usability-test-plan](https://affpapa.org/en/nevibecode/skills/usability-test-plan.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Builds a usability test plan: research questions, methodology, participant criteria, metrics and a facilitation script. - [case-study](https://affpapa.org/en/nevibecode/skills/case-study.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Structures design portfolio case studies around process evidence, personal contribution, and business metrics. - [design-token](https://affpapa.org/en/nevibecode/skills/design-token.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Defines and organises colour, spacing, type and elevation tokens with naming and usage rules. - [error-handling-ux](https://affpapa.org/en/nevibecode/skills/error-handling-ux.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that guides the agent through preventing, surfacing and recovering from errors in a product. - [design-qa-checklist](https://affpapa.org/en/nevibecode/skills/design-qa-checklist.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Builds a systematic QA checklist to verify that an implementation matches design specs. - [loading-states](https://affpapa.org/en/nevibecode/skills/loading-states.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. - [design-critique](https://affpapa.org/en/nevibecode/skills/owl-listener-design-critique.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — The skill runs a team design critique: session framing, feedback rules, and action items with owners. - [state-machine](https://affpapa.org/en/nevibecode/skills/owl-listener-state-machine.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Models UI component behavior as explicit states, events, and transitions. - [design-token-audit](https://affpapa.org/en/nevibecode/skills/design-token-audit.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps. - [animation-principles](https://affpapa.org/en/nevibecode/skills/owl-listener-animation-principles.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move. - [wireframe-spec](https://affpapa.org/en/nevibecode/skills/wireframe-spec.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — Defines wireframe layout specifications, content priorities, and interaction notes. - [micro-interaction-spec](https://affpapa.org/en/nevibecode/skills/micro-interaction-spec.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. - [paper-illustration-image2](https://affpapa.org/en/nevibecode/skills/paper-illustration-image2.md) — skill · wanshuiyin · Claude Code, Codex, Cursor +3 · 439 installs — Generates publication-quality academic figures via a local Codex app-server bridge. - [ant-design](https://affpapa.org/en/nevibecode/skills/ant-design.md) — skill · ant-design · Claude Code, Codex, Cursor +3 · 4100 installs — A decision guide for antd 6.x, Ant Design Pro 5 and Ant Design X v2. - [bencium-controlled-ux-designer](https://affpapa.org/en/nevibecode/skills/bencium-controlled-ux-designer.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 4600 installs — Guides visual choices for web interfaces before code changes begin. - [ui-design-brain](https://affpapa.org/en/nevibecode/skills/ui-design-brain.md) — skill · carmahhawwari · Claude Code, Codex, Cursor +3 · 845 installs — This skill guides interface generation with documented component patterns and design-system rules. - [swiftui-liquid-glass](https://affpapa.org/en/nevibecode/skills/dpearson2699-swiftui-liquid-glass.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4100 installs — Implement and review Liquid Glass in SwiftUI interfaces for iOS 26+. - [locomotive-scroll](https://affpapa.org/en/nevibecode/skills/locomotive-scroll.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2500 installs — This skill guides an agent through Locomotive Scroll setup for smooth scrolling, parallax, and scroll-driven motion. - [accessibility-test-plan](https://affpapa.org/en/nevibecode/skills/accessibility-test-plan.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 installs — Plans accessibility testing sessions with assistive technology and real users. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=20 ## 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