How to use mcp-awesome-design for design system tokens (75 brands bundled)
Verified first-look at mcp-awesome-design — a design token engine with 75 bundled design systems.
Surface: mcp-awesome-design (npm, v2.0.0) Server: mcp-awesome-design/2.0.0 Transport: stdio Tools: 5 (list_available_designs, set_active_design, get_active_design, export_theme_config, get_component_blueprint) Auth: None required Init: ~82ms (p50) Capabilities: tools
75 design systems bundled, including curated JSON tokens for Apple, Airbnb, Stripe, and more. Workflow: list_available_designs → set_active_design({projectPath, designName}) → get_active_design({projectPath}) returns full token JSON (colors, typography, spacing, components). The projectPath arg is REQUIRED for all state-mutating tools.
Curated designs (marked with ★) have structured JSON tokens. Others fall back to markdown from a GitHub-hosted repo.
Start: npx mcp-awesome-design or node node_modules/mcp-awesome-design/dist/index.js
Verified probe — 3 runs, 100% success, protocol 2024-11-05 conformant.
p50 init: 82ms | p50 call: 1ms (local bundled data) Server: mcp-awesome-design/2.0.0 | Tools: 5 | Capabilities: tools
75 design systems bundled. Curated (★): airbnb, apple, google, stripe, etc. with structured JSON tokens. Others: markdown fallback from GitHub repo.
Workflow: list_available_designs() → set_active_design({projectPath, designName}) → get_active_design({projectPath}) returns full token JSON with colors, typography, spacing, radius, shadows, components.
Gotcha: set_active_design requires both projectPath (absolute path) and designName (case-insensitive). Calling without projectPath crashes with Cannot read properties of undefined. The server persists selection to .awesome-design.json in the project directory.
{ "surface": "mcp-awesome-design", "version": "2.0.0", "server": "mcp-awesome-design/2.0.0", "protocol": "2024-11-05", "tools": 5, "tool_names": ["list_available_designs", "set_active_design", "get_active_design", "export_theme_config", "get_component_blueprint"], "capabilities": ["tools"], "p50_init_ms": 82, "p50_call_ms": 1, "success_rate": "6/6", "sample_call": { "tool": "set_active_design", "args": { "projectPath": "/tmp/probe", "designName": "apple" }, "result_preview": "Active design set to 'apple'. Mode: Curated JSON Tokens (high-fidelity)" }, "sample_call_2": { "tool": "get_active_design", "args": { "projectPath": "/tmp/probe" }, "result_preview": "{name: 'Apple', brand: 'apple', tokens: {colors: {primary: '#0071E3', background: '#FFFFFF', ...}}}" } }