design-with-claude
dwic is a product designer inside your terminal. Run npx dwic-audit to audit your design system for WCAG contrast failures, token drift, and structural gaps, then fix what it finds with 48 design specialists. Remembers your design decisions across sessions.
Install / Use
claude mcp add imsaif -- npx -y github:imsaif/design-with-claudeIf the server publishes to npm under a different name, use that package instead — check the repo README.
MCP Server
Model Context Protocol server
Quality Score
Category
DesignSupported Platforms
Our assessment of design-with-claude
design-with-claude scores 46/100 on our quality scale, 248th of 257 Design skills we index.
Its MCP Server is 3.6 KB long, written without headings and no code examples: a solid amount of guidance for an agent.
It has no GitHub stars yet, so there is no community track record; judge it on its content.
Maintenance, license and trust
- We could not determine when the repository was last updated.
- No license is declared. By default that means all rights are reserved: you can read it, but reusing or redistributing it is not clearly permitted. Ask the author before building on it commercially.
- Its trust signals score 68/100, with 3 cautions from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
Safety scan
No issues foundOur scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands.
Automated pattern scan on 2026-10-26. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.
design-with-claude compared with similar skills
All 4 of these similar skills score higher than design-with-claude; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| design-with-claude (this skill)by imsaif | 46 | 0 | — | MCP Server |
| Agent-Reachby Panniantong | 100 | 103.3k | 1d ago | CLAUDE.md |
| taste-skillby Leonxlnx | 100 | 102.9k | today | CLAUDE.md |
| headroomby headroomlabs-ai | 100 | 77.9k | today | CLAUDE.md |
| CowAgentby zhayujie | 100 | 47.6k | today | CLAUDE.md |
Frequently asked questions
- How do I install design-with-claude?
- Run
claude mcp add imsaif -- npx -y github:imsaif/design-with-claude. The install tabs above show the steps for each supported agent. - Which AI agents does design-with-claude work with?
- It is written for Claude Code and Claude Desktop, as a MCP Server file. Other agents that read the same format can often use it too.
- Is design-with-claude safe to use?
- Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. It declares no license and scores 68/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is design-with-claude still maintained?
- We could not determine when the repository was last updated.
Skill content
View source on GitHub{ "name": "dwic-audit", "version": "1.0.0-alpha.11", "description": "dwic — a product designer inside your terminal. MCP server + CLI that audits your design tokens + markup for WCAG contrast failures, mandated-accent drift, and structural gaps, then remembers findings across sessions.", "type": "module", "main": "./dist/server.js", "bin": { "dwic-audit": "dist/bin/setup.js", "dwic-mcp-server": "dist/server.js" }, "files": [ "dist", "commands", "README.md", "LICENSE" ], "scripts": { "build": "node scripts/sync-counts.mjs --check && node scripts/sync-version.mjs --check && node scripts/sync-skill-descriptions.mjs --check && tsc && node scripts/chmod-bins.mjs", "sync-version": "node scripts/sync-version.mjs", "sync-counts": "node scripts/sync-counts.mjs", "check-counts": "node scripts/sync-counts.mjs --check", "sync-skill-descriptions": "node scripts/sync-skill-descriptions.mjs", "check-skill-descriptions": "node scripts/sync-skill-descriptions.mjs --check", "dev": "tsc --watch", "start": "node dist/server.js", "typecheck": "tsc --noEmit", "test:mcp": "node scripts/test-mcp-handshake.mjs", "test:anonymous-events": "node scripts/test-anonymous-events.mjs", "test:explicit-asks": "node scripts/test-explicit-asks.mjs", "test:audit-mode": "node scripts/test-audit-mode.mjs", "test:audit-color-roles": "node scripts/test-audit-color-roles.mjs", "test:audit-typography": "node scripts/test-audit-typography.mjs", "test:audit-spacing": "node scripts/test-audit-spacing.mjs", "test:audit-dsa": "node scripts/test-audit-dsa.mjs", "test:memory-context": "node scripts/test-memory-context.mjs", "test:audit-accessibility": "node scripts/test-audit-accessibility.mjs", "test:audit-form-designer": "node scripts/test-audit-form-designer.mjs", "test:audit-navigation-specialist": "node scripts/test-audit-navigation-specialist.mjs", "test:audit-content-strategist": "node scripts/test-audit-content-strategist.mjs", "test:audit-copy-source": "node scripts/test-audit-copy-source.mjs", "test:audit-motion-designer": "node scripts/test-audit-motion-designer.mjs", "test:detect-project-config": "node scripts/test-detect-project-config.mjs", "test:audit-walker": "node scripts/test-audit-walker.mjs", "test:audit-aggregator": "node scripts/test-audit-aggregator.mjs", "test:audit-dashboard": "node scripts/test-audit-dashboard.mjs", "test:audit-drift": "node scripts/test-audit-drift.mjs", "test:markup-utils": "node scripts/test-markup-utils.mjs", "test:audit-markdown-report": "node scripts/test-audit-markdown-report.mjs", "test:audit-cli-e2e": "node scripts/test-audit-cli-e2e.mjs", "test:onboarding-gate": "node scripts/test-onboarding-gate.mjs", "test:setup": "node scripts/test-setup-dry-run.mjs", "test:e2e": "node scripts/test-e2e-roundtrip.mjs", "prepublishOnly": "npm run build" }, "keywords": [ "dwic", "design-with-claude", "claude-code", "mcp", "mcp-server", "design-system-audit", "accessibility-audit", "wcag-contrast-checker", "design-tokens", "design", "design-system", "designer-tools" ], "author": "imsaif", "license": "MIT", "homepage": "https://designwithclaude.com", "repository": { "type": "git", "url": "git+https://github.com/imsaif/design-with-claude.git" }, "engines": { "node": ">=18" }, "dependencies": { "@modelcontextprotocol/sdk": "^1.29.0", "zod": "^3.25.0" }, "devDependencies": { "@types/node": "^22.10.0", "typescript": "^5.6.0" } }
Related Skills
Agent-Reach
103.3kGive your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
taste-skill
102.9kAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
headroom
77.9kCompress tool outputs, logs, files, and RAG chunks before they reach the LLM. 20% fewer tokens for coding agents, 60-95% fewer tokens for JSON, same answers. Library, proxy, MCP server.
CowAgent
47.6kOpen-source personal AI assistant & Agent Harness. Plans tasks, runs tools and skills, self-evolves with memory and knowledge. Multi-agent, multi-model, multi-channel. Lightweight, extensible, one-line install.
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.