feat: 更新 UI 设计工作流，增强设计完整性检查并生成详细报告

.claude/commands/workflow/ui-design/explore-auto.md

@@ -310,18 +310,55 @@ IF design_source IN ["code_only", "hybrid"]:
     command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --base-path \"{code_base_path}\""
     SlashCommand(command)
 
-    style_report = Read("{base_path}/style-completeness-report.json")
+    # Check file existence and assess completeness
-    animation_report = Read("{base_path}/animation-completeness-report.json")
+    style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
-    layout_report = Read("{base_path}/layout-completeness-report.json")
+    animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
-
+    layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
-    style_complete = style_report.status == "complete"
-    animation_complete = animation_report.status == "complete"
-    layout_complete = layout_report.status == "complete"
 
+    style_complete = false
+    animation_complete = false
+    layout_complete = false
     missing_categories = []
-    IF NOT style_complete: missing_categories.extend(style_report.missing.keys())
+
-    IF NOT animation_complete: missing_categories.extend(animation_report.missing.keys())
+    # Style completeness check
-    IF NOT layout_complete: missing_categories.extend(layout_report.missing.keys())
+    IF style_exists:
+        tokens = Read("{base_path}/style-extraction/style-1/design-tokens.json")
+        style_complete = (
+            tokens.colors?.brand && tokens.colors?.surface &&
+            tokens.typography?.font_family && tokens.spacing &&
+            Object.keys(tokens.colors.brand || {}).length >= 3 &&
+            Object.keys(tokens.spacing || {}).length >= 8
+        )
+        IF NOT style_complete AND tokens._metadata?.completeness?.missing_categories:
+            missing_categories.extend(tokens._metadata.completeness.missing_categories)
+    ELSE:
+        missing_categories.push("style tokens")
+
+    # Animation completeness check
+    IF animation_exists:
+        anim = Read("{base_path}/animation-extraction/animation-tokens.json")
+        animation_complete = (
+            anim.duration && anim.easing &&
+            Object.keys(anim.duration || {}).length >= 3 &&
+            Object.keys(anim.easing || {}).length >= 3
+        )
+        IF NOT animation_complete AND anim._metadata?.completeness?.missing_items:
+            missing_categories.extend(anim._metadata.completeness.missing_items)
+    ELSE:
+        missing_categories.push("animation tokens")
+
+    # Layout completeness check
+    IF layout_exists:
+        layouts = Read("{base_path}/layout-extraction/layout-templates.json")
+        layout_complete = (
+            layouts.layout_templates?.length >= 3 &&
+            layouts.extraction_metadata?.layout_system?.type &&
+            layouts.extraction_metadata?.responsive?.breakpoints
+        )
+        IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
+            missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
+    ELSE:
+        missing_categories.push("layout templates")
 
     needs_visual_supplement = false
 

.claude/commands/workflow/ui-design/imitate-auto.md

@@ -235,24 +235,55 @@ IF design_source == "hybrid":
         design_source = "web"
 
     IF design_source == "hybrid":
-        # Read completeness reports
+        # Check file existence and assess completeness
-        style_report = Read("{base_path}/style-completeness-report.json")
+        style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
-        animation_report = Read("{base_path}/animation-completeness-report.json")
+        animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
-        layout_report = Read("{base_path}/layout-completeness-report.json")
+        layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
 
-        # Assess overall completeness
+        style_complete = false
-        style_complete = style_report.status == "complete"
+        animation_complete = false
-        animation_complete = animation_report.status == "complete"
+        layout_complete = false
-        layout_complete = layout_report.status == "complete"
-
-        # Aggregate missing content
         missing_categories = []
