diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md
index c01c3b6d..390bb6f3 100644
--- a/.claude/agents/ui-design-agent.md
+++ b/.claude/agents/ui-design-agent.md
@@ -71,13 +71,37 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
 5. **Record Code Snippets**: When in code import mode, capture complete code blocks with context
 6. **Write Files Immediately**: JSON files with embedded code snippets (when applicable)
 
+**Execution Modes**:
+
+Pattern 2 has two distinct execution modes that determine how code snippets and design patterns are obtained:
+
+1. **Code Import Mode** (Source: `import-from-code` command)
+   - **Data Source**: Existing source code files (CSS/SCSS/JS/TS/HTML)
+   - **Code Snippet Strategy**: Directly read source files and extract complete code blocks
+   - **MCP Usage**: ❌ NO Exa MCP research (only extract from provided code)
+   - **Process**: Read discovered-files.json → Read source files → Extract tokens with code snippets
+   - **Code Snippets**: Record actual code from source files in `_metadata.code_snippets` or `extraction_metadata.code_snippets`
+   - **Example Context Types**: css-variable, css-class, js-object, css-keyframes, react-component
+
+2. **Explore/Text Mode** (Source: `style-extract`, `layout-extract`, `animation-extract` commands)
+   - **Data Source**: User prompts, visual references, images, URLs
+   - **Code Snippet Strategy**: Creative generation based on research and best practices
+   - **MCP Usage**: ✅ YES - Use Exa MCP to research design patterns and obtain code examples
+   - **Process**: Analyze inputs → Research patterns via Exa → Generate tokens with example code
+   - **Code Snippets**: Generate example implementations based on modern patterns and best practices
+   - **MCP Queries**: "modern [pattern] implementation", "best practices for [feature]", "code examples for [component]"
+
+**Mode Detection**: Check task prompt for MODE field or extraction strategy indicators:
+- `MODE: style-extraction` or `MODE: animation-extraction` or `MODE: layout-extraction` with `SOURCE: [path]` → Code Import Mode
+- `MODE: style-generation` or prompt-based generation → Explore/Text Mode
+
 **Design System Generation**:
 - **Input**: Selected design direction OR visual references, computed styles (if available), user refinements
 - **Output**:
   - `{base_path}/style-extraction/style-{id}/design-tokens.json` (W3C format, OKLCH colors)
 - **Content**: Complete token system (colors, typography, spacing, opacity, shadows, border_radius, breakpoints, component_styles, typography.combinations)
 - **Code Snippets** (when in code import mode): Record complete code blocks in `_metadata.code_snippets` with source location, line numbers, and context type
-- **MCP Use**: Research modern color palettes, typography trends, design system patterns
+- **MCP Use** (Explore/Text mode only): Research modern color palettes, typography trends, design system patterns
 
 **Layout Template Generation**:
 - **Input**: Selected layout concepts OR visual references, device type, DOM structure data (if available)
@@ -446,6 +470,8 @@ STEP 5: Final Verification
 
 ### MCP Integration
 
+**⚠️ Mode-Specific Usage**: MCP tools are ONLY used in **Explore/Text Mode**. In **Code Import Mode**, extract directly from source files without MCP research.
+
 **Exa MCP: Design Research & Trends**
 
 *Use Cases*:
@@ -600,7 +626,7 @@ layout_results = mcp__exa__web_search_exa(
 - ✅ Include Google Fonts imports with fallback stacks (Pattern 2 & 3)
 - ✅ Use mobile-first responsive design with token-based breakpoints
 - ✅ Implement semantic HTML5 with ARIA attributes (Pattern 2 & 3)
-- ✅ Execute MCP research for modern patterns (Pattern 1 & 2 when applicable)
+- ✅ Execute MCP research for modern patterns (Pattern 1 & Pattern 2 Explore/Text mode only)
 - ✅ Record complete code snippets when in code import mode (_metadata.code_snippets with location, lines, snippet, context)
 
 **Target Independence**:
diff --git a/.claude/commands/workflow/ui-design/animation-extract.md b/.claude/commands/workflow/ui-design/animation-extract.md
index 69e65600..92fdb4d2 100644
--- a/.claude/commands/workflow/ui-design/animation-extract.md
+++ b/.claude/commands/workflow/ui-design/animation-extract.md
@@ -9,7 +9,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestio
 
 ## Overview
 
-Extract animation and transition patterns from prompt inference and image references using AI analysis. Directly generates production-ready animation systems with complete `animation-tokens.json` and `animation-guide.md`.
+Extract animation and transition patterns from prompt inference and image references using AI analysis. Directly generates production-ready animation systems with complete `animation-tokens.json`.
 
 **Strategy**: AI-Driven Animation Specification with Visual Previews
 
@@ -818,32 +818,17 @@ IF NOT refine_mode:
     }
   }
 
