mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
Release v4.4.0: UI Design Workflow V3 - Layout/Style Separation Architecture
## Breaking Changes - **Command Renamed**: `extract` → `style-extract` - **New Required Phase**: `layout-extract` now mandatory before `generate` - **Workflow Changed**: Old flow (extract → consolidate → generate) → New flow (style-extract → consolidate → layout-extract → generate) ## Added **New Command: layout-extract** - Extract structural layout separate from visual style - Agent-powered with ui-design-agent - Dual-mode: imitate (high-fidelity) / explore (multiple variants) - Device-aware: desktop, mobile, tablet, responsive - MCP-integrated layout pattern research (explore mode) - Output: layout-templates.json with DOM structure + CSS layout rules **Enhanced Architecture** - Layout/Style Separation: Clear responsibility boundaries - Pure Assembler: generate command combines pre-extracted components - Device-Aware Layouts: Optimized structures for different devices - Token-Based CSS: var() placeholders for spacing/breakpoints ## Changed **style-extract (Renamed from extract)** - File renamed: extract.md → style-extract.md - Scope clarified: Visual style only (colors, typography, spacing) - No functionality change, all features preserved **generate (Refactored to Pure Assembler)** - Before: Agent designed layout + applied style - After: Pure assembly - combines layout-templates.json + design-tokens.json - No design logic: All decisions made in previous phases - Simplified agent instructions: Focus on assembly only **Workflow Commands Updated** - imitate-auto: Added Phase 2.5 (layout extraction) - explore-auto: Added Phase 2.5 (layout extraction) - Both workflows now include layout-extract step ## Removed - ❌ V2 Commands: generate-v2, explore-auto-v2 (merged into main commands) - ❌ Old extract command (renamed to style-extract) - ❌ ui-generate-preview-v2.sh (merged into ui-generate-preview.sh) ## Files Changed - Renamed: extract.md → style-extract.md - Added: layout-extract.md (370+ lines) - Modified: generate.md, imitate-auto.md, explore-auto.md, consolidate.md - Removed: 2 deprecated v2 command files - Updated: CHANGELOG.md, README.md ## Benefits - ✅ Single Responsibility: Each phase has one clear job - ✅ Better Layout Variety: Explore mode generates structurally distinct layouts - ✅ Reusability: Layout templates work with any style - ✅ Clarity: All structural decisions visible in layout-templates.json - ✅ Testability: Layout structure and visual style tested independently 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
277
.claude/commands/workflow/ui-design/style-extract.md
Normal file
277
.claude/commands/workflow/ui-design/style-extract.md
Normal file
@@ -0,0 +1,277 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude's analysis
|
||||
usage: /workflow:ui-design:style-extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]
|
||||
examples:
|
||||
- /workflow:ui-design:style-extract --images "design-refs/*.png" --mode explore --variants 3
|
||||
- /workflow:ui-design:style-extract --prompt "Modern minimalist blog, dark theme" --mode explore --variants 3
|
||||
- /workflow:ui-design:style-extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --mode imitate
|
||||
- /workflow:ui-design:style-extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --mode explore --variants 3
|
||||
- /workflow:ui-design:style-extract --prompt "Bold vibrant" --mode imitate # High-fidelity single style
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style from reference images or text prompts using Claude's built-in analysis. Generates `style-cards.json` with multiple design variants containing token proposals for consolidation.
|
||||
|
||||
**Strategy**: AI-Driven Design Space Exploration
|
||||
- **Claude-Native**: 100% Claude analysis, no external tools
|
||||
- **Single Output**: `style-cards.json` with embedded token proposals
|
||||
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
|
||||
- **Maximum Contrast**: AI generates maximally divergent design directions
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
|
||||
### Step 1: Detect Input Mode, Extraction Mode & Base Path
|
||||
```bash
|
||||
# Detect input source
|
||||
# Priority: --images + --prompt → hybrid | --images → image | --prompt → text
|
||||
|
||||
# Determine extraction mode
|
||||
# Priority: --mode parameter → default "imitate"
|
||||
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||
|
||||
# Set variants count based on mode
|
||||
IF extraction_mode == "imitate":
|
||||
variants_count = 1 # Force single variant for imitate mode (ignore --variants)
|
||||
ELSE IF extraction_mode == "explore":
|
||||
variants_count = --variants OR 3 # Default to 3 for explore mode
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# OR use --base-path / --session parameters
|
||||
```
|
||||
|
||||
### Step 2: Load Inputs
|
||||
```bash
|
||||
# For image mode
|
||||
bash(ls {images_pattern}) # Expand glob pattern
|
||||
Read({image_path}) # Load each image
|
||||
|
||||
# For text mode
|
||||
# Validate --prompt is non-empty
|
||||
|
||||
# Create output directory
|
||||
bash(mkdir -p {base_path}/style-extraction/)
|
||||
```
|
||||
|
||||
### Step 3: Memory Check (Skip if Already Done)
|
||||
```bash
|
||||
# Check if already extracted
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
|
||||
```
|
||||
|
||||
**If exists**: Skip to completion message
|
||||
|
||||
**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
|
||||
|
||||
## Phase 1: Design Space Analysis (Explore Mode Only)
|
||||
|
||||
### Step 1: Check Extraction Mode
|
||||
```bash
|
||||
# Check extraction mode
|
||||
# extraction_mode == "imitate" → skip this phase
|
||||
# extraction_mode == "explore" → execute this phase
|
||||
```
|
||||
|
||||
**If imitate mode**: Skip to Phase 2
|
||||
|
||||
### Step 2: Load Project Context (Explore Mode)
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
bash(test -f {base_path}/.brainstorming/synthesis-specification.md && cat it)
|
||||
```
|
||||
|
||||
### Step 3: Generate Divergent Directions (Claude Native)
|
||||
AI analyzes requirements and generates `variants_count` maximally contrasting design directions:
|
||||
|
||||
**Input**: User prompt + project context + image count
|
||||
**Analysis**: 6D attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
|
||||
**Output**: JSON with divergent_directions, each having:
|
||||
- philosophy_name (2-3 words)
|
||||
- design_attributes (specific scores)
|
||||
- search_keywords (3-5 keywords)
|
||||
- anti_keywords (2-3 keywords)
|
||||
- rationale (contrast explanation)
|
||||
|
||||
### Step 4: Write Design Space Analysis
|
||||
```bash
|
||||
bash(echo '{design_space_analysis}' > {base_path}/style-extraction/design-space-analysis.json)
|
||||
|
||||
# Verify output
|
||||
bash(test -f design-space-analysis.json && echo "saved")
|
||||
```
|
||||
|
||||
**Output**: `design-space-analysis.json` for consolidation phase
|
||||
|
||||
## Phase 2: Style Synthesis & File Write
|
||||
|
||||
### Step 1: Claude Native Analysis
|
||||
AI generates `variants_count` design style proposals:
|
||||
|
||||
**Input**:
|
||||
- Input mode (image/text/hybrid)
|
||||
- Visual references or text guidance
|
||||
- Design space analysis (explore mode only)
|
||||
- Variant-specific directions (explore mode only)
|
||||
|
||||
**Analysis Rules**:
|
||||
- **Explore mode**: Each variant follows pre-defined philosophy and attributes, maintains maximum contrast
|
||||
- **Imitate mode**: High-fidelity replication of reference design
|
||||
- OKLCH color format
|
||||
- Complete token proposals (colors, typography, spacing, border_radius, shadows, breakpoints)
|
||||
- WCAG AA accessibility (4.5:1 text, 3:1 UI)
|
||||
|
||||
**Output Format**: `style-cards.json` with:
|
||||
- extraction_metadata (session_id, input_mode, extraction_mode, timestamp, variants_count)
|
||||
- style_cards[] (id, name, description, design_philosophy, preview, proposed_tokens)
|
||||
|
||||
### Step 2: Write Style Cards
|
||||
```bash
|
||||
bash(echo '{style_cards_json}' > {base_path}/style-extraction/style-cards.json)
|
||||
```
|
||||
|
||||
**Output**: `style-cards.json` with `variants_count` complete variants
|
||||
|
||||
## Completion
|
||||
|
||||
### Todo Update
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Design space analysis (explore mode)", status: "completed", activeForm: "Analyzing design space"},
|
||||
{content: "Style synthesis and file write", status: "completed", activeForm: "Generating style cards"}
|
||||
]});
|
||||
```
|
||||
|
||||
### Output Message
|
||||
```
|
||||
✅ Style extraction complete!
|
||||
|
||||
Configuration:
|
||||
- Session: {session_id}
|
||||
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||
- Input Mode: {input_mode} (image/text/hybrid)
|
||||
- Variants: {variants_count}
|
||||
|
||||
{IF extraction_mode == "explore":
|
||||
Design Space Analysis:
|
||||
- {variants_count} maximally contrasting design directions
|
||||
- Min contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
|
||||
}
|
||||
|
||||
Generated Variants:
|
||||
{FOR each card: - {card.name} - {card.design_philosophy}}
|
||||
|
||||
Output Files:
|
||||
- {base_path}/style-extraction/style-cards.json
|
||||
{IF extraction_mode == "explore": - {base_path}/style-extraction/design-space-analysis.json}
|
||||
|
||||
Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
|
||||
```
|
||||
|
||||
## Simple Bash Commands
|
||||
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
|
||||
# Expand image pattern
|
||||
bash(ls {images_pattern})
|
||||
|
||||
# Create output directory
|
||||
bash(mkdir -p {base_path}/style-extraction/)
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check if already extracted
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
|
||||
|
||||
# Count variants
|
||||
bash(cat style-cards.json | grep -c "\"id\": \"variant-")
|
||||
|
||||
# Validate JSON
|
||||
bash(cat style-cards.json | grep -q "extraction_metadata" && echo "valid")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
```bash
|
||||
# Load brainstorming context
|
||||
bash(test -f .brainstorming/synthesis-specification.md && cat it)
|
||||
|
||||
# Write output
|
||||
bash(echo '{json}' > {base_path}/style-extraction/style-cards.json)
|
||||
|
||||
# Verify output
|
||||
bash(test -f design-space-analysis.json && echo "saved")
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/style-extraction/
|
||||
├── style-cards.json # Complete style variants with token proposals
|
||||
└── design-space-analysis.json # Design directions (explore mode only)
|
||||
```
|
||||
|
||||
## style-cards.json Format
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {"session_id": "...", "input_mode": "image|text|hybrid", "extraction_mode": "imitate|explore", "timestamp": "...", "variants_count": N},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1", "name": "Style Name", "description": "...",
|
||||
"design_philosophy": "Core 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
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Requirements**: All colors in OKLCH format, complete token proposals, semantic naming
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Common Errors
|
||||
```
|
||||
ERROR: No images found
|
||||
→ Check glob pattern
|
||||
|
||||
ERROR: Invalid prompt
|
||||
→ Provide non-empty string
|
||||
|
||||
ERROR: Claude JSON parsing error
|
||||
→ Retry with stricter format
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
- **AI-Driven Design Space Exploration** - 6D attribute space analysis for maximum contrast
|
||||
- **Variant-Specific Directions** - Each variant has unique philosophy, keywords, anti-patterns
|
||||
- **Maximum Contrast Guarantee** - Variants maximally distant in attribute space
|
||||
- **Claude-Native** - No external tools, fast deterministic synthesis
|
||||
- **Flexible Input** - Images, text, or hybrid mode
|
||||
- **Production-Ready** - OKLCH colors, WCAG AA, semantic naming
|
||||
|
||||
## Integration
|
||||
|
||||
**Input**: Reference images or text prompts
|
||||
**Output**: `style-cards.json` for consolidation
|
||||
**Next**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}`
|
||||
|
||||
**Note**: This command only extracts visual style (colors, typography, spacing). For layout structure extraction, use `/workflow:ui-design:layout-extract`.
|
||||
Reference in New Issue
Block a user