refactor: 重构UI设计工作流的交互模式和字段架构

主要变更：

1. animation-extract.md 重构交互流程
   - Phase 2 交互从Agent移至主流程（参考artifacts.md模式）
   - 使用【问题N - 标签】格式，提供方向性指导而非具体示例
   - Phase 3 Agent改为纯合成任务（无用户交互）
   - 保留独立的animation-tokens.json输出

2. style-extract.md 字段扩展优化
   - 保留字段扩展：typography.combinations、opacity、component_styles、border_radius、shadows
   - 移除animations字段（由专门的animation-tokens.json提供）
   - 完善design-tokens.json格式文档

3. generate.md 支持新字段
   - 保留animation-tokens.json可选加载
   - 支持typography.combinations、opacity、component_styles
   - 生成对应CSS类（组件样式类、排版预设类）

4. batch-generate.md 字段支持
   - 解析新的design-tokens字段结构
   - 使用组件预设和排版预设

架构改进：
- 清晰分离：design-tokens.json（基础设计系统）+ animation-tokens.json（动画配置）
- 主流程交互：用户决策在主流程完成，Agent只负责合成
- 字段完整性：保留所有设计系统扩展字段

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/commands/workflow/ui-design/batch-generate.md

@@ -129,7 +129,10 @@ Task(ui-design-agent): `
   ## Reference
   - Layout inspiration: Read("{base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt")
   - Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
-    Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
+    Parse ALL token values including:
+    * colors, typography (with combinations), spacing, opacity
+    * border_radius, shadows, breakpoints
+    * component_styles (button, card, input variants)
   ${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
 
   ## Generation
@@ -152,14 +155,16 @@ Task(ui-design-agent): `
 
   2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
      - Self-contained: Direct token VALUES (no var())
-     - Use tokens: colors, fonts, spacing, borders, shadows
+     - Use tokens: colors, fonts, spacing, opacity, borders, shadows
+     - IF tokens.component_styles exists: Use component presets for buttons, cards, inputs
+     - IF tokens.typography.combinations exists: Use typography presets for headings and body text
      - Device-optimized: {device_type} styles
      ${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
      ${design_attributes ? `
      - Token selection: density → spacing, visual_weight → shadows` : ""}
 
   ## Notes
-  - ✅ Token VALUES directly from design-tokens.json
+  - ✅ Token VALUES directly from design-tokens.json (with typography.combinations, opacity, component_styles support)
   - ✅ Follow prompt requirements for {target}
   - ✅ Optimize for {device_type}
   - ❌ NO var() refs, NO external deps