design-system-generator

设计系统生成器

此技能的工作方式

输入业务背景（名称、行业、品牌个性、现有颜色/字体、灵感参考），生成包含 9 个部分的完整 DESIGN.md 文件（三语网站为 10 个部分）。在构建阶段，website-rebuild、local-business-rebuild 和 azerbaijan-website-build 工作流会将其作为所有视觉实现的唯一事实来源。

DESIGN.md 格式专为机器读取而设计。每个值都明确指定（十六进制代码、像素值、字体粗细），以便下游 Agent 无需解读或猜测，就能将规范直接转换为 CSS/Tailwind。

输入要求

开始生成前，请收集以下信息：

输入	必填	描述
业务名称	是	用于主题叙述和 Agent 提示词示例
行业	是	决定美学方向、色彩心理学和组件模式
品牌个性关键词	是	3-5 个形容词（例如：奢华、友好、大胆、简约、工业风、温暖）
现有品牌颜色	否	从 Logo 或品牌简介中提取的十六进制值。若提供，则以此为基础推导完整调色板。
现有字体	否	品牌简介中的字体系列。使用前请确认它们不在禁用列表中。
美学灵感参考	否	可指向 00-design-references/references/by-aesthetic/ 中的参考文件
多语言要求	否	若为三语（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 中的对比度检查脚本进行验证。如果该脚本不可用，请使用相对亮度公式手动计算对比度。对于接近阈值的组合，请在旁边注明计算出的对比度。

第 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 |

每一行都必须填写所有列。不要使用“继承”或“默认”——请指定确切值。

第 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 种状态：默认、悬停、焦点、激活）、次要按钮、深色变体按钮、卡片、输入框和导航。

第 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 为基础间距单位。间距比例应呈几何级数，或遵循一致的节奏。根据行业特点说明容器最大宽度的依据（营销网站的容器通常比编辑类网站更宽）。

第 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）。

第 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

注意事项必须针对生成的设计系统，不要使用泛泛而谈的套话。尽可能引用前文中的确切颜色、字体和间距值。

第 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.

在移动设备上，字体缩放应显著缩小显示字号（通常为桌面端字号的 60–70%），同时确保所有断点下的正文文本均为 1rem。

第 10 步：第 9 节——Agent 提示词指南

本节为下游 Agent 提供可直接复制粘贴的提示词，并包含确切值：

## 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."

提示词中的每个值都必须与前面各节定义的值一致。不得使用近似值，也不要写“类似于”——必须使用确切的十六进制代码、像素值和字体规格。

第 11 步（可选）：第 10 节——多语言注意事项

仅为三语（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 个章节全部齐全（三语网站则为 10 个）
• 所有十六进制值均为有效的 6 位格式（#RRGGBB）
• 已计算所有文本/背景对比度，且符合 WCAG AA（正文为 4.5:1，大号文本为 3:1）
• 字体排版表包含所有必需列（角色、字体、字号、字重、行高、字间距、备注）
• 字体排版表包含所有必需行（展示主标题、展示大号标题、章节标题、副标题、正文、按钮、小号文本、说明文字）
• 未使用任何禁用字体（Inter、Roboto、Arial、Helvetica、Space Grotesk、Lato、Open Sans、Source Sans Pro）
• 组件样式包含主按钮（默认、悬停、焦点、激活状态）、次要按钮、深色按钮、卡片、输入框和导航
• 至少定义 4 个阴影/层级，并提供准确的 CSS box-shadow 值
• 未使用任何禁用配色方案（请对照 design-rules.md 检查）
• 已定义间距比例，并明确指定基础单位
• 已定义圆角比例
• 断点表完整，包含全部 5 个断点
• 已指定触控目标最小尺寸（44px）
• 已提供移动设备/平板/桌面端的字体缩放表
• Agent 提示词示例使用了设计系统中的确切值（抽查至少 3 个值进行验证）
• “注意事项”中包含 AI Slop 测试章节

输出

将完成的文件保存为项目根目录下的 DESIGN.md。此文件是所有下游构建流程中视觉实现的唯一事实来源。构建阶段不得在此文件之外做出任何设计决策。