design-with-claude
Full package: imsaif/design-with-claude (MIT)
Decision tree
Is the package already installed?
Check your agent's skills directory for design-with-claude.
- Yes → invoke and proceed
- No → go to step 2
Which agent?
- Any agent (Claude Code, Cursor, Cline, Gemini CLI, Antigravity, …) →
npx skills add imsaif/design-with-claude
- Claude Code plugin instead →
/plugin marketplace add imsaif/design-with-claude
Just want the audit, no install?
npx dwic-audit needs no install and no token.
Install command
npx skills add imsaif/design-with-claude
Invoke after install
- Skill name:
design-with-claude
- Trigger phrases: "design with claude", "audit my design system", "WCAG contrast audit", "dashboard design", "b2b SaaS design"
What it does
Two halves that work together.
Measure. npx dwic-audit runs a deterministic static scan across 8 categories — color, typography, spacing, accessibility, forms, navigation, motion, copy. WCAG contrast math, token parsing, markup heuristics; no LLM runs. It prints a dashboard, writes a shareable .dwic/audit-<date>.md, and exits non-zero on errors so it works in CI. Nothing leaves the machine.
Fix. Design specialists as slash commands, each a domain expert in pure markdown with no runtime dependencies. The audit's categories map onto specialists (contrast failures → /color-specialist, unlabelled inputs → /form-designer, and so on), and /design-triage will read the audit report and work the findings in ranked order. /design-brief routes a plain-language brief when the problem spans several domains.
Use it when the request is vague ("improve our design", "is this any good?") — measure first, then invoke the specialist the findings point at, rather than guessing.
When NOT to use
- Non-visual work with no design component
- A one-line CSS change you already know how to make
- When a single focused skill already installed suffices — avoid installing the full suite for one-off needs
1---2name: design-with-claude3description: Deterministic design-system audit plus a full set of design specialists as slash commands. `npx dwic-audit` scans a project across 8 categories (color, typography, spacing, accessibility, forms, navigation, motion, copy) using WCAG contrast math and token parsing — no LLM, no token, nothing leaves the machine — then routes each finding to the specialist that fixes it. Specialists cover visual hierarchy, interaction design, design system architecture, typography, color, spacing, motion, forms, navigation, dashboards, mobile, landing pages, auth UX, healthcare UX, b2b SaaS, e-commerce, dark mode, error handling, onboarding, and data viz. No runtime dependencies, pure markdown.4---5
6# design-with-claude
7
8Full package: [imsaif/design-with-claude](https://github.com/imsaif/design-with-claude) (MIT)
9
10## Decision tree
11
121. **Is the package already installed?**
13 Check your agent's skills directory for `design-with-claude`.
14 - Yes → invoke and proceed
15 - No → go to step 2
16
172. **Which agent?**
18 - Any agent (Claude Code, Cursor, Cline, Gemini CLI, Antigravity, …) → `npx skills add imsaif/design-with-claude`
19 - Claude Code plugin instead → `/plugin marketplace add imsaif/design-with-claude`
20
213. **Just want the audit, no install?**
22 `npx dwic-audit` needs no install and no token.
23
24## Install command
25
26```bash
27npx skills add imsaif/design-with-claude
28```
29
30## Invoke after install
31
32- Skill name: `design-with-claude`
33- Trigger phrases: "design with claude", "audit my design system", "WCAG contrast audit", "dashboard design", "b2b SaaS design"
34
35## What it does
36
37Two halves that work together.
38
39**Measure.** `npx dwic-audit` runs a deterministic static scan across 8 categories — color, typography, spacing, accessibility, forms, navigation, motion, copy. WCAG contrast math, token parsing, markup heuristics; no LLM runs. It prints a dashboard, writes a shareable `.dwic/audit-<date>.md`, and exits non-zero on errors so it works in CI. Nothing leaves the machine.
40
41**Fix.** Design specialists as slash commands, each a domain expert in pure markdown with no runtime dependencies. The audit's categories map onto specialists (contrast failures → `/color-specialist`, unlabelled inputs → `/form-designer`, and so on), and `/design-triage` will read the audit report and work the findings in ranked order. `/design-brief` routes a plain-language brief when the problem spans several domains.
42
43Use it when the request is vague ("improve our design", "is this any good?") — measure first, then invoke the specialist the findings point at, rather than guessing.
44
45## When NOT to use
46
47- Non-visual work with no design component
48- A one-line CSS change you already know how to make
49- When a single focused skill already installed suffices — avoid installing the full suite for one-off needs
podo