mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
fix(ui-design): use mcp__exa__web_search_exa for design trend research and URL analysis
- Replace mcp__exa__get_code_context_exa with mcp__exa__web_search_exa in consolidate.md for trend research queries (colors, typography, layout, contrast, accessibility) - Add Phase 0.75 URL Content Analysis in imitate-auto.md for screenshot fallback mode - Use web_search_exa for design pattern extraction from URLs when screenshots unavailable - Update workflow documentation to reflect new MCP tool usage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -162,18 +162,18 @@ IF design_space_analysis is provided, FOR EACH variant:
|
||||
3. **Execute MCP Searches**:
|
||||
```javascript
|
||||
trend_research = {
|
||||
colors: mcp__exa__get_code_context_exa(query=queries[0], tokensNum=2000),
|
||||
typography: mcp__exa__get_code_context_exa(query=queries[1], tokensNum=2000),
|
||||
layout: mcp__exa__get_code_context_exa(query=queries[2], tokensNum=2000),
|
||||
contrast: mcp__exa__get_code_context_exa(query=queries[3], tokensNum=2000)
|
||||
colors: mcp__exa__web_search_exa(query=queries[0], numResults=5),
|
||||
typography: mcp__exa__web_search_exa(query=queries[1], numResults=5),
|
||||
layout: mcp__exa__web_search_exa(query=queries[2], numResults=5),
|
||||
contrast: mcp__exa__web_search_exa(query=queries[3], numResults=5)
|
||||
}
|
||||
```
|
||||
|
||||
4. **Shared Accessibility Research** (execute once, apply to all variants):
|
||||
```javascript
|
||||
accessibility_guidelines = mcp__exa__get_code_context_exa(
|
||||
accessibility_guidelines = mcp__exa__web_search_exa(
|
||||
query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
|
||||
tokensNum=1500
|
||||
numResults=3
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
- **Reference-Driven**: Requires URL or images as primary input
|
||||
- **Auto-Screenshot**: Supports Playwright/Chrome with manual upload fallback
|
||||
|
||||
**Streamlined Flow**: Phase 0 (init) → 0.5 (screenshot) → 1 (extraction) → 2 (token adapt) → 3 (generate) → 4 (integrate)
|
||||
**Streamlined Flow**: Phase 0 (init) → 0.5 (screenshot) → 0.75 (URL analysis if needed) → 1 (extraction) → 2 (token adapt) → 3 (generate) → 4 (integrate)
|
||||
|
||||
**Performance**: ~2-3× faster than explore-auto for single-style scenarios
|
||||
|
||||
@@ -218,6 +218,26 @@ ELSE:
|
||||
REPORT: "ℹ️ Using provided images (--images parameter)"
|
||||
```
|
||||
|
||||
### Phase 0.75: URL Content Analysis (Fallback Mode)
|
||||
|
||||
**Condition**: Only if `screenshot_mode == "url_only"`
|
||||
|
||||
```bash
|
||||
url_analysis_content = ""
|
||||
|
||||
IF screenshot_mode == "url_only":
|
||||
REPORT: "🔍 Analyzing URL content (no screenshot available)"
|
||||
|
||||
# Fetch URL design patterns using MCP web search
|
||||
url_analysis_content = mcp__exa__web_search_exa(
|
||||
query="site:{url_value} design style color scheme layout",
|
||||
numResults=3
|
||||
)
|
||||
|
||||
STORE: url_analysis_data = url_analysis_content
|
||||
REPORT: "✅ URL content analysis complete"
|
||||
```
|
||||
|
||||
### Phase 1: Single Style Extraction
|
||||
|
||||
```bash
|
||||
@@ -230,8 +250,9 @@ images_flag = screenshot_mode == "with_screenshots" ? "--images \"{base_path}/sc
|
||||
|
||||
url_flag = screenshot_mode == "url_only" ? "--url \"{url_value}\"" : ""
|
||||
|
||||
# Construct optimized extraction prompt
|
||||
enhanced_prompt = "Extract a single, high-fidelity design system that accurately imitates the visual style from {source_desc}. {prompt_text}"
|
||||
# Construct optimized extraction prompt with URL analysis data
|
||||
url_context = screenshot_mode == "url_only" ? "URL analysis data: {url_analysis_data}" : ""
|
||||
enhanced_prompt = "Extract a single, high-fidelity design system that accurately imitates the visual style from {source_desc}. {url_context} {prompt_text}"
|
||||
|
||||
# Force single variant with imitate mode
|
||||
command = "/workflow:ui-design:extract --base-path \"{base_path}\" {url_flag} {images_flag} --prompt \"{enhanced_prompt}\" --mode imitate"
|
||||
@@ -314,6 +335,7 @@ ELSE:
|
||||
TodoWrite({todos: [
|
||||
{"content": "Initialize run directory and infer targets", "status": "in_progress", "activeForm": "Initializing"},
|
||||
{"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
|
||||
{"content": "Analyze URL content (fallback mode)", "status": "pending", "activeForm": "Analyzing URL content"},
|
||||
{"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
|
||||
{"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
|
||||
{"content": "Generate single-style prototypes", "status": "pending", "activeForm": "Generating prototypes"},
|
||||
@@ -374,7 +396,8 @@ TodoWrite({todos: [
|
||||
/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --targets "pricing"
|
||||
|
||||
# 0.5: Playwright failed → Chrome failed → User prompted → types 'ready' → ✅ continues OR 'skip' → ⚠️ URL only
|
||||
# Continues: 1 → 2 → 3 → 4
|
||||
# If skip: 0.75 (MCP URL analysis) → 1 → 2 → 3 → 4
|
||||
# If ready: 1 → 2 → 3 → 4
|
||||
```
|
||||
|
||||
## Completion Output
|
||||
@@ -386,7 +409,8 @@ Mode: Single Style Replication | Run ID: {run_id} | Session: {session_id or "sta
|
||||
|
||||
Phase 0 - Initialization: {target_count} {target_type}(s) prepared
|
||||
Phase 0.5 - Screenshot Capture: {screenshot_status}
|
||||
{IF success: ✅ Captured via {method} | ELSE: ⚠️ URL analysis only}
|
||||
{IF success: ✅ Captured via {method} | ELSE: ⚠️ URL analysis fallback activated}
|
||||
Phase 0.75 - URL Content Analysis: {IF url_only: ✅ Design patterns analyzed via MCP | ELSE: ⏭️ Skipped (screenshots available)}
|
||||
Phase 1 - Style Extraction: Single style extracted
|
||||
Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
|
||||
Phase 3 - Prototype Generation: {target_count} {target_type} prototypes created
|
||||
|
||||
Reference in New Issue
Block a user