design-with-claude

dwic — a product designer inside your terminal

dwic (design with claude) puts a product designer inside Claude Code. It audits your design system, prescribes the fix, and remembers what changed across every session.

The one-line audit

npx dwic-audit

No token, no install, no Claude Code required; your code never leaves your machine. dwic scans your project, prints a dashboard of design-system gaps across 8 categories (color, typography, spacing, accessibility, forms, navigation, motion, copy), and writes a shareable markdown report to .dwic/audit-<date>.md. The check is deterministic (WCAG contrast math, token parsing, markup heuristics), so it's reproducible and CI-friendly via its exit code. Run against a deliberately-broken fixture:

dwic audit pings an anonymous counter on each run so we can see the CLI → MCP funnel. Pass --no-telemetry or set DWIC_TELEMETRY=off to disable; the payload is category-level counts only (no file contents, no paths).

Inside Claude Code

Install the MCP server and the product designer works interactively. Ask the specialists (color-specialist, accessibility-specialist, typography-specialist, and the rest) to audit or fix, and dwic remembers your project's decisions across sessions instead of re-asking every time.

npx dwic-audit setup --token=imr_xxx

Get a token at designwithclaude.com/get-started. For full usage docs, start there.

---

The free library — dwic's open knowledge base

This repo also ships 49 design skills across 8 categories (39 design specialists and 8 technical guides for designers) as plain Claude Code slash commands. No runtime, no dependencies, no API keys. Browse them at designwithclaude.com/library.

These aren't a separate product. They're the same knowledge base dwic runs on. Each specialist's expertise lives in a markdown role prompt under commands/, and dwic's MCP specialists load those exact files. When you ask dwic's color-specialist inside Claude Code, its expertise comes from the same commands/color-specialist.md that the free /color-specialist slash command loads.

The difference is the runtime around them. dwic wires 12 of these specialists as MCP tools and adds what plain prompts can't: a deterministic audit engine, project memory, and the one-line CLI. The rest of the library is free to drop into Claude Code as slash commands today.

Each command is a specialist file containing structured domain knowledge: WCAG specifics, token architecture patterns, motion timing curves, healthcare UX compliance rules, checkout conversion best practices. The technical guides help designers get unstuck with common walls — environment setup, database connections, auth, deployment, and error debugging. This isn't generic prompting — it's deep, opinionated expertise.

Install the library

With the skills CLI

Works in Claude Code, Cursor, Cline, Gemini CLI, Antigravity and others — no Claude Code required:

npx skills add imsaif/design-with-claude

As a Plugin (recommended)

# Add the marketplace
/plugin marketplace add imsaif/design-with-claude

# Install the plugin
/plugin install design-with-claude@design-with-claude

Commands are namespaced: /design-with-claude:design-brief, /design-with-claude:accessibility-specialist, etc.

As Standalone Commands

If you prefer shorter command names (no namespace prefix):

# Clone the repo
git clone https://github.com/imsaif/design-with-claude.git ~/.design-with-claude

# Copy commands to your user-level commands directory
cp -r ~/.design-with-claude/commands/ ~/.claude/commands/

This gives you /design-brief, /accessibility-specialist, etc. directly.

Quick Start

/design-brief Build a SaaS analytics dashboard with dark mode and accessibility focus

The master command analyzes your brief, identifies the relevant design domains (out of 48), and returns structured guidance — token recommendations, component specs, layout decisions, and implementation notes.

When invoked inside a code project, commands are context-aware: they detect your stack, read your existing files, and generate output that matches your conventions.

Example Output

## Brief Analysis
"SaaS analytics dashboard with dark mode and accessibility focus"
Product type: B2B SaaS dashboard
Key requirements: data visualization, dark theme, WCAG AA compliance

## Relevant Domains (7 of 48)
1. Dashboard Designer — KPI cards, chart layout, data density
2. Dark Mode Specialist — surface hierarchy, elevation tokens, contrast
3. Accessibility Specialist — WCAG AA, focus management, screen readers
4. Data Visualization Specialist — chart selection, color-blind palettes
5. Design System Architect — dark/light token architecture
6. Color Specialist — semantic colors with dark mode variants
7. Typography Specialist — data-dense type scale, monospace for numbers

## Token Recommendations
--surface-primary: hsl(220 20% 10%)     /* main background */
--surface-secondary: hsl(220 18% 14%)   /* card surfaces */
--surface-elevated: hsl(220 16% 18%)    /* modals, dropdowns */
--text-primary: hsl(220 10% 93%)        /* high-emphasis text */
--accent-primary: hsl(210 100% 60%)     /* interactive elements */
--data-series-1: hsl(210 90% 60%)       /* chart color 1 */
...

