Standby Design Mcp

io.github.KarstenKreh由 GitHub 账号 KarstenKreh 发布v0.6.2更新于 Nov 7, 2026

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

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

生成完整设计系统——OKLCH 配色、流式字号、间距、形状、图标与动效令牌,并提供可分享的 standby.design 链接与代码导出。

可以做什么
  • 生成配色、流式字号、形状、图标、间距与动效令牌,每次返回可分享的 standby.design/system 链接
  • 从 URL 或哈希解析已有设计系统,并给出各工具的编辑链接
  • 将完整令牌代码导出为 CSS 自定义属性、Tailwind v4 主题、W3C 设计令牌 JSON 或 LLM 简报
  • 列出可用于字号生成的 Fontshare 字体标识
  • 获取关于布局、交互、表单、状态、排版与颜色的通用设计规则
  • 获取在项目中安装或更新 standby.design 规则约束的步骤
适用场景
适合让助手从零搭建或扩展基于令牌的界面设计系统——品牌色、排版、间距、圆角、阴影、图标与动效——并返回用户可在线微调的链接;也适合需要把令牌导出为 CSS、Tailwind 或 DTCG JSON 的场景。
运行要求
可作为 mcp.standby.design 的远程端点使用,也可通过 stdio 运行 npm 包 standby-design-mcp。未声明认证、环境变量或请求头。服务器称其工具为纯函数、确定性且无网络访问。
安装前请注意
工具自称无副作用,但 update_project 会返回在项目中配置 lint 钩子、pre-commit、CI 与代理指令的步骤,应用前请先审阅这些改动。生成的设计系统保存在 standby.design 链接之后,请将链接视为可分享内容。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Standby Design Mcp,将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable,通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体,或 SourceWeft 对话中。智能体会读取该服务器的安装指南,先向你展示发布者、端点和登录方式,经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.KarstenKreh%2Fstandby-design-mcp/install.md,并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前,先告诉我它的发布者、端点和登录方式,等我确认。不要把 API 密钥写进命令或我会提交的文件;问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "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

来源:README.md,提交 0f387ba

工具

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.

输入参数urlmodeaccentsbrandHexbrandPinerrorPinthemeNamebgColorHexbrandInvertchromaScaleerrorInverterrorColorHex另有 1 个

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.

输入参数urlratiobaseSizebodyFontmonoFontscaleModeautoShrinkheadingFontmobileRatioheadingWeightmobileBaseSizelineHeightOverrides另有 3 个

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.

输入参数urlstyleglassBlurringStyleringWidthglassDepthringOffsetshadowTypeborderWidthshadowScaleborderRadiusringColorHex另有 11 个

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.

输入参数seturlscalestyleweightcornersbaseSizesnapTo4px

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.

输入参数urlmodesnapratiobaseRemcontainersfluidMaxVwfluidMinVwmultiplierproseMaxChbreakpointsaspectRatios另有 1 个

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.

输入参数urlenergypresetmaterial

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.

输入参数url必填

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.

输入参数url必填format必填sections

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.

无需输入参数。

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

无需输入参数。

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.

输入参数rulesscopedetailcategoryplatform

版本历史

5
  1. v0.6.2最新Nov 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

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度,依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价,也不表示服务器安全或当前可用:可连通性是带日期的检查结果,评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分