What is Standby Design MCP?
Standby Design is an MCP server for standby.design that builds a production ready design system directly for an AI coding agent: OKLCH color palettes, fluid type scales, spacing and layout tokens, shape tokens for radii and shadows, icon sizing tokens and motion tokens, exportable as CSS custom properties, Tailwind v4 themes, or W3C design tokens, all sharing one state carrying URL.
Standby Design MCP is the server half of standby.design, a set of small browser tools for designers. Ten tools generate or export a design system's color, type, spacing, shape, icon and motion tokens for an AI coding agent.
Tokens that chain into one system
Each generate_* tool takes an optional url and changes only its own section, so color, type, shape, icon, space and motion calls accumulate into one shareable standby.design/system URL an agent or a person can open and tune.
OKLCH color and export formats
generate_color_palette builds an eighteen step OKLCH scale with semantic, shadcn compatible tokens from one brand color. export_design_system then writes the full system as CSS, a Tailwind v4 theme, W3C design tokens, or a briefing for an agent.
Shared computation with the web apps
The tools reuse the same calculation package as the standby.design browser apps, so a palette, type scale or shape set an agent generates matches what the same brand color produces on the live site.
Who it suits
Best for
- Agents that need a full color, type, spacing and shape system from one brand color in a single session.
- Projects that want shadcn/ui compatible semantic tokens without hand picking shades.
- Teams that want Tailwind v4 themes or W3C design tokens exported without opening a separate tool.
Not for
- Pulling colors, type and spacing by scraping an already public site, where Extract Design System MCP writes token values from that scrape instead.
- Deriving type scales and color shades from a fixed mathematical ratio chosen up front, where the dylanfeltus design-tokens skill runs that ratio based derivation.
- Auditing and extending DTCG tokens that already exist in three fixed tiers, where the Design Tokens skill runs that aliasing and audit step instead of fresh generation.
- Teaching layout rules for flexbox, grid and container queries, where CSS Expert covers that rulebook rather than generating tokens.
Connect Standby Design MCP: Color, Type and Shape Tokens on Demand to your AI client
claude mcp add standby-design -- npx -y standby-design-mcpAdd the server
Run the command above in Claude Code, or add the config block to
claude_desktop_config.jsonunder Settings, Developer, Edit Config, then restart the app.Generate a palette
Ask for a color palette from a brand hex value.
generate_color_palettereturns an eighteen step OKLCH scale plus semantic tokens.Chain more tokens
Pass the returned
urlintogenerate_type_scale,generate_shape_tokens,generate_space_tokensorgenerate_motion_tokensto add to the same system.Export the result
Call
export_design_systemfor CSS, a Tailwind v4 theme, W3C design tokens, or a briefing an agent can hand to another tool.
Client configuration
{
"mcpServers": {
"standby-design": {
"command": "npx",
"args": ["-y", "standby-design-mcp"]
}
}
}Endpoints and ports
https://mcp.standby.design/mcpAuth free Streamable HTTP endpoint, added in Claude under Settings, Connectors, Add custom connectorWhat you can do with it
- OKLCH palettes from one color
generate_color_paletteproduces eighteen steps from light surfaces through core palette to high contrast, plus a muted slated variant. - Tokens chain into one URLEach generate tool accepts the prior result's
urland only changes its own section, so a full system builds across several calls. - shadcn/ui compatible tokensSemantic color tokens match the naming shadcn/ui components expect, so generated palettes drop into that setup.
- Shape styles beyond one default
generate_shape_tokenscovers paper, glass, neomorph and neobrutalism radius, shadow, border and focus ring sets. - Export to CSS, Tailwind v4 or W3C
export_design_systemwrites CSS custom properties, a Tailwind v4 theme, or W3C DTCG design tokens from the same system. - Shared engine with the websiteThe MCP server reuses the standby.design web apps' own calculation package, so results match the browser tools exactly.
- Hosted, auth free endpointA stateless Streamable HTTP endpoint at mcp.standby.design needs no account and stores nothing between requests.
Tools it exposes
generate_color_palette
Builds an eighteen step OKLCH color scale from one brand color, with semantic, shadcn/ui compatible tokens, accents, and light and dark variants.
generate_type_scale
Builds a fluid type scale using CSS clamp across eleven levels, with Fontshare fonts, line heights and letter spacing.
generate_shape_tokens
Builds radii, shadows, borders and focus ring tokens in paper, glass, neomorph or neobrutalism styles.
generate_space_tokens
Builds spacing tokens, breakpoints, containers, prose measure and aspect ratios.
generate_motion_tokens
Builds spring based motion tokens from an energy and material setting, with primitive springs and a reduced motion rule.
export_design_system
Exports the full system as CSS, a Tailwind v4 theme, W3C design tokens, an agent briefing, or font embed code.
get_design_system
Decodes a standby.design URL back into a full overview of its tokens.
get_design_rules
Returns general rules for building an interface with the generated tokens, covering layout, interaction, forms, states, shape, typography and color.
Frequently asked questions
What is Standby Design MCP?
It is an MCP server for standby.design that generates a design system's color, type, spacing, shape, icon and motion tokens for an AI coding agent, then exports the result as CSS, a Tailwind v4 theme, or W3C design tokens.
How do I install and connect Standby Design MCP?
Run claude mcp add standby-design -- npx -y standby-design-mcp in Claude Code, or add a standby-design entry running npx -y standby-design-mcp to Claude Desktop's config under Settings, Developer, Edit Config, then restart the app before asking for a palette.
Is there a hosted option that skips local install?
Yes. A stateless Streamable HTTP endpoint needs no account and stores nothing between requests. In Claude, add it as a custom connector under Settings, Connectors, Add custom connector, and paste in the endpoint address given in the project's own connect instructions.
How do the generate tools work together?
Each generate_* tool accepts an optional prior state carrying address and changes only its own section, color, type, shape, space, icon or motion, so repeated calls build up one shared design system instead of each call overwriting the last one.
What export formats does it support?
export_design_system writes CSS custom properties, a Tailwind v4 theme, W3C DTCG design tokens, an agent facing briefing, and font embed code, all generated from the same accumulated design system in one call.
Does it store or send design data anywhere?
No. Tool inputs are design parameters such as colors, ratios and sizes, never personal data. Both the local package and the hosted endpoint are stateless, so nothing is retained between requests.
Does the output match the standby.design website?
Yes. The MCP tools share the same calculation package as the standby.design browser apps, so a palette or type scale an agent generates matches what the same brand color produces on the live site.