-        IF NOT style_complete:
+
-            missing_categories.extend(style_report.missing.keys())
+        # Style completeness check
-        IF NOT animation_complete:
+        IF style_exists:
-            missing_categories.extend(animation_report.missing.keys())
+            tokens = Read("{base_path}/style-extraction/style-1/design-tokens.json")
-        IF NOT layout_complete:
+            style_complete = (
-            missing_categories.extend(layout_report.missing.keys())
+                tokens.colors?.brand && tokens.colors?.surface &&
+                tokens.typography?.font_family && tokens.spacing &&
+                Object.keys(tokens.colors.brand || {}).length >= 3 &&
+                Object.keys(tokens.spacing || {}).length >= 8
+            )
+            IF NOT style_complete AND tokens._metadata?.completeness?.missing_categories:
+                missing_categories.extend(tokens._metadata.completeness.missing_categories)
+        ELSE:
+            missing_categories.push("style tokens")
+
+        # Animation completeness check
+        IF animation_exists:
+            anim = Read("{base_path}/animation-extraction/animation-tokens.json")
+            animation_complete = (
+                anim.duration && anim.easing &&
+                Object.keys(anim.duration || {}).length >= 3 &&
+                Object.keys(anim.easing || {}).length >= 3
+            )
+            IF NOT animation_complete AND anim._metadata?.completeness?.missing_items:
+                missing_categories.extend(anim._metadata.completeness.missing_items)
+        ELSE:
+            missing_categories.push("animation tokens")
+
+        # Layout completeness check
+        IF layout_exists:
+            layouts = Read("{base_path}/layout-extraction/layout-templates.json")
+            layout_complete = (
+                layouts.layout_templates?.length >= 3 &&
+                layouts.extraction_metadata?.layout_system?.type &&
+                layouts.extraction_metadata?.responsive?.breakpoints
+            )
+            IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
+                missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
+        ELSE:
+            missing_categories.push("layout templates")
 
         # Report code analysis results
         IF len(missing_categories) > 0:

.claude/commands/workflow/ui-design/import-from-code.md

