design-context

デザインコンテキスト

すべてのデザイン作業の基盤となるスキルです。他のすべてのデザインスキルは、まずこのコンテキストを確認します。このスキルでは、ブランドアイデンティティ、カラースキーム、タイポグラフィ、デザインの好みを収集、保存、提供し、生成されるすべてのビジュアルに一貫性を持たせ、ブランドに沿ったものにします。

コンテキストは、セッションをまたいで再利用できるように .agents/design-context.md に保存されます。

---

ステップ 1：既存のコンテキストを確認する

新しい情報を収集する前に、既存のデザインコンテキストを確認します。

自動検出の対象

次の優先順位に従って、コードベース内の既存のデザイントークンをスキャンします。

1. .agents/design-context.md -- 以前に保存されたコンテキスト（最優先）
2. tailwind.config.js / tailwind.config.ts -- theme.extend.colors、fontFamily、spacing（Tailwind v3）
3. CSS の @theme ブロック -- Tailwind v4 では、CSS 内の @theme { --color-primary: ...; --font-sans: ...; } でトークンを定義します
4. CSS カスタムプロパティ -- :root または globals.css 内の --color-primary、--font-heading など。shadcn/ui プロジェクトでは、--primary、--secondary、--accent、--muted、--destructive、--radius が、HSL 成分のみ（222 47% 11%）または oklch(...) として使われることが多く、保存時に 16 進数に変換します
5. package.json -- プロジェクト名、説明
6. デザイントークンファイル -- tokens.json（W3C DTCG の $value/$type）、theme.js、design-system.*
7. フォントの読み込み -- next/font のインポート、Google Fonts の <link> タグ、@font-face ルール
8. 既存のコンポーネント -- 繰り返し使われている色の値、フォントスタック、スペーシングのパターンをスキャンします
9. manifest.json / site.webmanifest -- theme_color、name
10. ブランドアセット -- logo.svg、public/、assets/、brand/ フォルダー、ファビコン
11. Figma 変数 -- Figma MCP が利用可能な場合は、接続されたファイルから変数を取得します

自動検出ロジック

Tailwind の設定をスキャンするときは、次を抽出します。

colors.primary -> Brand primary color
colors.secondary -> Brand secondary color
colors.accent -> Accent color
fontFamily.sans -> Body font
fontFamily.heading or fontFamily.display -> Heading font

CSS 変数をスキャンするときは、次のように対応付けます。

--color-primary, --primary -> Primary color
--color-secondary, --secondary -> Secondary color
--color-accent, --accent -> Accent color
--font-heading, --font-display -> Heading font
--font-body, --font-sans -> Body font
--radius, --border-radius -> Border radius preference

コンテキストが見つかった場合は、続行する前に確認のためユーザーに提示します。

---

ステップ 2：ブランドアイデンティティを収集する

既存のコンテキストが見つからない場合は、会話形式で次の情報を収集します。チェックリストをそのまま提示するのではなく、自然なまとまりで質問してください。

ブランドの中核

項目	説明	例
ブランド名	正式名称	"Acme Studio"
タグライン	短いブランドのタグライン	"制限のないデザイン"
ミッション	1 文で表すミッション	"プロ仕様のツールでクリエイターを支援する"
業界	主な業界／分野	"SaaS / クリエイティブツール"

カラースキーム

最低 4 種類のカラーグループを収集します。16 進数コードで保存します。

役割	用途	例
プライマリ	ブランドのメインカラー、CTA、主要な UI	#2563EB
プライマリライト	ホバー状態、背景	#3B82F6
プライマリダーク	アクティブ状態、明るい背景上のテキスト	#1D4ED8
セカンダリ	補助色、二次アクション	#7C3AED
アクセント	強調、バッジ、通知	#F59E0B
ニュートラル 50	最も明るい背景	#FAFAFA
ニュートラル 100	カードの背景	#F5F5F5
ニュートラル 200	ボーダー、区切り線	#E5E5E5
ニュートラル 500	プレースホルダーテキスト	#737373
ニュートラル 800	本文テキスト	#262626
ニュートラル 900	見出し	#171717
成功	成功状態	#10B981
警告	注意が必要な状態	#F59E0B
エラー	エラー状態	#EF4444

タイポグラフィ

項目	説明	例
見出しフォント	ディスプレイ／見出し書体	"Inter, sans-serif"
本文フォント	本文用書体	"Inter, sans-serif"
等幅フォント	コード／技術文書用書体	"JetBrains Mono, monospace"
基本サイズ	ルートフォントサイズ	16px
スケール比	文字サイズの拡大率	1.25（長三度）
見出しの太さ	見出しのデフォルトの太さ	700
本文の太さ	本文のデフォルトの太さ	400

文字サイズのスケールの参考

