catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-14 02:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
20c75c0060ea66b0ea51869ba7fe896e19871c0b
Claude-Code-Workflow/.claude/commands/workflow/ui-design/extract.md
catlog22 20c75c0060 feat: integrate Exa MCP for design trend research in UI workflow 
Enhance UI Design Workflow with intelligent design trend research capabilities:
- Add design trend analysis in extract phase using Exa MCP API
- Integrate layout strategy planning with current UI/UX patterns (2024-2025)
- Update consolidation command to include dynamic layout generation
- Add ui-instantiate-prototypes.sh script for prototype management
- Simplify path structure by removing nested .design directories
- Update workflow architecture documentation

This integration enables context-aware design decisions based on modern design trends
and improves the quality of generated UI prototypes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-09 18:04:37 +08:00

689 lines
24 KiB
Markdown
Raw Blame History

---
name: extract
description: Extract design style from reference images or text prompts using Claude's analysis
usage: /workflow:ui-design:extract [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
argument-hint: "[--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]"
examples:
- /workflow:ui-design:extract --images "design-refs/*.png" --variants 3
- /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3
- /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
---
# Style Extraction Command
## Overview
Extract design style elements from reference images or text prompts using Claude's built-in analysis capabilities. Generates a single, comprehensive `style-cards.json` file containing multiple design variants with complete token proposals.
## Core Philosophy
- **Claude-Native**: 100% Claude-driven analysis, no external tools
- **Single Output**: Only `style-cards.json` with embedded token proposals
- **Sequential Execution**: Generate multiple style variants in one pass
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
- **Reproducible**: Deterministic output structure
## Execution Protocol
### Phase 0: Parameter Detection & Validation
```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"
# Detect session mode and generate run ID
run_id = "run-" + timestamp()
IF --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}/"
# Set variant count
variants_count = --variants provided ? {count} : 1
VALIDATE: 1 <= variants_count <= 5
```
### Phase 1: Input Loading & Validation
```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
IF input_mode IN ["text", "hybrid"]:
VALIDATE: --prompt is non-empty string
prompt_guidance = {--prompt value}
# Create output directory
CREATE: {base_path}/style-extraction/
```
### Phase 1.5: Design Trend Research (Exa MCP)
```bash
# Step 1: Load project context to inform search queries
project_context = ""
IF exists({base_path}/.brainstorming/synthesis-specification.md):
project_context = Read({base_path}/.brainstorming/synthesis-specification.md)
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
project_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
# Extract hints from context and prompt
search_hints = []
IF prompt_guidance:
search_hints.append(extract_design_keywords(prompt_guidance)) # e.g., "minimalist", "dark theme", "Linear.app"
IF project_context:
search_hints.append(extract_project_type(project_context)) # e.g., "dashboard", "SaaS", "blog"
# Step 2: Search for design trends using Exa MCP
REPORT: "🔍 Researching modern design trends and color theory..."
# Build comprehensive search query
exa_queries = [
"modern UI design color palettes trends 2024 2025 {search_hints}",
"typography web design best practices system fonts {search_hints}",
"design system color theory accessibility WCAG {search_hints}",
"UI spacing rhythm layout patterns {search_hints}"
]
design_trends = {}
FOR query IN exa_queries:
category = identify_category(query) # "colors", "typography", "layout", "accessibility"
design_trends[category] = mcp__exa__get_code_context_exa(
query=query,
tokensNum="dynamic"
)
REPORT: "✅ Design research complete. Found trends for: colors, typography, layout, accessibility"
```
### Phase 2: Unified Style Analysis (Claude with Design Trends)
This is a single-pass analysis that replaces all external tool calls.
**Analysis Prompt Template**:
```
Analyze the following design references and generate {variants_count} distinct design style proposals informed by current design trends.
INPUT MODE: {input_mode}
{IF input_mode IN ["image", "hybrid"]}
VISUAL REFERENCES: {list of loaded images}
Identify: color palettes, typography patterns, spacing rhythms, visual hierarchy, component styles
{ENDIF}
{IF input_mode IN ["text", "hybrid"]}
TEXT GUIDANCE: "{prompt_guidance}"
Use this to guide the aesthetic direction and feature requirements
{ENDIF}
DESIGN TRENDS RESEARCH (from web, 2024-2025):
COLOR TRENDS:
{design_trends.colors}
TYPOGRAPHY TRENDS:
{design_trends.typography}
LAYOUT PATTERNS:
{design_trends.layout}
ACCESSIBILITY GUIDELINES:
{design_trends.accessibility}
TASK: Generate {variants_count} design style variants that:
1. Each have a distinct visual identity and design philosophy
2. Incorporate modern design trends from the research above (2024-2025)
3. Balance trend awareness with timeless design principles
4. Use OKLCH color space for all color values
5. Include complete, production-ready design token proposals
6. Are semantically organized (brand, surface, semantic colors)
7. Apply current accessibility best practices from WCAG guidelines
OUTPUT FORMAT: JSON matching this exact structure:
{
"extraction_metadata": {
"session_id": "{session_id}",
"input_mode": "{input_mode}",
"timestamp": "{ISO timestamp}",
"variants_count": {variants_count}
},
"style_cards": [
{
"id": "variant-1",
"name": "Concise Style Name (e.g., Modern Minimalist)",
"description": "2-3 sentence description of this style's visual language and user experience",
"design_philosophy": "Core design principles for this variant",
"preview": {
"primary": "oklch(...)",
"background": "oklch(...)",
"font_heading": "Font name, 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(...)" }
},
"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" }
},
"spacing": { "0": "0", "1": "0.25rem", "2": "0.5rem", ..., "24": "6rem" },
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" },
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
}
},
// Repeat for variants_count total
]
}
RULES:
- Each variant must be distinct in visual character
- Incorporate insights from DESIGN TRENDS RESEARCH into color, typography, and spacing choices
- Balance modern trends with timeless design principles
- 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 guidelines from research
- Apply modern typography trends (variable fonts, system font stacks, optical sizing)
- Include complete token categories for each variant
- Reference specific trends or patterns from the research when making design decisions
```
### 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
})
```
### Phase 4: Completion
```javascript
TodoWrite({
todos: [
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
{content: "Research modern design trends with Exa MCP", status: "completed", activeForm: "Researching design trends"},
{content: "Analyze design references with Claude", status: "completed", activeForm: "Analyzing design"},
{content: `Generate ${variants_count} style cards with token proposals`, status: "completed", activeForm: "Generating style cards"}
]
});
```
**Completion Message**:
```
✅ Style extraction complete for session: {session_id}
Input mode: {input_mode}
{IF image mode: Images analyzed: {count}}
{IF prompt mode: Prompt: "{truncated_prompt}"}
Generated {variants_count} style variant(s):
{FOR each card: - {card.name} ({card.id})}
📂 Output: {base_path}/style-extraction/style-cards.json
Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
Note: When called from /workflow:ui-design:auto, consolidation is triggered automatically.
```
## Output Structure
```
.workflow/WFS-{session}/design-{run_id}/style-extraction/
└── style-cards.json # Single comprehensive output
OR (standalone mode):
.workflow/.design/{run_id}/style-extraction/
└── style-cards.json # Single comprehensive output
```
### style-cards.json Format
Complete structure with example values:
```json
{
"extraction_metadata": {
"session_id": "WFS-xxx or design-session-xxx",
"input_mode": "image|text|hybrid",
"timestamp": "2025-01-15T10:30:00Z",
"variants_count": 3
},
"style_cards": [
{
"id": "variant-1",
"name": "Modern Minimalist",
"description": "Clean, high-contrast design with bold typography and ample whitespace. Focuses on content clarity with minimal visual noise.",
"design_philosophy": "Less is more - prioritize content clarity and visual breathing room over decorative elements",
"preview": {
"primary": "oklch(0.45 0.20 270 / 1)",
"background": "oklch(0.98 0.01 270 / 1)",
"font_heading": "Inter, system-ui, sans-serif",
"border_radius": "0.5rem"
},
"proposed_tokens": {
"colors": {
"brand": {
"primary": "oklch(0.45 0.20 270 / 1)",
"secondary": "oklch(0.60 0.15 320 / 1)",
"accent": "oklch(0.70 0.18 150 / 1)"
},
"surface": {
"background": "oklch(0.98 0.01 270 / 1)",
"elevated": "oklch(1.00 0.00 0 / 1)",
"overlay": "oklch(0.95 0.01 270 / 1)"
},
"semantic": {
"success": "oklch(0.60 0.15 142 / 1)",
"warning": "oklch(0.75 0.12 85 / 1)",
"error": "oklch(0.55 0.22 27 / 1)",
"info": "oklch(0.55 0.18 252 / 1)"
},
"text": {
"primary": "oklch(0.20 0.01 270 / 1)",
"secondary": "oklch(0.45 0.01 270 / 1)",
"tertiary": "oklch(0.60 0.01 270 / 1)",
"inverse": "oklch(0.95 0.01 270 / 1)"
},
"border": {
"default": "oklch(0.85 0.01 270 / 1)",
"strong": "oklch(0.70 0.01 270 / 1)",
"subtle": "oklch(0.92 0.01 270 / 1)"
}
},
"typography": {
"font_family": {
"heading": "Inter, system-ui, sans-serif",
"body": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, Consolas, 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 and strong visual hierarchy. Creates excitement and demands attention.",
"design_philosophy": "Make a statement - use color and contrast to create memorable, energetic experiences",
"preview": {
"primary": "oklch(0.50 0.25 330 / 1)",
"background": "oklch(0.15 0.02 270 / 1)",
"font_heading": "Poppins, system-ui, sans-serif",
"border_radius": "0.75rem"
},
"proposed_tokens": {
"colors": {
"brand": {
"primary": "oklch(0.50 0.25 330 / 1)",
"secondary": "oklch(0.65 0.22 60 / 1)",
"accent": "oklch(0.70 0.20 180 / 1)"
},
"surface": {
"background": "oklch(0.15 0.02 270 / 1)",
"elevated": "oklch(0.20 0.02 270 / 1)",
"overlay": "oklch(0.25 0.02 270 / 1)"
},
"semantic": {
"success": "oklch(0.65 0.18 140 / 1)",
"warning": "oklch(0.70 0.15 80 / 1)",
"error": "oklch(0.60 0.25 25 / 1)",
"info": "oklch(0.60 0.20 250 / 1)"
},
"text": {
"primary": "oklch(0.95 0.01 270 / 1)",
"secondary": "oklch(0.75 0.01 270 / 1)",
"tertiary": "oklch(0.60 0.01 270 / 1)",
"inverse": "oklch(0.20 0.01 270 / 1)"
},
"border": {
"default": "oklch(0.35 0.02 270 / 1)",
"strong": "oklch(0.50 0.02 270 / 1)",
"subtle": "oklch(0.25 0.02 270 / 1)"
}
},
"typography": {
"font_family": {
"heading": "Poppins, system-ui, sans-serif",
"body": "Open Sans, system-ui, sans-serif",
"mono": "Fira Code, Consolas, 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.10)",
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.15)",
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.20)",
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.25)"
},
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
}
}
},
{
"id": "variant-3",
"name": "Elegant Serif",
"description": "Sophisticated design with serif typography and refined color palette. Conveys professionalism and timeless quality.",
"design_philosophy": "Timeless elegance - combine classical typography with modern layout principles",
"preview": {
"primary": "oklch(0.35 0.08 280 / 1)",
"background": "oklch(0.96 0.01 60 / 1)",
"font_heading": "Playfair Display, Georgia, serif",
"border_radius": "0.25rem"
},
"proposed_tokens": {
"colors": {
"brand": {
"primary": "oklch(0.35 0.08 280 / 1)",
"secondary": "oklch(0.50 0.10 320 / 1)",
"accent": "oklch(0.65 0.12 40 / 1)"
},
"surface": {
"background": "oklch(0.96 0.01 60 / 1)",
"elevated": "oklch(1.00 0.00 0 / 1)",
"overlay": "oklch(0.94 0.01 60 / 1)"
},
"semantic": {
"success": "oklch(0.55 0.12 145 / 1)",
"warning": "oklch(0.70 0.10 85 / 1)",
"error": "oklch(0.50 0.18 30 / 1)",
"info": "oklch(0.50 0.15 255 / 1)"
},
"text": {
"primary": "oklch(0.25 0.01 280 / 1)",
"secondary": "oklch(0.50 0.01 280 / 1)",
"tertiary": "oklch(0.65 0.01 280 / 1)",
"inverse": "oklch(0.95 0.01 60 / 1)"
},
"border": {
"default": "oklch(0.82 0.01 60 / 1)",
"strong": "oklch(0.65 0.01 60 / 1)",
"subtle": "oklch(0.90 0.01 60 / 1)"
}
},
"typography": {
"font_family": {
"heading": "Playfair Display, Georgia, serif",
"body": "Source Sans Pro, system-ui, sans-serif",
"mono": "Source Code Pro, Consolas, 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.03)",
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.05)",
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.08)",
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.12)"
},
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
}
}
}
]
}
```
**Key Points**:
- Each variant has complete, independent token proposals
- All colors use OKLCH format for perceptual uniformity
- Token structures are production-ready (no placeholders)
- Variants have distinct visual identities and philosophies
## Error Handling
- **No images found**: Report glob pattern and suggest corrections (e.g., "Pattern '*.png' matched 0 files in current directory")
- **Invalid prompt**: Require non-empty string for text mode
- **Claude JSON parsing error**: Retry with stricter format instructions and explicit structure requirements
- **Invalid session**: Create standalone session automatically in `.workflow/.scratchpad/`
- **Invalid variant count**: Clamp to 1-5 range and warn user
## Key Features
1. **Trend-Aware Style Generation** 🆕
- Uses Exa MCP to research current design trends (2024-2025)
- Searches for color theory, typography trends, layout patterns, and accessibility guidelines
- Generates style variants informed by modern best practices
- Balances innovation with timeless design principles
2. **Zero External Dependencies for Analysis**
- No `gemini-wrapper`, no `codex` for style synthesis - pure Claude
- Single-pass comprehensive analysis with trend integration
3. **Streamlined Output**
- Single file (`style-cards.json`) vs. multiple scattered files
- Eliminates `semantic_style_analysis.json`, `design-tokens.json`, `tailwind-tokens.js` clutter
- Each variant contains complete token proposals embedded
4. **Flexible Input Modes**
- Image-only: Analyze visual references
- Text-only: Generate from descriptions
- Hybrid: Text guides image analysis
- All modes enhanced with web-based design research
5. **Context-Aware Research**
- Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app")
- Considers project type from brainstorming artifacts
- Customizes search queries based on project context
6. **Reproducible Structure**
- Same inputs = same output structure
- Deterministic JSON schema
- Content informed by current design trends
7. **Production-Ready Tokens**
- Complete design system proposals per variant
- OKLCH color format for accessibility
- Semantic naming conventions
- WCAG AA accessibility considerations from latest guidelines
- Modern typography trends (variable fonts, system stacks)
8. **Workflow Integration**
- Integrated mode: Works within existing workflow sessions
- Standalone mode: Auto-creates session in scratchpad
- Context-aware: Can reference synthesis-specification.md or ui-designer/analysis.md
## Integration Points
- **Input**: Reference images (PNG, JPG, WebP) via glob patterns, or text prompts
- **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
- **Context**: Optional brainstorming artifacts (`synthesis-specification.md`, `ui-designer/analysis.md`)
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
- **Next Step**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}` (or `--keep-separate` for matrix mode)
Reference in New Issue View Git Blame Copy Permalink