mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
refactor(ui-design): relocate MCP research from extract to consolidate agent
**Extract Changes:**
- Remove Phase 1.5 MCP trend research (Exa queries)
- Save design-space-analysis.json with search keywords for consolidate
- Update to pure Claude-native analysis (aligns with philosophy)
- Simplify completion todos and output documentation
**Consolidate Changes:**
- Load design-space-analysis.json from extraction phase
- Add Step 1: Variant-Specific Trend Research (MCP) to agent prompt
- Agent performs 4 MCP queries per variant + shared accessibility research
- Refine tokens using trend insights while maintaining variant identity
- Update completion reporting and key features
**Generate Changes:**
- Enhance HTML placeholder documentation with critical warnings
- Add complete HTML template examples (page/component modes)
- Clarify {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholder rules
- Simplify agent completion requirements (remove detailed report format)
- Allow agent to self-report completion status
**Benefits:**
- Extract becomes truly Claude-native (no external tools)
- Consolidate agent handles all MCP research in one place
- Better separation of concerns between phases
- Clearer template generation instructions for agents
- More flexible agent reporting
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -47,39 +47,25 @@ Extract design style elements from reference images or text prompts using Claude
|
||||
|
||||
```bash
|
||||
# Detect input source
|
||||
IF --images AND --prompt:
|
||||
input_mode = "hybrid" # Text guides image analysis
|
||||
ELSE IF --images:
|
||||
input_mode = "image"
|
||||
ELSE IF --prompt:
|
||||
input_mode = "text"
|
||||
ELSE:
|
||||
ERROR: "Must provide --images or --prompt"
|
||||
IF --images AND --prompt: input_mode = "hybrid" # Text guides image analysis
|
||||
ELSE IF --images: input_mode = "image"
|
||||
ELSE IF --prompt: input_mode = "text"
|
||||
ELSE: ERROR: "Must provide --images or --prompt"
|
||||
|
||||
# Determine base path (PRIORITY: --base-path > --session > standalone)
|
||||
IF --base-path provided:
|
||||
base_path = {provided_base_path}
|
||||
session_mode = "integrated" # Assume integrated if path is passed
|
||||
# Extract session_id if possible from path pattern
|
||||
IF base_path matches ".workflow/WFS-*/design-*":
|
||||
session_id = extract_from_path(base_path, pattern="WFS-([^/]+)")
|
||||
ELSE:
|
||||
session_id = "standalone"
|
||||
IF --base-path:
|
||||
base_path = {provided_base_path}; session_mode = "integrated"
|
||||
session_id = base_path matches ".workflow/WFS-*/design-*" ? extract_session_id(base_path) : "standalone"
|
||||
ELSE:
|
||||
# Generate a new run_id and base_path only if not provided
|
||||
run_id = "run-" + timestamp()
|
||||
|
||||
IF --session:
|
||||
session_mode = "integrated"
|
||||
session_id = {provided_session}
|
||||
session_mode = "integrated"; session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/design-{run_id}/"
|
||||
ELSE:
|
||||
session_mode = "standalone"
|
||||
base_path = ".workflow/.design/{run_id}/"
|
||||
session_mode = "standalone"; base_path = ".workflow/.design/{run_id}/"
|
||||
|
||||
# Set variant count
|
||||
variants_count = --variants provided ? {count} : 1
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
variants_count = --variants OR 1; VALIDATE: 1 <= variants_count <= 5
|
||||
```
|
||||
|
||||
### Phase 1: Input Loading & Validation
|
||||
@@ -87,50 +73,37 @@ VALIDATE: 1 <= variants_count <= 5
|
||||
```bash
|
||||
# Expand and validate inputs
|
||||
IF input_mode IN ["image", "hybrid"]:
|
||||
expanded_images = Glob({--images pattern})
|
||||
VERIFY: expanded_images.length > 0
|
||||
FOR each image IN expanded_images:
|
||||
image_data[i] = Read({image_path}) # Load for analysis
|
||||
expanded_images = Glob({--images pattern}); VERIFY: expanded_images.length > 0
|
||||
FOR each image: image_data[i] = Read({image_path})
|
||||
|
||||
IF input_mode IN ["text", "hybrid"]:
|
||||
VALIDATE: --prompt is non-empty string
|
||||
prompt_guidance = {--prompt value}
|
||||
VALIDATE: --prompt is non-empty; prompt_guidance = {--prompt value}
|
||||
|
||||
# Create output directory
|
||||
CREATE: {base_path}/style-extraction/
|
||||
```
|
||||
|
||||
### Phase 0.5: AI-Driven Design Space Divergence
|
||||
|
||||
```bash
|
||||
# Step 1: Load project context to inform design space analysis
|
||||
# Step 1: Load project context
|
||||
project_context = ""
|
||||
IF exists({base_path}/.brainstorming/synthesis-specification.md):
|
||||
project_context = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
project_context = Read(synthesis-specification.md)
|
||||
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
|
||||
project_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
|
||||
project_context = Read(ui-designer/analysis.md)
|
||||
|
||||
REPORT: "🎨 Analyzing design space to generate maximally contrasting directions..."
|
||||
|
||||
# Step 2: AI-driven divergent direction generation
|
||||
divergence_prompt = """
|
||||
Analyze the user's design requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
|
||||
Analyze user requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
|
||||
|
||||
USER INPUT:
|
||||
{IF prompt_guidance}
|
||||
Prompt: "{prompt_guidance}"
|
||||
{ENDIF}
|
||||
{IF prompt_guidance: Prompt: "{prompt_guidance}"}
|
||||
{IF project_context: Project Context Summary: {extract_key_points(project_context, max_lines=10)}}
|
||||
{IF images: Reference Images: {image_count} images will be analyzed in next phase}
|
||||
|
||||
{IF project_context}
|
||||
Project Context Summary:
|
||||
{extract_key_points(project_context, max_lines=10)}
|
||||
{ENDIF}
|
||||
|
||||
{IF images}
|
||||
Reference Images: {image_count} images will be analyzed in next phase
|
||||
{ENDIF}
|
||||
|
||||
DESIGN ATTRIBUTE SPACE (use to maximize contrast):
|
||||
DESIGN ATTRIBUTE SPACE (maximize contrast):
|
||||
- Color Saturation: [monochrome, muted, moderate, vibrant, hypersaturated]
|
||||
- Visual Weight: [minimal, light, balanced, bold, heavy]
|
||||
- Formality: [playful, casual, professional, formal, luxury]
|
||||
@@ -139,279 +112,119 @@ DESIGN ATTRIBUTE SPACE (use to maximize contrast):
|
||||
- Density: [spacious, airy, balanced, compact, dense]
|
||||
|
||||
TASK:
|
||||
1. Identify the design space center point from user requirements
|
||||
2. Generate {variants_count} design directions that:
|
||||
1. Identify design space center point from user requirements
|
||||
2. Generate {variants_count} directions that:
|
||||
- Are MAXIMALLY DISTANT from each other in attribute space
|
||||
- Each occupies a distinct region/quadrant of the design spectrum
|
||||
- Together provide diverse aesthetic options for the user
|
||||
- Are contextually appropriate for the project type
|
||||
- Together provide diverse aesthetic options
|
||||
- Are contextually appropriate for project type
|
||||
- Have clear, memorable philosophical differences
|
||||
|
||||
3. For each direction, generate:
|
||||
- Specific search keywords for MCP research (3-5 keywords)
|
||||
- Anti-keywords to avoid (2-3 keywords that would reduce contrast)
|
||||
- Clear rationale explaining why this contrasts with other variants
|
||||
- Anti-keywords to avoid (2-3 keywords)
|
||||
- Clear rationale explaining contrast with other variants
|
||||
|
||||
OUTPUT FORMAT: Valid JSON only, no markdown:
|
||||
{
|
||||
"design_space_center": {
|
||||
"color_saturation": "moderate",
|
||||
"visual_weight": "balanced",
|
||||
"formality": "professional",
|
||||
"organic_geometric": "balanced",
|
||||
"innovation": "contemporary",
|
||||
"density": "balanced"
|
||||
},
|
||||
"divergent_directions": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"philosophy_name": "Brief name 2-3 words (e.g., 'Minimal Brutalist')",
|
||||
"design_attributes": {
|
||||
"color_saturation": "monochrome",
|
||||
"visual_weight": "minimal",
|
||||
"formality": "professional",
|
||||
"organic_geometric": "brutalist",
|
||||
"innovation": "timeless",
|
||||
"density": "spacious"
|
||||
},
|
||||
"search_keywords": ["minimal", "brutalist", "monochrome", "geometric", "Swiss design"],
|
||||
"anti_keywords": ["decorative", "colorful", "organic"],
|
||||
"rationale": "Extreme minimalism with geometric rigor, contrasts with any ornamental or colorful approaches"
|
||||
}
|
||||
// ... {variants_count} total directions
|
||||
],
|
||||
"contrast_verification": {
|
||||
"min_pairwise_distance": "0.75",
|
||||
"strategy": "Brief explanation of how maximum contrast was achieved"
|
||||
}
|
||||
}
|
||||
{"design_space_center": {attributes}, "divergent_directions": [
|
||||
{"id": "variant-1", "philosophy_name": "Brief name 2-3 words",
|
||||
"design_attributes": {attribute_scores}, "search_keywords": [...],
|
||||
"anti_keywords": [...], "rationale": "..."}
|
||||
], "contrast_verification": {"min_pairwise_distance": "0.75", "strategy": "..."}}
|
||||
|
||||
RULES:
|
||||
- Output ONLY valid JSON, no markdown code blocks or explanations
|
||||
- Maximize inter-variant distance in attribute space
|
||||
- Ensure each variant occupies a distinct aesthetic region
|
||||
- Avoid overlapping attribute combinations
|
||||
- All directions must be contextually appropriate for: {project_context or "general web UI"}
|
||||
- Philosophy names should be memorable and evocative
|
||||
- Search keywords should be specific and actionable for web research
|
||||
RULES: Output ONLY valid JSON, maximize inter-variant distance, ensure each variant
|
||||
occupies distinct aesthetic region, avoid overlapping attributes
|
||||
"""
|
||||
|
||||
# Execute AI analysis
|
||||
divergence_response = Claude_Native_Analysis(divergence_prompt)
|
||||
divergent_directions = parse_json(divergence_response)
|
||||
divergent_directions = parse_json(Claude_Native_Analysis(divergence_prompt))
|
||||
|
||||
REPORT: "✅ Generated {variants_count} contrasting design directions:"
|
||||
FOR direction IN divergent_directions.divergent_directions:
|
||||
REPORT: " - {direction.philosophy_name}: {direction.rationale}"
|
||||
|
||||
# Store divergent directions for next phase
|
||||
design_space_analysis = divergent_directions
|
||||
|
||||
# Step 3: Save design space analysis for consolidation phase
|
||||
Write({file_path: "{base_path}/style-extraction/design-space-analysis.json",
|
||||
content: JSON.stringify(design_space_analysis, null, 2)})
|
||||
REPORT: "💾 Saved design space analysis to design-space-analysis.json"
|
||||
```
|
||||
|
||||
### Phase 1.5: Variant-Specific Design Trend Research (Exa MCP)
|
||||
|
||||
```bash
|
||||
# Step 1: Execute independent MCP research for each variant
|
||||
REPORT: "🔍 Researching design trends for each variant independently..."
|
||||
|
||||
design_trends = {}
|
||||
|
||||
FOR direction IN design_space_analysis.divergent_directions:
|
||||
variant_id = direction.id
|
||||
philosophy = direction.philosophy_name
|
||||
keywords = direction.search_keywords
|
||||
anti_keywords = direction.anti_keywords
|
||||
|
||||
REPORT: " → Researching {philosophy} ({variant_id})..."
|
||||
|
||||
# Build variant-specific search queries
|
||||
variant_queries = [
|
||||
# Colors: philosophy-specific palette trends
|
||||
f"{philosophy} UI design color palettes {' '.join(keywords[:3])} 2024 2025",
|
||||
|
||||
# Typography: philosophy-specific font trends
|
||||
f"{philosophy} typography trends {' '.join(keywords[:3])} web design 2024",
|
||||
|
||||
# Layout: philosophy-specific patterns
|
||||
f"{philosophy} layout patterns {' '.join(keywords[:3])} design systems 2024",
|
||||
|
||||
# Contrast query: emphasize differentiation
|
||||
f"design systems {philosophy} NOT {' NOT '.join(anti_keywords[:2])}"
|
||||
]
|
||||
|
||||
# Execute MCP searches for this variant
|
||||
design_trends[variant_id] = {
|
||||
"philosophy": philosophy,
|
||||
"attributes": direction.design_attributes,
|
||||
"keywords": keywords,
|
||||
"anti_keywords": anti_keywords,
|
||||
"research": {}
|
||||
}
|
||||
|
||||
FOR query IN variant_queries:
|
||||
category = identify_category(query) # "colors", "typography", "layout", "contrast"
|
||||
design_trends[variant_id].research[category] = mcp__exa__get_code_context_exa(
|
||||
query=query,
|
||||
tokensNum=2000 # Increased for more detailed guidance
|
||||
)
|
||||
|
||||
REPORT: " ✅ {philosophy} research complete"
|
||||
|
||||
# Step 2: Gather shared accessibility guidelines (all variants)
|
||||
REPORT: " → Researching universal accessibility guidelines..."
|
||||
shared_accessibility = mcp__exa__get_code_context_exa(
|
||||
query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
|
||||
tokensNum=1500
|
||||
)
|
||||
|
||||
REPORT: "✅ All variant-specific design research complete"
|
||||
```
|
||||
|
||||
### Phase 2: Variant-Specific Style Synthesis (Claude with Divergent Research)
|
||||
|
||||
This is a single-pass analysis that generates each variant based on its specific design direction and research.
|
||||
### Phase 2: Variant-Specific Style Synthesis (Claude Native Analysis)
|
||||
|
||||
**Analysis Prompt Template**:
|
||||
```
|
||||
Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction and independent trend research.
|
||||
Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction.
|
||||
|
||||
INPUT MODE: {input_mode}
|
||||
{IF input_mode IN ["image", "hybrid"]: VISUAL REFERENCES: {list of loaded images}}
|
||||
{IF input_mode IN ["text", "hybrid"]: TEXT GUIDANCE: "{prompt_guidance}"}
|
||||
|
||||
{IF input_mode IN ["image", "hybrid"]}
|
||||
VISUAL REFERENCES: {list of loaded images}
|
||||
Analyze these images through the lens of each variant's design philosophy
|
||||
{ENDIF}
|
||||
DESIGN SPACE ANALYSIS: {design_space_analysis summary}
|
||||
|
||||
{IF input_mode IN ["text", "hybrid"]}
|
||||
TEXT GUIDANCE: "{prompt_guidance}"
|
||||
Apply this guidance while maintaining each variant's distinct aesthetic direction
|
||||
{ENDIF}
|
||||
|
||||
DESIGN SPACE ANALYSIS:
|
||||
{design_space_analysis summary}
|
||||
|
||||
VARIANT-SPECIFIC DESIGN DIRECTIONS AND RESEARCH:
|
||||
|
||||
{FOR each variant_id IN design_trends.keys()}
|
||||
VARIANT-SPECIFIC DESIGN DIRECTIONS:
|
||||
{FOR each direction IN design_space_analysis.divergent_directions:
|
||||
---
|
||||
VARIANT: {variant_id}
|
||||
PHILOSOPHY: {design_trends[variant_id].philosophy}
|
||||
DESIGN ATTRIBUTES:
|
||||
- Color Saturation: {design_trends[variant_id].attributes.color_saturation}
|
||||
- Visual Weight: {design_trends[variant_id].attributes.visual_weight}
|
||||
- Formality: {design_trends[variant_id].attributes.formality}
|
||||
- Organic/Geometric: {design_trends[variant_id].attributes.organic_geometric}
|
||||
- Innovation: {design_trends[variant_id].attributes.innovation}
|
||||
- Density: {design_trends[variant_id].attributes.density}
|
||||
|
||||
SEARCH KEYWORDS: {', '.join(design_trends[variant_id].keywords)}
|
||||
ANTI-PATTERNS (avoid): {', '.join(design_trends[variant_id].anti_keywords)}
|
||||
|
||||
TREND RESEARCH FOR THIS VARIANT:
|
||||
|
||||
Color Trends ({variant_id}):
|
||||
{design_trends[variant_id].research.colors}
|
||||
|
||||
Typography Trends ({variant_id}):
|
||||
{design_trends[variant_id].research.typography}
|
||||
|
||||
Layout Patterns ({variant_id}):
|
||||
{design_trends[variant_id].research.layout}
|
||||
|
||||
Contrast Emphasis ({variant_id}):
|
||||
{design_trends[variant_id].research.contrast}
|
||||
|
||||
---
|
||||
{ENDFOR}
|
||||
|
||||
SHARED ACCESSIBILITY GUIDELINES (apply to all variants):
|
||||
{shared_accessibility}
|
||||
VARIANT: {direction.id} | PHILOSOPHY: {direction.philosophy_name}
|
||||
DESIGN ATTRIBUTES: {direction.design_attributes}
|
||||
SEARCH KEYWORDS: {direction.search_keywords}
|
||||
ANTI-PATTERNS (avoid): {direction.anti_keywords}
|
||||
RATIONALE: {direction.rationale}
|
||||
---}
|
||||
|
||||
TASK: Generate {variants_count} design style variants where EACH variant:
|
||||
1. Strictly follows its pre-defined design philosophy and attributes
|
||||
2. Uses ONLY its variant-specific trend research for aesthetic decisions
|
||||
3. Maintains maximum contrast with other variants' attributes
|
||||
4. Incorporates its search keywords and avoids its anti-patterns
|
||||
5. Uses OKLCH color space for all color values
|
||||
6. Includes complete, production-ready design token proposals
|
||||
7. Applies WCAG accessibility guidelines from shared research
|
||||
2. Maintains maximum contrast with other variants' attributes
|
||||
3. Incorporates its design direction and avoids its anti-patterns
|
||||
4. Uses OKLCH color space for all color values
|
||||
5. Includes complete, production-ready design token proposals
|
||||
6. Applies WCAG AA accessibility guidelines (4.5:1 text, 3:1 UI)
|
||||
|
||||
CRITICAL RULES FOR CONTRAST:
|
||||
- Variant-1 should feel completely different from Variant-2 and Variant-3
|
||||
- Variant-1 should feel completely different from Variant-2/3
|
||||
- Use each variant's specific attribute scores (e.g., "monochrome" vs "vibrant")
|
||||
- Reference variant-specific research, NOT shared trends
|
||||
- Each variant should embody its unique design direction
|
||||
- If Variant-1 is "minimal/geometric", Variant-2 must be "bold/organic" or similar contrast
|
||||
- Each variant should be immediately distinguishable by visual inspection
|
||||
|
||||
OUTPUT FORMAT: JSON matching this structure (see full schema at end of prompt):
|
||||
{
|
||||
"extraction_metadata": { "session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N },
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Concise Style Name (2-3 words)",
|
||||
"description": "2-3 sentence description",
|
||||
"design_philosophy": "Core design principles",
|
||||
"preview": { "primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..." },
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
|
||||
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" },
|
||||
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" },
|
||||
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" },
|
||||
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" }
|
||||
},
|
||||
"typography": { "font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...} },
|
||||
"spacing": { "0": "0", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", ..., "full": "9999px" },
|
||||
"shadows": { "sm": "...", ..., "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" }
|
||||
}
|
||||
}
|
||||
// Repeat structure for ALL {variants_count} variants
|
||||
]
|
||||
}
|
||||
OUTPUT FORMAT: JSON matching this structure:
|
||||
{"extraction_metadata": {"session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N},
|
||||
"style_cards": [
|
||||
{"id": "variant-1", "name": "Concise Style Name (2-3 words)", "description": "2-3 sentences",
|
||||
"design_philosophy": "Core design principles",
|
||||
"preview": {"primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..."},
|
||||
"proposed_tokens": {
|
||||
"colors": {"brand": {...}, "surface": {...}, "semantic": {...}, "text": {...}, "border": {...}},
|
||||
"typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
|
||||
"spacing": {"0": "0", ..., "24": "6rem"},
|
||||
"border_radius": {"none": "0", ..., "full": "9999px"},
|
||||
"shadows": {"sm": "...", ..., "xl": "..."},
|
||||
"breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
|
||||
}}
|
||||
// Repeat for ALL {variants_count} variants
|
||||
]}
|
||||
|
||||
RULES:
|
||||
- Each variant must strictly adhere to its pre-defined design attributes
|
||||
- Use ONLY variant-specific trend research (do NOT cross-pollinate research between variants)
|
||||
- Maximize visual contrast between variants using their attribute differences
|
||||
- All colors MUST use OKLCH format: oklch(L C H / A)
|
||||
- Token structures must be complete and production-ready
|
||||
- Use semantic naming throughout (e.g., "brand-primary" not "color-1")
|
||||
- Ensure accessibility (WCAG AA contrast ratios: 4.5:1 text, 3:1 UI) using shared guidelines
|
||||
- Apply typography trends from each variant's specific research
|
||||
- Incorporate search keywords and actively avoid anti-patterns for each variant
|
||||
- Each variant's philosophy_name should match the pre-analyzed name from design space analysis
|
||||
- Reference specific trends from variant-specific research, not from other variants
|
||||
RULES: Each variant must strictly adhere to pre-defined attributes; maximize visual contrast;
|
||||
all colors in OKLCH format; complete token structures; semantic naming;
|
||||
WCAG AA accessibility (4.5:1 text, 3:1 UI)
|
||||
```
|
||||
|
||||
### Phase 3: Parse & Write Output
|
||||
|
||||
```bash
|
||||
# Parse Claude's JSON response
|
||||
style_cards_data = parse_json(claude_response)
|
||||
|
||||
# Write single output file
|
||||
Write({
|
||||
file_path: "{base_path}/style-extraction/style-cards.json",
|
||||
content: style_cards_data
|
||||
})
|
||||
Write({file_path: "{base_path}/style-extraction/style-cards.json", content: style_cards_data})
|
||||
```
|
||||
|
||||
### Phase 4: Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"},
|
||||
{content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating design directions"},
|
||||
{content: "Research variant-specific design trends with Exa MCP", status: "completed", activeForm: "Researching variant trends"},
|
||||
{content: "Synthesize style cards with independent research", status: "completed", activeForm: "Synthesizing style cards"},
|
||||
{content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating style variants"}
|
||||
]
|
||||
});
|
||||
TodoWrite({todos: [
|
||||
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"},
|
||||
{content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating directions"},
|
||||
{content: "Save design space analysis for consolidation", status: "completed", activeForm: "Saving design space analysis"},
|
||||
{content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating variants"}
|
||||
]});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
@@ -430,12 +243,9 @@ Input mode: {input_mode}
|
||||
Generated {variants_count} style variant(s):
|
||||
{FOR each card: - {card.name} ({card.id}) - {card.design_philosophy}}
|
||||
|
||||
🔍 Research performed:
|
||||
- {variants_count} × 4 variant-specific MCP queries ({variants_count * 4} total)
|
||||
- 1 shared accessibility research query
|
||||
- Each variant has independent trend guidance
|
||||
|
||||
📂 Output: {base_path}/style-extraction/style-cards.json
|
||||
📂 Outputs:
|
||||
- {base_path}/style-extraction/style-cards.json
|
||||
- {base_path}/style-extraction/design-space-analysis.json
|
||||
|
||||
Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count} [--layout-variants <count>]
|
||||
|
||||
@@ -446,12 +256,14 @@ Note: When called from /workflow:ui-design:auto, consolidation is triggered auto
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/design-{run_id}/style-extraction/
|
||||
└── style-cards.json # Single comprehensive output
|
||||
├── style-cards.json # Complete style variants with token proposals
|
||||
└── design-space-analysis.json # Design directions for consolidation phase
|
||||
|
||||
OR (standalone mode):
|
||||
|
||||
.workflow/.design/{run_id}/style-extraction/
|
||||
└── style-cards.json # Single comprehensive output
|
||||
├── style-cards.json
|
||||
└── design-space-analysis.json
|
||||
```
|
||||
|
||||
### style-cards.json Format
|
||||
@@ -460,43 +272,40 @@ OR (standalone mode):
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "string",
|
||||
"input_mode": "image|text|hybrid",
|
||||
"timestamp": "ISO 8601 string",
|
||||
"variants_count": "number"
|
||||
},
|
||||
"extraction_metadata": {"session_id": "string", "input_mode": "image|text|hybrid",
|
||||
"timestamp": "ISO 8601", "variants_count": "number"},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-{n}",
|
||||
"name": "Concise Style Name (2-3 words)",
|
||||
"id": "variant-{n}", "name": "Concise Style Name (2-3 words)",
|
||||
"description": "2-3 sentence description of visual language and UX",
|
||||
"design_philosophy": "Core design principles for this variant",
|
||||
"preview": {
|
||||
"primary": "oklch(...)",
|
||||
"background": "oklch(...)",
|
||||
"font_heading": "Font family, fallbacks",
|
||||
"border_radius": "value"
|
||||
},
|
||||
"preview": {"primary": "oklch(...)", "background": "oklch(...)",
|
||||
"font_heading": "Font family, fallbacks", "border_radius": "value"},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
|
||||
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" },
|
||||
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" },
|
||||
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" },
|
||||
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" }
|
||||
"brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
|
||||
"surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
|
||||
"semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
|
||||
"text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
|
||||
"border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": { "heading": "...", "body": "...", "mono": "..." },
|
||||
"font_size": { "xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
|
||||
"font_weight": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
|
||||
"line_height": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" },
|
||||
"letter_spacing": { "tight": "-0.025em", "normal": "0", "wide": "0.025em" }
|
||||
"font_family": {"heading": "...", "body": "...", "mono": "..."},
|
||||
"font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
|
||||
"font_weight": {"normal": "400", "medium": "500", "semibold": "600", "bold": "700"},
|
||||
"line_height": {"tight": "1.25", "normal": "1.5", "relaxed": "1.75"},
|
||||
"letter_spacing": {"tight": "-0.025em", "normal": "0", "wide": "0.025em"}
|
||||
},
|
||||
"spacing": { "0": "0", "1": "0.25rem", "2": "0.5rem", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px" },
|
||||
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
|
||||
"spacing": {"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem",
|
||||
"5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem",
|
||||
"16": "4rem", "20": "5rem", "24": "6rem"},
|
||||
"border_radius": {"none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem",
|
||||
"xl": "1rem", "full": "9999px"},
|
||||
"shadows": {"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"},
|
||||
"breakpoints": {"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"}
|
||||
}
|
||||
}
|
||||
// Repeat structure for variants_count total (variant-1, variant-2, ..., variant-n)
|
||||
@@ -504,111 +313,6 @@ OR (standalone mode):
|
||||
}
|
||||
```
|
||||
|
||||
**Concrete Example (variant-1 only, others follow same structure)**:
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-auth",
|
||||
"input_mode": "hybrid",
|
||||
"timestamp": "2025-01-15T10:30:00Z",
|
||||
"variants_count": 3
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Minimal Brutalist",
|
||||
"description": "Stark geometric design with monochrome palette and sharp edges. Prioritizes function over decoration with extreme clarity.",
|
||||
"design_philosophy": "Form follows function - eliminate all non-essential visual elements",
|
||||
"preview": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"background": "oklch(0.98 0.00 0 / 1)",
|
||||
"font_heading": "Inter, system-ui, sans-serif",
|
||||
"border_radius": "0"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.40 0.01 270 / 1)",
|
||||
"accent": "oklch(0.60 0.01 270 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.98 0.00 0 / 1)",
|
||||
"elevated": "oklch(0.95 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.90 0.00 0 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.30 0.01 270 / 1)",
|
||||
"warning": "oklch(0.30 0.01 270 / 1)",
|
||||
"error": "oklch(0.30 0.01 270 / 1)",
|
||||
"info": "oklch(0.30 0.01 270 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.10 0.00 0 / 1)",
|
||||
"secondary": "oklch(0.40 0.00 0 / 1)",
|
||||
"tertiary": "oklch(0.60 0.00 0 / 1)",
|
||||
"inverse": "oklch(0.98 0.00 0 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.20 0.00 0 / 1)",
|
||||
"strong": "oklch(0.10 0.00 0 / 1)",
|
||||
"subtle": "oklch(0.85 0.00 0 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, monospace"
|
||||
},
|
||||
"font_size": {
|
||||
"xs": "0.75rem", "sm": "0.875rem", "base": "1rem", "lg": "1.125rem",
|
||||
"xl": "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem"
|
||||
},
|
||||
"font_weight": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
|
||||
"line_height": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" },
|
||||
"letter_spacing": { "tight": "-0.025em", "normal": "0", "wide": "0.025em" }
|
||||
},
|
||||
"spacing": {
|
||||
"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem",
|
||||
"5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem",
|
||||
"16": "4rem", "20": "5rem", "24": "6rem"
|
||||
},
|
||||
"border_radius": {
|
||||
"none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "variant-2",
|
||||
"name": "Bold Vibrant",
|
||||
"description": "High-energy design with saturated colors, dynamic typography, and strong contrast. (Full token structure same as variant-1)",
|
||||
"design_philosophy": "Make a statement - use color and energy to create memorable experiences",
|
||||
"preview": { "primary": "oklch(0.50 0.25 330 / 1)", "background": "oklch(0.15 0.02 270 / 1)", "..." },
|
||||
"proposed_tokens": { "...same structure as variant-1 with different values..." }
|
||||
},
|
||||
{
|
||||
"id": "variant-3",
|
||||
"name": "Organic Natural",
|
||||
"description": "Soft, rounded design with warm earth tones and fluid layouts. (Full token structure same as variant-1)",
|
||||
"design_philosophy": "Nature-inspired - embrace curves, warmth, and organic flow",
|
||||
"preview": { "primary": "oklch(0.55 0.15 60 / 1)", "background": "oklch(0.96 0.03 80 / 1)", "..." },
|
||||
"proposed_tokens": { "...same structure as variant-1 with different values..." }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Key Structural Requirements**:
|
||||
- Each variant MUST have complete, independent token proposals (all categories present)
|
||||
- All colors MUST use OKLCH format: `oklch(L C H / A)`
|
||||
@@ -618,27 +322,27 @@ OR (standalone mode):
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **No images found**: Report glob pattern and suggest corrections (e.g., "Pattern '*.png' matched 0 files in current directory")
|
||||
- **No images found**: Report glob pattern and suggest corrections
|
||||
- **Invalid prompt**: Require non-empty string for text mode
|
||||
- **Claude JSON parsing error**: Retry with stricter format instructions and explicit structure requirements
|
||||
- **Claude JSON parsing error**: Retry with stricter format instructions
|
||||
- **Invalid session**: Create standalone session automatically in `.workflow/.scratchpad/`
|
||||
- **Invalid variant count**: Clamp to 1-5 range and warn user
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **🚀 AI-Driven Design Space Exploration (Strategy A)** 🆕
|
||||
- **Phase 0.5**: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions
|
||||
1. **🚀 AI-Driven Design Space Exploration** 🆕
|
||||
- Phase 0.5: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions
|
||||
- Uses 6-dimensional design attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
|
||||
- Ensures each variant occupies a distinct region of the design spectrum
|
||||
- Generates search keywords and anti-patterns for each variant
|
||||
- Provides contrast verification with minimum pairwise distance metrics
|
||||
|
||||
2. **🎯 Variant-Specific Trend Research** 🆕
|
||||
- **Independent MCP queries** for each variant (4 queries per variant)
|
||||
- Each variant researches its specific design philosophy (e.g., "minimal brutalist" vs "bold vibrant")
|
||||
- Uses philosophy-specific keywords and avoids cross-contamination
|
||||
- Eliminates趋同性 (convergence) by preventing shared trend influence
|
||||
- Shared accessibility research applied to all variants
|
||||
2. **🎯 Variant-Specific Design Directions** 🆕
|
||||
- AI generates search keywords and anti-patterns for each variant
|
||||
- Each variant has distinct design philosophy (e.g., "minimal brutalist" vs "bold vibrant")
|
||||
- Philosophy-specific keywords guide synthesis
|
||||
- Design space analysis saved for consolidation phase
|
||||
- Trend research deferred to consolidation for better integration
|
||||
|
||||
3. **🔒 Maximum Contrast Guarantee**
|
||||
- AI-driven divergence ensures variants are maximally distant in attribute space
|
||||
@@ -646,10 +350,10 @@ OR (standalone mode):
|
||||
- Explicit anti-patterns prevent variants from borrowing each other's characteristics
|
||||
- Contrast verification built into design space analysis
|
||||
|
||||
4. **Zero External Dependencies for Core Analysis**
|
||||
- No `gemini-wrapper`, no `codex` for style synthesis - pure Claude
|
||||
- Single-pass comprehensive analysis with variant-specific trend integration
|
||||
- Only uses Exa MCP for external trend research (not for synthesis)
|
||||
4. **100% Claude-Native Analysis**
|
||||
- No external tools (gemini-wrapper, codex, or MCP) - pure Claude
|
||||
- Single-pass comprehensive analysis guided by design space analysis
|
||||
- Fast, deterministic style synthesis without external dependencies
|
||||
|
||||
5. **Streamlined Output**
|
||||
- Single file (`style-cards.json`) vs. multiple scattered files
|
||||
@@ -660,7 +364,7 @@ OR (standalone mode):
|
||||
- Image-only: Analyze visual references through each variant's philosophical lens
|
||||
- Text-only: Generate from descriptions with maximum divergence
|
||||
- Hybrid: Text guides image analysis while maintaining variant independence
|
||||
- All modes enhanced with variant-specific web research
|
||||
- All modes enhanced with AI-driven design space analysis
|
||||
|
||||
7. **Context-Aware & Dynamic**
|
||||
- Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app")
|
||||
@@ -668,12 +372,12 @@ OR (standalone mode):
|
||||
- Dynamically generates design directions based on project context
|
||||
- No hardcoded design philosophies - fully adaptive
|
||||
|
||||
8. **Production-Ready Tokens**
|
||||
8. **Production-Ready Token Proposals**
|
||||
- Complete design system proposals per variant
|
||||
- OKLCH color format for perceptual uniformity and accessibility
|
||||
- Semantic naming conventions
|
||||
- WCAG AA accessibility considerations from shared research
|
||||
- Variant-specific typography trends (not generic)
|
||||
- WCAG AA accessibility considerations built-in
|
||||
- Variant-specific token sets (not generic)
|
||||
|
||||
9. **Workflow Integration**
|
||||
- Integrated mode: Works within existing workflow sessions
|
||||
|
||||
Reference in New Issue
Block a user