デフォルトのスケール（Tailwind の調整済みサイズ、基本サイズ 16px。おおよそ 1.25 の比率ですが、厳密ではありません）。正確なモジュラースケールを希望する場合は、代わりに typography スキルで計算します。

xs:   12px / 0.75rem
sm:   14px / 0.875rem
base: 16px / 1rem
lg:   18px / 1.125rem
xl:   20px / 1.25rem
2xl:  24px / 1.5rem
3xl:  30px / 1.875rem
4xl:  36px / 2.25rem
5xl:  48px / 3rem
6xl:  60px / 3.75rem
7xl:  72px / 4.5rem

デザインスタイル

次の典型例から、主なスタイルを特定します。

スタイル	特徴
ミニマル	ゆとりのある余白、控えめな配色、すっきりとした線、繊細なシャドウ
大胆	彩度の高い色、大きなタイポグラフィ、強いコントラスト、幾何学模様
遊び心のあるスタイル	明るい色、丸みのある角、イラスト、カジュアルなトーン
コーポレート	構造化されたグリッド、青／グレーの配色、プロフェッショナルな画像、フォーマル
ラグジュアリー	暗い背景、メタリックなアクセント、セリフ体、細部へのこだわり
レトロ	ヴィンテージ調の配色、網点テクスチャ、セリフ体／スラブセリフ体、暖色系
ブルータリスト	生々しい美学、強いコントラスト、等幅フォント、型破りなレイアウト
オーガニック	アースカラー、自然なテクスチャ、流れるような形、温かみのあるニュートラルカラー

対象者とトーン

項目	説明	例
主な対象者	これらのデザインを見る人	"テクノロジーに詳しい25～40歳のプロフェッショナル"
美的嗜好	対象者の心に響くもの	"洗練されていて、モダンで、データに基づいている"
トーン	コミュニケーションのスタイル	"プロフェッショナルでありながら親しみやすい"
フォーマルさ	1～5の尺度	3（バランス型）

ブランドマーク

項目	説明	例
ロゴの説明	ロゴの見た目を説明します	"ブランドカラーの青で描かれた幾何学的な「A」マーク"
ロゴの使用方法	使用場所や使用方法	"左上、最小高さ32px"
アイコンのスタイル	推奨するアイコンのスタイル	"アウトライン、2pxの線幅、丸い線端"
ロゴファイル	実際のロゴファイルへのパス	public/logo.svg, brand/logo-white.png
参考画像	ユーザーが好む製品写真や過去のデザイン	assets/product-hero.png

説明だけでなく、ファイルパスを記録してください。画像生成スキルでは、これらのファイルを --image 参照として渡すことで、テキストによる説明よりも忠実にロゴや製品を再現できます。

ブランドルール

項目	説明	例
必ず守ること	妥協できないルール	"ロゴは白またはブランドカラーの背景に配置する"、"見出しは文頭のみ大文字にする"
避けること	避けるべきもの	"ロゴにグラデーションを使わない"、"握手のストックフォトを使わない"
トーンのサンプル	実際の見出しやキャッチフレーズを2～3点	"より速くリリース。もっとよく眠る。"

プラットフォームの優先度

プラットフォーム	優先度	備考
Web	高／中／低	レスポンシブ、最新のブラウザー
モバイル	高／中／低	タッチ操作に適した設計、安全領域
印刷	高／中／低	CMYKへの配慮
ソーシャル	高／中／低	プラットフォーム固有のサイズ

---

ステップ 3：コンテキストを保存する

次のテンプレートを使用して、収集したコンテキストを .agents/design-context.md に保存します。

# Design Context

## Brand Identity
- **Name:** [Brand Name]
- **Tagline:** [Tagline]
- **Mission:** [Mission]
- **Industry:** [Industry]

## Color System
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #XXXXXX | CTAs, key elements |
| Primary Light | #XXXXXX | Hover, backgrounds |
| Primary Dark | #XXXXXX | Active, dark text |
| Secondary | #XXXXXX | Supporting elements |
| Accent | #XXXXXX | Highlights, badges |
| Neutral 50 | #XXXXXX | Light backgrounds |
| Neutral 100 | #XXXXXX | Card backgrounds |
| Neutral 200 | #XXXXXX | Borders |
| Neutral 500 | #XXXXXX | Muted text |
| Neutral 800 | #XXXXXX | Body text |
| Neutral 900 | #XXXXXX | Headings |
| Success | #XXXXXX | Positive |
| Warning | #XXXXXX | Caution |
| Error | #XXXXXX | Error |

## Typography
- **Heading Font:** [Font stack]
- **Body Font:** [Font stack]
- **Mono Font:** [Font stack]
- **Base Size:** [size]
- **Scale Ratio:** [ratio]
- **Heading Weight:** [weight]
- **Body Weight:** [weight]

