design-system-generator

デザインシステムジェネレーター

このスキルの仕組み

ビジネスのコンテキスト（名称、業界、ブランドの個性、既存の色やフォント、参考にする対象）を受け取り、9 セクション（3 言語対応サイトでは 10 セクション）からなる完全な DESIGN.md ファイルを生成します。出力は、ビルドフェーズで website-rebuild、local-business-rebuild、azerbaijan-website-build パイプラインに取り込まれ、ビジュアル実装全体の唯一の信頼できる情報源として使用されます。

DESIGN.md 形式は、機械で処理できるように構成されています。値はすべて明示的（16 進コード、ピクセル値、フォントの太さ）なので、後続のエージェントは解釈や推測をせずに、仕様を CSS/Tailwind に直接変換できます。

入力要件

生成を始める前に、以下の情報を集めます。

入力	必須	説明
ビジネス名	はい	テーマの説明とエージェントのプロンプト例で使用します
業界	はい	美的方向性、色彩心理、コンポーネントのパターンを決定します
ブランドの個性を表すキーワード	はい	形容詞を 3～5 個（例：高級感、親しみやすさ、大胆さ、ミニマル、工業的、温かみ）
既存のブランドカラー	いいえ	ロゴやブランド概要から抽出した 16 進値です。提供された場合は、これを基にパレット全体を導き出します。
既存のフォント	いいえ	ブランド概要に記載されたフォントファミリーです。使用する前に、禁止リストに含まれていないことを確認します。
美的インスピレーションの対象	いいえ	00-design-references/references/by-aesthetic/ 内の参考ファイルを指定できます
多言語対応要件	いいえ	3 言語（AZ/RU/EN）対応の場合、セクション 10 の拡張が適用されます

任意の入力が不足している場合は、業界と個性を表すキーワードから妥当な既定値を導き出します。結果が曖昧になる場合を除き、任意項目をユーザーに入力するよう求めないでください。

生成プロセス

ステップ 1：美的方向性を選ぶ

00-design-references/design-md-index.md を読み、美的方向性や業界別に整理された参考 DESIGN.md ファイルの一覧を確認します。対象ビジネスの業界と個性を表すキーワードに合う参考ファイルを 1～2 個選びます。構成上の参考としてのみ使用するため、それらのファイルを読み、値はコピーしないでください。詳細度とトーンを把握したうえで、このビジネスに合わせた独自の値を作成することが目的です。

適切な参考ファイルがない場合は、個性を表すキーワードを主な指針として、基本原則に基づいて進めます。

ステップ 2：セクション 1 — ビジュアルテーマと雰囲気

デザインのムード、理念、主な特徴を説明する 2～3 段落の文章を作成します。テンプレートの穴埋めではなく、アートディレクターのブリーフのような文章にしてください。具体的で、明確な見解を示してください。

文章の後に、主な特徴を 6～8 個、箇条書きで記載します。形式の例：

## 1. Visual Theme & Atmosphere

[2-3 paragraphs of narrative prose describing the mood, philosophy, and design direction]

**Key Characteristics:**
- [Characteristic 1]
- [Characteristic 2]
- ...

すべての記述をビジネスのコンテキストに基づかせてください。「すっきりしていてモダン」では一般的すぎます。「エンジニアリングの厳密さと地域に根差した親しみやすさを兼ね備えて建築する建設会社を反映し、臨床的な精密さを温かみのあるテラコッタのアクセントで和らげる」のように、具体的にしてください。

ステップ 3：セクション 2 — カラーパレットと役割

既存のブランドカラーが提供されている場合： それらを基盤として使用します。基準となる色を中心に広げ、パレット全体（プライマリ、セカンダリ、アクセント、ニュートラル、サーフェス、ボーダー、シャドウ）を導き出します。

既存の色が提供されていない場合： 業界の標準と個性を表すキーワードからパレットを導き出します。業界の視覚的な慣習を調査し、個性を表すキーワードに応じて、それに合わせるか、意図的に外します。

パレットは、以下のグループに分類します。

## 2. Color Palette & Roles

### Primary
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #XXXXXX | Main brand color, CTA backgrounds, key accents |
| Primary Dark | #XXXXXX | Hover states, active states, headers |
| Primary Light | #XXXXXX | Backgrounds, highlights, subtle accents |

