brandmd

brandmd

ウェブサイトのデザインシステムを抽出し、AI コーディングエージェントがブランドに沿った UI を生成するための DESIGN.md ファイルを作成します。

使用するタイミング

• ユーザーが「このウェブサイトのデザインに合わせて」や「[url]と同じスタイルを使って」と言ったとき
• ユーザーが既存のサイトを持っていて、新しいフロントエンドプロジェクトを始めるとき
• AI が生成するコンポーネント全体でデザインの一貫性を保ちたいとき
• URL から「デザイントークンを抽出して」や「デザインシステムを取得して」と依頼されたとき

実行方法

npx brandmd <url> -o DESIGN.md

最良の結果を得るには、デザイン要素が最も豊富なページ（通常はホームページ）を指定してください。このツールは、その単一ページの表示領域と遅延読み込みされたコンテンツから抽出します。

抽出される内容

出力は Google Stitch の DESIGN.md 形式に従います。セクション 1～5 は常に含まれ、セクション 6～7 はフラグに応じて含まれます。

1. ビジュアルテーマと雰囲気 - ムード、形状の表現、奥行き
2. カラーパレットと役割 - セマンティックな役割（背景、テキスト、アクセント、境界線）を持つ色
3. タイポグラフィのルール - プライマリフォント（役割を考慮：display > heading > body。mono／fallback／icon フォントは除外）、役割別のフォント内訳（見出し、ディスプレイ、本文、ボタン）、検出したすべてのフォントと使用頻度、サイズスケール、ウェイト、行の高さ、文字間隔
4. コンポーネントのスタイル - ボタン、カード、入力欄の角丸、色、シャドウ
5. レイアウトの原則 - 余白のスケール、ベースグリッド単位、境界線の角丸
6. ダークテーマの上書き（--dark を指定） - ダークモード用のパレットと雰囲気
7. CSS 以外のビジュアルアイデンティティ（--vision を指定） - イラストのスタイル、写真の雰囲気、コピーライティングのトーン、マイクロコピーのパターン。GEMINI_API_KEY が必要です（無料枠：aistudio.google.com/apikey）。

抽出後

1. 生成された DESIGN.md を読み、内容に問題がないことを確認します
2. 主なトークン（主要な色、フォント、余白のスケール）をユーザー向けに要約します
3. 以降の UI コード生成では、これらのトークンを使用します
4. CSS／Tailwind／styled-components を記述するときは、DESIGN.md の具体的な 16 進カラーコード、フォント名、余白の値を参照します

オプション

• npx brandmd <url> - DESIGN.md を標準出力に出力
• npx brandmd <url> -o DESIGN.md - DESIGN.md をファイルに出力
• npx brandmd <url> --dark - ダークモード用パレットも抽出（セクション 6）
• npx brandmd <url> --vision - Gemini を使ってイラスト／写真／トーン／マイクロコピーも抽出（セクション 7）。GEMINI_API_KEY 環境変数が必要です。
• npx brandmd <url> --css - DESIGN.md の代わりに CSS カスタムプロパティを出力
• npx brandmd <url> --tailwind - DESIGN.md の代わりに Tailwind v4 の @theme ブロックを出力
• npx brandmd <url> --html - HTML ブランドガイド（ビジュアル形式で共有可能）
• npx brandmd <url> --json - 生のトークンを JSON として出力（プログラムからの利用向け）
• 複数の URL を指定するとトークンをマージします：npx brandmd <url1> <url2> <url3>

制限事項

• サイト全体ではなく、単一のページから抽出します（複数 URL の指定ではトークンの使用頻度が統合されますが、ビジョン用のスクリーンショットは最初のページのみです）
• Figma のトークンやデザインツールのファイルは読み取れません
• 色の役割の割り当てはヒューリスティックです（使用頻度と輝度に基づきます）
• 公開アクセス可能な URL が必要です（認証が必要なページには対応しません）
• Cloudflare で保護されたサイトの場合、brandmd は JavaScript チャレンジが自動的に解決されるまで最大 20 秒待機します（調整するには --cf-wait-ms を指定）。チャレンジが解決されない場合、無意味なトークンを返すのではなく、明確なエラーを表示します。強固にブロックされたサイト（openai.com、perplexity.ai、discord.com など）はボット対策で保護されていると正しく判定され、回避しません。