standby-design-mcp

standby.design

マルチツールハブ standby.design — デザイナーと開発者向けの小さなツールです。フレームワークもビルド工程も不要な、純粋な HTML/CSS/JS です。

AI エージェント向け 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

C:/Local Data/Repositories/SSH Keys/hetzner_ed25519 に SSH キーがあることを前提としています。

DNS（Namecheap）

standby.design と www.standby.design の A レコード → 46.225.131.97

---

カラーパレットジェネレーター（/color）

OKLCH 色空間を使用する、インタラクティブなクライアントサイドのパレットジェネレーターです。依存関係もビルド工程もありません。

機能

• Brand + Slated：フルパレット（Brand）と、彩度を 50% に抑えたバリエーション（Slated）を自動生成します
• 18 段階：Light Surfaces（25–100）、Core Palette（200–800）、Dark Surfaces（825–875）、High Contrast（925–975）を細かくグラデーションします
• 2 つのモード：
  • 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	Light Surfaces	背景、カード、浮き上がった要素（ライト）
200–800	Core Palette	ボタン、リンク、アクセント、テキスト
825–875	Dark Surfaces	背景、カード（ダークモード）
900–975	High Contrast	背景（ハイコントラストのダーク）

技術

• HTML + CSS + JavaScript のみ（依存関係ゼロ）
• OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB の変換
• sRGB 色域のクリッピングに二分探索を使用
• 自然な彩度分布のための放物線状の彩度エンベロープ