imsaif/design-with-claude
11 stars · Last commit 2026-07-29
45 free design skills for Claude Code. Call dwic - npx dwic-audit it audits your design system. It remembers your design system, your design choices, and your code. It catches design errors/changes before they get shipped. Your senior ai design engineer in your terminal
README preview
# dwic — a senior designer inside your terminal
dwic (design with claude) puts a senior 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 • examples/broken-project
Scanned: 2 CSS files · 1 component · Next.js 15 + Tailwind v4
✗ Fix before you ship — 8 of 9 errors are accessibility failures
Accessibility 6 findings unlabeled inputs, heading order, no landmarks
Color 3 AA fails contrast below WCAG AA
↳ WCAG AA / EU Accessibility Act (in force since June 2025) treats these as compliance failures.