### Accent
| Role | Hex | Usage |
|------|-----|-------|
| Accent | #XXXXXX | Secondary actions, highlights, badges |
| Accent Dark | #XXXXXX | Hover states for accent elements |

### Interactive States
| Role | Hex | Usage |
|------|-----|-------|
| Link Default | #XXXXXX | Unvisited links |
| Link Hover | #XXXXXX | Hovered links |
| Link Visited | #XXXXXX | Visited links |
| Focus Ring | #XXXXXX | Focus indicator for keyboard navigation |
| Error | #XXXXXX | Error states, validation failures |
| Success | #XXXXXX | Success states, confirmations |
| Warning | #XXXXXX | Warning states, cautions |

### Neutral Scale
| Role | Hex | Usage |
|------|-----|-------|
| Neutral 950 | #XXXXXX | Primary text |
| Neutral 800 | #XXXXXX | Secondary text |
| Neutral 600 | #XXXXXX | Tertiary text, placeholders |
| Neutral 400 | #XXXXXX | Disabled text, subtle borders |
| Neutral 200 | #XXXXXX | Borders, dividers |
| Neutral 100 | #XXXXXX | Subtle backgrounds |
| Neutral 50 | #XXXXXX | Page background alternate |

### Surface & Borders
| Role | Hex | Usage |
|------|-----|-------|
| Surface Primary | #XXXXXX | Card backgrounds, main surfaces |
| Surface Secondary | #XXXXXX | Alternate surface, sidebar backgrounds |
| Border Default | #XXXXXX | Standard borders |
| Border Subtle | #XXXXXX | Subtle dividers |

### Shadow Colors
| Role | Value | Usage |
|------|-------|-------|
| Shadow Light | rgba(X,X,X,0.05) | Subtle elevation |
| Shadow Medium | rgba(X,X,X,0.10) | Card elevation |
| Shadow Heavy | rgba(X,X,X,0.20) | Modal/dropdown elevation |

コントラストの検証は必須です。 テキスト色と背景色のすべての組み合わせが WCAG AA に適合する必要があります。

• 本文（18px 未満、または太字で 14px 未満）：コントラスト比 4.5:1 以上
• 大きなテキスト（18px 以上、または太字で 14px 以上）：コントラスト比 3:1 以上

検証には 05-website-rebuild/scripts/contrast-check.js のコントラストチェック用スクリプトを使用してください。利用できない場合は、相対輝度の計算式で比率を手動計算します。しきい値に近い組み合わせには、計算した比率を併記してください。

Step 4: セクション 3 -- タイポグラフィのルール

検証済み候補からフォントを選択します。使用禁止フォント（絶対に使用しないでください）： Inter、Roboto、Arial、Helvetica、Space Grotesk、Lato、Open Sans、Source Sans Pro。これらは AI 生成サイトで使い古されており、「テンプレート」だとすぐに分かってしまいます。

タイポグラフィの階層をすべて定義します。

## 3. Typography Rules

**Primary Font:** [Font Name] (Google Fonts)
**Secondary Font:** [Font Name] (Google Fonts)
**Mono Font:** [Font Name] (Google Fonts) -- for code/data if needed

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | [family] | 64px / 4rem | 700 | 1.1 | -0.02em | Homepage hero only |
| Display Large | [family] | 48px / 3rem | 700 | 1.15 | -0.01em | Major section headers |
| Section Heading | [family] | 36px / 2.25rem | 600 | 1.2 | -0.01em | H2-level headings |
| Sub-heading | [family] | 24px / 1.5rem | 600 | 1.3 | 0 | H3-level headings |
| Body Large | [family] | 18px / 1.125rem | 400 | 1.6 | 0 | Lead paragraphs |
| Body | [family] | 16px / 1rem | 400 | 1.6 | 0 | Standard body text |
| Button | [family] | 16px / 1rem | 600 | 1 | 0.02em | All button labels |
| Small | [family] | 14px / 0.875rem | 400 | 1.5 | 0 | Captions, metadata |
| Caption | [family] | 12px / 0.75rem | 400 | 1.4 | 0.01em | Fine print, timestamps |

