Guide · 8 min read

How to design with Claude.

A workflow for shipping design work with Claude Code. Install dwic, ask specialists for help, and audit before you ship.

Why this guide

In 2026, “designing with Claude” doesn’t mean chatting with Claude.ai about color theory. It means running Claude Code in your terminal, asking specialists for design decisions, and auditing the output before it ships.

dwic is the loop that ties those moments together. It’s an MCP server you install once, a set of design specialists you invoke per task, and an auditor that catches contrast failures, accent drift, and structural gaps before they reach production. This guide walks the loop end to end.

New to Claude Code?Start with the Claude Code learning path on aiuxdesign.guideA 23-lesson walkthrough for designers picking up Claude Code for the first time. Come back here once you’re shipping.

The loop

Audit, generate, iterate, watch.

1. Audit

npx @imrandwc/dwic audit scans your CSS + JSX across 8 categories and flags what’s broken.

2. Generate

Ask specialists to fix the findings. They return tokens, scales, and copy. Structured output, not prose.

3. Iterate

Re-run audit to see what drifted since the last clean state. Findings cite AI UX patterns to read deeper.

4. Watch

dwic audit --watch keeps the loop running. Re-runs on every save, surfaces only what changed.

Setup

One command to install.

dwic ships as a Claude Code MCP server. The setup script writes the entry, picks up your existing project conventions, and registers the specialists as MCP tools.

$npx @imrandwc/dwic setup

Restart Claude Code once. The specialists appear as MCP tools you can invoke from any project.

Specialists

Nine roles, one keystroke each.

Every specialist is a focused role with its own prompt, expertise, and output contract. Ask the one closest to your task, or start with /design-brief and let it route.

Design System Architect

Tokens, component APIs, variants, theming, governance

Ask Claude: Design tokens for a SaaS dashboard. WCAG AA. Tailwind v4.

Color Specialist

Color palettes, contrast, dark mode mapping, semantic colors, accessibility

Ask Claude: Review my palette for AA contrast and accent drift.

Typography Specialist

Type scales, font pairing, line height, vertical rhythm, responsive typography

Ask Claude: Build a 6-step type scale anchored at 16px body.

Spacing & Layout Specialist

Grid systems, spacing scales, density modes, padding/margin conventions

Ask Claude: Audit my spacing tokens for grid alignment.

Accessibility Specialist

WCAG compliance, ARIA, keyboard nav, screen readers

Ask Claude: Check this signup form for keyboard + screen-reader support.

Form Designer

Form layout, validation timing, input types, multi-step forms, accessibility

Ask Claude: Design an inline validation pattern for our checkout.

Navigation Specialist

Sidebar, top bar, bottom tabs, breadcrumbs, mega menus, command palettes

Ask Claude: Pick a primary nav pattern for a 12-route app.

Motion Designer

Transitions, easing, timing, micro-interactions, reduced motion, animation performance

Ask Claude: Define easing + duration tokens for our component library.

Content Strategist

Microcopy, error messages, empty states, tone of voice, content hierarchy

Ask Claude: Rewrite our empty states to be helpful, not cute.

Auditing

Catch drift before it ships.

dwic audit reads your CSS and JSX, runs eight category audits, and prints one dashboard. Add --watch to re-run on every save and surface only what’s changed since the last clean state.

Going deeper

Where to read next.

Pattern library →

36 patterns, 8 categories. Designed for designers; useful for everyone.

aiuxdesign.guide

Free specialist library →

41 design agents as Claude Code slash commands. Install one at a time.

/library

GitHub →

Source, issues, contributing. Open to PRs from designers and engineers.

imsaif/design-with-claude

Install dwic.

One command. Ships in seconds.

$npx @imrandwc/dwic setup