Standby Design Mcp

io.github.KarstenKrehPublished by GitHub account KarstenKrehv0.6.2Updated Nov 7, 2026

Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

Generates complete design systems — OKLCH color palettes, fluid type scales, spacing, shape, icon and motion tokens — with shareable standby.design links and…

What you can do
  • Generate color palettes, fluid type scales, shape, icon, spacing and motion tokens, each returning a shareable standby.design/system URL
  • Inspect an existing design system from a URL or hash and get per-tool edit links
  • Export the full token code as CSS custom properties, Tailwind v4 theme, W3C design tokens JSON or an LLM brief
  • List Fontshare font slugs usable in the type scale
  • Retrieve universal design rules for layout, interaction, forms, states, typography and color
  • Get steps to install or update standby.design rule enforcement in a project
When to use it
Useful when you want an assistant to bootstrap or extend a token-based UI design system — brand colors, typography, spacing, radii, shadows, icons and motion — and hand back a link the user can fine-tune visually, or when you need the tokens exported as CSS, Tailwind or DTCG JSON.
Requirements
Available as a remote endpoint at mcp.standby.design or as the npm package standby-design-mcp over stdio. No authentication, environment variables or headers are declared. The server states its tools are pure and deterministic with no network access.
Before you install
The tools are described as side-effect free, but update_project returns setup steps for lint hooks, pre-commit, CI and agent instructions in your project, so review those changes before applying them. Generated systems are stored behind standby.design links, so treat the URLs as shareable content.

Installation

In SourceWeft

  1. Open Standby Design Mcp in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.KarstenKreh%2Fstandby-design-mcp/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "standby-design": {
      "type": "http",
      "url": "https://mcp.standby.design/mcp"
    }
  }
}

README

standby.design

Multi-Tool-Hub unter standby.design — kleine Tools für Designer und Entwickler. Kein Framework, kein Build-Step, reines HTML/CSS/JS.

MCP-Server für KI-Agenten: https://standby.design/docs/mcp

Design-Regeln im Code prüfen: https://standby.design/docs/lint

Struktur

/├── index.html        # Hub-Seite (standby.design)├── color/│   └── index.html    # Color Palette Generator (standby.design/color)├── Dockerfile├── nginx.conf├── docker-compose.yml└── deploy.sh

Deployment (Hetzner + Docker + nginx)

bash
./deploy.sh

Setzt voraus: SSH-Key unter C:/Local Data/Repositories/SSH Keys/hetzner_ed25519.

DNS (Namecheap)

A-Record für standby.design und www.standby.design → 46.225.131.97

Color Palette Generator (/color)

Ein interaktiver, client-seitiger Palette-Generator im OKLCH-Farbraum — keine Dependencies, kein Build-Step.