-  ### 2. animation-guide.md
-  Comprehensive usage guide with sections:
-  - **Animation Philosophy**: Rationale from user choices and CSS analysis
-  - **Duration Scale**: Explanation of timing values and usage contexts
-  - **Easing Functions**: When to use each easing curve
-  - **Transition Presets**: Property-specific transition guidelines
-  - **Keyframe Animations**: Available animations and use cases
-  - **Interaction Patterns**: Button, card, input animation examples
-  - **Page Transitions**: Route change animation implementation (if enabled)
-  - **Scroll Animations**: Scroll-trigger setup and configuration (if enabled)
-  - **Implementation Examples**: CSS and JavaScript code samples
-  - **Accessibility**: prefers-reduced-motion media query setup
-  - **Performance Best Practices**: Hardware acceleration, will-change usage
-
   ## Output File Paths
   - animation-tokens.json: {base_path}/animation-extraction/animation-tokens.json
-  - animation-guide.md: {base_path}/animation-extraction/animation-guide.md
 
   ## Critical Requirements
-  - ✅ Use Write() tool immediately for both files
+  - ✅ Use Write() tool immediately to generate JSON file
   - ✅ All tokens use CSS Custom Property format: var(--duration-fast)
   - ✅ Include prefers-reduced-motion media query guidance
   - ✅ Validate all cubic-bezier values are valid (4 numbers between 0-1)
   - ${user_answers ? "✅ READ analysis-options.json for user_selection field" : "✅ Use first option from each question as default"}
   - ❌ NO user questions or interaction in this phase
-  - ❌ NO external research or MCP calls
+  - ✅ Can use Exa MCP to research modern animation patterns and obtain code examples (Explore/Text mode)
     `
 
 ELSE:
@@ -898,7 +883,6 @@ ELSE:
       - If multiple selected refinements modify same token:
           * Apply refinements in ID order (lowest first)
           * Later refinements override earlier ones
-          * Document conflicts in animation-guide.md
 
       ## Generate Updated Files
 
@@ -909,33 +893,22 @@ ELSE:
       - Maintain var() references and semantic naming
       - Validate all cubic-bezier values
 
-      ### 2. animation-guide.md
-      Updated usage guide with refinement documentation:
-      - Original sections (Animation Philosophy, Duration Scale, etc.)
-      - **NEW: Refinement History** section:
-          * Applied refinements list
-          * Before/after comparisons
-          * Rationale for changes
-          * Migration notes if needed
-
       ## Output File Paths
       - animation-tokens.json: {base_path}/animation-extraction/animation-tokens.json (OVERWRITE)
-      - animation-guide.md: {base_path}/animation-extraction/animation-guide.md (UPDATE with refinement history)
 
       ## Critical Requirements
-      - ✅ Use Write() tool immediately for both files
+      - ✅ Use Write() tool immediately to generate JSON file
       - ✅ OVERWRITE existing animation-tokens.json with refined version
-      - ✅ UPDATE animation-guide.md (don't overwrite, add refinement history section)
       - ✅ All tokens use CSS Custom Property format: var(--duration-fast)
       - ✅ Include prefers-reduced-motion media query guidance
       - ✅ Validate all cubic-bezier values are valid (4 numbers between 0-1)
       - ${selected_refinements ? "✅ READ refinement-options.json for user_selection.selected_refinements" : "✅ Apply ALL refinements from refinement_options"}
       - ❌ NO user questions or interaction in this phase
-      - ❌ NO external research or MCP calls
+      - ✅ Can use Exa MCP to research modern animation patterns and obtain code examples (Explore/Text mode)
     `
 ```
 
-**Output**: Agent generates/updates 2 files (animation-tokens.json, animation-guide.md)
+**Output**: Agent generates/updates animation-tokens.json
 
 ## Phase 3: Verify Output
 
@@ -944,7 +917,6 @@ ELSE:
 ```bash
 # Verify animation system created
 bash(test -f {base_path}/animation-extraction/animation-tokens.json && echo "exists")
