{
  "markdown": "# dwic — a product designer inside your terminal\n\ndwic (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.\n\n## The one-line audit\n\n```\nnpx dwic-audit\n```\n\nNo 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:\n\n```\ndwic audit • examples/broken-project\nScanned: 2 CSS files · 1 component · Next.js 15 + Tailwind v4\n\n  ✗ Fix before you ship — 8 of 9 errors are accessibility failures\n    Accessibility   6 findings    unlabeled inputs, heading order, no landmarks\n    Color           3 AA fails    contrast below WCAG AA\n    ↳ WCAG AA / EU Accessibility Act (in force since June 2025) treats these as compliance failures.\n\n  Then clean up\n    Typography      3 findings    sizes off the scale, weak weights\n    Motion          5 findings    transition: all, no reduced-motion\n    Forms           4 findings    unlabeled input, missing <fieldset>\n    Copy            2 findings    weak CTA, jargon\n\n  Clean\n    Spacing         clean         7 steps\n    Navigation      clean\n\n  8 categories · 23 findings · error 9 · warn 9 · info 5  ·  exit 2 — fails CI\n```\n\n`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).\n\n## Inside Claude Code\n\nInstall 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.\n\n```\nnpx dwic-audit setup --token=imr_xxx\n```\n\nGet a token at [designwithclaude.com/get-started](https://designwithclaude.com/get-started). For full usage docs, start there.\n\n---\n\n## The free library — dwic's open knowledge base\n\nThis repo also ships **48 design skills across 8 categories** (40 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](https://designwithclaude.com/library).\n\nThese 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.\n\nThe 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.\n\nEach 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.\n\n## Install the library\n\n### With the skills CLI\n\nWorks in Claude Code, Cursor, Cline, Gemini CLI, Antigravity and others — no Claude Code required:\n\n```bash\nnpx skills add imsaif/design-with-claude\n```\n\n### As a Plugin (recommended)\n\n```bash\n# Add the marketplace\n/plugin marketplace add imsaif/design-with-claude\n\n# Install the plugin\n/plugin install design-with-claude@design-with-claude\n```\n\nCommands are namespaced: `/design-with-claude:design-brief`, `/design-with-claude:accessibility-specialist`, etc.\n\n### As Standalone Commands\n\nIf you prefer shorter command names (no namespace prefix):\n\n```bash\n# Clone the repo\ngit clone https://github.com/imsaif/design-with-claude.git ~/.design-with-claude\n\n# Copy commands to your user-level commands directory\ncp -r ~/.design-with-claude/commands/ ~/.claude/commands/\n```\n\nThis gives you `/design-brief`, `/accessibility-specialist`, etc. directly.\n\n## Quick Start\n\n```\n/design-brief Build a SaaS analytics dashboard with dark mode and accessibility focus\n```\n\nThe master command analyzes your brief, identifies the relevant design domains (out of 47), and returns structured guidance — token recommendations, component specs, layout decisions, and implementation notes.\n\nWhen invoked inside a code project, commands are context-aware: they detect your stack, read your existing files, and generate output that matches your conventions.\n\n### Example Output\n\n```\n## Brief Analysis\n\"SaaS analytics dashboard with dark mode and accessibility focus\"\nProduct type: B2B SaaS dashboard\nKey requirements: data visualization, dark theme, WCAG AA compliance\n\n## Relevant Domains (7 of 47)\n1. Dashboard Designer — KPI cards, chart layout, data density\n2. Dark Mode Specialist — surface hierarchy, elevation tokens, contrast\n3. Accessibility Specialist — WCAG AA, focus management, screen readers\n4. Data Visualization Specialist — chart selection, color-blind palettes\n5. Design System Architect — dark/light token architecture\n6. Color Specialist — semantic colors with dark mode variants\n7. Typography Specialist — data-dense type scale, monospace for numbers\n\n## Token Recommendations\n--surface-primary: hsl(220 20% 10%)     /* main background */\n--surface-secondary: hsl(220 18% 14%)   /* card surfaces */\n--surface-elevated: hsl(220 16% 18%)    /* modals, dropdowns */\n--text-primary: hsl(220 10% 93%)        /* high-emphasis text */\n--accent-primary: hsl(210 100% 60%)     /* interactive elements */\n--data-series-1: hsl(210 90% 60%)       /* chart color 1 */\n...\n\n## Component Recommendations\n- KPI cards: icon + metric + trend + sparkline, 4-column grid\n- Charts: use accessible palette with pattern fills for color-blind users\n- Tables: sticky headers, alternating row contrast ≥ 3:1\n- Navigation: sidebar with collapsible sections, active state at ≥ 4.5:1\n\n## Implementation Notes\n- Dark mode as default, light mode as toggle (not vice versa)\n- All interactive elements need visible focus rings (2px solid, offset 2px)\n- Chart tooltips must be keyboard-accessible (not hover-only)\n- Minimum touch target: 44x44px for any clickable element\n```\n\n## Commands\n\n### Master Command\n\n| Command | What it does |\n|---|---|\n| `design-brief` | Takes a natural language brief → identifies relevant specialists → outputs comprehensive design guidance |\n\n### Design Process\n\nThese act on the design *process* rather than a domain. Listed in the order you'd\nnormally use them: pin the decisions, check the code obeys them, work the fix list.\n\n| Command | Use when... |\n|---|---|\n| `design-grill` | Decisions need pinning down before code — interviews you, then writes the binding records later sessions must obey |\n| `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 |\n| `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 |\n\n### Core Design\n\n| Command | Use when... |\n|---|---|\n| `visual-hierarchy-specialist` | Layout, hierarchy, spacing, focal points |\n| `interaction-designer` | User flows, states, gestures, feedback |\n| `design-system-architect` | Tokens, component APIs, theming |\n| `accessibility-specialist` | WCAG compliance, ARIA, keyboard nav |\n| `anti-slop-designer` | Spotting and fixing the generic AI-generated look |\n| `design-critic` | Honest, severity-ranked design critique instead of praise |\n\n### Visual Design\n\n| Command | Use when... |\n|---|---|\n| `typography-specialist` | Type scales, font pairing, vertical rhythm |\n| `color-specialist` | Color systems, palettes, semantic colors |\n| `spacing-layout-specialist` | Grid systems, spacing scales, density |\n\n### Interaction Design\n\n| Command | Use when... |\n|---|---|\n| `motion-designer` | Transitions, timing curves, micro-interactions |\n| `form-designer` | Input layout, validation, multi-step forms |\n| `navigation-specialist` | Nav patterns, wayfinding, menus |\n| `drag-drop-specialist` | Drag affordances, drop zones, reordering, canvas |\n\n### Product Design\n\n| Command | Use when... |\n|---|---|\n| `dashboard-designer` | Data display, charts, KPI cards |\n| `mobile-specialist` | iOS/Android patterns, touch, thumb zones |\n| `responsive-design-specialist` | Breakpoints, fluid layouts, adaptive patterns |\n| `landing-page-specialist` | Hero sections, CTAs, conversion layout |\n| `auth-security-ux-specialist` | Login flows, 2FA/passkey, session management |\n\n### Content & IA\n\n| Command | Use when... |\n|---|---|\n| `content-strategist` | Microcopy, tone of voice, content hierarchy |\n| `information-architect` | Navigation, taxonomy, content structure |\n| `conversational-ui-designer` | Chat interfaces, voice UI |\n| `ui-copywriter` | Headlines, CTAs, and landing copy that sound human |\n\n### Industry\n\n| Command | Use when... |\n|---|---|\n| `healthcare-ux-specialist` | Clinical workflows, HIPAA, medical UI |\n| `b2b-saas-specialist` | Enterprise patterns, multi-tenant, admin UIs |\n| `ecommerce-specialist` | Product pages, cart, checkout flows |\n| `checkout-specialist` | Cart UX, payment forms, trust signals |\n\n### Specialized\n\n| Command | Use when... |\n|---|---|\n| `dark-mode-specialist` | Dark theme tokens, surface hierarchy |\n| `error-handling-specialist` | Error states, recovery flows |\n| `onboarding-specialist` | First-run experience, progressive onboarding |\n| `performance-specialist` | Skeleton screens, loading states, perceived speed |\n| `data-visualization-specialist` | Chart types, axis design, data-ink ratio |\n| `table-designer` | Data tables, sorting, filtering, pagination |\n| `search-specialist` | Search UX, filters, faceted navigation |\n| `brand-designer` | Visual identity, brand systems |\n| `i18n-designer` | RTL layouts, locale-aware UI, string expansion |\n| `print-export-designer` | PDF generation, print stylesheets, export UX |\n\n### Technical Setup\n\n| Command | Use when... |\n|---|---|\n| `setup-guide` | Installing Node, Claude Code, creating first project |\n| `code-explainer` | Understanding any file or error in plain language |\n| `database-setup` | Setting up Supabase — tables, queries, frontend connection |\n| `environment-setup` | .env files, API keys, what never to commit |\n| `auth-implementation` | Adding login/signup with Clerk or Supabase Auth |\n| `deploy-to-vercel` | Getting your project live, fixing build errors |\n| `debug-helper` | Pasting any error, getting the exact fix |\n| `briefing-claude` | How to brief Claude for good UI: references, screenshots, constraints |\n\n## Examples\n\n```bash\n# Get a full design brief for a new product\n/design-brief Healthcare patient portal with HIPAA compliance and mobile support\n\n# Deep-dive into a specific domain\n/accessibility-specialist Audit this login form for WCAG AA compliance\n/design-system-architect Create a token architecture for our React component library\n/motion-designer Define transition specs for our modal and dropdown components\n/dashboard-designer Design a KPI overview page for a logistics platform\n\n# Combine specialists for thorough coverage\n/form-designer Multi-step onboarding form with file uploads\n/color-specialist Define a semantic color system for light and dark themes\n/checkout-specialist Guest checkout flow for a subscription product\n\n# New design skills\n/auth-security-ux-specialist Passkey login flow with 2FA fallback\n/drag-drop-specialist Kanban board with drag between columns and keyboard support\n\n# Design process — pin decisions, check compliance, work the fix list\n/design-grill Pin down the decisions for our new settings screen before I build it\n/design-enforce Check whether src/ actually uses the tokens in styles/tokens.css\n/design-triage Work the findings from the latest audit in priority order\n\n# Technical guides — get unstuck\n/setup-guide I've never used a terminal before, help me set up Claude Code\n/debug-helper Error: Cannot read properties of undefined (reading 'map')\n/database-setup I need to store user submissions in a database\n/deploy-to-vercel My build is failing with \"Module not found\"\n/auth-implementation Add Google login to my Next.js app\n/environment-setup What's a .env file and why do I need one?\n/code-explainer What does this middleware.ts file do?\n```\n\n## How It Works\n\nEach command file is a markdown document containing a design specialist's complete knowledge. When you invoke a command, Claude loads that specialist as context — giving it deep, structured expertise in that domain.\n\nThere's no code running, no API calls, no build step. The `commands/` directory IS the product. Claude's intelligence does the rest.\n\n## Alternative: Project-Local Commands\n\nCopy commands into a single project:\n\n```bash\ncp -r ~/.design-with-claude/commands/ your-project/.claude/commands/\n```\n\n## Contributing\n\n### Adding a new skill\n\n1. Create `commands/your-skill-name.md` with YAML frontmatter (`description` field) and a role statement using `$ARGUMENTS`\n2. Follow the structure of existing commands: Expertise, Design Principles, Guidelines, Checklist, Anti-patterns, How to respond, What to ask if unclear\n3. Add to the command table in this README and to `commands/design-brief.md`\n\n## License\n\nMIT — [designwithclaude.com](https://designwithclaude.com)\n",
  "bytes": 13989,
  "sha": "87db4ef0d250f6a4c074a2e1e150cfdac811296259cc7f7a0ac26648d408a4a5",
  "repo_slug": "imsaif/design-with-claude",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_imsaif_design_with_claude_designwithclau_e7e791dd/readme"
}