すべての行で、すべての列を埋めてください。「inherit」や「default」は使用せず、正確な値を指定します。

Step 5: セクション 4 -- コンポーネントのスタイル

すべてのインタラクティブコンポーネントについて、状態マトリックスを含めて定義します。

## 4. Component Stylings

### Buttons

**Primary Button:**
| Property | Value |
|----------|-------|
| Background | #XXXXXX |
| Text Color | #XXXXXX |
| Font | [family], [size], [weight] |
| Padding | Xpx Xpx |
| Border Radius | Xpx |
| Border | none |
| Shadow | [value from elevation scale] |
| Hover Background | #XXXXXX |
| Hover Shadow | [value] |
| Focus Ring | 0 0 0 3px [focus color] |
| Active Background | #XXXXXX |
| Active Transform | translateY(1px) |
| Disabled Background | #XXXXXX |
| Disabled Text | #XXXXXX |
| Transition | all 200ms ease |

**Secondary Button:**
[Same property table with secondary variant values]

**Dark/Inverse Button:**
[Same property table for dark background contexts]

### Cards
| Property | Value |
|----------|-------|
| Background | #XXXXXX |
| Border | 1px solid #XXXXXX |
| Border Radius | Xpx |
| Padding | Xpx |
| Shadow | [value from elevation scale] |
| Hover Shadow | [elevated value] |
| Transition | shadow 200ms ease |

### Inputs
| Property | Value |
|----------|-------|
| Background | #XXXXXX |
| Border | 1px solid #XXXXXX |
| Border Radius | Xpx |
| Padding | Xpx Xpx |
| Font | [family], [size] |
| Placeholder Color | #XXXXXX |
| Focus Border | #XXXXXX |
| Focus Ring | 0 0 0 3px [focus color with alpha] |
| Error Border | #XXXXXX |
| Disabled Background | #XXXXXX |

### Navigation
| Property | Value |
|----------|-------|
| Background | #XXXXXX |
| Height | Xpx |
| Link Color | #XXXXXX |
| Link Hover Color | #XXXXXX |
| Active Link Color | #XXXXXX |
| Active Indicator | [describe: underline, background pill, etc.] |
| Mobile Menu Background | #XXXXXX |

最低限、プライマリボタン（4 状態：デフォルト、ホバー、フォーカス、アクティブ）、セカンダリボタン、ダークバリアントボタン、カード、入力欄、ナビゲーションを含めてください。

Step 6: セクション 5 -- レイアウトの原則

## 5. Layout Principles

**Base Spacing Unit:** Xpx
**Spacing Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px

**Grid:**
| Property | Value |
|----------|-------|
| Max Container Width | Xpx |
| Grid Columns | 12 |
| Column Gap | Xpx |
| Row Gap | Xpx |

**Section Spacing:**
| Context | Value |
|---------|-------|
| Between major sections | Xpx |
| Between sub-sections | Xpx |
| Between content blocks | Xpx |

**Border Radius Scale:**
| Size | Value | Usage |
|------|-------|-------|
| Small | Xpx | Inputs, small badges |
| Medium | Xpx | Cards, buttons |
| Large | Xpx | Feature cards, images |
| Full | 9999px | Pills, avatars |

スペーシングの基準単位は 4px または 8px にします。スケールは幾何学的なもの、または一貫したリズムに沿ったものにしてください。業界に合わせたコンテナの最大幅の根拠を示します（マーケティングサイトでは、一般にエディトリアルサイトより幅広いコンテナが使われます）。

Step 7: セクション 6 -- 奥行きとエレベーション

エレベーションレベルを 4～5 段階定義し、正確な CSS box-shadow の値を記載します。

## 6. Depth & Elevation

| Level | Name | CSS box-shadow | Usage |
|-------|------|---------------|-------|
| 0 | Flat | none | Default state, inline elements |
| 1 | Subtle | 0 1px 2px rgba(X,X,X,0.05) | Resting cards, subtle separation |
| 2 | Raised | 0 4px 6px rgba(X,X,X,0.07), 0 2px 4px rgba(X,X,X,0.05) | Hovered cards, dropdowns |
| 3 | Elevated | 0 10px 15px rgba(X,X,X,0.10), 0 4px 6px rgba(X,X,X,0.05) | Modals, popovers, floating elements |
| 4 | Floating | 0 20px 25px rgba(X,X,X,0.15), 0 10px 10px rgba(X,X,X,0.05) | Dragged elements, sticky headers |