@@ -208,88 +208,146 @@ Task(ui-design-agent): `
 
   ## Output Requirements
 
-  Generate 1 file: ${base_path}/style-completeness-report.json
+  Generate 2 files in ${base_path}/style-extraction/style-1/:
+  1. design-tokens.json (production-ready design tokens)
+  2. style-guide.md (design philosophy and usage guide)
 
-  ### Structure:
+  ### design-tokens.json Structure:
   {
-    "agent": "style-agent",
+    "colors": {
-    "status": "complete" | "partial" | "failed",
+      "brand": {
-    "analysis_time": "ISO8601 timestamp",
+        "primary": {"value": "#0066cc", "source": "file.css:23"},
-    "files_analyzed": {
+        "secondary": {"value": "#6c757d", "source": "file.css:24"}
-      "css": ["list of CSS/SCSS files read"],
-      "js": ["list of JS/TS files read"],
-      "html": ["list of HTML files read"]
-    },
-    "found": {
-      "colors": {
-        "count": 12,
-        "tokens": [
-          {"value": "#0066cc", "variable": "--color-primary", "source": "file.css:23", "type": "brand"}
-        ],
-        "categories": {
-          "brand": 3,
-          "semantic": 4,
-          "surface": 2,
-          "text": 2,
-          "border": 1
-        }
       },
-      "typography": {
+      "surface": {
-        "count": 8,
+        "background": {"value": "#ffffff", "source": "file.css:10"},
-        "font_families": [
+        "card": {"value": "#f8f9fa", "source": "file.css:11"}
-          {"value": "system-ui, sans-serif", "variable": "--font-base", "source": "theme.js:12"}
-        ],
-        "font_sizes": [...],
-        "font_weights": [...],
-        "line_heights": [...],
-        "letter_spacing": [...]
       },
-      "spacing": {
+      "semantic": {
-        "count": 12,
+        "success": {"value": "#28a745", "source": "file.css:30"},
-        "tokens": [
+        "warning": {"value": "#ffc107", "source": "file.css:31"},
-          {"value": "0.25rem", "variable": "--spacing-1", "source": "styles.css:5"}
+        "error": {"value": "#dc3545", "source": "file.css:32"}
-        ],
-        "system_type": "8px-grid | 4px-grid | custom | none"
       },
-      "shadows": {
+      "text": {
-        "count": 4,
+        "primary": {"value": "#212529", "source": "file.css:15"},
-        "tokens": [
+        "secondary": {"value": "#6c757d", "source": "file.css:16"}
-          {"value": "0 1px 2px rgba(0,0,0,0.05)", "variable": "--shadow-sm", "source": "theme.css:45"}
-        ]
       },
-      "borders": {
+      "border": {
-        "radius": [...],
+        "default": {"value": "#dee2e6", "source": "file.css:20"}
-        "width": [...],
-        "colors": [...]
-      },
-      "breakpoints": {
-        "count": 5,
-        "tokens": [
-          {"value": "640px", "variable": "$breakpoint-sm", "source": "media.scss:3"}
-        ]
       }
     },
-    "missing": {
+    "typography": {
-      "colors": {
+      "font_family": {
-        "categories": ["accent", "warning"],
+        "base": {"value": "system-ui, sans-serif", "source": "theme.js:12"},
-        "reason": "No accent or warning colors found in any file type"
+        "heading": {"value": "Georgia, serif", "source": "theme.js:13"}
       },
-      "typography": {
+      "font_size": {
-        "items": ["letter-spacing scale"],
+        "xs": {"value": "0.75rem", "source": "styles.css:5"},
-        "reason": "No letter-spacing tokens found"
+        "sm": {"value": "0.875rem", "source": "styles.css:6"},
+        "base": {"value": "1rem", "source": "styles.css:7"},
+        "lg": {"value": "1.125rem", "source": "styles.css:8"},
+        "xl": {"value": "1.25rem", "source": "styles.css:9"}
       },
-      "spacing": {
+      "font_weight": {
-        "items": ["negative spacing"],
+        "normal": {"value": "400", "source": "styles.css:12"},
-        "reason": "No negative spacing tokens found"
+        "medium": {"value": "500", "source": "styles.css:13"},
+        "bold": {"value": "700", "source": "styles.css:14"}
+      },
+      "line_height": {
+        "tight": {"value": "1.25", "source": "styles.css:18"},
+        "normal": {"value": "1.5", "source": "styles.css:19"},
+        "relaxed": {"value": "1.75", "source": "styles.css:20"}
+      },
+      "letter_spacing": {
+        "tight": {"value": "-0.025em", "source": "styles.css:24"},
+        "normal": {"value": "0", "source": "styles.css:25"},
+        "wide": {"value": "0.025em", "source": "styles.css:26"}
       }
     },
-    "recommendations": [
+    "spacing": {
-      "Define accent color for interactive elements",
+      "0": {"value": "0", "source": "styles.css:30"},
-      "Add semantic colors (warning, error, success)",
+      "1": {"value": "0.25rem", "source": "styles.css:31"},
-      "Complete letter-spacing scale for typography system"
+      "2": {"value": "0.5rem", "source": "styles.css:32"},
-    ]
+      "3": {"value": "0.75rem", "source": "styles.css:33"},
+      "4": {"value": "1rem", "source": "styles.css:34"},
+      "6": {"value": "1.5rem", "source": "styles.css:35"},
+      "8": {"value": "2rem", "source": "styles.css:36"},
+      "12": {"value": "3rem", "source": "styles.css:37"}
+    },
+    "opacity": {
+      "0": {"value": "0", "source": "styles.css:40"},
+      "50": {"value": "0.5", "source": "styles.css:41"},
+      "100": {"value": "1", "source": "styles.css:42"}
+    },
+    "border_radius": {
+      "none": {"value": "0", "source": "styles.css:45"},
+      "sm": {"value": "0.125rem", "source": "styles.css:46"},
+      "base": {"value": "0.25rem", "source": "styles.css:47"},
+      "lg": {"value": "0.5rem", "source": "styles.css:48"},
+      "full": {"value": "9999px", "source": "styles.css:49"}
+    },
+    "shadows": {
+      "sm": {"value": "0 1px 2px rgba(0,0,0,0.05)", "source": "theme.css:45"},
+      "base": {"value": "0 1px 3px rgba(0,0,0,0.1)", "source": "theme.css:46"},
+      "md": {"value": "0 4px 6px rgba(0,0,0,0.1)", "source": "theme.css:47"},
+      "lg": {"value": "0 10px 15px rgba(0,0,0,0.1)", "source": "theme.css:48"}
+    },
+    "breakpoints": {
+      "sm": {"value": "640px", "source": "media.scss:3"},
+      "md": {"value": "768px", "source": "media.scss:4"},
+      "lg": {"value": "1024px", "source": "media.scss:5"},
+      "xl": {"value": "1280px", "source": "media.scss:6"}
+    },
+    "_metadata": {
+      "extraction_source": "code_import",
+      "files_analyzed": {
+        "css": ["list of CSS/SCSS files read"],
+        "js": ["list of JS/TS files read"],
+        "html": ["list of HTML files read"]
+      },
+      "completeness": {
+        "colors": "complete | partial | minimal",
+        "typography": "complete | partial | minimal",
+        "spacing": "complete | partial | minimal",
+        "missing_categories": ["accent", "warning"],
+        "recommendations": [
+          "Define accent color for interactive elements",
+          "Add semantic colors (warning, error, success)"
+        ]
+      }
+    }
   }
 
+  ### style-guide.md Structure:
+ 
+  # Design System Style Guide
+
+  ## Overview
+  Extracted from code files: [list of source files]
+
+  ## Colors
+  - **Brand**: Primary, Secondary
+  - **Surface**: Background, Card
+  - **Semantic**: Success, Warning, Error
+  - **Text**: Primary, Secondary
+  - **Border**: Default
+
+  ## Typography
+  - **Font Families**: Base (system-ui), Heading (Georgia)
+  - **Font Sizes**: xs to xl (0.75rem - 1.25rem)
+  - **Font Weights**: Normal (400), Medium (500), Bold (700)
+
+  ## Spacing
+  System: 8px-grid (0, 0.25rem, 0.5rem, ..., 3rem)
+
+  ## Missing Elements
+  - Accent colors for interactive elements
+  - Extended shadow scale
+
+  ## Usage
+  All tokens are production-ready and can be used with CSS variables.
+  
+
   ## Completeness Criteria
   - **colors**: ≥5 categories (brand, semantic, surface, text, border), ≥10 tokens
   - **typography**: ≥3 font families, ≥8 sizes, ≥5 weights
@@ -302,14 +360,16 @@ Task(ui-design-agent): `
   - ✅ Use Read() tool for each file you want to analyze
   - ✅ Cross-reference between file types for better extraction
   - ✅ Extract all visual token types systematically
