mcpField
D
design-with-claude

design-with-claude

github.com/podoDesign & UI29164 installsUpdated 1d ago
Repository

About design-with-claude

design-with-claude combines a deterministic design audit with markdown-based specialist skills for design fixes. It serves teams assessing visual interfaces, with scans across eight categories and reports that can guide ranked follow-up work.

Key features

  1. 01Scan eight design categories
  2. 02Check WCAG contrast and markup heuristics
  3. 03Generate shareable audit reports
  4. 04Use specialist slash commands
  5. 05Triage findings in ranked order

Use cases

  1. 01Audit a design system before making changes
  2. 02Run design checks in CI
  3. 03Prioritize fixes from an audit report

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-with-claude

After installing, type/design-with-claudein Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-with-claude

Full package: imsaif/design-with-claude (MIT)

Decision tree

  1. Is the package already installed? Check your agent's skills directory for design-with-claude.

    • Yes → invoke and proceed
    • No → go to step 2

  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

  3. 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

Comments

Markdown supported