Features

  • Brand + Slated: Generiert automatisch eine volle Palette (Brand) und eine gedämpfte Variante mit 50% Chroma (Slated)
  • 18 Abstufungen: Feine Gradierung für Light Surfaces (25–100), Core Palette (200–800), Dark Surfaces (825–875) und High Contrast (925–975)
  • Zwei Modi:
    • Balanced Midpoint — 500 = perzeptueller Mittelwert (L=0.50), symmetrisch um den hellsten Punkt des Farbtons
    • Exact Brand Match — 500 = exakt die Eingabefarbe, Helligkeit + Chroma werden gleichmäßig darum herum skaliert
  • Click-to-Copy: Einzelne Hex- und OKLCH-Werte per Klick kopieren
  • Code-Export: Fertige CSS Custom Properties (OKLCH + Hex Fallback) zum Kopieren
  • Surface-Demo: Live-Vorschau für Light Mode, Dark Mode und High Contrast Surfaces
  • Grau-sicher: Neutrale Eingaben (z.B. #757575) erzeugen saubere Grau-Paletten ohne Farbstich

Verwendung

  1. index.html im Browser öffnen
  2. Hex-Farbcode eingeben (mit oder ohne #)
  3. Modus wählen (Balanced Midpoint / Exact Brand Match)
  4. Palette generieren — fertig

Zonenstruktur

StepsZoneVerwendung
25–100Light SurfacesHintergründe, Cards, Elevated (Light)
200–800Core PaletteButtons, Links, Akzente, Text
825–875Dark SurfacesHintergründe, Cards (Dark Mode)
900–975High ContrastHintergründe (High Contrast Dark)

Technologie

  • Reines HTML + CSS + JavaScript (zero dependencies)
  • OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB Konvertierung
  • Binäre Suche für sRGB-Gamut-Clamping
  • Parabolische Chroma-Envelope für natürliche Sättigungsverteilung

Source: README.md at commit 0f387ba

Tools

11

generate_color_palette

Generate color palette

Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Always give that URL to the user — the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.

ParametersurlmodeaccentsbrandHexbrandPinerrorPinthemeNamebgColorHexbrandInvertchromaScaleerrorInverterrorColorHex+1 more

generate_type_scale

Generate type scale

Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1–H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Always give that URL to the user — the link is the deliverable. Use list_fonts to discover font slugs.

ParametersurlratiobaseSizebodyFontmonoFontscaleModeautoShrinkheadingFontmobileRatioheadingWeightmobileBaseSizelineHeightOverrides+3 more

generate_shape_tokens

Generate shape tokens

Generate shape tokens — radii, shadows, borders, focus rings — in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

ParametersurlstyleglassBlurringStyleringWidthglassDepthringOffsetshadowTypeborderWidthshadowScaleborderRadiusringColorHex+11 more

generate_icon_tokens

Generate icon tokens

Pick an icon set and generate icon sizing tokens (xs–2xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: material-outlined, material-filled, lucide, phosphor-regular, phosphor-bold, phosphor-thin, phosphor-fill, solar-linear, solar-bold, solar-broken, tabler-outline, tabler-filled, radix. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

ParametersseturlscalestyleweightcornersbaseSizesnapTo4px

generate_space_tokens

Generate spacing & layout tokens

Generate spacing tokens (3xs–3xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

ParametersurlmodesnapratiobaseRemcontainersfluidMaxVwfluidMinVwmultiplierproseMaxChbreakpointsaspectRatios+1 more

generate_motion_tokens

Generate motion tokens

Generate spring-based motion tokens from two brand-character axes: energy (calm → lively, sets the tempo) and material (firm → elastic, sets how much spatial motion overshoots). Returns 6 primitive springs (spatial/effect × fast/default/slow), 11 semantic tokens (press, move, expand, enter, exit, fade, navigate.*, sheet.*, container) and the reduced-motion rule. Start from a preset, then fine-tune with energy/material. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable. Use export_design_system for CSS, design tokens or the LLM briefing; SwiftUI, Compose and Motion (JS) code is exported in the UI at standby.design/motion.

Parametersurlenergypresetmaterial

get_design_system

Inspect design system

Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, motion springs, and icons — plus per-tool edit links. Always give the standby.design/system URL to the user — the link is the deliverable.

Parametersurlrequired

export_design_system

Export design system code

Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON — typography, spacing & layout, shape, icons and motion; color is not part of it), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Every format carries the standby.design/system share link. Always give that URL to the user alongside the code and keep it as a comment in the theme file of the target project — the link is the deliverable.

Parametersurlrequiredformatrequiredsections

list_fonts

List available fonts

List Fontshare font slugs usable in generate_type_scale (headingFont/bodyFont/monoFont), grouped by category. This is the bundled seed catalog — any valid Fontshare slug works even if not listed here.

Takes no parameters.

update_project

Set up or update rule enforcement in a project

Returns the steps to install or update the standby.design rule enforcement (lint hook, pre-commit, CI, review skill, agent instructions) in the current project. Call this when the user asks to get the latest standby.design rules or update, e.g. "Hol Dir das Update", "update standby", "set up the design rules here".

Takes no parameters.

get_design_rules

Get design rules

Universal design rules for building UI with design tokens: layout, flow (empty, loading and error states, dialogs), shape, surfaces, interaction and keyboard access, forms, content structure, states, typography, color and stack rules for Tailwind/React Native. The tokens say which values exist; these rules say how to use them. Call this before building or reviewing views. Without arguments it returns every rule as one line (63 rules); pass rules (slugs) or a category with detail "full" for the complete text including how to detect violations in code. Rule texts are in German. Categories: Layout, Fluss, Form, Fläche, Bedienung, Formular, Inhalt, Zustand, Typografie, Farbe, Stack.

Parametersrulesscopedetailcategoryplatform

Version history

5
  1. v0.6.2LatestNov 7, 2026
  2. v0.6.1Nov 3, 2026
  3. v0.5.0Oct 2, 2026
  4. v0.3.0Sep 26, 2026
  5. v0.1.5Sep 16, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts