mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
Enhance layout and style extraction commands with dual mode support for exploration and refinement.
- Updated `layout-extract` command to include a refinement mode (`--refine`) for generating single refined layouts, alongside exploration mode for multiple contrasting variants. - Added detailed reporting and validation for variants count based on the selected mode. - Implemented logic to load existing layouts for refinement and generate specific refinement options categorized by density, responsiveness, grid specifics, and component arrangement. - Updated `style-extract` command similarly to support refinement mode, allowing for detailed adjustments to existing design systems. - Enhanced user interaction phases to accommodate selection of refinements or design directions based on the active mode.
This commit is contained in:
catlog22
@@ -1,20 +1,22 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style from reference images or text prompts using Claude's built-in analysis. Directly generates production-ready design systems with complete `design-tokens.json` and `style-guide.md` for each variant.
|
||||
Extract design style from reference images or text prompts using Claude's built-in analysis. Supports two modes:
|
||||
1. **Exploration Mode** (default): Generate multiple contrasting design variants
|
||||
2. **Refinement Mode** (`--refine`): Refine a single existing design through detailed adjustments
|
||||
|
||||
**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)
|
||||
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
|
||||
- **Maximum Contrast**: AI generates maximally divergent design directions
|
||||
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
|
||||
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
@@ -40,10 +42,19 @@ IF --urls:
|
||||
ELSE:
|
||||
has_urls = false
|
||||
|
||||
# Set variants count (default: 3, range: 1-5)
|
||||
# Behavior: Generate N design directions → User multi-select → Generate selected variants
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
|
||||
# Set variants count
|
||||
# Refinement mode: Force variants_count = 1 (ignore user-provided --variants)
|
||||
# Exploration mode: Use --variants or default to 3 (range: 1-5)
|
||||
IF refine_mode:
|
||||
variants_count = 1
|
||||
REPORT: "🔧 Refinement mode enabled: Will generate 1 refined design system"
|
||||
ELSE:
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting design directions"
|
||||
|
||||
# Determine base path with priority: --design-id > --session > auto-detect
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
@@ -152,60 +163,130 @@ IF exists: SKIP to completion
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
|
||||
|
||||
## Phase 1: Design Direction Generation
|
||||
## Phase 1: Design Direction or Refinement Options Generation
|
||||
|
||||
### Step 1: Load Project Context
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
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 Design Direction Options (Agent Task 1)
|
||||
### Step 2: Generate Options (Agent Task 1 - Mode-Specific)
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
Launch agent to generate `variants_count` design direction options with previews:
|
||||
**Exploration Mode** (default): Generate contrasting design directions
|
||||
**Refinement Mode** (`--refine`): Generate refinement options for existing design
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_DIRECTION_GENERATION_TASK]
|
||||
Generate {variants_count} maximally contrasting design directions with visual previews
|
||||
// Conditional agent task based on refine_mode
|
||||
IF NOT refine_mode:
|
||||
// EXPLORATION MODE
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_DIRECTION_GENERATION_TASK]
|
||||
Generate {variants_count} maximally contrasting design directions with visual previews
|
||||
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
|
||||
## Input Analysis
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
- Project context: {brainstorming_context if available}
|
||||
## Input Analysis
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
- Project context: {brainstorming_context if available}
|
||||
|
||||
## Analysis Rules
|
||||
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
|
||||
- Generate {variants_count} directions with MAXIMUM contrast
|
||||
- Each direction must be distinctly different (min distance score: 0.7)
|
||||
## Analysis Rules
|
||||
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
|
||||
- Generate {variants_count} directions with MAXIMUM contrast
|
||||
- Each direction must be distinctly different (min distance score: 0.7)
|
||||
|
||||
## Generate for EACH Direction
|
||||
1. **Core Philosophy**:
|
||||
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
|
||||
- design_attributes (6D scores 0-1)
|
||||
- search_keywords (3-5 keywords)
|
||||
- anti_keywords (2-3 keywords to avoid)
|
||||
- rationale (why this is distinct from others)
|
||||
## Generate for EACH Direction
|
||||
1. **Core Philosophy**:
|
||||
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
|
||||
- design_attributes (6D scores 0-1)
|
||||
- search_keywords (3-5 keywords)
|
||||
- anti_keywords (2-3 keywords to avoid)
|
||||
- rationale (why this is distinct from others)
|
||||
|
||||
2. **Visual Preview Elements**:
|
||||
- primary_color (OKLCH format)
|
||||
- secondary_color (OKLCH format)
|
||||
- accent_color (OKLCH format)
|
||||
- font_family_heading (specific font name)
|
||||
- font_family_body (specific font name)
|
||||
- border_radius_base (e.g., "0.5rem")
|
||||
- mood_description (1-2 sentences describing the feel)
|
||||
2. **Visual Preview Elements**:
|
||||
- primary_color (OKLCH format)
|
||||
- secondary_color (OKLCH format)
|
||||
- accent_color (OKLCH format)
|
||||
- font_family_heading (specific font name)
|
||||
- font_family_body (specific font name)
|
||||
- border_radius_base (e.g., "0.5rem")
|
||||
- mood_description (1-2 sentences describing the feel)
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
|
||||
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
|
||||
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
ELSE:
|
||||
// REFINEMENT MODE
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_REFINEMENT_OPTIONS_TASK]
|
||||
Generate refinement options for existing design system
|
||||
|
||||
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
|
||||
|
||||
## Existing Design System
|
||||
- design-tokens.json: {existing_tokens}
|
||||
- style-guide.md: {existing_guide}
|
||||
|
||||
## Input Guidance
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
|
||||
## Refinement Categories
|
||||
Generate 8-12 refinement options across these categories:
|
||||
|
||||
1. **Intensity/Degree Adjustments** (2-3 options):
|
||||
- Color intensity: more vibrant ↔ more muted
|
||||
- Visual weight: bolder ↔ lighter
|
||||
- Density: more compact ↔ more spacious
|
||||
|
||||
2. **Specific Attribute Tuning** (3-4 options):
|
||||
- Border radius: sharper corners ↔ rounder edges
|
||||
- Shadow depth: subtler shadows ↔ deeper elevation
|
||||
- Typography scale: tighter scale ↔ more contrast
|
||||
- Spacing scale: tighter rhythm ↔ more breathing room
|
||||
|
||||
3. **Context-Specific Variations** (2-3 options):
|
||||
- Dark mode optimization
|
||||
- Mobile-specific adjustments
|
||||
- High-contrast accessibility mode
|
||||
|
||||
4. **Component-Level Customization** (1-2 options):
|
||||
- Button styling emphasis
|
||||
- Card/container treatment
|
||||
- Form input refinements
|
||||
|
||||
## Output Format
|
||||
Each option:
|
||||
- category: "intensity|attribute|context|component"
|
||||
- option_id: unique identifier
|
||||
- label: Short descriptive name (e.g., "More Vibrant Colors")
|
||||
- description: What changes (2-3 sentences)
|
||||
- preview_changes: Key token adjustments preview
|
||||
- impact_scope: Which tokens affected
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
|
||||
Use refinement schema:
|
||||
{
|
||||
"mode": "refinement",
|
||||
"base_design": "style-1",
|
||||
"refinement_options": [array of refinement options]
|
||||
}
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
```
|
||||
|
||||
### Step 3: Verify Options File Created
|
||||
@@ -222,7 +303,9 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
|
||||
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
|
||||
**Purpose**:
|
||||
- **Exploration Mode**: Allow user to select preferred design direction(s)
|
||||
- **Refinement Mode**: Allow user to select refinement options to apply
|
||||
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
@@ -231,21 +314,31 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
|
||||
IF refine_mode:
|
||||
REPORT: "ℹ️ Non-interactive refinement mode: Will apply all suggested refinements"
|
||||
ELSE:
|
||||
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
|
||||
|
||||
REPORT: "🎯 Interactive mode enabled: User selection required"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options
|
||||
### Step 2: Load and Present Options (Mode-Specific)
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
|
||||
# Parse design directions
|
||||
design_directions = options.design_directions
|
||||
# Branch based on mode
|
||||
IF NOT refine_mode:
|
||||
# EXPLORATION MODE
|
||||
design_directions = options.design_directions
|
||||
ELSE:
|
||||
# REFINEMENT MODE
|
||||
refinement_options = options.refinement_options
|
||||
```
|
||||
|
||||
### Step 2: Present Options to User
|
||||
### Step 3: Present Options to User (Mode-Specific)
|
||||
|
||||
**Exploration Mode**:
|
||||
```
|
||||
📋 Design Direction Options
|
||||
|
||||
@@ -278,30 +371,39 @@ Please select the direction(s) you'd like to develop into complete design system
|
||||
═══════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
### Step 3: Capture User Selection and Update Analysis JSON
|
||||
|
||||
**Interaction Strategy**: If variants > 4, use batch text format:
|
||||
|
||||
**Refinement Mode**:
|
||||
```
|
||||
【选项[N]】[philosophy_name]
|
||||
[rationale]
|
||||
...
|
||||
请选择 (格式: 1 2 3 多选，或 1 单选)：
|
||||
📋 Design Refinement Options
|
||||
|
||||
User input:
|
||||
"[N1]" → Single selection
|
||||
"[N1] [N2] [N3] ..." → Multi-selection
|
||||
We've analyzed your existing design system and generated refinement options.
|
||||
Please select the refinement(s) you'd like to apply.
|
||||
|
||||
Base Design: style-1
|
||||
|
||||
{FOR each option in refinement_options grouped by category:
|
||||
━━━ {category_name} ━━━
|
||||
|
||||
{FOR each refinement in category_options:
|
||||
[{refinement.option_id}] {refinement.label}
|
||||
{refinement.description}
|
||||
Preview: {refinement.preview_changes}
|
||||
Affects: {refinement.impact_scope}
|
||||
}
|
||||
}
|
||||
|
||||
═══════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
Otherwise, use `AskUserQuestion` below.
|
||||
### Step 4: Capture User Selection and Update Analysis JSON
|
||||
|
||||
**Exploration Mode Interaction**:
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for multi-selection
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which design direction(s) would you like to develop into complete design systems?",
|
||||
header: "Style Choice",
|
||||
multiSelect: true, // Multi-selection enabled (default behavior)
|
||||
multiSelect: true, // Multi-selection enabled
|
||||
options: [
|
||||
{FOR each direction:
|
||||
label: "Option {direction.index}: {direction.philosophy_name}",
|
||||
@@ -311,7 +413,7 @@ AskUserQuestion({
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response (array of selections, e.g., ["Option 1: ...", "Option 3: ..."])
|
||||
// Parse user response (array of selections)
|
||||
selected_options = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
@@ -319,33 +421,73 @@ IF selected_options == null OR selected_options.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract option indices from array
|
||||
// Extract option indices
|
||||
selected_indices = []
|
||||
FOR each selected_option_text IN selected_options:
|
||||
match = selected_option_text.match(/Option (\d+):/)
|
||||
IF match:
|
||||
selected_indices.push(parseInt(match[1]))
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Option N: ...' format"
|
||||
EXIT workflow
|
||||
|
||||
REPORT: "✅ Selected {selected_indices.length} design direction(s)"
|
||||
|
||||
// Update analysis-options.json with user selection
|
||||
// Update analysis-options.json
|
||||
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"selected_indices": selected_indices,
|
||||
"selection_count": selected_indices.length
|
||||
}
|
||||
|
||||
// Write updated file back
|
||||
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
|
||||
REPORT: "✅ Updated analysis-options.json with user selection"
|
||||
```
|
||||
|
||||
### Step 4: Confirmation Message
|
||||
**Refinement Mode Interaction**:
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for multi-selection of refinements
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which refinement(s) would you like to apply to your design system?",
|
||||
header: "Refinements",
|
||||
multiSelect: true, // Multi-selection enabled
|
||||
options: [
|
||||
{FOR each refinement:
|
||||
label: "{refinement.label}",
|
||||
description: "{refinement.description} (Affects: {refinement.impact_scope})"
|
||||
}
|
||||
]
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response
|
||||
selected_refinements = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_refinements == null OR selected_refinements.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract refinement option_ids
|
||||
selected_option_ids = []
|
||||
FOR each selected_text IN selected_refinements:
|
||||
# Match against refinement labels to find option_ids
|
||||
FOR each refinement IN refinement_options:
|
||||
IF refinement.label IN selected_text:
|
||||
selected_option_ids.push(refinement.option_id)
|
||||
|
||||
REPORT: "✅ Selected {selected_option_ids.length} refinement(s)"
|
||||
|
||||
// Update analysis-options.json
|
||||
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"selected_option_ids": selected_option_ids,
|
||||
"selection_count": selected_option_ids.length
|
||||
}
|
||||
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message (Mode-Specific)
|
||||
|
||||
**Exploration Mode**:
|
||||
```
|
||||
✅ Selection recorded!
|
||||
|
||||
@@ -357,7 +499,19 @@ You selected {selected_indices.length} design direction(s):
|
||||
Proceeding to generate {selected_indices.length} complete design system(s)...
|
||||
```
|
||||
|
||||
**Output**: Updated `analysis-options.json` with user's multi-selection embedded
|
||||
**Refinement Mode**:
|
||||
```
|
||||
✅ Selection recorded!
|
||||
|
||||
You selected {selected_option_ids.length} refinement(s):
|
||||
{FOR each id IN selected_option_ids:
|
||||
• {refinement_by_id[id].label} ({refinement_by_id[id].category})
|
||||
}
|
||||
|
||||
Proceeding to apply refinements and generate updated design system...
|
||||
```
|
||||
|
||||
**Output**: Updated `analysis-options.json` with user's selection embedded
|
||||
|
||||
## Phase 2: Design System Generation (Agent Task 2)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user