-  - ✅ Report MISSING content with specific reasons
+  - ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
-  - ✅ Use Write() immediately to save: ${base_path}/style-completeness-report.json
+  - ✅ Use Write() to save both files:
-  - ✅ If no data found, report as "failed" with detailed missing analysis
+    - ${base_path}/style-extraction/style-1/design-tokens.json
+    - ${base_path}/style-extraction/style-1/style-guide.md
+  - ✅ Include _metadata.completeness field to track missing content
   - ❌ NO external research or MCP calls
 `
 ```
 
-#### Animation Agent Task (animation-completeness-report.json)
+#### Animation Agent Task
 
 **Agent Task**:
 
@@ -345,64 +405,123 @@ Task(ui-design-agent): `
 
   ## Output Requirements
 
-  Generate 1 file: ${base_path}/animation-completeness-report.json
+  Generate 2 files in ${base_path}/animation-extraction/:
+  1. animation-tokens.json (production-ready animation tokens)
+  2. animation-guide.md (animation usage guide)
 
-  ### Structure:
+  ### animation-tokens.json Structure:
   {
-    "agent": "animation-agent",
+    "duration": {
-    "status": "complete" | "partial" | "failed",
+      "instant": {"value": "0ms", "source": "animations.css:10"},
-    "analysis_time": "ISO8601 timestamp",
+      "fast": {"value": "150ms", "source": "animations.css:12"},
-    "files_analyzed": {
+      "base": {"value": "250ms", "source": "animations.css:13"},
-      "css": ["list of CSS/SCSS files read"],
+      "slow": {"value": "500ms", "source": "animations.css:14"}
-      "js": ["list of JS/TS files read"],
-      "html": ["list of HTML files read"]
     },
-    "framework_detected": "framer-motion | gsap | css-animations | react-spring | none",
+    "easing": {
-    "found": {
+      "linear": {"value": "linear", "source": "animations.css:20"},
-      "durations": {
+      "ease-in": {"value": "cubic-bezier(0.4, 0, 1, 1)", "source": "theme.js:45"},
-        "count": 3,
+      "ease-out": {"value": "cubic-bezier(0, 0, 0.2, 1)", "source": "theme.js:46"},
-        "tokens": [
+      "ease-in-out": {"value": "cubic-bezier(0.4, 0, 0.2, 1)", "source": "theme.js:47"}
-          {"value": "150ms", "variable": "--duration-fast", "source": "animations.css:12"}
+    },
-        ]
+    "transitions": {
+      "color": {
+        "property": "color",
+        "duration": "var(--duration-fast)",
+        "easing": "var(--ease-out)",
+        "source": "transitions.css:30"
       },
-      "easing": {
+      "transform": {
-        "count": 4,
+        "property": "transform",
-        "tokens": [
+        "duration": "var(--duration-base)",
-          {"value": "cubic-bezier(0.4, 0, 0.2, 1)", "variable": "--ease-in-out", "source": "theme.js:45"}
+        "easing": "var(--ease-in-out)",
-        ]
+        "source": "transitions.css:35"
       },
-      "keyframes": {
+      "opacity": {
-        "count": 5,
+        "property": "opacity",
-        "animations": [
+        "duration": "var(--duration-fast)",
-          {"name": "fadeIn", "keyframes": {...}, "source": "styles.css:67"}
+        "easing": "var(--ease-out)",
-        ]
+        "source": "transitions.css:40"
-      },
-      "transitions": {
-        "count": 8,
-        "properties": ["opacity", "transform", "background-color"]
       }
     },
-    "missing": {
+    "keyframes": {
-      "durations": {
+      "fadeIn": {
-        "items": ["slow duration (>500ms)"],
+        "name": "fadeIn",
-        "reason": "No slow animation durations found"
+        "keyframes": {
+          "0%": {"opacity": "0"},
+          "100%": {"opacity": "1"}
+        },
+        "source": "styles.css:67"
       },
-      "easing": {
+      "slideInUp": {
-        "items": ["bounce easing"],
+        "name": "slideInUp",
-        "reason": "No bounce or spring easing functions"
+        "keyframes": {
-      },
+          "0%": {"transform": "translateY(20px)", "opacity": "0"},
-      "keyframes": {
+          "100%": {"transform": "translateY(0)", "opacity": "1"}
-        "items": ["slide animations"],
+        },
-        "reason": "No slide-in/slide-out keyframes found"
+        "source": "styles.css:75"
       }
     },
-    "recommendations": [
+    "interactions": {
-      "Add slow duration for complex animations",
+      "button-hover": {
-      "Define spring/bounce easing for interactive feedback",
+        "trigger": "hover",
-      "Create slide animations for drawer/modal transitions"
+        "properties": ["background-color", "transform"],
-    ]
+        "duration": "var(--duration-fast)",
+        "easing": "var(--ease-out)",
+        "source": "button.css:45"
+      }
+    },
+    "_metadata": {
+      "extraction_source": "code_import",
+      "framework_detected": "css-animations | framer-motion | gsap | none",
+      "files_analyzed": {
+        "css": ["list of CSS/SCSS files read"],
+        "js": ["list of JS/TS files read"],
+        "html": ["list of HTML files read"]
+      },
+      "completeness": {
+        "durations": "complete | partial | minimal",
+        "easing": "complete | partial | minimal",
+        "keyframes": "complete | partial | minimal",
+        "missing_items": ["bounce easing", "slide animations"],
+        "recommendations": [
+          "Add slow duration for complex animations",
+          "Define spring/bounce easing for interactive feedback"
+        ]
+      }
+    }
   }
 
+  ### animation-guide.md Structure:
+  
+  # Animation System Guide
+
+  ## Overview
+  Extracted from code files: [list of source files]
+  Framework detected: [css-animations | framer-motion | gsap | none]
+
+  ## Durations
+  - **Instant**: 0ms
+  - **Fast**: 150ms (UI feedback)
+  - **Base**: 250ms (standard transitions)
+  - **Slow**: 500ms (complex animations)
+
+  ## Easing Functions
+  - **Linear**: Constant speed
+  - **Ease-out**: Fast start, slow end (entering elements)
+  - **Ease-in-out**: Smooth acceleration and deceleration
+
+  ## Keyframe Animations
+  - **fadeIn**: Opacity 0 → 1
+  - **slideInUp**: Slide from bottom with fade
+
+  ## Missing Elements
+  - Bounce/spring easing for playful interactions
+  - Slide-out animations
+
+  ## Usage
+  All animation tokens use CSS variables and can be referenced in transitions.
+
+
   ## Completeness Criteria
   - **durations**: ≥3 (fast, medium, slow)
   - **easing**: ≥3 functions (ease-in, ease-out, ease-in-out)
@@ -414,14 +533,16 @@ Task(ui-design-agent): `
   - ✅ Use Read() tool for each file you want to analyze
   - ✅ Detect animation framework if used
   - ✅ Extract all animation-related tokens
