niki-til

DESIGN.md ベースのデザイン移植プレイブック

DESIGN-elevenlabs-io.md を雑に生成してみたあと、これを SCAS や次のコーポレートサイトに移植する前提で立ち止まり、DesignMD まわりのエコシステムと、生成された spec で「足りない部分」を 2026-05 時点で整理した記録。

1. designmd.me という製品の正体

1.1 何者か

DesignMD は「任意の Web サイトの URL を貼ると DESIGN.md 形式のデザインシステム仕様書を返す」AI サービス。Vercel ホスティングの SPA で、ランディングは https://designmd.me/ 、CLI 解説は https://designmd.me/cli にある（環境によっては Vercel の security checkpoint に当たって直接 fetch できない）。Product Hunt の listing（https://www.producthunt.com/products/designmd-2 ）では maker が Aditya Raj、タグラインは "Turn any website into an AI-ready design system"、価格は Free と明記。

運営は Crowdlinker（トロント拠点の digital product / venture studio、https://www.crowdlinker.com ）。同社の X アカウント https://x.com/crowdlinker/status/2042677716940452129 で "We just shipped DesignMD. Paste any website URL → get a complete DESIGN.md file in seconds. Color palette, typography, design tokens — extracted by AI and ready for your coding agents. Free. No sign-up." と告知している。つまり Crowdlinker が社外配布する OSS / 無料 SaaS であり、Aditya Raj が主担当 maker、というのが整合的な読み。

1.2 解いている課題

「Claude Code や Cursor が生成する UI が AI slop（紫グラデ・絵文字過多・Inter ベタ貼り）になる」問題に対し、参照したい実在サイトの design tokens を一発抽出して CLAUDE.md / .cursor/rules の隣に置く ことで、agent の出力をそのブランドに寄せる。Google が Stitch で標準化した DESIGN.md フォーマット（https://github.com/google-labs-code/design.md ）に乗っているため、生成物は素の Claude / Cursor / Cline でそのまま読める。

1.3 出力形式

VoltAgent の awesome-design-md（https://github.com/VoltAgent/awesome-design-md ）と designmd.app の解説（https://designmd.app/what-is-design-md/ ）が一致しているとおり、Stitch DESIGN.md の標準セクションは 8〜9 個:

  1. Visual Theme & Atmosphere
  2. Color Palette & Roles
  3. Typography Rules
  4. Component Stylings
  5. Layout Principles
  6. Depth & Elevation
  7. Do's and Don'ts
  8. Responsive Behavior
  9. Agent Prompt Guide

DesignMD の出力もこの構造に従っており、生成された DESIGN-elevenlabs-io.md も 9 セクション構成になっている。

1.4 価格・クォータ

Crowdlinker の告知と Product Hunt の両方で Free / No sign-up と明言されている（2026-05 時点）。CLI 側でログインが必要なのは「クォータ／rate limit を user 単位で管理するため」と読むのが自然で、無料利用枠の中で叩く前提。商用シビアな現場では、Vercel 側の rate limit に当たる前提でローカルにキャッシュしておくのが安全。

1.5 プライバシー上の含意

2. designmd.me/cli の使い方

2.1 注意：直接確認できなかった部分

https://designmd.me/cli は Vercel の bot 防御で WebFetch がブロックされ、本タスクでは原文を取得できなかった。以下は同等の DESIGN.md ツール群（@google/design.md、design-extract、designmd.ai など）と Crowdlinker の告知から推測される標準的な使い方であり、実際のフラグ名・パッケージ名は公式ページで確認すること。タスク指示にあった designmdme --website <url> という形は、Crowdlinker が独自に提供している wrapper 名と推測する。

2.2 想定される基本フロー

# 1. インストール（npx で都度起動が標準）
npx designmdme@latest --help

# 2. ログイン（クォータ／API key 紐付け）
npx designmdme login

# 3. 生成
npx designmdme --website https://elevenlabs.io --out DESIGN-elevenlabs-io.md

--website は対象 URL、--out は出力先。出力 markdown は前述の 9 セクション構成で、そのまま CLAUDE.md の隣に置くか @DESIGN-<domain>.md 参照で agent に渡す。

2.3 AI ツールへの組み込み

banani.co の解説（https://www.banani.co/blog/design-md-guide ）と designmd.app（https://designmd.app/what-is-design-md/ ）に書かれている運用が標準:

2.4 トークン／クォータ管理

3. 再現度の監査：DESIGN-elevenlabs-io.md で何が取れて何が落ちたか

3.1 取れているもの（spec の強い部分）

DESIGN-elevenlabs-io.md を実物 https://elevenlabs.io と突き合わせると、以下は妥当:

3.2 落ちているもの・誤りやすいもの

3.3 DESIGN.md が原理的に渡せないもの

| カテゴリ | 渡せない理由 | |---|---| | 有料フォント本体 | ライセンス問題で URL すら埋め込まない | | イラスト / 写真 | バイナリ資産、生成 AI も spec ではトリガできない | | モーション実装 | Three.js / Rive / Lottie のコードは markdown 外 | | 実 component library | 状態遷移、props 設計、a11y attribute は別物 | | ブランドボイス | コピーのリズム・語彙統制は文字数で表せない | | 撮影写真のカラーグレーディング | LUT・露出方針はテキスト化されない |

