cc-devflow 1.0.1

package/.claude/docs/templates/STYLE_TEMPLATE.md

@@ -0,0 +1,1266 @@
+---
+template_name: STYLE_TEMPLATE
+version: 1.0.0
+description: Template for generating project-level design style guide (STYLE.md)
+last_updated: 2025-11-09 北京时间
+---
+
+# Design Style Guide - {Project Name}
+
+> 项目设计风格指南 - 视觉一致性的唯一真理源（SSOT）
+
+---
+
+## 📋 Overview
+
+### 设计系统信息
+- **名称**: {Design System Name}
+- **版本**: {Version, e.g., 1.0.0}
+- **创建时间**: {YYYY-MM-DD 北京时间}
+- **最后更新**: {YYYY-MM-DD 北京时间}
+
+### 设计理念
+{简要描述设计系统的核心价值和设计理念，2-3 句话}
+
+例如：
+> 我们的设计系统以"简洁、高效、可访问"为核心，追求极致的用户体验和开发者体验。所有组件遵循一致的视觉语言，确保产品的专业度和易用性。
+
+### 适用范围
+- ✅ 所有 Web 应用界面（Desktop, Tablet, Mobile）
+- ✅ 所有前端组件库
+- ✅ 所有 UI 原型设计
+- ❌ 营销材料（使用独立的品牌指南）
+
+### 更新历史
+- **v1.0.0** (YYYY-MM-DD): 初始版本，建立核心设计系统
+- **v1.1.0** (YYYY-MM-DD): 新增暗色模式支持
+- (记录每次更新的版本号、日期、变更内容)
+
+---
+
+## 🎨 Color Palette
+
+### 主色（Primary）
+主色用于主要操作、品牌强调、关键 CTA 等。
+
+| 等级 | Hex | RGB | HSL | 使用场景 |
+|------|-----|-----|-----|----------|
+| Primary 50 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 主色浅背景 |
+| Primary 100 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | Hover 状态 |
+| Primary 500 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 主色（默认） |
+| Primary 600 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | Active 状态 |
+| Primary 900 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 主色深背景 |
+
+**CSS Variables**:
+```css
+:root {
+  --color-primary-50: {#XXXXXX};
+  --color-primary-100: {#XXXXXX};
+  --color-primary-500: {#XXXXXX};
+  --color-primary-600: {#XXXXXX};
+  --color-primary-900: {#XXXXXX};
+
+  /* 语义化别名 */
+  --color-primary: var(--color-primary-500);
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-active: var(--color-primary-700);
+}
+```
+
+**Tailwind Config** (如适用):
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '{#XXXXXX}',
+          100: '{#XXXXXX}',
+          500: '{#XXXXXX}',
+          600: '{#XXXXXX}',
+          900: '{#XXXXXX}',
+          DEFAULT: '{#XXXXXX}', // primary-500
+        },
+      },
+    },
+  },
+}
+```
+
+### 辅色（Secondary）
+辅色用于次要操作、辅助信息、背景变化等。
+
+| 等级 | Hex | RGB | HSL | 使用场景 |
+|------|-----|-----|-----|----------|
+| Secondary 50 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 辅色浅背景 |
+| Secondary 500 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 辅色（默认） |
+| Secondary 900 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 辅色深背景 |
+
+（CSS Variables 和 Tailwind Config 同上）
+
+### 语义色（Semantic Colors）
+
+#### 成功色（Success）
+| Hex | RGB | HSL | 使用场景 |
+|-----|-----|-----|----------|
+| {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 成功提示、完成状态、正向反馈 |
+
+#### 警告色（Warning）
+| Hex | RGB | HSL | 使用场景 |
+|-----|-----|-----|----------|
+| {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 警告提示、需要注意的信息 |
+
+#### 错误色（Error）
+| Hex | RGB | HSL | 使用场景 |
+|-----|-----|-----|----------|
+| {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 错误提示、失败状态、危险操作 |
+
+#### 信息色（Info）
+| Hex | RGB | HSL | 使用场景 |
+|-----|-----|-----|----------|
+| {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 信息提示、帮助文本 |
+
+### 中性色（Neutrals / Grayscale）
+中性色用于文本、边框、背景、禁用状态等。
+
+| 等级 | Hex | RGB | HSL | 使用场景 |
+|------|-----|-----|-----|----------|
+| Gray 50 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 浅背景 |
+| Gray 100 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | Hover 背景 |
+| Gray 200 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 边框、分隔线 |
+| Gray 300 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 禁用状态边框 |
+| Gray 400 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 占位符文本 |
+| Gray 500 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 次要文本 |
+| Gray 600 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 正文文本 |
+| Gray 700 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 标题文本 |
+| Gray 800 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 深色文本 |
+| Gray 900 | {#XXXXXX} | rgb({R}, {G}, {B}) | hsl({H}, {S}%, {L}%) | 最深文本 |
+
+### 色彩对比度（Accessibility）
+所有颜色组合必须通过 **WCAG AA** 对比度测试：
+- **正文文本（16px+）**: 对比度 ≥ 4.5:1
+- **大文本（18px+ 或 14px+ bold）**: 对比度 ≥ 3:1
+- **UI 组件**: 对比度 ≥ 3:1
+
+**已验证的颜色组合**:
+- ✅ Primary 500 on White: 对比度 {X.XX:1} (WCAG AA ✓)
+- ✅ Gray 700 on White: 对比度 {X.XX:1} (WCAG AA ✓)
+- (列出所有常用组合)
+
+---
+
+## ✍️ Typography
+
+### 字体族（Font Families）
+
+#### 标题字体（Headings）
+```css
+--font-heading: "{Font Name}", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+```
+- **用途**: H1-H6, 页面标题, Section 标题
+- **特点**: {简要描述字体特点，如：现代、易读、几何感}
+
+#### 正文字体（Body）
+```css
+--font-body: "{Font Name}", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+```
+- **用途**: 正文、段落、列表、标签
+- **特点**: {简要描述字体特点，如：清晰、易读、舒适}
+
+#### 代码字体（Monospace）
+```css
+--font-mono: "Fira Code", "Monaco", "Consolas", monospace;
+```
+- **用途**: 代码块、内联代码、技术信息
+- **特点**: 等宽、支持连字（ligatures）
+
+### 字阶系统（Type Scale）
+
+| 类型 | Font Size | Line Height | Font Weight | Letter Spacing | 用途 |
+|------|-----------|-------------|-------------|----------------|------|
+| **H1** | {XXpx / X.XXrem} | {X.XX} | {XXX / bold} | {X.XXem} | 页面主标题 |
+| **H2** | {XXpx / X.XXrem} | {X.XX} | {XXX / semibold} | {X.XXem} | Section 标题 |
+| **H3** | {XXpx / X.XXrem} | {X.XX} | {XXX / semibold} | {X.XXem} | 子标题 |
+| **H4** | {XXpx / X.XXrem} | {X.XX} | {XXX / medium} | {X.XXem} | 组件标题 |
+| **H5** | {XXpx / X.XXrem} | {X.XX} | {XXX / medium} | {X.XXem} | 小标题 |
+| **H6** | {XXpx / X.XXrem} | {X.XX} | {XXX / medium} | {X.XXem} | 最小标题 |
+| **Body Large** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | {X.XXem} | 重要正文 |
+| **Body** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | {X.XXem} | 默认正文 |
+| **Body Small** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | {X.XXem} | 次要正文 |
+| **Caption** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | {X.XXem} | 说明文字 |
+| **Label** | {XXpx / X.XXrem} | {X.XX} | {XXX / medium} | {X.XXem} | 标签、按钮文本 |
+
+**CSS Variables**:
+```css
+:root {
+  /* Font Families */
+  --font-heading: "{Font Name}", sans-serif;
+  --font-body: "{Font Name}", sans-serif;
+  --font-mono: "Fira Code", monospace;
+
+  /* Font Sizes */
+  --text-h1: {XXpx};
+  --text-h2: {XXpx};
+  --text-h3: {XXpx};
+  --text-h4: {XXpx};
+  --text-h5: {XXpx};
+  --text-h6: {XXpx};
+  --text-body-lg: {XXpx};
+  --text-body: {XXpx};
+  --text-body-sm: {XXpx};
+  --text-caption: {XXpx};
+  --text-label: {XXpx};
+
+  /* Line Heights */
+  --leading-tight: {X.XX};
+  --leading-normal: {X.XX};
+  --leading-relaxed: {X.XX};
+
+  /* Font Weights */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+}
+```
+
+### 响应式字体（Responsive Typography）
+
+| 类型 | Desktop (≥1024px) | Tablet (768-1023px) | Mobile (<768px) |
+|------|-------------------|---------------------|-----------------|
+| H1 | {XXpx} | {XXpx} | {XXpx} |
+| H2 | {XXpx} | {XXpx} | {XXpx} |
+| Body | {XXpx} | {XXpx} | {XXpx} |
+
+**响应式实现**:
+```css
+/* Mobile First */
+h1 {
+  font-size: {XXpx}; /* Mobile */
+  line-height: {X.XX};
+}
+
+@media (min-width: 768px) {
+  h1 {
+    font-size: {XXpx}; /* Tablet */
+  }
+}
+
+@media (min-width: 1024px) {
+  h1 {
+    font-size: {XXpx}; /* Desktop */
+  }
+}
+```
+
+### 字体组合规律
+1. **标题 + 正文**: {Heading Font} + {Body Font}
+2. **强调**: 使用 font-weight（不是颜色）来强调层级
+3. **避免**: 同一视图中超过 3 种字体大小
+4. **行高**: 标题使用紧凑行高（1.2-1.4），正文使用舒适行高（1.5-1.8）
+
+---
+
+## 📐 Spacing System
+
+### 基础单位（Base Unit）
+```css
+--spacing-base: {4px / 8px / 16px};
+```
+
+### 间距等级（Spacing Scale）
+
+| 等级 | 值 | rem | 使用场景 |
+|------|-----|-----|----------|
+| 0 | 0px | 0rem | 无间距 |
+| 1 | {XXpx} | {X.XXrem} | 极小间距（图标与文本） |
+| 2 | {XXpx} | {X.XXrem} | 小间距（按钮内部 padding） |
+| 3 | {XXpx} | {X.XXrem} | 默认间距（输入框 padding） |
+| 4 | {XXpx} | {X.XXrem} | 中等间距（卡片 padding） |
+| 5 | {XXpx} | {X.XXrem} | 大间距（组件之间） |
+| 6 | {XXpx} | {X.XXrem} | 更大间距（Section 之间） |
+| 8 | {XXpx} | {X.XXrem} | 布局间距 |
+| 10 | {XXpx} | {X.XXrem} | 页面级间距 |
+| 12 | {XXpx} | {X.XXrem} | 超大间距 |
+
+**CSS Variables**:
+```css
+:root {
+  --spacing-0: 0;
+  --spacing-1: {XXpx};
+  --spacing-2: {XXpx};
+  --spacing-3: {XXpx};
+  --spacing-4: {XXpx};
+  --spacing-5: {XXpx};
+  --spacing-6: {XXpx};
+  --spacing-8: {XXpx};
+  --spacing-10: {XXpx};
+  --spacing-12: {XXpx};
+
+  /* 语义化别名 */
+  --spacing-xs: var(--spacing-1);
+  --spacing-sm: var(--spacing-2);
+  --spacing-md: var(--spacing-3);
+  --spacing-lg: var(--spacing-4);
+  --spacing-xl: var(--spacing-6);
+  --spacing-2xl: var(--spacing-8);
+}
+```
+
+### 使用场景
+
+#### 组件内部间距（Padding）
+- **按钮**: padding: var(--spacing-2) var(--spacing-4);
+- **输入框**: padding: var(--spacing-3) var(--spacing-4);
+- **卡片**: padding: var(--spacing-4) var(--spacing-5);
+
+#### 组件之间间距（Margin / Gap）
+- **垂直间距**: margin-bottom: var(--spacing-4);
+- **Grid gap**: gap: var(--spacing-4);
+- **Flex gap**: gap: var(--spacing-3);
+
+#### 布局间距（Layout）
+- **Section 间距**: margin-bottom: var(--spacing-8);
+- **页面 padding**: padding: var(--spacing-6) var(--spacing-4);
+
+---
+
+## 🧩 Component Styles
+
+以下为核心组件的详细样式定义。每个组件包含：基础样式、变体、尺寸、状态。
+
+### Button
+
+#### 基础样式
+```html
+<button class="btn">Button</button>
+```
+
+```css
+.btn {
+  /* 字体 */
+  font-family: var(--font-body);
+  font-size: var(--text-label);
+  font-weight: var(--font-medium);
+  line-height: 1;
+
+  /* 间距 */
+  padding: var(--spacing-2) var(--spacing-4);
+
+  /* 圆角 */
+  border-radius: var(--radius-md);
+
+  /* 边框 */
+  border: 1px solid transparent;
+
+  /* 过渡 */
+  transition: all var(--duration-fast) var(--easing-ease-in-out);
+
+  /* 其他 */
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+}
+```
+
+#### 变体（Variants）
+
+**Primary**:
+```css
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-primary:active {
+  background-color: var(--color-primary-active);
+}
+
+.btn-primary:disabled {
+  background-color: var(--color-gray-300);
+  cursor: not-allowed;
+}
+```
+
+**Secondary**:
+```css
+.btn-secondary {
+  background-color: var(--color-secondary);
+  color: white;
+}
+/* Hover, Active, Disabled 同上 */
+```
+
+**Outline**:
+```css
+.btn-outline {
+  background-color: transparent;
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.btn-outline:hover {
+  background-color: var(--color-primary-50);
+}
+```
+
+**Ghost**:
+```css
+.btn-ghost {
+  background-color: transparent;
+  color: var(--color-gray-700);
+}
+
+.btn-ghost:hover {
+  background-color: var(--color-gray-100);
+}
+```
+
+#### 尺寸（Sizes）
+
+| 尺寸 | Padding | Font Size | Height |
+|------|---------|-----------|--------|
+| **sm** | var(--spacing-1) var(--spacing-3) | {XXpx} | {XXpx} |
+| **md** | var(--spacing-2) var(--spacing-4) | {XXpx} | {XXpx} |
+| **lg** | var(--spacing-3) var(--spacing-6) | {XXpx} | {XXpx} |
+
+```css
+.btn-sm { padding: var(--spacing-1) var(--spacing-3); font-size: {XXpx}; }
+.btn-md { padding: var(--spacing-2) var(--spacing-4); font-size: {XXpx}; }
+.btn-lg { padding: var(--spacing-3) var(--spacing-6); font-size: {XXpx}; }
+```
+
+#### 完整示例
+```html
+<!-- Primary Button (Medium) -->
+<button class="btn btn-primary btn-md">
+  Primary Button
+</button>
+
+<!-- Outline Button (Large) -->
+<button class="btn btn-outline btn-lg">
+  Outline Button
+</button>
+
+<!-- Disabled Button -->
+<button class="btn btn-primary btn-md" disabled>
+  Disabled
+</button>
+```
+
+---
+
+### Input / Textarea
+
+#### 基础样式
+```html
+<input type="text" class="input" placeholder="Enter text..." />
+```
+
+```css
+.input {
+  /* 字体 */
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: 1.5;
+
+  /* 间距 */
+  padding: var(--spacing-3) var(--spacing-4);
+
+  /* 圆角 */
+  border-radius: var(--radius-md);
+
+  /* 边框 */
+  border: 1px solid var(--color-gray-300);
+
+  /* 背景 */
+  background-color: white;
+
+  /* 过渡 */
+  transition: all var(--duration-fast) var(--easing-ease-in-out);
+
+  /* 其他 */
+  width: 100%;
+  outline: none;
+}
+
+.input:hover {
+  border-color: var(--color-gray-400);
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-50);
+}
+
+.input:disabled {
+  background-color: var(--color-gray-100);
+  cursor: not-allowed;
+}
+
+.input::placeholder {
+  color: var(--color-gray-400);
+}
+```
+
+#### 状态（States）
+
+**Error**:
+```css
+.input-error {
+  border-color: var(--color-error);
+}
+
+.input-error:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.1);
+}
+```
+
+**Success**:
+```css
+.input-success {
+  border-color: var(--color-success);
+}
+```
+
+---
+
+### Card
+
+#### 基础样式
+```html
+<div class="card">
+  <h3>Card Title</h3>
+  <p>Card content goes here...</p>
+</div>
+```
+
+```css
+.card {
+  /* 背景 */
+  background-color: white;
+
+  /* 间距 */
+  padding: var(--spacing-4) var(--spacing-5);
+
+  /* 圆角 */
+  border-radius: var(--radius-lg);
+
+  /* 阴影 */
+  box-shadow: var(--shadow-md);
+
+  /* 边框（可选） */
+  border: 1px solid var(--color-gray-200);
+
+  /* 过渡 */
+  transition: all var(--duration-base) var(--easing-ease-in-out);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+```
+
+---
+
+### Modal / Dialog
+
+（类似上述格式，包含基础样式、变体、状态、完整示例代码）
+
+---
+
+### Alert / Toast
+
+（类似上述格式，包含基础样式、变体、状态、完整示例代码）
+
+---
+
+（继续其他核心组件：Badge, Avatar, Table, Navigation, Pagination, Tabs, Tooltip 等）
+
+---
+
+## 🌫️ Shadows & Elevation
+
+### 阴影系统（Shadow Scale）
+
+| 等级 | box-shadow 值 | 使用场景 |
+|------|----------------|----------|
+| **None** | none | 平面元素（按钮、输入框默认状态） |
+| **XS** | 0 1px 2px 0 rgba(0, 0, 0, 0.05) | 轻微层级（边框替代） |
+| **SM** | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) | 小卡片、下拉菜单 |
+| **MD** | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) | 卡片默认状态 |
+| **LG** | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) | 卡片 Hover 状态 |
+| **XL** | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | Modal、Popup |
+| **2XL** | 0 25px 50px -12px rgba(0, 0, 0, 0.25) | 最高层级（全屏 Modal） |
+
+**CSS Variables**:
+```css
+:root {
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+```
+
+### 层级指南（Elevation Guide）
+1. **Level 0**: 页面背景、平面元素
+2. **Level 1**: 卡片、按钮
+3. **Level 2**: Hover 状态
+4. **Level 3**: Dropdown、Tooltip
+5. **Level 4**: Modal、Drawer
+6. **Level 5**: 全屏 Overlay
+
+---
+
+## 🎬 Animations & Transitions
+
+### 过渡时长（Duration）
+
+| 名称 | 值 | 使用场景 |
+|------|-----|----------|
+| **Fast** | {XXXms} | Hover 效果、按钮点击 |
+| **Base** | {XXXms} | 默认过渡、卡片展开 |
+| **Slow** | {XXXms} | Modal 打开、页面切换 |
+
+```css
+:root {
+  --duration-fast: {XXXms};
+  --duration-base: {XXXms};
+  --duration-slow: {XXXms};
+}
+```
+
+### 缓动函数（Easing）
+
+| 名称 | cubic-bezier 值 | 使用场景 |
+|------|----------------|----------|
+| **Ease-in** | cubic-bezier(0.4, 0, 1, 1) | 元素退出 |
+| **Ease-out** | cubic-bezier(0, 0, 0.2, 1) | 元素进入 |
+| **Ease-in-out** | cubic-bezier(0.4, 0, 0.2, 1) | 通用过渡 |
+
+```css
+:root {
+  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+
+### 常用动画（Keyframes）
+
+#### Fade In
+```css
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn var(--duration-base) var(--easing-ease-out);
+}
+```
+
+#### Slide Up
+```css
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-up {
+  animation: slideUp var(--duration-base) var(--easing-ease-out);
+}
+```
+
+#### Scale
+```css
+@keyframes scale {
+  from { transform: scale(0.95); }
+  to { transform: scale(1); }
+}
+
+.scale-in {
+  animation: scale var(--duration-fast) var(--easing-ease-out);
+}
+```
+
+---
+
+## 🔲 Border Radius
+
+### 圆角系统（Radius Scale）
+
+| 等级 | 值 | 使用场景 |
+|------|-----|----------|
+| **None** | 0px | 方形元素（Table, 严肃场景） |
+| **SM** | {XXpx} | 按钮、输入框 |
+| **Base** | {XXpx} | 默认圆角 |
+| **MD** | {XXpx} | 卡片 |
+| **LG** | {XXpx} | Modal |
+| **XL** | {XXpx} | 特殊卡片 |
+| **Full** | 9999px | 圆形（Avatar, Badge） |
+
+```css
+:root {
+  --radius-none: 0;
+  --radius-sm: {XXpx};
+  --radius-base: {XXpx};
+  --radius-md: {XXpx};
+  --radius-lg: {XXpx};
+  --radius-xl: {XXpx};
+  --radius-full: 9999px;
+}
+```
+
+---
+
+## 🌟 Opacity & Transparency
+
+### 透明度等级
+
+| 等级 | 值 | 使用场景 |
+|------|-----|----------|
+| **0** | 0 | 完全透明（隐藏元素） |
+| **10** | 0.1 | 极浅遮罩 |
+| **25** | 0.25 | 浅遮罩 |
+| **50** | 0.5 | 半透明（Overlay） |
+| **75** | 0.75 | 轻微透明 |
+| **90** | 0.9 | 几乎不透明 |
+| **100** | 1 | 完全不透明 |
+
+```css
+:root {
+  --opacity-0: 0;
+  --opacity-10: 0.1;
+  --opacity-25: 0.25;
+  --opacity-50: 0.5;
+  --opacity-75: 0.75;
+  --opacity-90: 0.9;
+  --opacity-100: 1;
+}
+```
+
+### 使用场景
+- **Disabled 状态**: opacity: var(--opacity-50);
+- **Overlay**: background-color: rgba(0, 0, 0, var(--opacity-50));
+- **Hover 效果**: opacity: var(--opacity-90);
+
+---
+
+## 🎨 Common Tailwind CSS Usage
+
+（仅当项目使用 Tailwind CSS 时包含此部分）
+
+### 常用 Utility Classes 组合
+
+#### Button
+```html
+<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors duration-200">
+  Primary Button
+</button>
+```
+
+#### Card
+```html
+<div class="p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+  Card content
+</div>
+```
+
+#### Input
+```html
+<input
+  type="text"
+  class="px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+  placeholder="Enter text..."
+/>
+```
+
+### 自定义 Tailwind 配置
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '{#XXXXXX}',
+          500: '{#XXXXXX}',
+          600: '{#XXXXXX}',
+          // ...
+        },
+      },
+      spacing: {
+        // Custom spacing values
+      },
+      borderRadius: {
+        // Custom border radius values
+      },
+      boxShadow: {
+        // Custom shadows
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'),
+  ],
+}
+```
+
+---
+
+## 📦 Example Component Reference Design Code
+
+以下是 3 个完整的组件实现示例，可直接复用。
+
+### Example 1: Primary Button with Icon
+
+```html
+<button class="btn btn-primary btn-md">
+  <svg class="icon" width="16" height="16" fill="currentColor">
+    <path d="M12 5l-8 8M4 5l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+  Button with Icon
+</button>
+```
+
+```css
+.btn {
+  /* 字体 */
+  font-family: var(--font-body);
+  font-size: var(--text-label);
+  font-weight: var(--font-medium);
+  line-height: 1;
+
+  /* 间距 */
+  padding: var(--spacing-2) var(--spacing-4);
+
+  /* 圆角 */
+  border-radius: var(--radius-md);
+
+  /* 边框 */
+  border: 1px solid transparent;
+
+  /* 过渡 */
+  transition: all var(--duration-fast) var(--easing-ease-in-out);
+
+  /* 布局 */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+.btn .icon {
+  width: 16px;
+  height: 16px;
+}
+```
+
+**设计决策**:
+- 使用 `inline-flex` 和 `gap` 确保图标与文本间距一致
+- Hover 使用颜色变化，Active 使用微妙的 scale 效果
+- 图标尺寸固定为 16px，确保视觉平衡
+
+---
+
+### Example 2: Card with Hover Effect
+
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Card Title</h3>
+    <span class="badge">New</span>
+  </div>
+  <div class="card-body">
+    <p class="card-description">
+      This is a card component with hover effect. Hover to see the shadow and transform animation.
+    </p>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-outline btn-sm">Learn More</button>
+  </div>
+</div>
+```
+
+```css
+.card {
+  /* 背景 */
+  background-color: white;
+
+  /* 间距 */
+  padding: 0;
+
+  /* 圆角 */
+  border-radius: var(--radius-lg);
+
+  /* 阴影 */
+  box-shadow: var(--shadow-md);
+
+  /* 边框 */
+  border: 1px solid var(--color-gray-200);
+
+  /* 过渡 */
+  transition: all var(--duration-base) var(--easing-ease-in-out);
+
+  /* 其他 */
+  overflow: hidden;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-4px);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-5);
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.card-title {
+  font-size: var(--text-h4);
+  font-weight: var(--font-semibold);
+  margin: 0;
+}
+
+.badge {
+  padding: var(--spacing-1) var(--spacing-2);
+  background-color: var(--color-primary-50);
+  color: var(--color-primary);
+  font-size: var(--text-caption);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-full);
+}
+
+.card-body {
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.card-description {
+  color: var(--color-gray-600);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.card-footer {
+  padding: var(--spacing-4) var(--spacing-5);
+  border-top: 1px solid var(--color-gray-200);
+}
+```
+
+**设计决策**:
+- Card 分为 Header, Body, Footer 三个区域，使用 border 分隔
+- Hover 效果结合阴影和位移，营造层级感
+- Badge 使用主色的浅色背景，确保视觉一致性
+
+---
+
+### Example 3: Form Input with Error State
+
+```html
+<div class="form-group">
+  <label for="email" class="form-label">Email Address</label>
+  <input
+    type="email"
+    id="email"
+    class="input input-error"
+    placeholder="you@example.com"
+    aria-invalid="true"
+    aria-describedby="email-error"
+  />
+  <p id="email-error" class="form-error">Please enter a valid email address.</p>
+</div>
+```
+
+```css
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.form-label {
+  font-size: var(--text-label);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-700);
+}
+
+.input {
+  /* 字体 */
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: 1.5;
+
+  /* 间距 */
+  padding: var(--spacing-3) var(--spacing-4);
+
+  /* 圆角 */
+  border-radius: var(--radius-md);
+
+  /* 边框 */
+  border: 1px solid var(--color-gray-300);
+
+  /* 背景 */
+  background-color: white;
+
+  /* 过渡 */
+  transition: all var(--duration-fast) var(--easing-ease-in-out);
+
+  /* 其他 */
+  width: 100%;
+  outline: none;
+}
+
+.input:hover {
+  border-color: var(--color-gray-400);
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-50);
+}
+
+.input-error {
+  border-color: var(--color-error);
+}
+
+.input-error:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); /* Error color with opacity */
+}
+
+.form-error {
+  font-size: var(--text-caption);
+  color: var(--color-error);
+  margin: 0;
+}
+```
+
+**设计决策**:
+- 使用 `flex-direction: column` 和 `gap` 确保标签、输入框、错误信息的间距一致
+- Error 状态使用红色边框和 box-shadow，视觉明确
+- 使用 ARIA 属性确保可访问性（`aria-invalid`, `aria-describedby`）
+
+---
+
+## 📱 Responsive Design
+
+### 断点定义（Breakpoints）
+
+| 名称 | 最小宽度 | 目标设备 |
+|------|----------|----------|
+| **Mobile** | 0px | 手机（<768px） |
+| **Tablet** | 768px | 平板（768-1023px） |
+| **Desktop** | 1024px | 桌面（1024-1439px） |
+| **Wide** | 1440px | 宽屏（≥1440px） |
+
+```css
+:root {
+  --breakpoint-mobile: 0px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-wide: 1440px;
+}
+```
+
+### 响应式策略
+- **Mobile-First**: 默认样式为移动端，使用 `@media (min-width: ...)` 添加更大屏幕样式
+- **核心原则**: 确保所有功能在移动端可用，桌面端提供增强体验
+
+### 响应式组件示例
+
+#### Grid Layout
+```css
+.grid {
+  display: grid;
+  gap: var(--spacing-4);
+  grid-template-columns: 1fr; /* Mobile: 1 column */
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
+  }
+}
+```
+
+---
+
+## ♿ Accessibility
+
+### 色彩对比度（Color Contrast）
+- ✅ 所有文本与背景的对比度 ≥ 4.5:1（WCAG AA）
+- ✅ 大文本（18px+ 或 14px+ bold）对比度 ≥ 3:1
+- ✅ UI 组件（按钮、输入框）对比度 ≥ 3:1
+
+### 键盘导航（Keyboard Navigation）
+- ✅ 所有交互元素可通过 Tab 键访问
+- ✅ Focus 状态清晰可见（使用 box-shadow 或 outline）
+- ✅ 支持 Enter/Space 触发按钮和链接
+
+### ARIA 属性（ARIA Attributes）
+- ✅ 使用 `aria-label` 为无文本的图标按钮添加说明
+- ✅ 使用 `aria-invalid` 和 `aria-describedby` 标记表单错误
+- ✅ 使用 `aria-expanded` 标记可展开/折叠的组件
+
+### Focus 状态设计
+```css
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* 或使用 box-shadow */
+.btn:focus-visible {
+  box-shadow: 0 0 0 3px var(--color-primary-50);
+}
+```
+
+---
+
+## 🖼️ Assets
+
+（如适用）
+
+### Icon 系统
+- **Icon Library**: {Heroicons / Feather / Lucide / Material Icons}
+- **尺寸**: 16px (sm), 20px (md), 24px (lg)
+- **颜色**: 使用 `currentColor` 继承文本颜色
+
+### Image 规范
+- **格式**: WebP（现代浏览器）, PNG/JPG（Fallback）
+- **压缩**: TinyPNG, ImageOptim
+- **尺寸**: 根据显示尺寸提供 1x, 2x, 3x 版本
+
+### Logo 使用规范
+- **主 Logo**: 用于导航栏、页脚
+- **简化 Logo**: 用于 Favicon, Mobile App Icon
+- **最小尺寸**: 不小于 24px（确保可识别）
+
+---
+
+## 🎯 Design Principles
+
+### 1. 简洁性（Simplicity）
+- 避免不必要的装饰和复杂性
+- 每个组件专注于单一功能
+- 使用留白营造呼吸感
+
+### 2. 一致性（Consistency）
+- 所有组件遵循统一的视觉语言
+- 颜色、字体、间距、圆角使用一致的系统
+- 交互行为保持一致（如 Hover, Focus 效果）
+
+### 3. 可访问性（Accessibility）
+- 色彩对比度符合 WCAG AA 标准
+- 支持键盘导航
+- 使用语义化 HTML 和 ARIA 属性
+
+### 4. 响应式（Responsive）
+- Mobile-First 设计
+- 所有组件在所有设备上可用
+- 根据屏幕尺寸优化布局和字体
+
+### 5. 性能优先（Performance）
+- 优化资源加载（图片压缩、字体子集化）
+- 避免过度使用动画和阴影
+- 使用 CSS Variables 减少重复代码
+
+---
+
+## 📝 Usage Guidelines
+
+### 如何使用本指南
+
+1. **开发新组件时**:
+   - 查阅对应组件的样式定义
+   - 复制示例代码并根据需求调整
+   - 确保遵循颜色、字体、间距系统
+
+2. **修改现有组件时**:
+   - 检查是否符合本指南的定义
+   - 如有偏差,优先修正为符合指南的样式
+   - 如需新增变体,确保与现有变体一致
+
+3. **生成 UI 原型时**:
+   - `/flow-ui` 命令会自动引用本指南
+   - 确保原型中的所有样式符合本指南
+
+4. **前端开发时**:
+   - `/flow-dev` 命令会自动引用本指南
+   - 所有组件实现必须遵循本指南的样式定义
+
+### 更新本指南
+
+- **何时更新**: 新增组件、调整设计系统、发现不一致
+- **如何更新**: 使用 `/flow-style --update` 命令
+- **版本控制**: 每次更新增加版本号，记录变更内容
+
+---
+
+## 🔗 Related Resources
+
+- **项目 Roadmap**: `devflow/ROADMAP.md`
+- **UI 原型**: `devflow/requirements/{REQ_ID}/UI_PROTOTYPE.html`
+- **组件实现**: `src/components/`
+- **Tailwind Config**: `tailwind.config.js`
+
+---
+
+## 📄 License & Credits
+
+（如适用）
+
+- **设计系统**: {Project Name} Design System
+- **设计师**: {Designer Name}
+- **开发者**: {Developer Name}
+- **灵感来源**: {Design References, e.g., Tailwind UI, Material Design}
+
+---
+
+**最后更新**: {YYYY-MM-DD 北京时间}
+**版本**: {Version}
+
+---