From 22b2cecd1fb00d293c8025e841aab2aac1430c53 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Sun, 9 Nov 2025 21:14:54 +0800 Subject: [PATCH] refactor(ui-design): unify ID architecture with design-id parameter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace --base-path with --design-id/--session across all UI design commands to eliminate ambiguity and improve consistency. Key changes: - New command: list.md for viewing available design runs - Unified ID format: design_id = directory_name = "design-run-YYYYMMDD-RANDOM" - Consistent path resolution: --design-id > --session > auto-detect/create - Updated 11 commands: explore-auto, imitate-auto, capture, style/layout/animation-extract, generate, update, explore-layers, import-from-code - Enhanced error handling with /workflow:ui-design:list hints - Fixed import race condition with cleanup logic in explore-auto Verified by Gemini: 5.0/5.0 consistency score 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../workflow/ui-design/animation-extract.md | 26 ++- .../commands/workflow/ui-design/capture.md | 35 +++- .../workflow/ui-design/explore-auto.md | 31 +++- .../workflow/ui-design/explore-layers.md | 32 +++- .../commands/workflow/ui-design/generate.md | 27 ++- .../workflow/ui-design/imitate-auto.md | 22 +-- .../workflow/ui-design/import-from-code.md | 64 +++++-- .../workflow/ui-design/layout-extract.md | 26 ++- .claude/commands/workflow/ui-design/list.md | 174 ++++++++++++++++++ .../workflow/ui-design/style-extract.md | 26 ++- .claude/commands/workflow/ui-design/update.md | 58 +++--- 11 files changed, 417 insertions(+), 104 deletions(-) create mode 100644 .claude/commands/workflow/ui-design/list.md diff --git a/.claude/commands/workflow/ui-design/animation-extract.md b/.claude/commands/workflow/ui-design/animation-extract.md index 21811e02..36cc4bf2 100644 --- a/.claude/commands/workflow/ui-design/animation-extract.md +++ b/.claude/commands/workflow/ui-design/animation-extract.md @@ -1,7 +1,7 @@ --- name: animation-extract description: Extract animation and transition patterns from URLs, CSS, or interactive questioning for design system documentation -argument-hint: "[--base-path ] [--session ] [--urls ""] [--focus ""] [--interactive]" +argument-hint: "[--design-id ] [--session ] [--urls ""] [--focus ""] [--interactive]" allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*) --- @@ -54,11 +54,27 @@ ELSE: # Check interactive mode flag interactive_mode = --interactive OR false -# Determine base path (auto-detect and convert to absolute) -relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +# Determine base path with priority: --design-id > --session > auto-detect +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) +elif [ -n "$SESSION_ID" ]; then + # Latest in session + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +else + # Latest globally + relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +fi + +# Validate and convert to absolute path +if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then + echo "❌ ERROR: Design run not found" + echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 +fi + 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 +bash(echo "✓ Base path: $base_path") ``` ### Step 2: Extract Computed Animations (URL Mode - Auto-Trigger) diff --git a/.claude/commands/workflow/ui-design/capture.md b/.claude/commands/workflow/ui-design/capture.md index 9ca4d5dd..2dc6f4db 100644 --- a/.claude/commands/workflow/ui-design/capture.md +++ b/.claude/commands/workflow/ui-design/capture.md @@ -1,7 +1,7 @@ --- name: capture description: Batch screenshot capture for UI design workflows using MCP puppeteer or local fallback with URL mapping -argument-hint: --url-map "target:url,..." [--base-path path] [--session id] +argument-hint: --url-map "target:url,..." [--design-id ] [--session ] allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), ListMcpResourcesTool(*), mcp__chrome-devtools__*, mcp__playwright__* --- @@ -15,21 +15,38 @@ Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes ## Phase 1: Initialize & Parse -### Step 1: Determine Base Path +### Step 1: Determine Base Path & Generate Design ID ```bash -# Priority: --base-path > session > standalone -relative_path=$(if [ -n "$BASE_PATH" ]; then - echo "$BASE_PATH" +# Priority: --design-id > session (latest) > standalone (create new) +if [ -n "$DESIGN_ID" ]; then + # Use provided design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) + if [ -z "$relative_path" ]; then + echo "ERROR: Design run not found: $DESIGN_ID" + echo "HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 + fi elif [ -n "$SESSION_ID" ]; then - 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" + # Find latest in session or create new + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) + if [ -z "$relative_path" ]; then + design_id="design-run-$(date +%Y%m%d)-$RANDOM" + relative_path=".workflow/WFS-$SESSION_ID/${design_id}" + fi else - echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM" -fi) + # Create new standalone design run + design_id="design-run-$(date +%Y%m%d)-$RANDOM" + relative_path=".workflow/.design/${design_id}" +fi # Create directory and convert to absolute path bash(mkdir -p "$relative_path"/screenshots) base_path=$(cd "$relative_path" && pwd) + +# Extract and display design_id +design_id=$(basename "$base_path") +echo "✓ Design ID: $design_id" +echo "✓ Base path: $base_path" ``` ### Step 2: Parse URL Map diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index af96fc80..cda61e7f 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -206,8 +206,8 @@ STORE: device_type, device_source ### Phase 0b: Run Initialization & Directory Setup ```bash -run_id = "run-$(date +%Y%m%d)-$RANDOM" -relative_base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/design-${run_id}" +design_id = "design-run-$(date +%Y%m%d)-$RANDOM" +relative_base_path = --session ? ".workflow/WFS-{session}/${design_id}" : ".workflow/.design/${design_id}" # Create directory and convert to absolute path Bash(mkdir -p "${relative_base_path}/style-extraction") @@ -215,7 +215,7 @@ Bash(mkdir -p "${relative_base_path}/prototypes") base_path=$(cd "${relative_base_path}" && pwd) Write({base_path}/.run-metadata.json): { - "run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...", + "design_id": "${design_id}", "session_id": "${session_id}", "timestamp": "...", "workflow": "ui-design:auto", "architecture": "style-centric-batch-generation", "parameters": { "style_variants": ${style_variants}, "layout_variants": ${layout_variants}, @@ -313,8 +313,21 @@ 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}\" --source \"{code_base_path}\"" - SlashCommand(command) + command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" --source \"{code_base_path}\"" + + TRY: + SlashCommand(command) + CATCH error: + WARN: "⚠️ Code import failed: {error}" + WARN: "Cleaning up incomplete import directories" + Bash(rm -rf "{base_path}/style-extraction" "{base_path}/animation-extraction" "{base_path}/layout-extraction" 2>/dev/null) + + IF design_source == "code_only": + REPORT: "Cannot proceed with code-only mode after import failure" + EXIT 1 + ELSE: # hybrid mode + WARN: "Continuing with visual-only mode" + design_source = "visual_only" # Check file existence and assess completeness style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json") @@ -390,7 +403,7 @@ IF design_source IN ["code_only", "hybrid"]: ```bash IF design_source == "visual_only" OR needs_visual_supplement: REPORT: "🎨 Phase 1: Style Extraction (variants: {style_variants})" - command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " + + command = "/workflow:ui-design:style-extract --design-id \"{design_id}\" " + (--images ? "--images \"{images}\" " : "") + (--prompt ? "--prompt \"{prompt}\" " : "") + "--variants {style_variants} --interactive" @@ -403,7 +416,7 @@ ELSE: ```bash IF design_source == "visual_only" OR NOT animation_complete: REPORT: "🚀 Phase 2.3: Animation Extraction" - command = "/workflow:ui-design:animation-extract --base-path \"{base_path}\" --mode interactive" + command = "/workflow:ui-design:animation-extract --design-id \"{design_id}\" --mode interactive" SlashCommand(command) ELSE: REPORT: "✅ Phase 2.3: Animation (Using Code Import)" @@ -419,7 +432,7 @@ targets_string = ",".join(inferred_target_list) IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_complete): REPORT: "🚀 Phase 2.5: Layout Extraction ({targets_string}, variants: {layout_variants}, device: {device_type})" - command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " + + command = "/workflow:ui-design:layout-extract --design-id \"{design_id}\" " + (--images ? "--images \"{images}\" " : "") + (--prompt ? "--prompt \"{prompt}\" " : "") + "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive" @@ -430,7 +443,7 @@ ELSE: ### Phase 3: UI Assembly ```bash -command = "/workflow:ui-design:generate --base-path \"{base_path}\"" +command = "/workflow:ui-design:generate --design-id \"{design_id}\"" total = style_variants × layout_variants × len(inferred_target_list) diff --git a/.claude/commands/workflow/ui-design/explore-layers.md b/.claude/commands/workflow/ui-design/explore-layers.md index 4d71c632..ebf78e0d 100644 --- a/.claude/commands/workflow/ui-design/explore-layers.md +++ b/.claude/commands/workflow/ui-design/explore-layers.md @@ -1,7 +1,7 @@ --- name: explore-layers description: Interactive deep UI capture with depth-controlled layer exploration using MCP puppeteer -argument-hint: --url --depth <1-5> [--session id] [--base-path path] +argument-hint: --url --depth <1-5> [--design-id ] [--session ] allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), mcp__chrome-devtools__* --- @@ -38,19 +38,37 @@ IF depth NOT IN [1, 2, 3, 4, 5]: ### Step 2: Determine Base Path ```bash -relative_path=$(if [ -n "$BASE_PATH" ]; then - echo "$BASE_PATH" +# Priority: --design-id > --session > create new +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) + if [ -z "$relative_path" ]; then + echo "ERROR: Design run not found: $DESIGN_ID" + echo "HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 + fi elif [ -n "$SESSION_ID" ]; then - 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" + # Find latest in session or create new + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) + if [ -z "$relative_path" ]; then + design_id="design-run-$(date +%Y%m%d)-$RANDOM" + relative_path=".workflow/WFS-$SESSION_ID/${design_id}" + fi else - echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM" -fi) + # Create new standalone design run + design_id="design-run-$(date +%Y%m%d)-$RANDOM" + relative_path=".workflow/.design/${design_id}" +fi # Create directory structure and convert to absolute path bash(mkdir -p "$relative_path") base_path=$(cd "$relative_path" && pwd) +# Extract and display design_id +design_id=$(basename "$base_path") +echo "✓ Design ID: $design_id" +echo "✓ Base path: $base_path" + # Create depth directories bash(for i in $(seq 1 $depth); do mkdir -p "$base_path"/screenshots/depth-$i; done) ``` diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index 218eaaab..f47d8f5f 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -1,7 +1,7 @@ --- name: generate description: Assemble UI prototypes by combining layout templates with design tokens (default animation support), pure assembler without new content generation -argument-hint: [--base-path ] [--session ] +argument-hint: [--design-id ] [--session ] allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*) --- @@ -25,14 +25,27 @@ 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 - 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) +# Determine base path with priority: --design-id > --session > auto-detect +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) +elif [ -n "$SESSION_ID" ]; then + # Latest in session + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +else + # Latest globally + relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +fi + +# Validate and convert to absolute path +if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then + echo "❌ ERROR: Design run not found" + echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 +fi -# Convert to absolute path base_path=$(cd "$relative_path" && pwd) - -# Verify absolute path -bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found") +bash(echo "✓ Base path: $base_path") # Get style count bash(ls "$base_path"/style-extraction/style-* -d | wc -l) diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index c48eeec5..ef0dede4 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -99,17 +99,17 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*) ### Phase 0: Initialization and Target Parsing ```bash -# Generate run ID -run_id = "run-$(date +%Y%m%d)-$RANDOM" +# Generate design ID (ID = directory name) +design_id = "design-run-$(date +%Y%m%d)-$RANDOM" # Determine base path and session mode IF --session: session_id = {provided_session} - relative_base_path = ".workflow/WFS-{session_id}/design-{run_id}" + relative_base_path = ".workflow/WFS-{session_id}/{design_id}" session_mode = "integrated" ELSE: session_id = null - relative_base_path = ".workflow/.design/design-{run_id}" + relative_base_path = ".workflow/.design/{design_id}" session_mode = "standalone" # Create base directory and convert to absolute path @@ -225,7 +225,7 @@ IF design_source == "hybrid": REPORT: " → Source: {code_base_path}" REPORT: " → Mode: Hybrid (Web + Code)" - command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " + + command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" " + "--source \"{code_base_path}\"" TRY: @@ -326,7 +326,7 @@ REPORT: "━━━━━━━━━━━━━━━━━━━━━━━ IF capture_mode == "batch": # Mode A: Batch Multi-URL Capture url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()]) - capture_command = f"/workflow:ui-design:capture --base-path \"{base_path}\" --url-map \"{url_map_command_string}\"" + capture_command = f"/workflow:ui-design:capture --design-id \"{design_id}\" --url-map \"{url_map_command_string}\"" TRY: SlashCommand(capture_command) @@ -359,7 +359,7 @@ IF capture_mode == "batch": ELSE: # capture_mode == "deep" # Mode B: Deep Interactive Layer Exploration primary_url = url_map[primary_target] - explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --base-path \"{base_path}\"" + explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --design-id \"{design_id}\"" TRY: SlashCommand(explore_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 --interactive" + extract_command = f"/workflow:ui-design:style-extract --design-id \"{design_id}\" --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") @@ -424,7 +424,7 @@ IF skip_animation: ELSE: REPORT: "🚀 Phase 2.3: Animation Extraction" url_map_for_animation = ",".join([f"{target}:{url}" for target, url in url_map.items()]) - animation_extract_command = f"/workflow:ui-design:animation-extract --base-path \"{base_path}\" --urls \"{url_map_for_animation}\" --mode auto" + animation_extract_command = f"/workflow:ui-design:animation-extract --design-id \"{design_id}\" --urls \"{url_map_for_animation}\" --mode auto" SlashCommand(animation_extract_command) ``` @@ -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 --interactive" + layout_extract_command = f"/workflow:ui-design:layout-extract --design-id \"{design_id}\" --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") @@ -449,7 +449,7 @@ TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI") ```bash REPORT: "🚀 Phase 3: UI Assembly" -generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --style-variants 1 --layout-variants 1" +generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\" --style-variants 1 --layout-variants 1" SlashCommand(generate_command) TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion") diff --git a/.claude/commands/workflow/ui-design/import-from-code.md b/.claude/commands/workflow/ui-design/import-from-code.md index eb4d2638..4260dec8 100644 --- a/.claude/commands/workflow/ui-design/import-from-code.md +++ b/.claude/commands/workflow/ui-design/import-from-code.md @@ -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: "[--base-path ] [--source ] [--css \"\"] [--js \"\"] [--scss \"\"] [--html \"\"] [--style-files \"\"] [--session ]" +argument-hint: "[--design-id ] [--session ] [--source ] [--css \"\"] [--js \"\"] [--scss \"\"] [--html \"\"] [--style-files \"\"]" allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite auto-continue: true --- @@ -34,33 +34,36 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using /workflow:ui-design:import-from-code [FLAGS] # Flags ---base-path Output directory for extracted design tokens (default: current directory) ---source Source code directory to analyze (default: base-path) +--design-id Design run ID to import into (must exist) +--session Session ID (uses latest design run in session) +--source Source code directory to analyze (required) --css "" CSS file glob pattern (e.g., "theme/*.css") --scss "" SCSS file glob pattern (e.g., "styles/*.scss") --js "" JavaScript file glob pattern (e.g., "theme/*.js") --html "" HTML file glob pattern (e.g., "pages/*.html") --style-files "" Universal style file glob (applies to CSS/SCSS/JS) ---session Session identifier for workflow tracking ``` ### Usage Examples ```bash -# Basic usage - auto-discover all files -/workflow:ui-design:import-from-code --base-path ./design-system --source ./src +# Import into specific design run +/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src + +# Import into session's latest design run +/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src # Target specific directories -/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "theme/*.css" --js "theme/*.js" +/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --css "theme/*.css" --js "theme/*.js" -# Tailwind config only (output to current directory) -/workflow:ui-design:import-from-code --source ./ --js "tailwind.config.js" +# Tailwind config only +/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./ --js "tailwind.config.js" # CSS framework import -/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "styles/**/*.scss" --html "components/**/*.html" +/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --css "styles/**/*.scss" --html "components/**/*.html" # Universal style files -/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --style-files "**/theme.*" +/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src --style-files "**/theme.*" ``` --- @@ -74,13 +77,40 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using **Operations**: ```bash -# 1. Initialize directories -base_path="${base_path:-.}" -source="${source:-$base_path}" +# 1. Determine base path with priority: --design-id > --session > error +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) + if [ -z "$relative_path" ]; then + echo "ERROR: Design run not found: $DESIGN_ID" + echo "HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 + fi +elif [ -n "$SESSION_ID" ]; then + # Latest in session + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) + if [ -z "$relative_path" ]; then + echo "ERROR: No design run found in session: $SESSION_ID" + echo "HINT: Create a design run first or provide --design-id" + exit 1 + fi +else + echo "ERROR: Must provide --design-id or --session parameter" + exit 1 +fi + +base_path=$(cd "$relative_path" && pwd) +design_id=$(basename "$base_path") + +# 2. Initialize directories +source="${source:-.}" intermediates_dir="${base_path}/.intermediates/import-analysis" mkdir -p "$intermediates_dir" -echo "[Phase 0] File Discovery Started (source: $source, output: $base_path)" +echo "[Phase 0] File Discovery Started" +echo " Design ID: $design_id" +echo " Source: $source" +echo " Output: $base_path" ``` @@ -781,8 +811,8 @@ ${base_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` 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) +2. **Target specific directories for speed**: Use `--source` to specify source code location and `--design-id` or `--session` to target design run, combined with specific globs for focused analysis +3. **Specify target design run**: Use `--design-id` for existing design run or `--session` to use session's latest design run (one of these is required) 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 `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data diff --git a/.claude/commands/workflow/ui-design/layout-extract.md b/.claude/commands/workflow/ui-design/layout-extract.md index 2198f94c..8aab34e0 100644 --- a/.claude/commands/workflow/ui-design/layout-extract.md +++ b/.claude/commands/workflow/ui-design/layout-extract.md @@ -1,7 +1,7 @@ --- name: layout-extract description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis -argument-hint: [--base-path ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--targets ""] [--variants ] [--device-type ] [--interactive] +argument-hint: [--design-id ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--targets ""] [--variants ] [--device-type ] [--interactive] allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*) --- @@ -65,11 +65,27 @@ ELSE: # Resolve device type 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-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +# Determine base path with priority: --design-id > --session > auto-detect +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) +elif [ -n "$SESSION_ID" ]; then + # Latest in session + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +else + # Latest globally + relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +fi + +# Validate and convert to absolute path +if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then + echo "❌ ERROR: Design run not found" + echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 +fi + 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 +bash(echo "✓ Base path: $base_path") ``` ### Step 2: Load Inputs & Create Directories diff --git a/.claude/commands/workflow/ui-design/list.md b/.claude/commands/workflow/ui-design/list.md new file mode 100644 index 00000000..11ccafe0 --- /dev/null +++ b/.claude/commands/workflow/ui-design/list.md @@ -0,0 +1,174 @@ +--- +name: list +description: List all available design runs with metadata (session, created time, prototype count) +argument-hint: [--session ] +allowed-tools: Bash(*), Read(*) +--- + +# List Design Runs (/workflow:ui-design:list) + +## Overview +List all available UI design runs across sessions or within a specific session. Displays design IDs with metadata for easy reference. + +**Output**: Formatted list with design-id, session, created time, and prototype count + +## Implementation + +### Step 1: Determine Search Scope +```bash +# Priority: --session > all sessions +search_path=$(if [ -n "$SESSION_ID" ]; then + echo ".workflow/WFS-$SESSION_ID" +else + echo ".workflow" +fi) +``` + +### Step 2: Find and Display Design Runs +```bash +echo "Available design runs:" +echo "" + +# Find all design-run directories +found_count=0 +while IFS= read -r line; do + timestamp=$(echo "$line" | cut -d' ' -f1) + path=$(echo "$line" | cut -d' ' -f2-) + + # Extract design_id from path + design_id=$(basename "$path") + + # Extract session from path + session_id=$(echo "$path" | grep -oP 'WFS-\K[^/]+' || echo "standalone") + + # Format created date + created_at=$(date -d "@${timestamp%.*}" '+%Y-%m-%d %H:%M' 2>/dev/null || echo "unknown") + + # Count prototypes + prototype_count=$(find "$path/prototypes" -name "*.html" 2>/dev/null | wc -l) + + # Display formatted output + echo " - $design_id" + echo " Session: $session_id" + echo " Created: $created_at" + echo " Prototypes: $prototype_count" + echo "" + + found_count=$((found_count + 1)) +done < <(find "$search_path" -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr) + +# Summary +if [ $found_count -eq 0 ]; then + echo " No design runs found." + echo "" + if [ -n "$SESSION_ID" ]; then + echo "💡 HINT: Try running '/workflow:ui-design:explore-auto' to create a design run" + else + echo "💡 HINT: Try running '/workflow:ui-design:explore-auto --session ' to create a design run" + fi +else + echo "Total: $found_count design run(s)" + echo "" + echo "💡 USE: /workflow:ui-design:generate --design-id \"\"" + echo " OR: /workflow:ui-design:generate --session \"\"" +fi +``` + +### Step 3: Execute List Command +```bash +Bash( + description: "List all UI design runs with metadata", + command: " + search_path=\"${search_path}\" + SESSION_ID=\"${SESSION_ID:-}\" + + echo 'Available design runs:' + echo '' + + found_count=0 + while IFS= read -r line; do + timestamp=\$(echo \"\$line\" | cut -d' ' -f1) + path=\$(echo \"\$line\" | cut -d' ' -f2-) + + design_id=\$(basename \"\$path\") + session_id=\$(echo \"\$path\" | grep -oP 'WFS-\\K[^/]+' || echo 'standalone') + created_at=\$(date -d \"@\${timestamp%.*}\" '+%Y-%m-%d %H:%M' 2>/dev/null || echo 'unknown') + prototype_count=\$(find \"\$path/prototypes\" -name '*.html' 2>/dev/null | wc -l) + + echo \" - \$design_id\" + echo \" Session: \$session_id\" + echo \" Created: \$created_at\" + echo \" Prototypes: \$prototype_count\" + echo '' + + found_count=\$((found_count + 1)) + done < <(find \"\$search_path\" -name 'design-run-*' -type d -printf '%T@ %p\\n' 2>/dev/null | sort -nr) + + if [ \$found_count -eq 0 ]; then + echo ' No design runs found.' + echo '' + if [ -n \"\$SESSION_ID\" ]; then + echo '💡 HINT: Try running \\'/workflow:ui-design:explore-auto\\' to create a design run' + else + echo '💡 HINT: Try running \\'/workflow:ui-design:explore-auto --session \\' to create a design run' + fi + else + echo \"Total: \$found_count design run(s)\" + echo '' + echo '💡 USE: /workflow:ui-design:generate --design-id \"\"' + echo ' OR: /workflow:ui-design:generate --session \"\"' + fi + " +) +``` + +## Example Output + +### With Session Filter +``` +$ /workflow:ui-design:list --session ui-redesign + +Available design runs: + + - design-run-20250109-143052 + Session: ui-redesign + Created: 2025-01-09 14:30 + Prototypes: 12 + + - design-run-20250109-101534 + Session: ui-redesign + Created: 2025-01-09 10:15 + Prototypes: 6 + +Total: 2 design run(s) + +💡 USE: /workflow:ui-design:generate --design-id "" + OR: /workflow:ui-design:generate --session "" +``` + +### All Sessions +``` +$ /workflow:ui-design:list + +Available design runs: + + - design-run-20250109-143052 + Session: ui-redesign + Created: 2025-01-09 14:30 + Prototypes: 12 + + - design-run-20250108-092314 + Session: landing-page + Created: 2025-01-08 09:23 + Prototypes: 3 + + - design-run-20250107-155623 + Session: standalone + Created: 2025-01-07 15:56 + Prototypes: 8 + +Total: 3 design run(s) + +💡 USE: /workflow:ui-design:generate --design-id "" + OR: /workflow:ui-design:generate --session "" +``` diff --git a/.claude/commands/workflow/ui-design/style-extract.md b/.claude/commands/workflow/ui-design/style-extract.md index 0af574d4..87759308 100644 --- a/.claude/commands/workflow/ui-design/style-extract.md +++ b/.claude/commands/workflow/ui-design/style-extract.md @@ -1,7 +1,7 @@ --- name: style-extract description: Extract design style from reference images or text prompts using Claude analysis with variant generation -argument-hint: "[--base-path ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--variants ] [--interactive]" +argument-hint: "[--design-id ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--variants ] [--interactive]" allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*) --- @@ -45,11 +45,27 @@ ELSE: 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-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +# Determine base path with priority: --design-id > --session > auto-detect +if [ -n "$DESIGN_ID" ]; then + # Exact match by design ID + relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit) +elif [ -n "$SESSION_ID" ]; then + # Latest in session + relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +else + # Latest globally + relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2) +fi + +# Validate and convert to absolute path +if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then + echo "❌ ERROR: Design run not found" + echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs" + exit 1 +fi + 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 +bash(echo "✓ Base path: $base_path") ``` ### Step 2: Extract Computed Styles (URL Mode - Auto-Trigger) diff --git a/.claude/commands/workflow/ui-design/update.md b/.claude/commands/workflow/ui-design/update.md index 9b4e35a0..e654d98f 100644 --- a/.claude/commands/workflow/ui-design/update.md +++ b/.claude/commands/workflow/ui-design/update.md @@ -89,8 +89,8 @@ Update `.brainstorming/role analysis documents` with design system references. ## UI/UX Guidelines ### Design System Reference -**Finalized Design Tokens**: @../design-{run_id}/{design_tokens_path} -**Style Guide**: @../design-{run_id}/{style_guide_path} +**Finalized Design Tokens**: @../{design_id}/{design_tokens_path} +**Style Guide**: @../{design_id}/{style_guide_path} **Design System Mode**: {design_system_mode} ### Implementation Requirements @@ -101,12 +101,12 @@ Update `.brainstorming/role analysis documents` with design system references. ### Reference Prototypes {FOR each selected_prototype: -- **{page_name}**: @../design-{run_id}/prototypes/{prototype}.html | Layout: {layout_strategy from notes} +- **{page_name}**: @../{design_id}/prototypes/{prototype}.html | Layout: {layout_strategy from notes} } ### Design System Assets ```json -{"design_tokens": "design-{run_id}/{design_tokens_path}", "style_guide": "design-{run_id}/{style_guide_path}", "design_system_mode": "{design_system_mode}", "prototypes": [{FOR each: "design-{run_id}/prototypes/{prototype}.html"}]} +{"design_tokens": "{design_id}/{design_tokens_path}", "style_guide": "{design_id}/{style_guide_path}", "design_system_mode": "{design_system_mode}", "prototypes": [{FOR each: "{design_id}/prototypes/{prototype}.html"}]} ``` ``` @@ -145,9 +145,9 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc ```markdown ## Design System Implementation Reference -**Design Tokens**: @../../design-{run_id}/{design_tokens_path} -**Style Guide**: @../../design-{run_id}/{style_guide_path} -**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html} +**Design Tokens**: @../../{design_id}/{design_tokens_path} +**Style Guide**: @../../{design_id}/{style_guide_path} +**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html} *Reference added by /workflow:ui-design:update* ``` @@ -156,8 +156,8 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc ```markdown ## Animation & Interaction Reference -**Animations**: @../../design-{run_id}/animation-extraction/animation-tokens.json -**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html} +**Animations**: @../../{design_id}/animation-extraction/animation-tokens.json +**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html} *Reference added by /workflow:ui-design:update* ``` @@ -166,7 +166,7 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc ```markdown ## Layout Structure Reference -**Layout Templates**: @../../design-{run_id}/layout-extraction/layout-templates.json +**Layout Templates**: @../../{design_id}/layout-extraction/layout-templates.json *Reference added by /workflow:ui-design:update* ``` @@ -175,7 +175,7 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc ```markdown ## Prototype Validation Reference -**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html} +**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html} *Reference added by /workflow:ui-design:update* ``` @@ -197,8 +197,8 @@ Create or update `.brainstorming/ui-designer/design-system-reference.md`: ## Design System Integration This style guide references the finalized design system from the design refinement phase. -**Design Tokens**: @../../design-{run_id}/{design_tokens_path} -**Style Guide**: @../../design-{run_id}/{style_guide_path} +**Design Tokens**: @../../{design_id}/{design_tokens_path} +**Style Guide**: @../../{design_id}/{style_guide_path} **Design System Mode**: {design_system_mode} ## Implementation Guidelines @@ -209,13 +209,13 @@ This style guide references the finalized design system from the design refineme ## Reference Prototypes {FOR each selected_prototype: -- **{page_name}**: @../../design-{run_id}/prototypes/{prototype}.html +- **{page_name}**: @../../{design_id}/prototypes/{prototype}.html } ## Token System For complete token definitions and usage examples, see: -- Design Tokens: @../../design-{run_id}/{design_tokens_path} -- Style Guide: @../../design-{run_id}/{style_guide_path} +- Design Tokens: @../../{design_id}/{design_tokens_path} +- Style Guide: @../../{design_id}/{style_guide_path} --- *Auto-generated by /workflow:ui-design:update | Last updated: {timestamp}* @@ -271,24 +271,24 @@ Next: /workflow:plan [--agent] "" **@ Reference Format** (role analysis documents): ``` -@../design-{run_id}/style-extraction/style-1/design-tokens.json -@../design-{run_id}/style-extraction/style-1/style-guide.md -@../design-{run_id}/prototypes/{prototype}.html +@../{design_id}/style-extraction/style-1/design-tokens.json +@../{design_id}/style-extraction/style-1/style-guide.md +@../{design_id}/prototypes/{prototype}.html ``` **@ Reference Format** (ui-designer/design-system-reference.md): ``` -@../../design-{run_id}/style-extraction/style-1/design-tokens.json -@../../design-{run_id}/style-extraction/style-1/style-guide.md -@../../design-{run_id}/prototypes/{prototype}.html +@../../{design_id}/style-extraction/style-1/design-tokens.json +@../../{design_id}/style-extraction/style-1/style-guide.md +@../../{design_id}/prototypes/{prototype}.html ``` **@ Reference Format** (role analysis.md files): ``` -@../../design-{run_id}/style-extraction/style-1/design-tokens.json -@../../design-{run_id}/animation-extraction/animation-tokens.json -@../../design-{run_id}/layout-extraction/layout-templates.json -@../../design-{run_id}/prototypes/{prototype}.html +@../../{design_id}/style-extraction/style-1/design-tokens.json +@../../{design_id}/animation-extraction/animation-tokens.json +@../../{design_id}/layout-extraction/layout-templates.json +@../../{design_id}/prototypes/{prototype}.html ``` ## Integration with /workflow:plan @@ -307,9 +307,9 @@ After this update, `/workflow:plan` will discover design assets through: "task_id": "IMPL-001", "context": { "design_system": { - "tokens": "design-{run_id}/style-extraction/style-1/design-tokens.json", - "style_guide": "design-{run_id}/style-extraction/style-1/style-guide.md", - "prototypes": ["design-{run_id}/prototypes/dashboard-variant-1.html"] + "tokens": "{design_id}/style-extraction/style-1/design-tokens.json", + "style_guide": "{design_id}/style-extraction/style-1/style-guide.md", + "prototypes": ["{design_id}/prototypes/dashboard-variant-1.html"] } } }