ダブルクリックで英日反転
Applied Sciences · Design
A DESIGN.md-based design-transfer playbook
DesignMD (designmd.me, by Crowdlinker) scrapes any public URL and returns a 9-section Stitch-format DESIGN.md file for free. Committing that file next to CLAUDE.md steers AI agents away from generic "AI slop" and toward a real brand.
What DesignMD captures — and what it can't
- Strong: color tokens, radius scale, shadow recipe, spacing steps, Do's & Don'ts
- Missing: motion (Three.js orb), paid fonts (Waldenburg, PP NeueBit), a11y states
- Fundamentally out of scope: illustrations, brand voice, page-level layout patterns
- DESIGN.md is the skeleton of a design language, not the design itself
Transfer playbook (fixed flow)
- Pick 1–2 reference URLs → run `npx designmdme --website <url> --out DESIGN-<domain>.md`
- Commit to repo root; declare priority order in CLAUDE.md with `@DESIGN-<domain>.md` refs
- Build components one at a time; screenshot with Playwright → fix implementation, not the spec
- Treat spec as ground truth for hex/radius/spacing; override for paid fonts and Japanese typography
Critical watch-outs
- Paid fonts must be remapped: Waldenburg → Manrope/Geist/Inter Display (all OFL)
- Japanese body text needs line-height 1.7–1.9 and ~0.02em letter-spacing (spec assumes English)
- Contrast risk: secondary text #777169 on white may fall below WCAG AA 4.5:1 — put lint in CI
- Layout patterns (sidebar SaaS, marketing LP) are not in the 9 sections — extract a separate reference
Visual assets beyond the spec
- Icons: Phosphor (thin/regular) + Lucide for the ElevenLabs aesthetic; Lucide alone for business dashboards
- Illustrations: unDraw/Storyset (free); Recraft V4 for brand-consistent AI-generated SVG vectors
- Motion: fork the MIT-licensed ElevenLabs UI Orb (Three.js + React Three Fiber) rather than rolling your own
- Replace assets when brand stabilises; if you expect to replace in 3 months, go free/AI-generated now
→ DESIGN.md extracts tokens in seconds — use it as a branded guardrail for AI agents, then fill the gaps (fonts, motion, a11y, Japanese type) manually.
Applied Sciences · Design
DESIGN.md ベースのデザイン移植プレイブック
DesignMD（designmd.me、Crowdlinker製）は公開URLを渡すだけでStitchフォーマット（＝Googleが標準化したデザイントークン仕様）の9セクションDESIGN.mdを無料で生成する。このファイルをCLAUDE.mdの隣にコミットすると、AIエージェントの出力が「AIスラップ（紫グラデ・絵文字過多）」から実ブランドへ近づく。
DesignMDが取れるもの・取れないもの
- 強み：カラートークン・radius・シャドウレシピ・スペーシング・Do's and Don'ts
- 欠落：モーション（Three.js製Orb）・有償フォント（Waldenburg、PP NeueBit）・a11y（アクセシビリティ）状態
- 構造的に不可能：イラスト・ブランドボイス・ページレベルのレイアウトパターン
- DESIGN.mdはデザイン言語の「骨格」であってデザインそのものではない
移植フロー（固定手順）
- 参照URL1〜2本を選び `npx designmdme --website <url> --out DESIGN-<domain>.md` で生成
- リポジトリルートにコミット。CLAUDE.mdに `@DESIGN-<domain>.md` 参照と優先順位を明記
- コンポーネントを1つずつ実装 → Playwright でスクリーンショット比較 → 実装を修正（仕様は変えない）
- hex値・radius・スペーシングは仕様を正典として採用。有償フォントと日本語組版は別途上書き
重要な注意点
- 有償フォントは必ず無償代替へ：Waldenburg → Manrope / Geist / Inter Display（すべてOFLライセンス）
- 日本語本文はline-height 1.7〜1.9・letter-spacing 約0.02em（仕様は英語テキスト前提のため）
- コントラスト：セカンダリテキスト #777169 on white はWCAG AA基準4.5:1を割るリスク → CIでlintを実行
- レイアウトパターン（サイドバーSaaS・マーケティングLP）は9セクションに含まれない。用途別に別参照を抽出
仕様の外側にあるビジュアル資産
- アイコン：ElevenLabs風ならPhosphor（thin/regular）＋Lucideで補完。ビジネス系ダッシュボードはLucide単体で十分
- イラスト：unDraw / Storyset（無償）；ブランド統一ベクターはRecraft V4でAI生成
- モーション：ElevenLabs UI OrbコンポーネントはMITで公開済み（Three.js＋React Three Fiber）。自作より移植が速い
- 「3ヶ月後に差し替える見込みがあるか」で判断：差し替え前提なら無償・AI生成を使い捨て
→ DESIGN.mdでトークンを数秒で抽出し、AIエージェントへのブランドガイドレールとして使う。フォント・モーション・a11y・日本語組版の空白は手動で埋める。
Applied Sciences · Design
A DESIGN.md-based design-transfer playbook
DesignMD (designmd.me, by Crowdlinker) scrapes any public URL and returns a 9-section Stitch-format DESIGN.md file for free. Committing that file next to CLAUDE.md steers AI agents away from generic "AI slop" and toward a real brand.
What DesignMD captures — and what it can't
- Strong: color tokens, radius scale, shadow recipe, spacing steps, Do's & Don'ts
- Missing: motion (Three.js orb), paid fonts (Waldenburg, PP NeueBit), a11y states
- Fundamentally out of scope: illustrations, brand voice, page-level layout patterns
- DESIGN.md is the skeleton of a design language, not the design itself
Transfer playbook (fixed flow)
- Pick 1–2 reference URLs → run `npx designmdme --website <url> --out DESIGN-<domain>.md`
- Commit to repo root; declare priority order in CLAUDE.md with `@DESIGN-<domain>.md` refs
- Build components one at a time; screenshot with Playwright → fix implementation, not the spec
- Treat spec as ground truth for hex/radius/spacing; override for paid fonts and Japanese typography
Critical watch-outs
- Paid fonts must be remapped: Waldenburg → Manrope/Geist/Inter Display (all OFL)
- Japanese body text needs line-height 1.7–1.9 and ~0.02em letter-spacing (spec assumes English)
- Contrast risk: secondary text #777169 on white may fall below WCAG AA 4.5:1 — put lint in CI
- Layout patterns (sidebar SaaS, marketing LP) are not in the 9 sections — extract a separate reference
Visual assets beyond the spec
- Icons: Phosphor (thin/regular) + Lucide for the ElevenLabs aesthetic; Lucide alone for business dashboards
- Illustrations: unDraw/Storyset (free); Recraft V4 for brand-consistent AI-generated SVG vectors
- Motion: fork the MIT-licensed ElevenLabs UI Orb (Three.js + React Three Fiber) rather than rolling your own
- Replace assets when brand stabilises; if you expect to replace in 3 months, go free/AI-generated now
→ DESIGN.md extracts tokens in seconds — use it as a branded guardrail for AI agents, then fill the gaps (fonts, motion, a11y, Japanese type) manually.
Applied Sciences · Design
DESIGN.md ベースのデザイン移植プレイブック
DesignMD（designmd.me、Crowdlinker製）は公開URLを渡すだけでStitchフォーマット（＝Googleが標準化したデザイントークン仕様）の9セクションDESIGN.mdを無料で生成する。このファイルをCLAUDE.mdの隣にコミットすると、AIエージェントの出力が「AIスラップ（紫グラデ・絵文字過多）」から実ブランドへ近づく。
DesignMDが取れるもの・取れないもの
- 強み：カラートークン・radius・シャドウレシピ・スペーシング・Do's and Don'ts
- 欠落：モーション（Three.js製Orb）・有償フォント（Waldenburg、PP NeueBit）・a11y（アクセシビリティ）状態
- 構造的に不可能：イラスト・ブランドボイス・ページレベルのレイアウトパターン
- DESIGN.mdはデザイン言語の「骨格」であってデザインそのものではない
移植フロー（固定手順）
- 参照URL1〜2本を選び `npx designmdme --website <url> --out DESIGN-<domain>.md` で生成
- リポジトリルートにコミット。CLAUDE.mdに `@DESIGN-<domain>.md` 参照と優先順位を明記
- コンポーネントを1つずつ実装 → Playwright でスクリーンショット比較 → 実装を修正（仕様は変えない）
- hex値・radius・スペーシングは仕様を正典として採用。有償フォントと日本語組版は別途上書き
重要な注意点
- 有償フォントは必ず無償代替へ：Waldenburg → Manrope / Geist / Inter Display（すべてOFLライセンス）
- 日本語本文はline-height 1.7〜1.9・letter-spacing 約0.02em（仕様は英語テキスト前提のため）
- コントラスト：セカンダリテキスト #777169 on white はWCAG AA基準4.5:1を割るリスク → CIでlintを実行
- レイアウトパターン（サイドバーSaaS・マーケティングLP）は9セクションに含まれない。用途別に別参照を抽出
仕様の外側にあるビジュアル資産
- アイコン：ElevenLabs風ならPhosphor（thin/regular）＋Lucideで補完。ビジネス系ダッシュボードはLucide単体で十分
- イラスト：unDraw / Storyset（無償）；ブランド統一ベクターはRecraft V4でAI生成
- モーション：ElevenLabs UI OrbコンポーネントはMITで公開済み（Three.js＋React Three Fiber）。自作より移植が速い
- 「3ヶ月後に差し替える見込みがあるか」で判断：差し替え前提なら無償・AI生成を使い捨て
→ DESIGN.mdでトークンを数秒で抽出し、AIエージェントへのブランドガイドレールとして使う。フォント・モーション・a11y・日本語組版の空白は手動で埋める。
出典・参考 / Sources
- DesignMD
- DesignMD CLI
- Product Hunt — DesignMD 2
- Crowdlinker
- Crowdlinker X announcement
- Stitch DESIGN.md (Google Labs)
- VoltAgent awesome-design-md
- designmd.app — What is DESIGN.md
- banani.co — DESIGN.md guide
- ElevenLabs brand guide
- ElevenLabs UI (OSS Orb)
- ElevenLabs UI docs — Orb
- Recraft V4
- Recraft vs Midjourney for UI/UX
- Phosphor Icons
- Lucide
- unDraw
- Storyset
- Rive
- WCAG 2.1 AA Contrast