mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
refactor(ui-design): unify ID architecture with design-id parameter
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 <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -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 <path>] [--session <id>] [--urls "<list>"] [--focus "<types>"] [--interactive]"
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--urls "<list>"] [--focus "<types>"] [--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)
|
||||
|
||||
@@ -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 <id>] [--session <id>]
|
||||
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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: explore-layers
|
||||
description: Interactive deep UI capture with depth-controlled layer exploration using MCP puppeteer
|
||||
argument-hint: --url <url> --depth <1-5> [--session id] [--base-path path]
|
||||
argument-hint: --url <url> --depth <1-5> [--design-id <id>] [--session <id>]
|
||||
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)
|
||||
```
|
||||
|
||||
@@ -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 <path>] [--session <id>]
|
||||
argument-hint: [--design-id <id>] [--session <id>]
|
||||
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)
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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 <path>] [--source <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--source <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"]"
|
||||
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 <path> Output directory for extracted design tokens (default: current directory)
|
||||
--source <path> Source code directory to analyze (default: base-path)
|
||||
--design-id <id> Design run ID to import into (must exist)
|
||||
--session <id> Session ID (uses latest design run in session)
|
||||
--source <path> Source code directory to analyze (required)
|
||||
--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")
|
||||
--html "<glob>" HTML file glob pattern (e.g., "pages/*.html")
|
||||
--style-files "<glob>" Universal style file glob (applies to CSS/SCSS/JS)
|
||||
--session <id> 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"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
@@ -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
|
||||
|
||||
@@ -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 <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]
|
||||
argument-hint: [--design-id <id>] [--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(*)
|
||||
---
|
||||
|
||||
@@ -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
|
||||
|
||||
174
.claude/commands/workflow/ui-design/list.md
Normal file
174
.claude/commands/workflow/ui-design/list.md
Normal file
@@ -0,0 +1,174 @@
|
||||
---
|
||||
name: list
|
||||
description: List all available design runs with metadata (session, created time, prototype count)
|
||||
argument-hint: [--session <id>]
|
||||
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 <id>' to create a design run"
|
||||
fi
|
||||
else
|
||||
echo "Total: $found_count design run(s)"
|
||||
echo ""
|
||||
echo "💡 USE: /workflow:ui-design:generate --design-id \"<id>\""
|
||||
echo " OR: /workflow:ui-design:generate --session \"<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 <id>\\' to create a design run'
|
||||
fi
|
||||
else
|
||||
echo \"Total: \$found_count design run(s)\"
|
||||
echo ''
|
||||
echo '💡 USE: /workflow:ui-design:generate --design-id \"<id>\"'
|
||||
echo ' OR: /workflow:ui-design:generate --session \"<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 "<id>"
|
||||
OR: /workflow:ui-design:generate --session "<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 "<id>"
|
||||
OR: /workflow:ui-design:generate --session "<session>"
|
||||
```
|
||||
@@ -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 <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
|
||||
argument-hint: "[--design-id <id>] [--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(*)
|
||||
---
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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] "<task description>"
|
||||
|
||||
**@ 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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user