design-with-claude
Skill32 starsChanged 6 months agoMITView on GitHub
Deterministic design-system audit plus a full set of design specialists as slash commands. `npx dwic-audit` scans a project across categories such as color, typography, spacing, accessibility, forms, navigation, motion, and copy using WCAG contrast math and token parsing (no LLM involved), 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. Installs as a Claude Code plugin; the commands are pure markdown with no runtime dependencies.
In this repository170 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- accessibility-agentsSkill
- accessibility-catalogueSkill
- addyosmani-qualitySkill
- ai-graphic-design-skillSkill
- algorithmic-artSkill
- anatomySkill
- animate-css-skillSkill
- animate-skillSkill
- anthropics-skillsSkill
- antvis-chart-skillsSkill
- apple-hig-skillsSkill
- assimovt-productskillsSkill
- awesome-design-skillsSkill
- baseline-uiSkill
- bencium-ux-designerSkill
- brand-design-mdSkill
- building-componentsSkill
- callstack-agent-skillsSkill
- cc-slidevSkill
- chadboyda-gtmSkill
- claud3Skill
- claude2figmaSkill
- claudedesignskillsSkill
- claude-pm-skillsSkill
- claude-wireframe-skillSkill
- cloudai-threejsSkill
- cloudflare-web-perfSkill
- color-expertSkill
- composio-artifactsSkill
- content-catalogueSkill
- content-strategySkill
- copywriting-skillSkill
- coreyhaines-marketingSkill
- creative-directorSkill
- css-animation-skillSkill
- d3js-skillSkill
- dark-pattern-auditSkill
- data-analysis-skillSkill
- data-viz-agentSkill
- deanpeters-pm-skillsSkill
- design-auditorSkill
- design-briefSkill
- design-catalogueSkill
- design-consultationSkill
- design-debt-auditSkill
- design-engineering-catalogueSkill
- designer-skillsSkill
- design-for-aiSkill
- design-htmlSkill
- design-impact-reportingSkill
- design-labSkill
- design-motion-principlesSkill
- design-negotiationSkill
- design-review-garrytanSkill
- design-sprintSkill
- design-system-governanceSkill
- design-tokens-skillSkill
- digidai-pmSkill
- dimensional-drawingSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 73
When a single focused skill already installed suffices — avoid installing the full suite for one-off needs
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
design-with-claude
Catalogue stub — full package: imsaif/design-with-claude (MIT)
<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->Decision tree
- Is the full skill already installed?
f=~/.claude/plugins/cache/design-with-claude/design-with-claude; [ -e "$f" ] && ! grep -qs "^das:" "$f" && echo "installed" || echo "pointer"installed→ invoke it and proceedpointer→ go to step 2
Install (the skills CLI cannot install this one):
The skills CLI skips this repo because upstream's SKILL.md frontmatter does not parse as YAML, so the supported route is the Claude Code plugin. Run the two plugin commands in a terminal, or send the same two as slash commands inside Claude Code, then run /reload-plugins (without it the commands do not appear).
claude plugin marketplace add imsaif/design-with-claude claude plugin install design-with-claude@design-with-claude
Claude Code plugin route:
/plugin marketplace add imsaif/design-with-claude
/plugin install design-with-claude@design-with-claudeHeads-up
- Requires: Claude Code (plugin route). Commands are namespaced, for example /design-with-claude:design-brief; Optional audit CLI
npx dwic-audit(runs an npm package; it sends an anonymous run counter unless --no-telemetry or DWIC_TELEMETRY=off is set); Optional MCP server for interactive use needs a token from designwithclaude.com - License: MIT
<!-- das:install:end -->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"
- Plugin commands are namespaced, for example
/design-with-claude:design-briefand/design-with-claude:accessibility-specialist. Run/reload-pluginsafter installing or they do not appear.
What it does
Two halves that work together.
Measure. npx dwic-audit runs a deterministic static scan across categories such as color, typography, spacing, accessibility, forms, navigation, motion, and 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. Your code stays on your machine; the CLI only sends an anonymous run counter with category-level counts (disable with --no-telemetry or DWIC_TELEMETRY=off). It needs no install and no token.
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. An optional MCP server (set up with npx dwic-audit setup, needs a token from designwithclaude.com) adds project memory across sessions; it is not needed for the audit or the commands.
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
- Non-Claude agents (Cursor, Cline, Gemini CLI, ...): the skills CLI currently cannot read upstream's SKILL.md (YAML error), so use the
npx dwic-auditaudit on its own or follow the upstream README
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.