シャドウの RGB 値は、セクション 2 で定義したシャドウカラーを基にしてください。デザインを意図的に強い印象にする場合を除き、純粋な黒（0,0,0）は使用しないでください。

Step 8: セクション 7 -- 推奨事項と禁止事項

このデザインシステムに固有のルールを作成します。03-web-design-guidelines/design-rules.md の禁止項目（禁止フォント、禁止カラースキーム、禁止レイアウト）を相互参照してください。

## 7. Do's and Don'ts

### Do's
1. [Specific positive rule grounded in this design system]
2. [...]
...8-12 total

### Don'ts
1. [Specific prohibition grounded in this design system]
2. [...]
...8-12 total

### The AI Slop Test
> If someone saw this and was told AI made it, would they believe it? If yes, redesign.

Apply this test to every page and component. Common AI tells to avoid:
- Generic hero sections with centered text over stock gradient
- Perfectly symmetrical 3-column feature grids
- Overuse of rounded corners on everything
- Teal + coral color schemes
- "Welcome to [Business Name]" as a headline
- Decorative SVG blobs with no purpose

推奨事項と禁止事項は、一般論ではなく、生成したデザインシステムに固有の内容にしてください。可能な場合は、前のセクションで指定した正確な色、フォント、スペーシング値を参照してください。

Step 9: セクション 8 -- レスポンシブ動作

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Columns | Container Padding |
|------|-------|---------|-------------------|
| Mobile | 375px | 4 | 16px |
| Tablet | 768px | 8 | 24px |
| Desktop | 1024px | 12 | 32px |
| Large | 1280px | 12 | 48px |
| XL | 1536px | 12 | 64px |

### Touch Targets
- Minimum touch target size: 44px x 44px
- Minimum spacing between touch targets: 8px

### Typography Scaling
| Role | Mobile | Tablet | Desktop |
|------|--------|--------|---------|
| Display Hero | Xrem | Xrem | Xrem |
| Display Large | Xrem | Xrem | Xrem |
| Section Heading | Xrem | Xrem | Xrem |
| Body | 1rem | 1rem | 1rem |

### Collapsing Strategy
- **Navigation:** Hamburger menu below [breakpoint]. Full horizontal nav at [breakpoint] and above.
- **Grid layouts:** Single column on mobile, 2 columns on tablet, full grid on desktop.
- **Hero sections:** Stack vertically on mobile. Side-by-side on desktop.
- **Cards:** Full-width stack on mobile. 2-column grid on tablet. 3-4 column grid on desktop.
- **Images:** Full-bleed on mobile. Contained on desktop.

モバイルでは、本文テキストをすべてのブレークポイントで 1rem に保ちながら、ディスプレイサイズのフォントを大幅に縮小してください（通常、デスクトップ値の 60～70％）。

Step 10: セクション 9 -- エージェント向けプロンプトガイド

このセクションでは、後続のエージェントがそのままコピーして使用できる、正確な値を含むプロンプトを記載します。

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary: #XXXXXX
- Primary Dark: #XXXXXX
- Accent: #XXXXXX
- Text Primary: #XXXXXX
- Text Secondary: #XXXXXX
- Background: #XXXXXX
- Surface: #XXXXXX

### Example Component Prompts

**Hero Section:**
"Create a hero section on [bg color]. Headline at [size] [font] weight [weight], line-height [value], letter-spacing [value], color [hex]. Subheadline at [size] [font] weight [weight], color [hex]. CTA button: background [hex], text [hex], padding [value], border-radius [value], font [size] weight [weight]."

**Service Card:**
"Build a service card with background [hex], border [value], border-radius [value], shadow [exact shadow value], padding [value]. Title at [size] [font] weight [weight] color [hex]. Description at [size] [font] color [hex]. Link in [hex], hover [hex]."