つまり DESIGN.md は デザイン言語の骨格であって、デザインそのものではない。

4. 他サイトへの移植プレイブック

4.1 SCAS と Hyphen Tech corporate サイトへの当て方

ステップは固定:

  1. ターゲット URL を決める。SCAS なら参照したい既存サイト（例: https://stripe.com/jp/atlas や https://linear.app など、SCAS の Tone に近いもの）を 1〜2 個選ぶ
  2. npx designmdme --website <ref-url> --out DESIGN-<domain>.md で生成
  3. リポジトリ root（Hyphen-Tech-Org/scas 内）にコミット。複数参照する場合は DESIGN-<domain>.md を複数置いて、CLAUDE.md で優先順位を明示
  4. CLAUDE.md 末尾に以下のような節を足す: 
    ## Design system
- 第一参照: `@DESIGN-<primary>.md`
- 補助参照: `@DESIGN-<secondary>.md`
- これらと矛盾する Tailwind / shadcn デフォルトは無視。色・radius・shadow は spec を厳守
  5. 実 component（Button, Card, Input, Header）を 1 枚ずつ作って Playwright MCP で screenshot → spec とずれていれば spec ではなく 実装を直す（spec はあくまで土台）
  6. 数 component 揃ったら .storybook か _components/ で内製のカタログ化

4.2 spec を ground truth にする / 外す判断

| 局面 | spec を信用する | spec を外す | |---|---|---| | カラートークンの hex | ◎ そのまま採用 | ブランドガイドが既存にあるなら上書き | | radius / spacing scale | ◎ 採用 | サイドバー多用の SaaS UI で 16px card が過剰なら詰める | | タイポ family | △ 商用フォントは置換必須 | 必ず free 代替へ remap | | 日本語タイポ | × spec は英文前提 | Noto Sans JP / IBM Plex Sans JP / LINE Seed JP を別途決める | | Do's and Don'ts | ◎ AI slop 抑止に有効 | アクセシビリティ要件で衝突したら a11y 優先 | | component 細部 | △ 出発点 | 実プロダクトの state machine で上書き |

4.3 watch-outs

5. 画像・イラスト・アイコンの調達

DESIGN.md は視覚アセットを生成しない。以下は 2026-05 時点で生きている選択肢。

5.1 アイコン

| ライブラリ | 個数 | ライセンス | ElevenLabs 系との相性 | |---|---|---|---| | Lucide | 1,500+ | ISC | ◎ 線が細く中立、Inter / Geist と好相性。週 500 万 DL の事実上のデファクト | | Phosphor | 7,700+ / 6 weight | MIT | ◎ thin / regular / fill / duotone の weight 切り替えが ElevenLabs の light weight 美学に最適 | | Tabler | 5,500+ | MIT | ○ 24×24 grid、SCAS のような業務 UI 向き | | Heroicons | 292 | MIT | △ Tailwind 公式、outline / solid 2 種のみ。数が足りない場面が出る | | Radix Icons | 333 / 15px | MIT | △ 小サイズ最適、SaaS 内部 UI 専用には光る |

推奨: ElevenLabs feel を狙うなら Phosphor の thin / regular をベースに、不足分を Lucide で埋める。SCAS のような業務系ダッシュボードなら Lucide 単体で十分。

5.2 イラスト

| サービス | ライセンス | 用途 | |---|---|---| | unDraw | MIT、色変更可 | SaaS landing の hero / empty state。最速 | | Storyset | Free + attribution 必須 | キャラ系、アニメーション付き | | Open Peeps | CC0 | 手描き、サイトに人間味を入れたい時 | | Humaaans | CC0 | mix-and-match の人物、コーポレートの multi-cultural 表現 | | Blush | Free tier あり、商用可 | 上記アーティストの hub。バリエ揃え | | Lummi | Free + paid 混在 | 写真寄りのアート素材 |

AI 生成側:

ワークフロー: Midjourney で方向決め → Recraft に style として食わせ vector で量産 → Figma / Illustrator で微調整 → SVG として commit。

5.3 写真

5.4 モーション / voice orb（ElevenLabs 固有）

5.5 ブランド固有資産はいつ作るか

| 状況 | 取るべき選択 | コスト / 期間 | |---|---|---| | 立ち上げ最初の 1〜2 ヶ月 | free 素材 + AI 生成 | 0 円 / 即日 | | MVP 検証中、ブランド未確定 | Recraft で量産、後で捨てる前提 | $30/月 + 1 週間 | | 上場・大手契約・採用ブランディング | デザイナー commission、custom illustration set | 50〜200 万円 / 4〜8 週間 | | voice / agent 系プロダクト | ElevenLabs UI Orb を fork、shader を独自 tune | エンジニア 2〜5 日 | | 撮影写真が必要 | フォトグラファー commission | 15〜100 万円 / 半日〜1 日 |

判断軸は 「3 ヶ月後にそのアセットを差し替える可能性」。差し替える前提なら AI 生成 / free 素材、固定する前提なら commission。

6. まとめ

参考・引用元

2026-05-18