design-with-claude

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