mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
feat: add interactive multi-selection mechanism for UI design workflow
- Add --interactive flag to style-extract and layout-extract commands - Enhance animation-extract --mode interactive with selection storage - Implement unified user-selections storage in .intermediates/user-selections/ - Add parameter passthrough in explore-auto (default: enabled) and imitate-auto (always enabled) - Support fallback to generate all variants when no selection file exists - Fix explore-auto.md bug: duplicate --base-path in import-from-code call (line 313) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -2,7 +2,7 @@
|
||||
name: animation-extract
|
||||
description: Extract animation and transition patterns from URLs, CSS, or interactive questioning for design system documentation
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--urls "<list>"] [--mode <auto|interactive>] [--focus "<types>"]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Animation Extraction Command
|
||||
@@ -51,7 +51,7 @@ ELSE:
|
||||
focus_types = ["all"] # Extract all animation types
|
||||
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" | head -1)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
@@ -692,6 +692,32 @@ Task(ui-design-agent): `
|
||||
|
||||
**Phase 3 Output**: `animation-tokens.json` + `animation-guide.md`
|
||||
|
||||
### Step 3: Store User Selection Metadata (If Interactive Mode Used)
|
||||
|
||||
```bash
|
||||
# If interactive mode was used, save selection metadata for orchestrator
|
||||
IF extraction_mode == "interactive" AND exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
|
||||
# Create user-selections directory
|
||||
bash(mkdir -p {base_path}/.intermediates/user-selections)
|
||||
|
||||
# Read specification to extract metadata
|
||||
specification = Read({base_path}/.intermediates/animation-analysis/animation-specification.json)
|
||||
|
||||
# Create selection metadata (for orchestrator compatibility)
|
||||
selection_metadata = {
|
||||
"metadata": {
|
||||
"selected_at": NOW(),
|
||||
"selection_type": "interactive_questionnaire",
|
||||
"mode": "interactive"
|
||||
},
|
||||
"selected_variants": [1], // Always 1 for interactive mode (single result)
|
||||
"specification": specification.metadata
|
||||
}
|
||||
|
||||
# Write to standardized selection file
|
||||
Write({base_path}/.intermediates/user-selections/animation-extract-selection.json, JSON.stringify(selection_metadata, indent=2))
|
||||
```
|
||||
|
||||
## Phase 4: Verify Output
|
||||
|
||||
### Step 1: Check Files Created
|
||||
|
||||
@@ -21,7 +21,7 @@ Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes
|
||||
relative_path=$(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
else
|
||||
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: explore-auto
|
||||
description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution
|
||||
argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]""
|
||||
argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]""
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
@@ -154,6 +154,11 @@ ELSE:
|
||||
layout_variants = --layout-variants OR 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
|
||||
|
||||
# Interactive mode (default: enabled for multi-selection)
|
||||
interactive_mode = --interactive !== undefined ? --interactive : true # Default to true
|
||||
|
||||
REPORT: "🎯 Interactive mode: {interactive_mode ? 'enabled' : 'disabled'}"
|
||||
```
|
||||
|
||||
### Phase 0a-2: Device Type Inference
|
||||
@@ -310,7 +315,7 @@ detect_target_type(target_list):
|
||||
```bash
|
||||
IF design_source IN ["code_only", "hybrid"]:
|
||||
REPORT: "🔍 Phase 0d: Code Import ({design_source})"
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --base-path \"{code_base_path}\""
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --source \"{code_base_path}\""
|
||||
SlashCommand(command)
|
||||
|
||||
# Check file existence and assess completeness
|
||||
@@ -390,7 +395,8 @@ IF design_source == "visual_only" OR needs_visual_supplement:
|
||||
command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--variants {style_variants}"
|
||||
"--variants {style_variants}" +
|
||||
(interactive_mode ? " --interactive" : "")
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 1: Style (Using Code Import)"
|
||||
@@ -419,7 +425,8 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
|
||||
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\""
|
||||
"--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\"" +
|
||||
(interactive_mode ? " --interactive" : "")
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
@@ -427,8 +434,7 @@ ELSE:
|
||||
|
||||
### Phase 3: UI Assembly
|
||||
```bash
|
||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
|
||||
"--style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\""
|
||||
|
||||
total = style_variants × layout_variants × len(inferred_target_list)
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ IF depth NOT IN [1, 2, 3, 4, 5]:
|
||||
relative_path=$(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
else
|
||||
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: generate
|
||||
description: Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
argument-hint: [--base-path <path>] [--session <id>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
---
|
||||
|
||||
@@ -11,7 +11,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (`style × layout × targets`). No layout design logic - purely combines existing components.
|
||||
|
||||
**Strategy**: Pure Assembly
|
||||
- **Input**: `layout-templates.json` + `design-tokens.json` (+ reference images if available)
|
||||
- **Input**: `layout-*.json` files + `design-tokens.json` (+ reference images if available)
|
||||
- **Process**: Combine structure (DOM) with style (tokens)
|
||||
- **Output**: Complete HTML/CSS prototypes
|
||||
- **No Design Logic**: All layout and style decisions already made
|
||||
@@ -25,8 +25,8 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
|
||||
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
```bash
|
||||
# Determine working directory (relative path)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" | head -1)
|
||||
# Determine working directory (relative path - finds latest)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Convert to absolute path
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
@@ -42,12 +42,18 @@ bash(ls "$base_path"/style-extraction/style-* -d | wc -l)
|
||||
|
||||
### Step 2: Load Layout Templates
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Load layout templates
|
||||
Read({base_path}/layout-extraction/layout-templates.json)
|
||||
# Extract: targets, layout_variants count, device_type, template structures
|
||||
# Get list of all layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null)
|
||||
|
||||
# Load each layout template file
|
||||
FOR each layout_file in layout_files:
|
||||
template_data = Read(layout_file)
|
||||
# Extract: target, variant_id, device_type, dom_structure, css_layout_rules
|
||||
|
||||
# Aggregate: targets[], layout_variants count, device_type, all template structures
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `style_variants`, `layout_templates[]`, `targets[]`, `device_type`
|
||||
@@ -99,9 +105,9 @@ Task(ui-design-agent): `
|
||||
|
||||
## Inputs (READ ONLY - NO DESIGN DECISIONS)
|
||||
1. Layout Template:
|
||||
Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
Find template where: target={target} AND variant_id="layout-{layout_id}"
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path
|
||||
Read("{base_path}/layout-extraction/layout-{target}-{layout_id}.json")
|
||||
This file contains the specific layout template for this target and variant.
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path (from template field)
|
||||
|
||||
2. Design Tokens:
|
||||
Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
|
||||
@@ -229,7 +235,7 @@ TodoWrite({todos: [
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants} (from layout-templates.json)
|
||||
- Layout Variants: {layout_variants} (from layout-*.json files)
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets}
|
||||
- Total Prototypes: {S × L × T}
|
||||
@@ -248,14 +254,15 @@ Quality:
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── _templates/
|
||||
│ └── layout-templates.json (input, pre-extracted)
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Input Files (from layout-extraction/):
|
||||
├── layout-{target}-{variant}.json (multiple files, one per target-variant combination)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
@@ -277,8 +284,11 @@ bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Count layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
@@ -304,10 +314,10 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
{base_path}/
|
||||
├── layout-extraction/
|
||||
│ └── layout-templates.json # Input (from layout-extract)
|
||||
│ └── layout-{target}-{variant}.json # Input (multiple files from layout-extract)
|
||||
├── style-extraction/
|
||||
│ └── style-{s}/
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ └── style-guide.md
|
||||
└── prototypes/
|
||||
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
|
||||
@@ -336,7 +346,7 @@ ERROR: Script permission denied
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial success**: Keep successful assembly combinations
|
||||
- **Invalid template structure**: Validate layout-templates.json
|
||||
- **Invalid template structure**: Validate layout-*.json files
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
|
||||
## Quality Checklist
|
||||
@@ -362,8 +372,8 @@ ERROR: Script permission denied
|
||||
|
||||
**Prerequisites**:
|
||||
- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-templates.json`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-{target}-{variant}.json` files
|
||||
|
||||
**Input**: `layout-templates.json` + `design-tokens.json`
|
||||
**Input**: `layout-*.json` files + `design-tokens.json`
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
|
||||
|
||||
@@ -225,8 +225,8 @@ IF design_source == "hybrid":
|
||||
REPORT: " → Source: {code_base_path}"
|
||||
REPORT: " → Mode: Hybrid (Web + Code)"
|
||||
|
||||
command = "/workflow:ui-design:import-from-code --output-path \"{base_path}\" " +
|
||||
"--source-path \"{code_base_path}\""
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " +
|
||||
"--source \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(command)
|
||||
@@ -408,7 +408,7 @@ ELSE:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
|
||||
|
||||
url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()])
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --variants 1"
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --variants 1 --interactive"
|
||||
SlashCommand(extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
|
||||
@@ -439,7 +439,7 @@ IF skip_layout:
|
||||
ELSE:
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction"
|
||||
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --variants 1"
|
||||
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --variants 1 --interactive"
|
||||
SlashCommand(layout_extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: workflow:ui-design:import-from-code
|
||||
description: Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis
|
||||
argument-hint: "[--source-path <path>] [--output-path <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
argument-hint: "[--base-path <path>] [--source <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite
|
||||
auto-continue: true
|
||||
---
|
||||
@@ -34,8 +34,8 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
/workflow:ui-design:import-from-code [FLAGS]
|
||||
|
||||
# Flags
|
||||
--source-path <path> Source code directory to analyze (default: current directory)
|
||||
--output-path <path> Output directory for extracted design tokens (default: current directory)
|
||||
--base-path <path> Output directory for extracted design tokens (default: current directory)
|
||||
--source <path> Source code directory to analyze (default: base-path)
|
||||
--css "<glob>" CSS file glob pattern (e.g., "theme/*.css")
|
||||
--scss "<glob>" SCSS file glob pattern (e.g., "styles/*.scss")
|
||||
--js "<glob>" JavaScript file glob pattern (e.g., "theme/*.js")
|
||||
@@ -48,19 +48,19 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
|
||||
```bash
|
||||
# Basic usage - auto-discover all files
|
||||
/workflow:ui-design:import-from-code --source-path ./src --output-path ./design-system
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src
|
||||
|
||||
# Target specific directories
|
||||
/workflow:ui-design:import-from-code --source-path ./src --output-path ./design-system --css "theme/*.css" --js "theme/*.js"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "theme/*.css" --js "theme/*.js"
|
||||
|
||||
# Tailwind config only (output to current directory)
|
||||
/workflow:ui-design:import-from-code --source-path ./ --js "tailwind.config.js"
|
||||
/workflow:ui-design:import-from-code --source ./ --js "tailwind.config.js"
|
||||
|
||||
# CSS framework import
|
||||
/workflow:ui-design:import-from-code --source-path ./src --output-path ./design-system --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
|
||||
# Universal style files
|
||||
/workflow:ui-design:import-from-code --source-path ./src --output-path ./design-system --style-files "**/theme.*"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --style-files "**/theme.*"
|
||||
```
|
||||
|
||||
---
|
||||
@@ -75,12 +75,12 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
|
||||
```bash
|
||||
# 1. Initialize directories
|
||||
source_path="${source_path:-.}"
|
||||
output_path="${output_path:-.}"
|
||||
intermediates_dir="${output_path}/.intermediates/import-analysis"
|
||||
base_path="${base_path:-.}"
|
||||
source="${source:-$base_path}"
|
||||
intermediates_dir="${base_path}/.intermediates/import-analysis"
|
||||
mkdir -p "$intermediates_dir"
|
||||
|
||||
echo "[Phase 0] File Discovery Started (source: $source_path, output: $output_path)"
|
||||
echo "[Phase 0] File Discovery Started (source: $source, output: $base_path)"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
@@ -97,7 +97,7 @@ echo "[Phase 0] File Discovery Started (source: $source_path, output: $output_pa
|
||||
|
||||
```bash
|
||||
# 2. Discover files by type
|
||||
cd "$source_path" || exit 1
|
||||
cd "$source" || exit 1
|
||||
|
||||
# CSS files
|
||||
if [ -n "$css" ]; then
|
||||
@@ -183,7 +183,7 @@ Task(ui-design-agent): `
|
||||
[STYLE_TOKENS_EXTRACTION]
|
||||
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types
|
||||
|
||||
MODE: style-extraction | SOURCE_PATH: ${source_path} | OUTPUT_PATH: ${output_path}
|
||||
MODE: style-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -210,7 +210,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 2 files in ${output_path}/style-extraction/style-1/:
|
||||
Generate 2 files in ${base_path}/style-extraction/style-1/:
|
||||
1. design-tokens.json (production-ready design tokens)
|
||||
2. style-guide.md (design philosophy and usage guide)
|
||||
|
||||
@@ -359,13 +359,13 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE_PATH: ${source_path})
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Cross-reference between file types for better extraction
|
||||
- ✅ Extract all visual token types systematically
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${output_path}/style-extraction/style-1")
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${output_path}/style-extraction/style-1/design-tokens.json
|
||||
- ${output_path}/style-extraction/style-1/style-guide.md
|
||||
- ${base_path}/style-extraction/style-1/design-tokens.json
|
||||
- ${base_path}/style-extraction/style-1/style-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
@@ -380,7 +380,7 @@ Task(ui-design-agent): `
|
||||
[ANIMATION_TOKENS_EXTRACTION]
|
||||
Extract animation/transition tokens from ALL file types
|
||||
|
||||
MODE: animation-extraction | SOURCE_PATH: ${source_path} | OUTPUT_PATH: ${output_path}
|
||||
MODE: animation-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -407,7 +407,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 2 files in ${output_path}/animation-extraction/:
|
||||
Generate 2 files in ${base_path}/animation-extraction/:
|
||||
1. animation-tokens.json (production-ready animation tokens)
|
||||
2. animation-guide.md (animation usage guide)
|
||||
|
||||
@@ -532,13 +532,13 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE_PATH: ${source_path})
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Detect animation framework if used
|
||||
- ✅ Extract all animation-related tokens
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${output_path}/animation-extraction")
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${output_path}/animation-extraction/animation-tokens.json
|
||||
- ${output_path}/animation-extraction/animation-guide.md
|
||||
- ${base_path}/animation-extraction/animation-tokens.json
|
||||
- ${base_path}/animation-extraction/animation-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
@@ -553,7 +553,7 @@ Task(ui-design-agent): `
|
||||
[LAYOUT_PATTERNS_EXTRACTION]
|
||||
Extract layout patterns and component structures from ALL file types
|
||||
|
||||
MODE: layout-extraction | SOURCE_PATH: ${source_path} | OUTPUT_PATH: ${output_path}
|
||||
MODE: layout-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -580,7 +580,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 1 file: ${output_path}/layout-extraction/layout-templates.json
|
||||
Generate 1 file: ${base_path}/layout-extraction/layout-templates.json
|
||||
|
||||
### layout-templates.json Structure:
|
||||
{
|
||||
@@ -677,11 +677,11 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE_PATH: ${source_path})
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Identify naming conventions and layout systems
|
||||
- ✅ Extract component patterns with variants and states
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${output_path}/layout-extraction")
|
||||
- ✅ Use Write() to save: ${output_path}/layout-extraction/layout-templates.json
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
|
||||
- ✅ Use Write() to save: ${base_path}/layout-extraction/layout-templates.json
|
||||
- ✅ Include extraction_metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
@@ -712,11 +712,11 @@ echo "[Phase 1] Parallel agent analysis complete"
|
||||
|
||||
### Generated Files
|
||||
|
||||
**Location**: `${output_path}/`
|
||||
**Location**: `${base_path}/`
|
||||
|
||||
**Directory Structure**:
|
||||
```
|
||||
${output_path}/
|
||||
${base_path}/
|
||||
├── style-extraction/
|
||||
│ └── style-1/
|
||||
│ ├── design-tokens.json # Production-ready design tokens
|
||||
@@ -771,7 +771,7 @@ ${output_path}/
|
||||
|
||||
| Error | Cause | Resolution |
|
||||
|-------|-------|------------|
|
||||
| No files discovered | Glob patterns too restrictive or wrong source-path | Check glob patterns and source-path, verify file locations |
|
||||
| No files discovered | Glob patterns too restrictive or wrong --source path | Check glob patterns and --source parameter, verify file locations |
|
||||
| Agent reports "failed" status | No tokens found in any file | Review file content, check if files contain design tokens |
|
||||
| Empty completeness reports | Files exist but contain no extractable tokens | Manually verify token definitions in source files |
|
||||
| Missing file type | Specific file type not discovered | Use explicit glob flags (--css, --js, --html, --scss) |
|
||||
@@ -781,8 +781,8 @@ ${output_path}/
|
||||
## Best Practices
|
||||
|
||||
1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically
|
||||
2. **Target specific directories for speed**: Use `--source-path` to target source code and `--output-path` for extracted tokens, combined with specific globs for focused analysis
|
||||
3. **Separate source and output**: Always use distinct `--source-path` (where source code lives) and `--output-path` (where design tokens are generated) to avoid polluting source code directory
|
||||
2. **Target specific directories for speed**: Use `--source` to specify source code location and `--base-path` for extracted tokens output, combined with specific globs for focused analysis
|
||||
3. **Separate source and output**: When analyzing external codebases, use `--source` to point to source code and `--base-path` for design tokens output directory (default: --source uses --base-path if not specified)
|
||||
4. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
5. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
6. **Verify file discovery**: Check `${output_path}/.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: layout-extract
|
||||
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
# Layout Extraction Command
|
||||
@@ -66,7 +66,7 @@ ELSE:
|
||||
device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive
|
||||
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" | head -1)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
@@ -260,11 +260,23 @@ bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred layout concept(s) for each target before generating detailed templates
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
|
||||
# Interactive mode enabled
|
||||
REPORT: "🎯 Interactive mode: User selection required for {targets.length} target(s)"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
@@ -354,6 +366,9 @@ FOR each target:
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user-selections directory
|
||||
bash(mkdir -p {base_path}/.intermediates/user-selections)
|
||||
|
||||
# Calculate total selections across all targets
|
||||
total_selections = sum([len(selections[t].selected_indices) for t in targets])
|
||||
|
||||
@@ -365,14 +380,14 @@ selection_data = {
|
||||
"session_id": "{session_id}",
|
||||
"total_selections": total_selections
|
||||
},
|
||||
"selections": selections // {target: {selected_indices: [...], concept_names: [...]}}
|
||||
"selected_variants": selections // {target: {selected_indices: [...], concept_names: [...]}}
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
# Write to standardized selection file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/layout-extract-selection.json)
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/layout-analysis/user-selection.json && echo "saved")
|
||||
bash(test -f {base_path}/.intermediates/user-selections/layout-extract-selection.json && echo "saved")
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
@@ -395,11 +410,27 @@ Proceeding to generate {total_selections} detailed layout template(s)...
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `Total_Selected_Templates` in **parallel**
|
||||
|
||||
### Step 1: Load User Selections and Build Task List
|
||||
### Step 1: Load User Selections or Default to All
|
||||
```bash
|
||||
# Read user selections
|
||||
selection = Read({base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
selections_per_target = selection.selections
|
||||
# Check if user selection file exists (interactive mode)
|
||||
IF exists({base_path}/.intermediates/user-selections/layout-extract-selection.json):
|
||||
# Interactive mode: Use user-selected variants
|
||||
selection = Read({base_path}/.intermediates/user-selections/layout-extract-selection.json)
|
||||
selections_per_target = selection.selected_variants
|
||||
|
||||
# Calculate total selections
|
||||
total_selections = selection.metadata.total_selections
|
||||
ELSE:
|
||||
# Non-interactive mode: Generate ALL variants for ALL targets (default behavior)
|
||||
selections_per_target = {}
|
||||
total_selections = 0
|
||||
|
||||
FOR each target in targets:
|
||||
selections_per_target[target] = {
|
||||
"selected_indices": [1, 2, ..., variants_count], # All indices
|
||||
"concept_names": [] # Will be filled from options
|
||||
}
|
||||
total_selections += variants_count
|
||||
|
||||
# Read concept details
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
@@ -46,7 +46,7 @@ variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" | head -1)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
@@ -204,11 +204,23 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# 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"
|
||||
|
||||
REPORT: "🎯 Interactive mode enabled: User selection required"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
@@ -290,6 +302,9 @@ REPORT: "✅ Selected {selected_indices.length} design direction(s)"
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user-selections directory
|
||||
bash(mkdir -p {base_path}/.intermediates/user-selections)
|
||||
|
||||
# Create user selection JSON
|
||||
selection_data = {
|
||||
"metadata": {
|
||||
@@ -298,17 +313,17 @@ selection_data = {
|
||||
"session_id": "{session_id}",
|
||||
"selection_count": selected_indices.length
|
||||
},
|
||||
"selected_indices": selected_indices, // Array of selected indices
|
||||
"selected_variants": selected_indices, // Array of selected indices (e.g., [1, 3])
|
||||
"refinements": {
|
||||
"enabled": false
|
||||
}
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
# Write to standardized selection file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/style-extract-selection.json)
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/style-analysis/user-selection.json && echo "saved")
|
||||
bash(test -f {base_path}/.intermediates/user-selections/style-extract-selection.json && echo "saved")
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
@@ -329,11 +344,20 @@ Proceeding to generate {selected_indices.length} complete design system(s)...
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for selected variant(s)
|
||||
|
||||
### Step 1: Load User Selection
|
||||
### Step 1: Load User Selection or Default to All
|
||||
```bash
|
||||
# Read user selection
|
||||
selection = Read({base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
selected_indices = selection.selected_indices # Array of selected indices
|
||||
# Check if user selection file exists (interactive mode)
|
||||
IF exists({base_path}/.intermediates/user-selections/style-extract-selection.json):
|
||||
# Interactive mode: Use user-selected variants
|
||||
selection = Read({base_path}/.intermediates/user-selections/style-extract-selection.json)
|
||||
selected_indices = selection.selected_variants # Array of selected indices (e.g., [1, 3])
|
||||
|
||||
REPORT: "🎯 Interactive mode: Using {selected_indices.length} user-selected variant(s)"
|
||||
ELSE:
|
||||
# Non-interactive mode: Generate ALL variants (default behavior)
|
||||
selected_indices = [1, 2, ..., variants_count] # All indices from 1 to variants_count
|
||||
|
||||
REPORT: "ℹ️ Non-interactive mode: Generating all {variants_count} variant(s)"
|
||||
|
||||
# Read the selected direction details from options
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
|
||||
Reference in New Issue
Block a user