standby.design

MCP serverMedia

Give your AI the ability to generate design systems. Once added, it can produce OKLCH color palettes, fluid type scales, and spacing, shape, and icon tokens, so you get a consistent visual foundation for your project without building each piece by hand.

Use standby.design in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add standby.design and connect your AI. About a minute.

Also: Claude Code · Cursor · Codex

Then ask your AI: use standby.design to generate color palette

Details

Available today. Use it from your connected AI after setup.

Add the integration, then ask your AI to generate a color palette, a type scale, or a complete set of design tokens for your project.

standby.designStart free

What your AI can do with it

  • Generate color palettes in the OKLCH format
  • Create fluid type scales
  • Generate spacing tokens
  • Generate shape tokens
  • Generate icon tokens

Install standby.design

The server’s own address, for the clients that take one directly. Or connect Ahel once and every client you use reads it from one address, with the account kept on Ahel rather than in each client’s config.

  • Claude Code

    claude mcp add --transport http --scope user standby-design 'https://mcp.standby.design/mcp'

    Run it once in your project, then open /mcp to approve any sign-in the server asks for.

  • Claude Desktop

    https://mcp.standby.design/mcp

    Add a custom connector in Settings, paste this address, and approve the sign-in.

  • Cursor

    cursor://anysphere.cursor-deeplink/mcp/install?name=standby-design&config=eyJ1cmwiOiJodHRwczovL21jcC5zdGFuZGJ5LmRlc2lnbi9tY3AifQ==

    Open the link and Cursor adds the server at that address.

  • ChatGPT

    https://mcp.standby.design/mcp

    In Settings, enable Developer mode, create an MCP app, and paste this address. Your plan and workspace must allow custom apps.

  • Codex

    codex mcp add standby-design --url 'https://mcp.standby.design/mcp'

    Run it once, then sign in with codex mcp login standby-design if the server asks for an account.

From the project's README

As published by karstenkreh/standby.design in README.md.

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

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)

./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

Tools it offers (10)

What this server listed when Ahel dialed its public endpoint in Oct 2026, with no key and no account of yours. The names are the server’s own.

  • generate_color_palette
  • generate_type_scale
  • generate_shape_tokens
  • generate_icon_tokens
  • generate_space_tokens
  • generate_motion_tokens
  • get_design_system
  • export_design_system
  • list_fonts
  • get_design_rules

Signals

GitHub stars
1
Last commit
Sep 2026
Weekly downloads
329
Advanced
Delivery
standby-design-mcp MCP server → your Ahel connector (mcp.ahel.ai) → your AI.
Item type
mcp-server
Key
io-github-karstenkreh-standby-design-mcp
Source
github.com/karstenkreh/standby.design
Hosted endpoint
https://mcp.standby.design/mcp