-bash(test -f {base_path}/animation-extraction/animation-guide.md && echo "exists")
 
 # Validate structure
 bash(cat {base_path}/animation-extraction/animation-tokens.json | grep -q "duration" && echo "valid")
@@ -957,7 +929,7 @@ bash(cat {base_path}/animation-extraction/animation-tokens.json | grep -q "easin
 bash(ls -lh {base_path}/animation-extraction/)
 ```
 
-**Output**: 2 files verified (animation-tokens.json, animation-guide.md)
+**Output**: animation-tokens.json verified
 
 ## Completion
 
@@ -998,8 +970,7 @@ Configuration:
 
 Generated Files:
 {base_path}/animation-extraction/
-├── animation-tokens.json      # Production-ready animation tokens
-└── animation-guide.md          # Usage guidelines and examples
+└── animation-tokens.json      # Production-ready animation tokens
 
 {IF has_images OR options.user_selection:
 Intermediate Analysis:
@@ -1067,8 +1038,7 @@ bash(ls {base_path}/animation-extraction/)
 │       ├── animations-{target}.json      # Extracted CSS (URL mode only)
 │       └── analysis-options.json         # Generated questions + user answers (embedded)
 └── animation-extraction/            # Final animation system
-    ├── animation-tokens.json        # Production-ready animation tokens
-    └── animation-guide.md            # Usage guide and examples
+    └── animation-tokens.json        # Production-ready animation tokens
 ```
 
 ## animation-tokens.json Format
diff --git a/.claude/commands/workflow/ui-design/layout-extract.md b/.claude/commands/workflow/ui-design/layout-extract.md
index 6fe2445c..68e8621d 100644
--- a/.claude/commands/workflow/ui-design/layout-extract.md
+++ b/.claude/commands/workflow/ui-design/layout-extract.md
@@ -659,20 +659,12 @@ FOR each task in task_list:
          - component_hierarchy (array of strings)
          - css_layout_rules (string)
 
-      2. **layout-guide.md** - {task.output_file.replace('.json', '-guide.md')}
-         Write layout system guide with:
-         - Layout Philosophy: Design philosophy from selected concept
-         - Component Hierarchy: Description of layout regions and their purpose
-         - Layout Pattern: Explanation of grid/flexbox structure
-         - Responsive Strategy: Breakpoint behavior and device optimizations
-         - Usage Guidelines: How to implement and customize the layout
-         - Accessibility Notes: ARIA roles and semantic HTML structure
-
       ## Critical Requirements
-      - ✅ Use Write() tool for BOTH files (JSON + MD)
+      - ✅ Use Write() tool to generate JSON file
       - ✅ Single template for {task.target} variant {task.variant_id}
       - ✅ Structure only, no visual styling
       - ✅ Token-based CSS (var())
+      - ✅ Can use Exa MCP to research modern layout patterns and obtain code examples (Explore/Text mode)
       - ✅ Maintain consistency with selected concept
     `
 ```
@@ -736,8 +728,7 @@ Generated Templates:
 {base_path}/layout-extraction/
 {FOR each target in targets:
   {FOR each variant_id in range(1, selections_per_target[target].selected_indices.length + 1):
-    ├── layout-{target}-{variant_id}.json
-    └── layout-{target}-{variant_id}-guide.md
+    └── layout-{target}-{variant_id}.json
   }
 }
 
@@ -793,8 +784,7 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
 │       ├── analysis-options.json      # Generated layout concepts + user selections (embedded)
 │       └── dom-structure-{target}.json   # Extracted DOM structure (URL mode only)
 └── layout-extraction/                 # Final layout templates
-    ├── layout-{target}-{variant}.json # Structural layout template JSON
-    └── layout-{target}-{variant}-guide.md # Layout system usage guide
+    └── layout-{target}-{variant}.json # Structural layout template JSON
 ```
 
 ## Layout Template File Format
diff --git a/.claude/commands/workflow/ui-design/style-extract.md b/.claude/commands/workflow/ui-design/style-extract.md
index 3afb1a36..f686a3fe 100644
--- a/.claude/commands/workflow/ui-design/style-extract.md
+++ b/.claude/commands/workflow/ui-design/style-extract.md
@@ -14,7 +14,7 @@ Extract design style from reference images or text prompts using Claude's built-
 
 **Strategy**: AI-Driven Design Space Exploration
 - **Claude-Native**: 100% Claude analysis, no external tools
-- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
+- **Direct Output**: Complete design systems (design-tokens.json)
 - **Flexible Input**: Images, text prompts, or both (hybrid mode)
 - **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
 - **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
@@ -173,7 +173,6 @@ bash(test -f {base_path}/.brainstorming/role analysis documents && cat it)
 # Load existing design system if refinement mode
 IF refine_mode:
     existing_tokens = Read({base_path}/style-extraction/style-1/design-tokens.json)
-    existing_guide = Read({base_path}/style-extraction/style-1/style-guide.md)
 ```
 
 ### Step 2: Generate Options (Agent Task 1 - Mode-Specific)
@@ -236,7 +235,6 @@ ELSE:
 
       ## Existing Design System
       - design-tokens.json: {existing_tokens}
-      - style-guide.md: {existing_guide}
 
       ## Input Guidance
       - User prompt: {prompt_guidance}
@@ -611,28 +609,15 @@ FOR variant_index IN 1..actual_variants_count:
      ${extraction_mode == "explore" && refinements.enabled ? "- Apply user refinements where specified" : ""}
      - Common Tailwind CSS usage patterns in project (if extracting from existing project)
 
-  2. **style-guide.md**:
-     - Design philosophy (${extraction_mode == "explore" ? "expand on: " + selected_direction.philosophy_name : "describe the reference design"})
-     - Complete color system documentation with accessibility notes
-     - Typography scale and usage guidelines
-     - Typography Combinations section: Document each preset (heading-primary, heading-secondary, body-regular, body-emphasis, caption, label) with usage context and code examples
-     - Spacing system explanation
-     - Opacity & Transparency section: Opacity scale usage, common use cases (disabled states, overlays, hover effects), accessibility considerations
-     - Shadows & Elevation section: Shadow hierarchy and semantic usage
-     - Component Styles section: Document button, card, and input variants with code examples and visual descriptions
-     - Border Radius system and semantic usage
-     - Component examples and usage patterns
-     - Common Tailwind CSS patterns (if applicable)
-
   ## Critical Requirements
   - ✅ Use Write() tool immediately for each file
   - ✅ Write to style-{variant_index}/ directory
-  - ❌ NO external research or MCP calls (pure AI generation)
+  - ✅ Can use Exa MCP to research modern design patterns and obtain code examples (Explore/Text mode)
   - ✅ Maintain consistency with user-selected direction
     `
 ```
 
-**Output**: {actual_variants_count} parallel agent tasks generate 2 files each (design-tokens.json, style-guide.md)
+**Output**: {actual_variants_count} parallel agent tasks generate design-tokens.json for each variant
 
 ## Phase 3: Verify Output
 
@@ -690,7 +675,7 @@ Design Direction Selection:
 
 Generated Files:
 {base_path}/style-extraction/
-└── style-1/ (design-tokens.json, style-guide.md)
+└── style-1/design-tokens.json
 
 {IF computed_styles_available:
 Intermediate Analysis:
@@ -755,8 +740,7 @@ bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json &&
 │       └── analysis-options.json    # Design direction options + user selection (explore mode only)
 └── style-extraction/                # Final design system
     └── style-1/
-        ├── design-tokens.json       # Production-ready design tokens
-        └── style-guide.md           # Design philosophy and usage guide
+        └── design-tokens.json       # Production-ready design tokens
 ```
 
 ## design-tokens.json Format