19 skills · category

Design & UX skills for Claude Code

Skills that steer Claude away from generic, template-looking interfaces: design tokens, OKLCH color systems, type scales, dark mode, responsive layouts, landing pages, data-dense dashboards, heuristic UX reviews, SVG icon systems, Figma-to-code fidelity, purposeful motion, and the empty and error states most apps forget.

Download all 19 (.zip) Browse the list

Every design & ux skill

Each card opens the full playbook, example prompts and install commands.

No. 347

Brand Identity

A brand you can recognize with the logo covered

Claude starts with a competitor audit and a provable positioning line, then chooses one owned color, one display face and one graphic device that the category does not already use. Voice gets tone maps and before/after rewrites instead of adjectives, and the system is tested on four real surfaces with cover and swap tests before the brand guide is written.

brand-identity 201 lines · 2 files

No. 348

Color Systems

OKLCH palettes where every pair passes contrast

Instead of picking hex codes by eye or defaulting to an indigo gradient, Claude generates perceptually even OKLCH scales, assigns them to semantic roles like muted text and input borders, and runs a bundled Python script that checks every pair against WCAG 2.2 thresholds. Dark mode gets its own mapping with lighter accents and stepped surfaces rather than an inversion.

color-systems 192 lines · 2 files

No. 349

Dark Mode

Right theme on the first frame, legible everywhere

Claude treats dark mode as a remapping of semantic tokens rather than a pile of dark: overrides, wires a three-state preference that defaults to the OS, and sets the theme in a blocking head script so the first frame is correct. It then works through the components that usually break, from native inputs and scrollbars to logos, shadows and chart colors.

dark-mode 195 lines

No. 350

Dashboard UI

Every widget answers a question you can name

Claude designs dashboards from the questions users ask instead of the data that happens to exist. It picks the chart that fits each question, builds KPI cards with named comparison periods, right-aligns tabular numbers, keeps filters in the URL, and gives every widget its own loading, empty, error and stale state so one failed query never blanks the page.

dashboard-ui 183 lines

No. 351

Design System Tokens

Semantic tokens, so a new theme is one file

Claude starts by grepping your codebase for the hex codes and pixel values already in use, clusters them into primitive scales, then layers semantic role tokens on top so components never reference raw colors. It picks a source format that fits your stack, wires Style Dictionary when you ship to several platforms, and adds lint rules that stop new hard-coded values.

design-system-tokens 239 lines

No. 352

Email Design

HTML email that survives Outlook, Gmail and dark mode

Claude builds emails for the worst renderer first: role=presentation tables, inlined CSS, width attributes on every image, a hidden preheader and a VML-safe button, then layers dark-mode and mobile styles on top. A bundled stdlib linter checks the compiled HTML for external CSS, flex layouts, missing alt or lang, and the size at which Gmail clips the footer.

email-design 240 lines · 2 files

No. 353

Empty and Error States

No blank screens, no endless spinners, no dead ends

Before building the happy path, Claude fills a state matrix for each view covering first use, no results, loading, partial data, errors by HTTP status, offline, forbidden and not found. Each state gets a layout, plain-language copy and a next action, implemented through one consistent pattern per data source and verified by simulating every status with MSW and network throttling.

empty-error-states 191 lines

No. 354

Figma to Code

Build what the designer meant, not just what they drew

Claude reads Figma variables, text styles and auto layout before measuring pixels, maps each value to the tokens and components already in your codebase, and translates auto layout settings literally into flex and grid. It sends handoff questions about missing states and breakpoints early, then verifies the build with screenshot overlays and lists every deviation.

figma-to-code 155 lines

No. 355

Form UX Design

Fewer fields, clearer errors, more finished forms

Claude designs the form before anyone codes it. Every field must justify itself or get cut, deferred or inferred. It then sets layout, controls, input types and autocomplete tokens, validation timing, error placement and wording, and decides between one page and steps with a check-answers page. A bundled auditor flags missing labels, autofill gaps, number-type misuse and blocked paste in rendered HTML.

form-ux-design 240 lines · 2 files

No. 356

Information Architecture

Navigation built from user tasks and tested labels

Claude builds structure from ranked user tasks and a real content inventory rather than the org chart, picks a navigation model that fits the content, and writes labels in the words found in support tickets and search logs. A bundled script audits the sitemap outline for depth, single-child levels, vague labels and duplicates, and tree-test targets decide when the structure is done.

information-architecture 195 lines · 2 files

★ No. 357

Landing Page Design

Pages with a point of view, not a SaaS template

Claude commits to an art direction rooted in your product before writing CSS, orders sections by the questions a skeptical visitor asks, and builds a hero with one message, one action and a real product visual as the LCP element. A bundled audit catches the tells that make pages look machine-made: gradient blobs, emoji feature grids, centered everything and fake proof.

landing-page-design 161 lines · 2 files

No. 358

