cc-devflow 4.2.0 → 4.3.0

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

@@ -1,8 +1,8 @@
 ---
 template_name: STYLE_TEMPLATE
-version: 1.0.0
+version: 2.0.0
 description: Template for generating project-level design style guide (STYLE.md)
-last_updated: 2025-11-09 北京时间
+last_updated: 2026-03-12 北京时间
 ---
 
 # Design Style Guide - {Project Name}
@@ -22,20 +22,12 @@ last_updated: 2025-11-09 北京时间
 ### 设计理念
 {简要描述设计系统的核心价值和设计理念，2-3 句话}
 
-例如：
-> 我们的设计系统以"简洁、高效、可访问"为核心，追求极致的用户体验和开发者体验。所有组件遵循一致的视觉语言，确保产品的专业度和易用性。
-
 ### 适用范围
 - ✅ 所有 Web 应用界面（Desktop, Tablet, Mobile）
 - ✅ 所有前端组件库
 - ✅ 所有 UI 原型设计
 - ❌ 营销材料（使用独立的品牌指南）
 
-### 更新历史
-- **v1.0.0** (YYYY-MM-DD): 初始版本，建立核心设计系统
-- **v1.1.0** (YYYY-MM-DD): 新增暗色模式支持
-- (记录每次更新的版本号、日期、变更内容)
-
 ---
 
 ## 🎨 Color Palette
@@ -43,98 +35,51 @@ last_updated: 2025-11-09 北京时间
 ### 主色（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}%) | 主色深背景 |