**Contact Form:**
"Create a contact form. Labels at [size] [font] weight [weight] color [hex]. Inputs: background [hex], border [value], border-radius [value], padding [value], focus ring [value]. Submit button uses primary button styling."

**Footer:**
"Build a footer on [bg color]. Heading text at [size] [font] weight [weight] color [hex]. Body text at [size] color [hex]. Links in [hex], hover [hex]. Grid: [columns] columns on desktop, single column on mobile."

プロンプト内のすべての値は、前のセクションで定義した値と一致させてください。近似値や「～に似たもの」は使わず、正確な 16 進カラーコード、ピクセル値、フォント仕様を指定してください。

Step 11（任意）：セクション 10 -- 多言語対応に関する考慮事項

このセクションは、3 言語（AZ/RU/EN）対応サイトの場合にのみ作成します。

## 10. Multi-Lingual Considerations

### Font Verification
Selected fonts must render all characters in this test string:

**Azerbaijani:** Ə ə Ğ ğ İ ı Ö ö Ü ü Ç ç Ş ş
**Russian:** А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я

Verify in Google Fonts that both the primary and secondary fonts support Latin Extended-A (Azerbaijani) and Cyrillic (Russian) character sets before finalizing the typography selection.

### Text Expansion Accommodation
Russian text is approximately 30% longer than English equivalents. All layouts must accommodate:
- Navigation labels: allow 30% extra width or use truncation with tooltip
- Buttons: use padding-based sizing, not fixed widths
- Headlines: test with longest Russian translation to verify no overflow
- Card descriptions: set min-height rather than fixed height

### Cultural Color Considerations for Azerbaijan
- Red and green carry national flag significance (avoid using them trivially)
- Blue is the primary flag color and generally positive
- Gold/warm tones resonate with cultural heritage
- Conservative industries may expect more formal, muted palettes

### Per-Language Content Tone
| Language | Tone | Formality |
|----------|------|-----------|
| Azerbaijani (AZ) | Warm, direct | Formal (siz) |
| Russian (RU) | Professional, clear | Formal (Вы) |
| English (EN) | Approachable, confident | Professional casual |

検証チェックリスト

DESIGN.md を作成した後、保存する前に次のチェックリストを確認してください。

• 9 つのセクションがすべて含まれている（3 言語対応の場合は 10 セクション）
• すべての 16 進カラーコードが有効な 6 桁形式（#RRGGBB）になっている
• すべてのテキストと背景のコントラスト比が計算され、WCAG AA に合格している（本文は 4.5:1、大きなテキストは 3:1）
• タイポグラフィの表に必要な列がすべて含まれている（役割、フォント、サイズ、ウェイト、行の高さ、文字間隔、備考）
• タイポグラフィの表に必要な行がすべて含まれている（ディスプレイヒーロー、ディスプレイ大、セクション見出し、小見出し、本文、ボタン、小、キャプション）
• 禁止フォントを使用していない（Inter、Roboto、Arial、Helvetica、Space Grotesk、Lato、Open Sans、Source Sans Pro）
• コンポーネントのスタイルに、プライマリボタン（デフォルト、ホバー、フォーカス、アクティブの各状態）、セカンダリボタン、ダークボタン、カード、入力欄、ナビゲーションが含まれている
• 正確な CSS box-shadow 値を指定したシャドウ／エレベーションレベルが 4 段階以上定義されている
• 禁止カラースキームを使用していない（design-rules.md を確認）
• 明示的な基準単位を含むスペーシングスケールが定義されている
• 角丸のスケールが定義されている
• 5 つのブレークポイントすべてを含むブレークポイント表が完成している
• タッチターゲットの最小サイズ（44px）が指定されている
• モバイル／タブレット／デスクトップ用のフォント縮尺表が提示されている
• エージェント向けプロンプトの例でデザインシステムの正確な値を使用している（3 つ以上の値を抜き取り確認する）
• 推奨事項と禁止事項に AI Slop Test のセクションが含まれている

出力

完成したファイルをプロジェクトのルートディレクトリに DESIGN.md として保存します。このファイルは、後続のビルドパイプラインにおけるすべてのビジュアル実装の唯一の信頼できる情報源です。ビルド段階では、このファイルの外でデザイン上の判断を行わないでください。