standby-design-mcp

MCP server for standby.design — generate and export production-ready design systems directly from Claude (or any MCP client): OKLCH color palettes, fluid type scales, spacing & layout, shape tokens (radii, shadows, glass, neobrutalism) and icon tokens, exportable as CSS custom properties, Tailwind v4 themes, or W3C design tokens (DTCG) — shadcn/ui compatible.

All computation is shared with the standby.design web apps (packages/core + system-react/src/lib), so results are identical to what the UI produces. Every tool returns a shareable standby.design/system URL — open it in the browser to view and fine-tune the system visually; the URL is the state.

Tools

| Tool | Purpose | |------|---------| | generate_color_palette | OKLCH palette from a brand color: 18-step scales, semantic tokens (shadcn/ui compatible), accents, light+dark | | generate_type_scale | Fluid type scale (CSS clamp()), 11 levels, Fontshare fonts, line heights & letter spacing | | generate_shape_tokens | Radii, shadows, borders, focus rings — styles: paper / glass / neomorph / neobrutalism | | generate_icon_tokens | Icon set recommendation/selection + sizing tokens (xs–2xl, stroke) | | generate_space_tokens | Spacing tokens, breakpoints, containers, prose measure, aspect ratios | | get_design_system | Decode any standby.design URL into a full overview | | export_design_system | Full code export: css, tailwind, design-tokens (DTCG), llm-briefing, font-embed | | list_fonts | Fontshare slugs for generate_type_scale |

Each generate_* tool accepts an optional url and only changes its own section, so calls chain: color → type → shape → … accumulate into one URL.

Build

cd packages/mcp-server
npm install
npm run build        # bundles @core + system-react/src/lib into dist/index.js
npm run smoke        # end-to-end protocol test against the built server

Install

Claude Code:

claude mcp add standby-design -- npx -y standby-design-mcp

Claude Desktop — add to claude_desktop_config.json (Settings → Developer → Edit Config), then restart the app:

{
  "mcpServers": {
    "standby-design": {
      "command": "npx",
      "args": ["-y", "standby-design-mcp"]
    }
  }
}

Any other MCP client: run npx -y standby-design-mcp as a stdio server.

Remote (no local install)

A hosted, auth-free endpoint is available at https://mcp.standby.design/mcp (Streamable HTTP, stateless). In Claude: Settings → Connectors → Add custom connector → paste the URL. Privacy: nothing is collected or stored — see https://standby.design/privacy.html.

Example prompts

Build me a design system for a calm fintech product — dark blue brand, sharp corners, corporate icons. Give me the Tailwind tokens.

Generate a color palette from #FF2D9C with vibrant surfaces and lime, cyan and violet accents, then make the shapes neobrutalist.

Here is our design system URL: https://standby.design/system#… — export it as CSS custom properties and explain the semantic tokens.

Make the typography bigger and switch the headings to Clash Display, keep everything else.

Local development

Register your local build instead of the npm package:

claude mcp add standby-design -- node "<absolute-path-to-repo>/packages/mcp-server/dist/index.js"