English Français العربية

io.github.KarstenKreh/standby-design-mcp

Official registry Media and design

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

Source code Documentation

What can you do with io.github.KarstenKreh/standby-design-mcp?

  • 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:
  • 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

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http standby-design-mcp 'https://mcp.standby.design/mcp'
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "standby-design-mcp": {
            "type": "http",
            "url": "https://mcp.standby.design/mcp"
        }
    }
}
NPM package standby-design-mcp
Claude Code 
claude mcp add standby-design-mcp -- npx -y standby-design-mcp@0.5.0
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "standby-design-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "standby-design-mcp@0.5.0"
            ]
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. standby.design
  2. Struktur
  3. Deployment (Hetzner + Docker + nginx)
  4. DNS (Namecheap)
  5. Color Palette Generator (/color)
  6. Features
  7. Verwendung
  8. Zonenstruktur
  9. Technologie

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

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

Frequently asked questions

What is io.github.KarstenKreh/standby-design-mcp?

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

How do I install io.github.KarstenKreh/standby-design-mcp?

It runs as a remote server. In Claude Code: claude mcp add --transport http standby-design-mcp 'https://mcp.standby.design/mcp'. For other clients, paste the JSON configuration from this page into their MCP settings.

Does io.github.KarstenKreh/standby-design-mcp need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is io.github.KarstenKreh/standby-design-mcp open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains io.github.KarstenKreh/standby-design-mcp?

It is published by KarstenKreh. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.