/design-with-claude
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation,
$ npx -y skills add imsaif/design-with-claude --skill design-with-claude --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/design-with-claude
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation,
SKILL.md
design-with-claude.SKILL.mdname: design-with-claude
description: Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and motion. Routes to 49 domain specialists. Pure markdown, no runtime dependencies.
design with claude
A product designer inside your terminal. Start by measuring, then route to the specialist who fixes what you measured.
Start here: measure before you design
npx dwic-audit
Deterministic scan of the current project across 8 categories — color, typography, spacing, accessibility, forms, navigation, motion, copy. WCAG contrast math, token parsing, markup heuristics. Writes `.dwic/audit-<date>.md` and exits non-zero on errors, so it works in CI. Nothing leaves the machine.
Run this first when the request is vague ("improve our design", "is this any good?"). The findings tell you which specialist to invoke instead of guessing.
**Audit finding → specialist:**
| Audit category | Invoke | |---|---| | Color / contrast AA fails | `/color-specialist` | | Typography off-scale | `/typography-specialist` | | Spacing inconsistency | `/spacing-layout-specialist` | | Accessibility failures | `/accessibility-specialist` | | Unlabeled inputs, no fieldset | `/form-designer` | | Navigation gaps | `/navigation-specialist` | | `transition: all`, no reduced-motion | `/motion-designer` | | Weak CTA, jargon | `/content-strategist` |
Or hand the whole report to `/design-triage` — it reads the newest `.dwic/audit-*.md`, ranks the findings by what costs most to leave broken (not by the audit's own severity order), and works the fix list in order. Use it when the audit returns a pile rather than one obvious problem.
Not sure which specialist?
`/design-brief` takes a plain-language brief, routes to the right expertise, and returns structured guidance. Use it when the problem spans more than one domain.
Review an existing UI
- `/design-critic` — severity-ranked critique, not reflexive praise. Use before shipping, or when feedback so far has been "looks great!"
- `/anti-slop-designer` — detects the generic AI-generated look in UI and copy. Use when a screen feels templated but you can't name why.
- `/accessibility-specialist` — WCAG 2.2, ARIA, keyboard nav, screen readers.
Shape it before you build it
- `/design-grill` — interviews you until the design is pinned down, writing the shared vocabulary and the binding decisions into the repo as it goes. Use when decisions are being made that later sessions must obey; it is what stops session 4 reinventing session 1's button.
- `/information-architect` — navigation structure, taxonomy, labeling, wayfinding
- `/interaction-designer` — user flows, states, gestures, feedback, keyboard patterns
- `/content-strategist` — microcopy, error messages, empty states, tone
- `/brand-designer` — visual identity, logo usage, brand color, type as brand
- `/design-system-architect` — tokens, component APIs, variants, theming, governance
Already have a design system?
`/design-enforce` checks whether the code actually **uses** it — raw values written where a token holds that exact value, numbers off the scale, components reinvented instead of reused, decisions in `.dwic/decisions/` that have been violated. The audit checks whether your token values are sound; this checks whether anything obeys them. Every finding is decided from source, so it needs no rendering.
Foundations
`/visual-hierarchy-specialist` · `/typography-specialist` · `/color-specialist` · `/spacing-layout-specialist` · `/motion-designer` · `/responsive-design-specialist` · `/dark-mode-specialist`
Components and patterns
`/form-designer` · `/table-designer` · `/navigation-specialist` · `/search-specialist` · `/dashboard-designer` · `/data-visualization-specialist` · `/drag-drop-specialist` · `/conversational-ui-designer` · `/error-handling-specialist` · `/onboarding-specialist` · `/performance-specialist` (perceived speed, skeletons, optimistic updates)
Surfaces
`/landing-page-specialist` · `/checkout-specialist` · `/mobile-specialist` · `/print-export-designer` · `/i18n-designer`
Domains
`/b2b-saas-specialist` · `/ecommerce-specialist` · `/healthcare-ux-specialist` · `/auth-security-ux-specialist`
Copy
- `/ui-copywriter` — marketing and landing voice: headlines, hero, CTAs, value props, without AI tells
- `/content-strategist` — in-product microcopy and error messages
For designers new to the terminal
- `/setup-guide` — install Node, Claude Code, first project
- `/environment-setup` — what `.env` is, what never goes to GitHub
- `/briefing-claude` — how to brief for good UI: references, screenshots, constraints, iterating instead of re-rolling
- `/code-explainer` — paste a file or error, get plain language back
- `/debug-helper` — paste an error, get the exact fix
- `/database-setup` · `/auth-implementation` · `/deploy-to-vercel` — working code, not just guidance
When NOT to use
- Backend logic, data modelling, or infra with no interface
- A one-line CSS tweak you already know how to make
- When `npx dwic-audit` already reported clean and there is no specific design question
Install
npx skills add imsaif/design-with-claude
Claude Code plugin: `/plugin marketplace add imsaif/design-with-claude`
MIT. Source: https://github.com/imsaif/design-with-claude
Read more
name: design-with-claude description: Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and motion. Routes to 49 domain specialists. Pure markdown, no runtime dependencies.
design with claude
A product designer inside your terminal. Start by measuring, then route to the specialist who fixes what you measured.
Start here: measure before you design
npx dwic-audit
Deterministic scan of the current project across 8 categories — color, typography, spacing, accessibility, forms, navigation, motion, copy. WCAG contrast math, token parsing, markup heuristics. Writes `.dwic/audit-<date>.md` and exits non-zero on errors, so it works in CI. Nothing leaves the machine.
Run this first when the request is vague ("improve our design", "is this any good?"). The findings tell you which specialist to invoke instead of guessing.
**Audit finding → specialist:**
| Audit category | Invoke | |---|---| | Color / contrast AA fails | `/color-specialist` | | Typography off-scale | `/typography-specialist` | | Spacing inconsistency | `/spacing-layout-specialist` | | Accessibility failures | `/accessibility-specialist` | | Unlabeled inputs, no fieldset | `/form-designer` | | Navigation gaps | `/navigation-specialist` | | `transition: all`, no reduced-motion | `/motion-designer` | | Weak CTA, jargon | `/content-strategist` |
Or hand the whole report to `/design-triage` — it reads the newest `.dwic/audit-*.md`, ranks the findings by what costs most to leave broken (not by the audit's own severity order), and works the fix list in order. Use it when the audit returns a pile rather than one obvious problem.
Not sure which specialist?
`/design-brief` takes a plain-language brief, routes to the right expertise, and returns structured guidance. Use it when the problem spans more than one domain.
Review an existing UI
- `/design-critic` — severity-ranked critique, not reflexive praise. Use before shipping, or when feedback so far has been "looks great!"
- `/anti-slop-designer` — detects the generic AI-generated look in UI and copy. Use when a screen feels templated but you can't name why.
- `/accessibility-specialist` — WCAG 2.2, ARIA, keyboard nav, screen readers.
Shape it before you build it
- `/design-grill` — interviews you until the design is pinned down, writing the shared vocabulary and the binding decisions into the repo as it goes. Use when decisions are being made that later sessions must obey; it is what stops session 4 reinventing session 1's button.
- `/information-architect` — navigation structure, taxonomy, labeling, wayfinding
- `/interaction-designer` — user flows, states, gestures, feedback, keyboard patterns
- `/content-strategist` — microcopy, error messages, empty states, tone
- `/brand-designer` — visual identity, logo usage, brand color, type as brand
- `/design-system-architect` — tokens, component APIs, variants, theming, governance
Already have a design system?
`/design-enforce` checks whether the code actually **uses** it — raw values written where a token holds that exact value, numbers off the scale, components reinvented instead of reused, decisions in `.dwic/decisions/` that have been violated. The audit checks whether your token values are sound; this checks whether anything obeys them. Every finding is decided from source, so it needs no rendering.
Foundations
`/visual-hierarchy-specialist` · `/typography-specialist` · `/color-specialist` · `/spacing-layout-specialist` · `/motion-designer` · `/responsive-design-specialist` · `/dark-mode-specialist`
Components and patterns
`/form-designer` · `/table-designer` · `/navigation-specialist` · `/search-specialist` · `/dashboard-designer` · `/data-visualization-specialist` · `/drag-drop-specialist` · `/conversational-ui-designer` · `/error-handling-specialist` · `/onboarding-specialist` · `/performance-specialist` (perceived speed, skeletons, optimistic updates)
Surfaces
`/landing-page-specialist` · `/checkout-specialist` · `/mobile-specialist` · `/print-export-designer` · `/i18n-designer`
Domains
`/b2b-saas-specialist` · `/ecommerce-specialist` · `/healthcare-ux-specialist` · `/auth-security-ux-specialist`
Copy
- `/ui-copywriter` — marketing and landing voice: headlines, hero, CTAs, value props, without AI tells
- `/content-strategist` — in-product microcopy and error messages
For designers new to the terminal
- `/setup-guide` — install Node, Claude Code, first project
- `/environment-setup` — what `.env` is, what never goes to GitHub
- `/briefing-claude` — how to brief for good UI: references, screenshots, constraints, iterating instead of re-rolling
- `/code-explainer` — paste a file or error, get plain language back
- `/debug-helper` — paste an error, get the exact fix
- `/database-setup` · `/auth-implementation` · `/deploy-to-vercel` — working code, not just guidance
When NOT to use
- Backend logic, data modelling, or infra with no interface
- A one-line CSS tweak you already know how to make
- When `npx dwic-audit` already reported clean and there is no specific design question
Install
npx skills add imsaif/design-with-claude
Claude Code plugin: `/plugin marketplace add imsaif/design-with-claude`
MIT. Source: https://github.com/imsaif/design-with-claude
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.
Repo: imsaif/design-with-claude