+| 等级 | Hex | 使用场景 |
+|------|-----|----------|
+| Primary 50 | {#XXXXXX} | 主色浅背景 |
+| Primary 500 | {#XXXXXX} | 主色（默认） |
+| Primary 600 | {#XXXXXX} | Active 状态 |
+| Primary 900 | {#XXXXXX} | 主色深背景 |
 
 **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 同上）
+| 等级 | Hex | 使用场景 |
+|------|-----|----------|
+| Secondary 500 | {#XXXXXX} | 辅色（默认） |
 
 ### 语义色（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}%) | 信息提示、帮助文本 |
+| 类型 | Hex | 使用场景 |
+|------|-----|----------|
+| Success | {#XXXXXX} | 成功提示、完成状态、正向反馈 |
+| Warning | {#XXXXXX} | 警告提示、需要注意的信息 |
+| Error | {#XXXXXX} | 错误提示、失败状态、危险操作 |
+| Info | {#XXXXXX} | 信息提示、帮助文本 |
 
 ### 中性色（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}%) | 最深文本 |
+| 等级 | Hex | 使用场景 |
+|------|-----|----------|
+| Gray 50 | {#XXXXXX} | 浅背景 |
+| Gray 200 | {#XXXXXX} | 边框、分隔线 |
+| Gray 400 | {#XXXXXX} | 占位符文本 |
+| Gray 600 | {#XXXXXX} | 正文文本 |
+| Gray 900 | {#XXXXXX} | 最深文本 |
 
 ### 色彩对比度（Accessibility）
 所有颜色组合必须通过 **WCAG AA** 对比度测试：
@@ -142,11 +87,6 @@ module.exports = {
 - **大文本（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
@@ -157,66 +97,44 @@ module.exports = {
 ```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} | 标签、按钮文本 |
+| 类型 | Font Size | Line Height | Font Weight | 用途 |
+|------|-----------|-------------|-------------|------|
+| **H1** | {XXpx / X.XXrem} | {X.XX} | {XXX / bold} | 页面主标题 |
+| **H2** | {XXpx / X.XXrem} | {X.XX} | {XXX / semibold} | Section 标题 |
+| **H3** | {XXpx / X.XXrem} | {X.XX} | {XXX / semibold} | 子标题 |
+| **Body** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | 默认正文 |
+| **Caption** | {XXpx / X.XXrem} | {X.XX} | {XXX / normal} | 说明文字 |
+| **Label** | {XXpx / X.XXrem} | {X.XX} | {XXX / medium} | 标签、按钮文本 |
 
 **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;
@@ -226,38 +144,11 @@ module.exports = {
 
 ### 响应式字体（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）
+| 类型 | Desktop (≥1024px) | Mobile (<768px) |
+|------|-------------------|-----------------|
+| H1 | {XXpx} | {XXpx} |
+| H2 | {XXpx} | {XXpx} |
+| Body | {XXpx} | {XXpx} |
 
 ---
 
@@ -265,23 +156,21 @@ h1 {
 
 ### 基础单位（Base Unit）
 ```css
---spacing-base: {4px / 8px / 16px};
+--spacing-base: {4px / 8px};
 ```
 
 ### 间距等级（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} | 超大间距 |
+| 等级 | 值 | 使用场景 |
+|------|-----|----------|
+| 0 | 0px | 无间距 |
+| 1 | {XXpx} | 极小间距（图标与文本） |
+| 2 | {XXpx} | 小间距（按钮内部 padding） |
+| 3 | {XXpx} | 默认间距（输入框 padding） |
+| 4 | {XXpx} | 中等间距（卡片 padding） |
+| 6 | {XXpx} | 大间距（组件之间） |
+| 8 | {XXpx} | 布局间距 |
+| 12 | {XXpx} | 超大间距 |
 
 **CSS Variables**:
 ```css
@@ -291,10 +180,8 @@ h1 {
   --spacing-2: {XXpx};
   --spacing-3: {XXpx};
   --spacing-4: {XXpx};
-  --spacing-5: {XXpx};
   --spacing-6: {XXpx};
   --spacing-8: {XXpx};
-  --spacing-10: {XXpx};
   --spacing-12: {XXpx};
 
   /* 语义化别名 */
@@ -303,64 +190,30 @@ h1 {
   --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);
 }
 ```
@@ -373,30 +226,15 @@ h1 {
   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 {
@@ -404,728 +242,165 @@ h1 {
   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>
-```
+| 尺寸 | Padding | Font Size |
+|------|---------|-----------|
+| **sm** | var(--spacing-1) var(--spacing-3) | {XXpx} |
+| **md** | var(--spacing-2) var(--spacing-4) | {XXpx} |
+| **lg** | var(--spacing-3) var(--spacing-6) | {XXpx} |
 
 ---
 
 ### 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);
-
-  /* 其他 */
+  transition: all var(--duration-fast);
   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);
-}
-```
+- **Error**: `.input-error` - 红色边框 + 错误提示
+- **Success**: `.input-success` - 绿色边框
+- **Disabled**: `:disabled` - 灰色背景 + 禁用光标
 
 ---
 
 ### 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);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--duration-normal);
 }
-
 .card:hover {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
   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
+| 等级 | CSS Variable | 使用场景 |
+|------|--------------|----------|
+| **sm** | `--shadow-sm: 0 1px 2px rgba(0,0,0,0.05)` | 卡片、按钮 |
+| **md** | `--shadow-md: 0 4px 6px rgba(0,0,0,0.1)` | Hover 状态 |
+| **lg** | `--shadow-lg: 0 10px 15px rgba(0,0,0,0.1)` | Modal、Dropdown |
+| **xl** | `--shadow-xl: 0 20px 25px rgba(0,0,0,0.15)` | 浮层 |
 
 ---
 
 ## 🎬 Animations & Transitions
 
-### 过渡时长（Duration）
-
-| 名称 | 值 | 使用场景 |
-|------|-----|----------|
-| **Fast** | {XXXms} | Hover 效果、按钮点击 |
-| **Base** | {XXXms} | 默认过渡、卡片展开 |
-| **Slow** | {XXXms} | Modal 打开、页面切换 |
-
+### 时长（Duration）
 ```css
 :root {
-  --duration-fast: {XXXms};
-  --duration-base: {XXXms};
-  --duration-slow: {XXXms};
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 350ms;
 }
 ```
 
 ### 缓动函数（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);
+  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
 }
 ```
 
-### 常用动画（Keyframes）
-
-#### Fade In
+### 常用动画
 ```css
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.fade-in {
-  animation: fadeIn var(--duration-base) var(--easing-ease-out);
+@keyframes slideIn {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
 }
 ```
 
-#### Slide Up
+### 无障碍: 禁用动效
 ```css
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
   }
 }
-
-.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） |
+| **sm** | {XXpx} | 小组件（Badge, Tag） |
+| **md** | {XXpx} | 按钮、输入框 |
+| **lg** | {XXpx} | 卡片、Modal |
+| **full** | 9999px | 圆形按钮、Avatar |
 
 ```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） |
-
+### 断点（Breakpoints）
 ```css
-:root {
-  --breakpoint-mobile: 0px;
-  --breakpoint-tablet: 768px;
-  --breakpoint-desktop: 1024px;
-  --breakpoint-wide: 1440px;
-}
+/* Mobile: 320px-767px (默认) */
+/* Tablet: 768px-1023px */
+@media (min-width: 768px) { ... }
+/* Desktop: 1024px+ */
+@media (min-width: 1024px) { ... }
 ```
 
 ### 响应式策略
 - **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
@@ -1137,7 +412,7 @@ module.exports = {
 
 ### 键盘导航（Keyboard Navigation）
 - ✅ 所有交互元素可通过 Tab 键访问
-- ✅ Focus 状态清晰可见（使用 box-shadow 或 outline）
+- ✅ Focus 状态清晰可见
 - ✅ 支持 Enter/Space 触发按钮和链接
 
 ### ARIA 属性（ARIA Attributes）
@@ -1151,36 +426,10 @@ module.exports = {
   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）
@@ -1191,7 +440,7 @@ module.exports = {
 ### 2. 一致性（Consistency）
 - 所有组件遵循统一的视觉语言
 - 颜色、字体、间距、圆角使用一致的系统
-- 交互行为保持一致（如 Hover, Focus 效果）
+- 交互行为保持一致
 
 ### 3. 可访问性（Accessibility）
 - 色彩对比度符合 WCAG AA 标准
@@ -1200,67 +449,31 @@ module.exports = {
 
 ### 4. 响应式（Responsive）
 - Mobile-First 设计
-- 所有组件在所有设备上可用
-- 根据屏幕尺寸优化布局和字体
-
-### 5. 性能优先（Performance）
-- 优化资源加载（图片压缩、字体子集化）
-- 避免过度使用动画和阴影
-- 使用 CSS Variables 减少重复代码
+- 所有组件在不同屏幕尺寸下正常工作
 
 ---
 
 ## 📝 Usage Guidelines
 
-### 如何使用本指南
-
-1. **开发新组件时**:
-   - 查阅对应组件的样式定义
-   - 复制示例代码并根据需求调整
-   - 确保遵循颜色、字体、间距系统
-
-2. **修改现有组件时**:
-   - 检查是否符合本指南的定义
-   - 如有偏差,优先修正为符合指南的样式
-   - 如需新增变体,确保与现有变体一致
-
-3. **生成 UI 原型时**:
-   - `/flow:spec` 阶段会自动引用本指南
-   - 确保原型中的所有样式符合本指南
-
-4. **前端开发时**:
-   - `/flow:dev` 命令会自动引用本指南
-   - 所有组件实现必须遵循本指南的样式定义
+### For Designers
+1. 使用本指南中定义的 Design Tokens
+2. 新组件设计前检查是否已有类似组件
+3. 确保所有设计符合可访问性标准
 
-### 更新本指南
+### For Developers
+1. 使用 CSS Variables 而非硬编码值
+2. 遵循组件样式规范
+3. 确保响应式实现正确
 
-- **何时更新**: 新增组件、调整设计系统、发现不一致
-- **如何更新**: 使用 `/core-style --update` 命令
-- **版本控制**: 每次更新增加版本号，记录变更内容
+### For Product Managers
+1. 新功能设计应符合现有设计系统
+2. 特殊需求需与设计团队讨论
 
 ---
 
-## 🔗 Related Resources
+**Template Version**: 2.0.0 (Slimmed from 1266 lines to ~450 lines, -64%)
+**Last Updated**: 2026-03-12
+**Maintainer**: CC-DevFlow Team
+**License**: MIT
 
-- **项目 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}
-
----
+**[PROTOCOL]**: 变更时更新此头部，然后检查 CLAUDE.md