design-system

デザインシステム＋ブランドブックの生成

Claude に参考資料（サイト URL、スクリーンショット、既存のブランドアセット）を渡すと、そのブランドに合わせた 2 つの成果物が生成されます。

1. design-system.html — 色、タイポグラフィ、原則、コンポーネント、アイコン、ワードマークをまとめた、スクロール可能なリファレンスページです。
2. brand-book-a4.html → brand-book-a4.pdf — ブランドの要点を共有しやすい 1 枚のポスターにまとめた、印刷対応の A4 縦向きページです。

どちらの出力も自己完結型の HTML です（Google Fonts CDN ＋ インライン CSS ＋ インライン SVG、ビルド工程なし）。PDF はヘッドレス Edge/Chrome でレンダリングします。

このスキルは、フォント、色、テーマについて独自の見解を持ちません。 すべてユーザーの参考資料に基づきます。参考資料がない場合は、創作せずに提供を求めてください。

---

ワークフロー

1. 参考資料を取得します。 URL、スクリーンショット、既存のサイト、またはブランドの説明を受け取ります。ユーザーからまだ提供されていない場合は、依頼してください。
2. 抽出します。 URL の場合は WebFetch で取得し、HTML/CSS を調べます。スクリーンショットの場合は Read で読み取り、視覚的に色やフォントを特定します。次の情報を抜き出します。
   • HEX カラー（プライマリ、セカンダリ、ブランドが実際に使用するアクセントカラー）
   • フォント（<link> タグ、CSS の font-family 宣言、または視覚的な識別を確認）
   • タグライン／バリュープロポジション
   • 文書化されている原則
   • ロゴ／マーク（参考資料にある場合はインライン SVG として取得）
   • テーマの方向性（ライト／ダーク／使用されているサーフェス）
3. 抽出内容を確認します。 見つかった情報を短く列挙して確認します。不足分のみを尋ねてください。
4. 両方のファイルを生成します。 design/ フォルダーに作成します。
5. PDF をレンダリングします。 ヘッドレス Edge/Chrome を使用します。
6. ユーザーに提示します。 PDF と design-system.html を送ります。
7. フィードバックを反映します。

---

依頼する情報（参考資料から抽出できない場合のみ）

• ブランド名 — 単一ブランドか、親ブランド＋製品＋スタジオなどのブランド群か
• タグライン — 短い一文
• 原則 — デザインルール 4～6 項目（ブランドが公開していない場合は、創作せずセクションを省略）
• チームまたは製品群（任意）— 色と役割をそれぞれ指定した 4～8 項目
• 参考資料から確認できない色やフォント

ブランドの詳細を創作してはいけません。 色、フォント、名称、タグライン、ロゴ、原則は、すべてユーザーまたは参考資料から得てください。根拠となる資料がないセクションは省略し、内容をでっち上げて補ってはいけません。

ロゴを描き直してはいけません。 参考資料にある正確な SVG を使用してください。ロゴがラスター画像の場合は、SVG の提供をユーザーに依頼するか、プレースホルダーを残してその旨を注記してください。

---

出力 1：design-system.html（スクロール可能なリファレンスページ）

セクションは次の順序にします（根拠となる資料がない項目は省略します）。

1. ヘッダー — ブランドロックアップ＋タグライン＋バージョン／日付
2. カラー階層 — ブランドが実際に使用するプライマリ、セカンダリ、ターシャリカラー。HEX 値と用途の注記を添えます
3. 拡張パレット — その他のブランドカラー（ステータス、カテゴリなど）
4. タイポグラフィ — ブランドが実際に使用するフォントによる見出し、本文、等幅のサンプルとウェイトの段階
5. 原則 — ブランドが文書化している内容
6. コンポーネント — ブランドの表現に合わせたボタン、カード、バッジ
7. アイコン — ブランドが使用するアイコンのスタイル（インライン SVG、ピクセルアート、線画、塗りつぶしなど）
8. ワードマーク／ロックアップ — ブランドのマークとワードマークを基にした、2～3 種類の名称表現
9. フッター — ファイルパス、バージョン、相互参照に関する注記

ブランドのサーフェス（ライトかダークか）、角丸、境界線のスタイル、文字の階層に合わせます。ブランドが丸みのある柔らかなデザインなら、既定でシャープなデザインにしてはいけません。ブランドがマキシマリストなら、ミニマルにしてはいけません。

---

出力 2：brand-book-a4.html → brand-book-a4.pdf

A4 縦向きの 1 ページ（210mm × 297mm）に、ひと目でわかるブランドの要点をまとめます。

必須の印刷用 CSS

@page { size: A4; margin: 0; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page { width: 210mm; height: 297mm; padding: 18mm 16mm 14mm; }

レイアウト（上から下へ、A4 1ページ）

1. ヘッダー — 左側にブランドロゴ、右側にバージョンとタグライン
2. カラー階層 — ブランドで実際に使われている色を使った3つのスウォッチタイル（プライマリー／セカンダリー／ターシャリー）
3. 中央の2カラム — タイポグラフィカード（ブランドのフォント）＋原則カード（ブランドが明示している原則）
4. チーム／製品の行（任意） — ブランドに製品ファミリーがある場合は、小さなタイルを6つ
5. ワードマーク・ロックアップ — 名前の表記例を示す3つのタイル
6. フッター — ファイルパス＋相互参照の注記

PDF へのレンダリング

Windows（Edge）：

"/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file:///absolute/path/to/brand-book-a4.html"

macOS（Chrome）：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

Linux（Chromium）：

chromium --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

---

ワードマークのパターン

用意できる3種類のロックアップスタイルです（ブランドのトーンに合わせて調整してください）。

1. マーク＋ワードマーク — ブランド名の横にアイコンを配置します。ウェイトと字間は、ブランド独自のワードマークに合わせます。
2. ウェイトを分けたロックアップ — PART1PART2 の片方を太く、もう片方を細くします。傘下の企業やグループ名に適しています。
3. アクセントロックアップ — PART1PART2 の片方をブランドのプライマリーカラーで彩ります。スタジオやサブブランドに適しています。

ブランドに合ったロックアップのバリエーションだけを含めてください。1語のブランド名に、ウェイトを分けた表記は必要ありません。

---

スケルトンテンプレート

構造のひな形とプレースホルダートークン（{{PRIMARY}}、{{DISPLAY_FONT}} など）は、examples/template.html を参照してください。ファイルをコピーし、トークンを抽出した値に置き換えてから、ブランドに合わせてセクションを追加または削除してください。

---

ルール

• 質問する前に抽出してください。 参照資料を使って、可能な項目をあらかじめ埋めてください。
• ブランドの詳細を決して捏造しないでください。 架空の色、フォント、名前、タグライン、原則、ロゴは使わないでください。
• ロゴを描き直さないでください。 ユーザーが提供した正確なSVGを使用してください。
• 情報源を確認できないセクションは削除してください。 架空の情報で埋めるより、セクションを省略するほうが適切です。
• スタイルを押し付けず、ブランドに合わせてください。 テンプレートは構造のみを定めます。ビジュアル表現は参照資料から導き出してください。
• A4 1ページに収めてください。 内容がはみ出す場合は、余白を詰めるか、セクションを削除してください。
• HTMLを自己完結させてください。 Google Fonts CDN＋インラインCSS＋インラインSVGを使用します。ビルド工程は不要です。
• PDFをレンダリングしてください。 HTMLを渡すだけで終わらせず、ヘッドレスのEdge／Chromeで仕上げてください。