## Design Style
- **Primary Style:** [Style archetype]
- **Border Radius:** [value]
- **Shadow Style:** [subtle/medium/dramatic/none]
- **Spacing System:** [4px/8px base grid]

## Audience
- **Primary:** [Description]
- **Aesthetic:** [Preferences]
- **Tone:** [Tone description]

## Brand Marks
- **Logo:** [Description]
- **Logo Files:** [paths]
- **Reference Images:** [paths]
- **Icon Style:** [Description]

## Brand Rules
- **Always:** [rules]
- **Never:** [rules]
- **Voice samples:** [examples]

## Platform Priority
- Web: [priority]
- Mobile: [priority]
- Social: [priority]
- Print: [priority]

保存前の検証

パレットを記述する前に確認し、失敗があればユーザーに伝えてください（ブランドカラーを黙って変更せず、最も近い適合色を提案します）。

• Neutral 800の本文テキストとNeutral 50、および白とのコントラスト比：4.5:1以上
• ボタンの背景にPrimaryを使用し、白いテキストを載せた場合：4.5:1以上（満たさない場合は、テキストを載せるボタンにPrimary Darkを使用します）
• 白地にPrimaryをリンクテキストとして使用した場合：4.5:1以上
• 白地にNeutral 500のプレースホルダー／控えめなテキストを使用する場合：意味を伝えるテキストであれば4.5:1以上
• 境界線とフォーカスリング（Neutral 200は装飾用途のみ。フォーカスリングは背景とのコントラスト比が3:1以上必要）

目視で推測せず、同梱のチェッカーを実行してください（<design-context> はこのスキルのディレクトリです）。

python <design-context>/scripts/contrast.py --context .agents/design-context.md   # all pairings above
python <design-context>/scripts/contrast.py "#737373" "#ffffff"                     # any single pair

失敗が1つでもあると終了コード1で終了し、それぞれについて最も近い適合色（色相と彩度は同じで、明度を調整した色）を提案します。他のスキルでも、任意の前景色と背景色の組み合わせに対して同じように使用できます。

ファイルの先頭に Last updated: YYYY-MM-DD の行と検出元（例：「tailwind.config.ts から」）を追加してください。これにより、後のセッションで情報の鮮度が分かります。

---

ステップ 4：ほかのスキルでコンテキストを使用する

ほかのデザインスキルが起動した場合は、必ず次の手順に従います。

1. 最初に .agents/design-context.md を読みます
2. カラーシステムを適用し、任意の色は使用しません
3. 指定されたタイポグラフィを使用し、必要に応じて <link> タグで Google Fonts を読み込みます
4. デザインスタイルのアーキタイプに合わせます
5. トーンと対象ユーザーの好みを尊重します

ほかのスキル向けのコンテキストスニペット

ほかのスキルでは、ワークフローの冒頭に次の確認を含めます。

Before generating any visual:
1. Read .agents/design-context.md
2. Extract: primary color, secondary color, accent, heading font, body font, style archetype
3. If no context file exists, ask the user to run the design-context skill first,
   or use sensible defaults and note that output may not be on-brand

---

ステップ 5：コンテキストの更新

ユーザーがコンテキストの更新を希望する場合は、次の手順に従います。

1. 既存の .agents/design-context.md を読みます
2. 変更したい内容を尋ねます
3. 変更するフィールドだけを更新します
4. 変更内容を確認します
5. 更新したファイルを保存します

単一のフィールドを変更するために、ファイル全体を上書きしてはいけません。

---

デフォルトのフォールバック

コンテキストが設定されておらず、それでもユーザーが作業を進めたい場合は、次のデフォルトを使用します。

Primary: #2563EB (blue-600)
Secondary: #7C3AED (violet-600)
Accent: #F59E0B (amber-500)
Neutral: Tailwind gray scale
Heading Font: Inter
Body Font: Inter
Success: #10B981 (fills/icons) / #047857 (text)
Warning: #F59E0B (fills/icons) / #B45309 (text)
Error:   #EF4444 (fills/icons) / #B91C1C (text)
Style: Minimal
Tone: Professional

明るいセマンティックカラーのシェードは、白地にテキストとして使用するとコントラスト比 4.5:1 を満たしません（2.5:1、2.2:1、3.8:1）。背景、濃い色のテキストを使うバッジ、アイコンには明るいシェードを使用し、テキストには濃いシェードを使用してください。

出力では、デフォルトを使用したことを必ず伝え、適切なデザインコンテキストを設定するよう勧めてください。

注：Inter と blue-600 の組み合わせは、最もよくある「AI 生成風」の見た目です。ポスター、ソーシャルグラフィック、ランディングページなど、表現力が求められるものにデフォルトを使用する場合は、フォールバックする前に「好みに合う色、フォント、またはサイトはありますか？」と一つだけ簡単に質問してください。