Design System MCP Server

Let your AI agent build a real design system instead of guessing one. The standby.design MCP server gives Claude, Cursor and any other MCP client the same generators that power this website: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.

Free, open source (MIT), no account and no API key. Every result comes with a share link that opens the complete system on standby.design, where you can check it visually and fine-tune every value.

Install

Hosted endpoint (no install)

https://mcp.standby.design/mcp

Streamable HTTP, stateless, no authentication. In Claude: Settings → Connectors → Add custom connector, then paste the URL. Works with any client that supports remote MCP servers.

Claude Code

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

Claude Desktop

Open Settings → Developer → Edit Config, add the server to claude_desktop_config.json and restart the app:

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

Cursor, Windsurf and other clients

Use the same mcpServers entry as above in the client's MCP config, or run the server directly as a stdio process:

npx -y standby-design-mcp

Tools

Tool	What it does
`generate_color_palette`	OKLCH palette from a brand color: 18-step scales, shadcn/ui-compatible semantic tokens, accents, light and dark mode.
`generate_type_scale`	Fluid type scale with CSS `clamp()`: 11 levels, Fontshare fonts, line heights and letter spacing.
`generate_space_tokens`	Spacing scale, breakpoints, container widths, prose measure and aspect ratios.
`generate_shape_tokens`	Radii, shadows, borders and focus rings in four styles: paper, glass, neomorph, neobrutalism.
`generate_icon_tokens`	Recommends an icon set that fits the design and generates sizing tokens (xs to 2xl, stroke).
`get_design_system`	Reads any standby.design link and returns an overview of the full system.
`export_design_system`	Exports the code: CSS custom properties, Tailwind v4, W3C design tokens, LLM briefing, font embed.
`list_fonts`	Lists the Fontshare fonts available for `generate_type_scale`.

All tools are read-only and deterministic: the same input always produces the same tokens.

How it works

The link is the result. Every tool returns a share link like https://standby.design/system#…. It holds the complete configuration, so there is nothing stored on a server.
Tools chain. Each generate_* tool accepts the link from the previous call and only changes its own part. Color, then type, then spacing, shape and icons add up to one system.
Export at the end. export_design_system turns the link into CSS, a Tailwind v4 theme or design tokens, ready to paste into the project.

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 link: 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.

Privacy

The server collects nothing. Inputs are design parameters (colors, ratios, sizes), never personal data. Both the npm package and the hosted endpoint compute each request and forget it. Details in the privacy policy.