## Component Recommendations
- KPI cards: icon + metric + trend + sparkline, 4-column grid
- Charts: use accessible palette with pattern fills for color-blind users
- Tables: sticky headers, alternating row contrast ≥ 3:1
- Navigation: sidebar with collapsible sections, active state at ≥ 4.5:1

## Implementation Notes
- Dark mode as default, light mode as toggle (not vice versa)
- All interactive elements need visible focus rings (2px solid, offset 2px)
- Chart tooltips must be keyboard-accessible (not hover-only)
- Minimum touch target: 44x44px for any clickable element

Commands

Start here

For someone who has an idea and nothing else. Everything below this assumes a project already exists; guide is what you run before there is one.

Command	What it does
guide	Interviews you about what you want to make, cuts it to one thing, builds it, and ships it to a live URL. Writes NEXT.md so a second run picks up where you stopped

Master Command

Command	What it does
design-brief	Takes a natural language brief → identifies relevant specialists → outputs comprehensive design guidance

Design Process

These act on the design process rather than a domain. Listed in the order you'd normally use them: pin the decisions, check the code obeys them, work the fix list.

Command	Use when...
design-grill	Decisions need pinning down before code — interviews you, then writes the binding records later sessions must obey
design-enforce	A system exists but the code may be ignoring it — raw values where a token holds that value, off-scale numbers, reinvented components
design-triage	An audit came back a pile rather than one obvious problem — ranks findings by what costs most to leave broken, then works them in order

Core Design

Command	Use when...
visual-hierarchy-specialist	Layout, hierarchy, spacing, focal points
interaction-designer	User flows, states, gestures, feedback
design-system-architect	Tokens, component APIs, theming
accessibility-specialist	WCAG compliance, ARIA, keyboard nav
anti-slop-designer	Spotting and fixing the generic AI-generated look
design-critic	Honest, severity-ranked design critique instead of praise

Visual Design

Command	Use when...
typography-specialist	Type scales, font pairing, vertical rhythm
color-specialist	Color systems, palettes, semantic colors
spacing-layout-specialist	Grid systems, spacing scales, density

Interaction Design

Command	Use when...
motion-designer	Transitions, timing curves, micro-interactions
form-designer	Input layout, validation, multi-step forms
navigation-specialist	Nav patterns, wayfinding, menus
drag-drop-specialist	Drag affordances, drop zones, reordering, canvas

Product Design

Command	Use when...
dashboard-designer	Data display, charts, KPI cards
mobile-specialist	iOS/Android patterns, touch, thumb zones
responsive-design-specialist	Breakpoints, fluid layouts, adaptive patterns
landing-page-specialist	Hero sections, CTAs, conversion layout
auth-security-ux-specialist	Login flows, 2FA/passkey, session management

Content & IA

Command	Use when...
content-strategist	Microcopy, tone of voice, content hierarchy
information-architect	Navigation, taxonomy, content structure
conversational-ui-designer	Chat interfaces, voice UI
ui-copywriter	Headlines, CTAs, and landing copy that sound human

Industry

Command	Use when...
healthcare-ux-specialist	Clinical workflows, HIPAA, medical UI
b2b-saas-specialist	Enterprise patterns, multi-tenant, admin UIs
ecommerce-specialist	Product pages, cart, checkout flows
checkout-specialist	Cart UX, payment forms, trust signals

Specialized

Command	Use when...
dark-mode-specialist	Dark theme tokens, surface hierarchy
error-handling-specialist	Error states, recovery flows
onboarding-specialist	First-run experience, progressive onboarding
performance-specialist	Skeleton screens, loading states, perceived speed
data-visualization-specialist	Chart types, axis design, data-ink ratio
table-designer	Data tables, sorting, filtering, pagination
search-specialist	Search UX, filters, faceted navigation
brand-designer	Visual identity, brand systems
i18n-designer	RTL layouts, locale-aware UI, string expansion
print-export-designer	PDF generation, print stylesheets, export UX

Technical Setup

Command	Use when...
setup-guide	Installing Node, Claude Code, creating first project
code-explainer	Understanding any file or error in plain language
database-setup	Setting up Supabase — tables, queries, frontend connection
environment-setup	.env files, API keys, what never to commit
auth-implementation	Adding login/signup with Clerk or Supabase Auth
deploy-to-vercel	Getting your project live, fixing build errors
debug-helper	Pasting any error, getting the exact fix
briefing-claude	How to brief Claude for good UI: references, screenshots, constraints

Examples