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/generate.md

@@ -99,7 +99,11 @@ Task(ui-design-agent): `
 
   2. Design Tokens:
      Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
-     Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
+     Extract: ALL token values including:
+       * colors, typography (with combinations), spacing, opacity
+       * border_radius, shadows, breakpoints
+       * component_styles (button, card, input variants)
+     Note: typography.combinations, opacity, and component_styles fields contain preset configurations using var() references
 
   3. Animation Tokens (OPTIONAL):
      IF exists("{base_path}/animation-extraction/animation-tokens.json"):
@@ -133,11 +137,21 @@ Task(ui-design-agent): `
      - Replace ALL var(--*) with actual token values from design-tokens.json
        Example: var(--spacing-4) → 1rem (from tokens.spacing.4)
        Example: var(--breakpoint-md) → 768px (from tokens.breakpoints.md)
+       Example: var(--opacity-80) → 0.8 (from tokens.opacity.80)
      - Add visual styling using design tokens:
        * Colors: tokens.colors.*
-       * Typography: tokens.typography.*
+       * Typography: tokens.typography.* (including combinations)
+       * Opacity: tokens.opacity.*
        * Shadows: tokens.shadows.*
        * Border radius: tokens.border_radius.*
+     - IF tokens.component_styles exists: Add component style classes
+       * Generate classes for button variants (.btn-primary, .btn-secondary)
+       * Generate classes for card variants (.card-default, .card-interactive)
+       * Generate classes for input variants (.input-default, .input-focus, .input-error)
+       * Use var() references that resolve to actual token values
+     - IF tokens.typography.combinations exists: Add typography preset classes
+       * Generate classes for typography presets (.text-heading-primary, .text-body-regular, .text-caption)
+       * Use var() references for family, size, weight, line-height, letter-spacing
      - IF has_animations == true: Inject animation tokens
        * Add CSS Custom Properties for animations at :root level:
          --duration-instant, --duration-fast, --duration-normal, etc.