standby-design-mcp

standby.design

standby.design 下的多工具中心——为设计师和开发者打造的小工具。没有框架，没有构建步骤，纯 HTML/CSS/JS。

面向 AI Agent 的 MCP 服务：https://standby.design/docs/mcp

结构

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

部署（Hetzner + Docker + nginx）

./deploy.sh

前提条件：SSH 密钥位于 C:/Local Data/Repositories/SSH Keys/hetzner_ed25519。

DNS（Namecheap）

为 standby.design 和 www.standby.design 设置 A 记录 → 46.225.131.97

---

调色板生成器（/color）

一个交互式的客户端调色板生成器，使用 OKLCH 色彩空间——无依赖，无构建步骤。

功能

• Brand + Slated：自动生成完整调色板（Brand）和色度降低 50% 的柔和版本（Slated）
• 18 个色阶：细致渐变，涵盖浅色表面（25–100）、核心调色板（200–800）、深色表面（825–875）和高对比度（925–975）
• 两种模式：
  • Balanced Midpoint — 500 = 感知中点（L=0.50），以色相的最亮点为中心对称分布
  • Exact Brand Match — 500 = 与输入颜色完全匹配，亮度和色度围绕该颜色均匀缩放
• 点击复制：点击即可复制单个 Hex 和 OKLCH 值
• 代码导出：可复制的现成 CSS 自定义属性（OKLCH + Hex 回退）
• 表面演示：实时预览浅色模式、深色模式和高对比度表面
• 灰色安全：中性色输入（例如 #757575）会生成纯净的灰色调色板，不会带有偏色

使用方法

1. 在浏览器中打开 index.html
2. 输入 Hex 颜色代码（可带或不带 #）
3. 选择模式（Balanced Midpoint / Exact Brand Match）
4. 生成调色板——完成

区域结构

色阶	区域	用途
25–100	浅色表面	背景、卡片、高层级表面（浅色）
200–800	核心调色板	按钮、链接、强调色、文本
825–875	深色表面	背景、卡片（深色模式）
900–975	高对比度	背景（高对比度深色）

技术

• 纯 HTML + CSS + JavaScript（零依赖）
• OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB 转换
• 用于 sRGB 色域裁剪的二分查找
• 用于自然饱和度分布的抛物线色度包络