-  - ✅ Report MISSING content with specific reasons
+  - ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
-  - ✅ Use Write() immediately to save: ${base_path}/animation-completeness-report.json
+  - ✅ Use Write() to save both files:
-  - ✅ If no data found, report as "failed" with detailed missing analysis
+    - ${base_path}/animation-extraction/animation-tokens.json
+    - ${base_path}/animation-extraction/animation-guide.md
+  - ✅ Include _metadata.completeness field to track missing content
   - ❌ NO external research or MCP calls
 `
 ```
 
-#### Layout Agent Task (layout-completeness-report.json)
+#### Layout Agent Task
 
 **Agent Task**:
 
@@ -457,20 +578,19 @@ Task(ui-design-agent): `
 
   ## Output Requirements
 
-  Generate 1 file: ${base_path}/layout-completeness-report.json
+  Generate 1 file: ${base_path}/layout-extraction/layout-templates.json
 
-  ### Structure:
+  ### layout-templates.json Structure:
   {
-    "agent": "layout-agent",
+    "extraction_metadata": {
-    "status": "complete" | "partial" | "failed",
+      "extraction_source": "code_import",
-    "analysis_time": "ISO8601 timestamp",
+      "analysis_time": "ISO8601 timestamp",
-    "files_analyzed": {
+      "files_analyzed": {
-      "css": ["list of CSS/SCSS files read"],
+        "css": ["list of CSS/SCSS files read"],
-      "js": ["list of JS/TS files read"],
+        "js": ["list of JS/TS files read"],
-      "html": ["list of HTML files read"]
+        "html": ["list of HTML files read"]
-    },
+      },
-    "naming_convention": "BEM | SMACSS | utility-first | css-modules | custom",
+      "naming_convention": "BEM | SMACSS | utility-first | css-modules | custom",
-    "found": {
       "layout_system": {
         "type": "12-column | flexbox | css-grid | custom",
         "confidence": "high | medium | low",
@@ -479,44 +599,71 @@ Task(ui-design-agent): `
         "column_classes": ["col-1", "col-md-6"],
         "source_files": ["grid.css", "Layout.jsx"]
       },