Mobile UI Patterns

Apps that feel native, not like a site in a wrapper

Claude picks navigation, sheets and modals the way the platform expects: per-tab stacks that keep their place, sheets for short tasks and full-screen modals for long ones, and back gestures that always work. Primary actions move into thumb reach, content respects safe areas and Android edge-to-edge, and each choice is marked as platform-adaptive or shared for React Native and Flutter builds.

mobile-ui-patterns 191 lines

No. 359

Onboarding Flows

Get new users to their first real outcome, fast

Claude first pins down the activation moment and the current drop-off, then removes or defers every step that does not deliver value: verification gates, extra signup fields, plan choice. It replaces welcome carousels with templates, sample data, short wizards and outcome-based checklists, and stores onboarding state server-side so invited users and returning devices follow the right path.

onboarding-flows 180 lines

No. 360

Pricing Page Design

Buyers find their plan and real cost in a minute

Claude lays out pricing so a buyer can name their plan and monthly cost without contacting sales: audience-named tiers, one recommended plan with a stated reason, a radio-group billing toggle with truthful savings, and a comparison table that shows limits as values. Prices are read from the same config as checkout and checked in CI, and dark patterns like fake strike-throughs are ruled out.

pricing-page-design 190 lines

No. 361

Responsive Layouts

Layouts that fit the content, not a device list

Claude builds layouts that reflow on their own using minmax, auto-fill and flex-wrap recipes, saves media queries for genuine page-level changes, and makes reusable components respond to their container rather than the viewport. It also handles the mobile traps that ship broken: 100vh overflow, notches, iOS input zoom and flex children that refuse to shrink.

responsive-layouts 166 lines

No. 362

SVG Icons

One grid, currentColor, and names screen readers say

Claude replaces emoji, icon fonts and mixed icon sets with one consistent family on a defined grid, runs SVGO with settings that keep viewBox and convert colors to currentColor, and ships icons as tree-shaken components or a sprite. A bundled audit script flags hard-coded fills, missing viewBox, ID collisions and mixed stroke widths, and every icon gets the right ARIA treatment.

svg-icons 180 lines · 2 files

No. 363

Typography Scale

One ratio, readable measure, zero font shift

Claude derives every font size from one modular ratio, generates fluid clamp() values with a bundled script that flags zoom-unsafe steps, and sets leading, tracking and line length per role. Fonts get preloaded, subset and paired with metric-matched fallbacks so the page stops jumping when the web font arrives.

typography-scale 169 lines · 2 files

No. 364

UI Motion

Fast, purposeful motion with real numbers

Claude gives each animation a job and a budget: 100 to 150 milliseconds for feedback, up to 350 for modals, exits faster than entrances, ease-out on the way in and ease-in on the way out. It animates only transform and opacity, prefers interruptible transitions, @starting-style and View Transitions over heavy libraries, and adds a reduced-motion version that keeps feedback but drops travel.

ui-motion 188 lines

No. 365

UX Heuristics Review

Task-based findings with severity and fixes

Rather than offering vague impressions, Claude walks the three to five tasks that matter, logs what a first-time user would hit at each step, maps problems to Nielsen's heuristics, and rates severity on the 0 to 4 scale with frequency, impact and persistence spelled out. The report ranks fixes by severity and effort and notes what already works.

ux-heuristics-review 163 lines · 2 files

Choosing Design & UX skills

Install the skills that match requests you make every week; each costs about 100 tokens of standing context until it loads. If you are not sure where to begin, start with Landing Page Design. For background, read The Best Claude Code Skills in 2026, by Use Case, How to Install Claude Code Skills (5 Ways) and Personal vs Project Skills.

By technology: Accessibility skills

Install several

Install several at once

The installer accepts any number of skill names. Add --project to install into the current repository.

curl -fsSL https://claudeskills.page/install.sh | sh -s -- brand-identity color-systems dark-mode dashboard-ui design-system-tokens email-design empty-error-states figma-to-code form-ux-design information-architecture landing-page-design mobile-ui-patterns onboarding-flows pricing-page-design responsive-layouts svg-icons typography-scale ui-motion ux-heuristics-review

Design & UX skills FAQ

How do I install every Design & UX skill at once?

Download the bundle at https://claudeskills.page/downloads/category/design.zip and unzip it into ~/.claude/skills/ (or .claude/skills/ inside a repository). To pick a few, pass several names to the installer: curl -fsSL https://claudeskills.page/install.sh | sh -s -- brand-identity color-systems dark-mode.

Will installing 19 skills slow Claude Code down?

No. Claude Code keeps only each skill's short description in context — roughly 100 tokens per skill — and loads the full instructions only when a request matches. Install the whole category if it fits your work; unused skills cost almost nothing.

Which Design & UX skill should I start with?

Start with Landing Page Design. They cover the most common requests in this category; add the rest as your work calls for them.