-      "components": {
-        "count": 5,
-        "patterns": {
-          "button": {
-            "base_class": "btn",
-            "variants": ["btn-primary", "btn-secondary"],
-            "sizes": ["btn-sm", "btn-lg"],
-            "states": ["hover", "active", "disabled"],
-            "source": "button.css:12"
-          },
-          "card": {...},
-          "input": {...}
-        }
-      },
       "responsive": {
         "breakpoint_prefixes": ["sm:", "md:", "lg:", "xl:"],
         "mobile_first": true,
+        "breakpoints": {
+          "sm": "640px",
+          "md": "768px",
+          "lg": "1024px",
+          "xl": "1280px"
+        },
         "source": "responsive.scss:5"
+      },
+      "completeness": {
+        "layout_system": "complete | partial | minimal",
+        "components": "complete | partial | minimal",
+        "responsive": "complete | partial | minimal",
+        "missing_items": ["gap utilities", "modal", "dropdown"],
+        "recommendations": [
+          "Add gap utilities for consistent spacing in grid layouts",
+          "Define modal/dropdown/tabs component patterns"
+        ]
       }
     },
-    "missing": {
+    "layout_templates": [
-      "layout_system": {
+      {
-        "items": ["gap utilities"],
+        "target": "button",
-        "reason": "No gap/gutter utilities found in grid system"
+        "variant_id": "layout-1",
+        "device_type": "responsive",
+        "component_type": "component",
+        "dom_structure": {
+          "tag": "button",
+          "classes": ["btn", "btn-primary"],
+          "children": [
+            {"tag": "span", "classes": ["btn-text"], "content": "{{text}}"}
+          ],
+          "variants": {
+            "primary": {"classes": ["btn", "btn-primary"]},
+            "secondary": {"classes": ["btn", "btn-secondary"]}
+          },
+          "sizes": {
+            "sm": {"classes": ["btn-sm"]},
+            "base": {"classes": []},
+            "lg": {"classes": ["btn-lg"]}
+          },
+          "states": ["hover", "active", "disabled"]
+        },
+        "css_layout_rules": "display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-base);",
+        "source": "button.css:12"
       },
-      "components": {
+      {
-        "items": ["modal", "dropdown", "tabs"],
+        "target": "card",
-        "reason": "Common interactive components not found"
+        "variant_id": "layout-1",
-      },
+        "device_type": "responsive",
-      "responsive": {
+        "component_type": "component",
-        "items": ["container queries"],
+        "dom_structure": {
-        "reason": "Only media queries found, no container queries"
+          "tag": "div",
+          "classes": ["card"],
+          "children": [
+            {"tag": "div", "classes": ["card-header"], "content": "{{title}}"},
+            {"tag": "div", "classes": ["card-body"], "content": "{{content}}"},
+            {"tag": "div", "classes": ["card-footer"], "content": "{{footer}}"}
+          ]
+        },
+        "css_layout_rules": "display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-4); background: var(--color-surface-card);",
+        "source": "card.css:25"
       }
-    },
-    "recommendations": [
-      "Add gap utilities for consistent spacing in grid layouts",
-      "Define modal/dropdown/tabs component patterns",
-      "Consider container queries for component-level responsiveness"
     ]
   }
 
@@ -531,9 +678,9 @@ Task(ui-design-agent): `
   - ✅ Use Read() tool for each file you want to analyze
   - ✅ Identify naming conventions and layout systems
   - ✅ Extract component patterns with variants and states
-  - ✅ Report MISSING content with specific reasons
+  - ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
-  - ✅ Use Write() immediately to save: ${base_path}/layout-completeness-report.json
+  - ✅ Use Write() to save: ${base_path}/layout-extraction/layout-templates.json
-  - ✅ If no data found, report as "failed" with detailed missing analysis
+  - ✅ Include extraction_metadata.completeness field to track missing content
   - ❌ NO external research or MCP calls
 `
 ```
@@ -565,24 +712,49 @@ echo "[Phase 1] Parallel agent analysis complete"
 
 **Location**: `${base_path}/`
 
+**Directory Structure**:
+```
+${base_path}/
+├── style-extraction/
+│   └── style-1/
+│       ├── design-tokens.json       # Production-ready design tokens
+│       └── style-guide.md           # Design philosophy and usage
+├── animation-extraction/
+│   ├── animation-tokens.json        # Animation/transition tokens
+│   └── animation-guide.md           # Animation usage guide
+├── layout-extraction/
+│   └── layout-templates.json        # Layout patterns and component structures
+└── .intermediates/
+    └── import-analysis/
+        ├── css-files.txt            # Discovered CSS/SCSS files
+        ├── js-files.txt             # Discovered JS/TS files
+        └── html-files.txt           # Discovered HTML files
+```
+
 **Files**:
-1. **style-completeness-report.json**
+1. **style-extraction/style-1/design-tokens.json**
-   - Style agent analysis results
+   - Production-ready design tokens
-   - Found tokens: colors, typography, spacing, shadows, borders
+   - Categories: colors, typography, spacing, opacity, border_radius, shadows, breakpoints
-   - Missing content: specific gaps with reasons
+   - Metadata: extraction_source, files_analyzed, completeness assessment
-   - Recommendations: actionable improvement suggestions
 
-2. **animation-completeness-report.json**
+2. **style-extraction/style-1/style-guide.md**
-   - Animation agent analysis results
+   - Design system overview
-   - Found tokens: durations, easing, keyframes, transitions
+   - Token categories and usage
-   - Framework detection: framer-motion, gsap, css-animations, etc.
+   - Missing elements and recommendations
-   - Missing content: animation gaps with reasons
 
-3. **layout-completeness-report.json**
+3. **animation-extraction/animation-tokens.json**
-   - Layout agent analysis results
+   - Animation tokens: duration, easing, transitions, keyframes, interactions
-   - Found patterns: layout system, components, responsive design
+   - Framework detection: css-animations, framer-motion, gsap, etc.
-   - Naming convention: BEM, SMACSS, utility-first, etc.
+   - Metadata: extraction_source, completeness assessment
-   - Missing content: layout/component gaps with reasons
+
+4. **animation-extraction/animation-guide.md**
+   - Animation system overview
+   - Usage guidelines and examples
+
+5. **layout-extraction/layout-templates.json**
+   - Layout templates for each discovered component
+   - Extraction metadata: naming_convention, layout_system, responsive strategy
+   - Component patterns with DOM structure and CSS rules
 
 **Intermediate Files**: `.intermediates/import-analysis/`
 - `css-files.txt` - Discovered CSS/SCSS files