catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-11 02:33:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/catlog22/Claude-Code-Workflow

Browse Source
This commit is contained in:
catlog22
2025-11-09 13:29:02 +08:00
parent 084f7b7254 c647787b86
commit 6caf5eed49
9 changed files with 195 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
.claude/commands/workflow/ui-design/animation-extract.md
View File

@@ -2,7 +2,7 @@
name: animation-extract name: animation-extract
description: Extract animation and transition patterns from URLs, CSS, or interactive questioning for design system documentation 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>"]" 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 # Animation Extraction Command
@@ -51,7 +51,7 @@ ELSE:
focus_types = ["all"] # Extract all animation types focus_types = ["all"] # Extract all animation types
# Determine base path (auto-detect and convert to absolute) # 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) base_path=$(cd "$relative_path" && pwd)
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found") bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
# OR use --base-path / --session parameters # OR use --base-path / --session parameters
@@ -692,6 +692,32 @@ Task(ui-design-agent): `
**Phase 3 Output**: `animation-tokens.json` + `animation-guide.md` **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 ## Phase 4: Verify Output
### Step 1: Check Files Created ### Step 1: Check Files Created

2
.claude/commands/workflow/ui-design/capture.md
View File

@@ -21,7 +21,7 @@ Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes
relative_path=$(if [ -n "$BASE_PATH" ]; then relative_path=$(if [ -n "$BASE_PATH" ]; then
echo "$BASE_PATH" echo "$BASE_PATH"
elif [ -n "$SESSION_ID" ]; then 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" echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
else else
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM" echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"

18
.claude/commands/workflow/ui-design/explore-auto.md
View File

@@ -1,7 +1,7 @@
--- ---
name: explore-auto name: explore-auto
description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution 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) allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
--- ---
@@ -154,6 +154,11 @@ ELSE:
layout_variants = --layout-variants OR 3 layout_variants = --layout-variants OR 3
VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5 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 ### Phase 0a-2: Device Type Inference
@@ -310,7 +315,7 @@ detect_target_type(target_list):
```bash ```bash
IF design_source IN ["code_only", "hybrid"]: IF design_source IN ["code_only", "hybrid"]:
REPORT: "🔍 Phase 0d: Code Import ({design_source})" 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) SlashCommand(command)
# Check file existence and assess completeness # 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}\" " + command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
(--images ? "--images \"{images}\" " : "") + (--images ? "--images \"{images}\" " : "") +
(--prompt ? "--prompt \"{prompt}\" " : "") + (--prompt ? "--prompt \"{prompt}\" " : "") +
"--variants {style_variants}" "--variants {style_variants}" +
(interactive_mode ? " --interactive" : "")
SlashCommand(command) SlashCommand(command)
ELSE: ELSE:
REPORT: "✅ Phase 1: Style (Using Code Import)" 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}\" " + command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
(--images ? "--images \"{images}\" " : "") + (--images ? "--images \"{images}\" " : "") +
(--prompt ? "--prompt \"{prompt}\" " : "") + (--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) SlashCommand(command)
ELSE: ELSE:
REPORT: "✅ Phase 2.5: Layout (Using Code Import)" REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
@@ -427,8 +434,7 @@ ELSE:
### Phase 3: UI Assembly ### Phase 3: UI Assembly
```bash ```bash
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " + command = "/workflow:ui-design:generate --base-path \"{base_path}\""
"--style-variants {style_variants} --layout-variants {layout_variants}"
total = style_variants × layout_variants × len(inferred_target_list) total = style_variants × layout_variants × len(inferred_target_list)

2
.claude/commands/workflow/ui-design/explore-layers.md
View File

@@ -41,7 +41,7 @@ IF depth NOT IN [1, 2, 3, 4, 5]:
relative_path=$(if [ -n "$BASE_PATH" ]; then relative_path=$(if [ -n "$BASE_PATH" ]; then
echo "$BASE_PATH" echo "$BASE_PATH"
elif [ -n "$SESSION_ID" ]; then 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" echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
else else
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM" echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"

54
.claude/commands/workflow/ui-design/generate.md
View File

@@ -1,7 +1,7 @@
--- ---
name: generate name: generate
description: Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation 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(*) 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. 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 **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) - **Process**: Combine structure (DOM) with style (tokens)
- **Output**: Complete HTML/CSS prototypes - **Output**: Complete HTML/CSS prototypes
- **No Design Logic**: All layout and style decisions already made - **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 ### Step 1: Resolve Base Path & Parse Configuration
```bash ```bash
# Determine working directory (relative path) # Determine working directory (relative path - finds latest)
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)
# Convert to absolute path # Convert to absolute path
base_path=$(cd "$relative_path" && pwd) 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 ### Step 2: Load Layout Templates
```bash ```bash
# Check layout templates exist # Check layout templates exist (multi-file pattern)
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists") bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
# Load layout templates # Get list of all layout files
Read({base_path}/layout-extraction/layout-templates.json) bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null)
# Extract: targets, layout_variants count, device_type, template structures
# 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` **Output**: `base_path`, `style_variants`, `layout_templates[]`, `targets[]`, `device_type`
@@ -99,9 +105,9 @@ Task(ui-design-agent): `
## Inputs (READ ONLY - NO DESIGN DECISIONS) ## Inputs (READ ONLY - NO DESIGN DECISIONS)
1. Layout Template: 1. Layout Template:
Read("{base_path}/layout-extraction/layout-templates.json") Read("{base_path}/layout-extraction/layout-{target}-{layout_id}.json")
Find template where: target={target} AND variant_id="layout-{layout_id}" This file contains the specific layout template for this target and variant.
Extract: dom_structure, css_layout_rules, device_type, source_image_path Extract: dom_structure, css_layout_rules, device_type, source_image_path (from template field)
2. Design Tokens: 2. Design Tokens:
Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json") Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
@@ -229,7 +235,7 @@ TodoWrite({todos: [
Configuration: Configuration:
- Style Variants: {style_variants} - Style Variants: {style_variants}
- Layout Variants: {layout_variants} (from layout-templates.json) - Layout Variants: {layout_variants} (from layout-*.json files)
- Device Type: {device_type} - Device Type: {device_type}
- Targets: {targets} - Targets: {targets}
- Total Prototypes: {S × L × T} - Total Prototypes: {S × L × T}
@@ -248,14 +254,15 @@ Quality:
Generated Files: Generated Files:
{base_path}/prototypes/ {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}.html ({S×L×T} prototypes)
├── {target}-style-{s}-layout-{l}.css ├── {target}-style-{s}-layout-{l}.css
├── compare.html (interactive matrix) ├── compare.html (interactive matrix)
├── index.html (navigation) ├── index.html (navigation)
└── PREVIEW.md (instructions) └── PREVIEW.md (instructions)
Input Files (from layout-extraction/):
├── layout-{target}-{variant}.json (multiple files, one per target-variant combination)
Preview: Preview:
1. Open compare.html (recommended) 1. Open compare.html (recommended)
2. Open index.html 2. Open index.html
@@ -277,8 +284,11 @@ bash(ls {base_path}/style-extraction/style-* -d | wc -l)
### Validation Commands ### Validation Commands
```bash ```bash
# Check layout templates exist # Check layout templates exist (multi-file pattern)
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists") 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 # Check design tokens exist
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid") 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}/ {base_path}/
├── layout-extraction/ ├── layout-extraction/
│ └── layout-templates.json # Input (from layout-extract) │ └── layout-{target}-{variant}.json # Input (multiple files from layout-extract)
├── style-extraction/ ├── style-extraction/
│ └── style-{s}/ │ └── style-{s}/
│ ├── design-tokens.json # Input (from style-extract) │ ├── design-tokens.json # Input (from style-extract)
│ └── style-guide.md │ └── style-guide.md
└── prototypes/ └── prototypes/
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes ├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
@@ -336,7 +346,7 @@ ERROR: Script permission denied
### Recovery Strategies ### Recovery Strategies
- **Partial success**: Keep successful assembly combinations - **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 - **Invalid tokens**: Validate design-tokens.json structure
## Quality Checklist ## Quality Checklist
@@ -362,8 +372,8 @@ ERROR: Script permission denied
**Prerequisites**: **Prerequisites**:
- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md` - `/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` **Output**: S×L×T prototypes for `/workflow:ui-design:update`
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto` **Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`

8
.claude/commands/workflow/ui-design/imitate-auto.md
View File

@@ -225,8 +225,8 @@ IF design_source == "hybrid":
REPORT: " → Source: {code_base_path}" REPORT: " → Source: {code_base_path}"
REPORT: " → Mode: Hybrid (Web + Code)" REPORT: " → Mode: Hybrid (Web + Code)"
command = "/workflow:ui-design:import-from-code --output-path \"{base_path}\" " + command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " +
"--source-path \"{code_base_path}\"" "--source \"{code_base_path}\""
TRY: TRY:
SlashCommand(command) SlashCommand(command)
@@ -408,7 +408,7 @@ ELSE:
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages." 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()]) 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) SlashCommand(extract_command)
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation") TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
@@ -439,7 +439,7 @@ IF skip_layout:
ELSE: ELSE:
REPORT: "🚀 Phase 2.5: Layout Extraction" REPORT: "🚀 Phase 2.5: Layout Extraction"
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()]) 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) SlashCommand(layout_extract_command)
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI") TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")

72
.claude/commands/workflow/ui-design/import-from-code.md
View File

@@ -1,7 +1,7 @@
--- ---
name: workflow:ui-design:import-from-code 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 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 allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite
auto-continue: true 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] /workflow:ui-design:import-from-code [FLAGS]
# Flags # Flags
--source-path <path> Source code directory to analyze (default: current directory) --base-path <path> Output directory for extracted design tokens (default: current directory)
--output-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") --css "<glob>" CSS file glob pattern (e.g., "theme/*.css")
--scss "<glob>" SCSS file glob pattern (e.g., "styles/*.scss") --scss "<glob>" SCSS file glob pattern (e.g., "styles/*.scss")
--js "<glob>" JavaScript file glob pattern (e.g., "theme/*.js") --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 ```bash
# Basic usage - auto-discover all files # 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 # 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) # 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 # 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 # 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 ```bash
# 1. Initialize directories # 1. Initialize directories
source_path="${source_path:-.}" base_path="${base_path:-.}"
output_path="${output_path:-.}" source="${source:-$base_path}"
intermediates_dir="${output_path}/.intermediates/import-analysis" intermediates_dir="${base_path}/.intermediates/import-analysis"
mkdir -p "$intermediates_dir" 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 --> <!-- TodoWrite: Initialize todo list -->
@@ -97,7 +97,7 @@ echo "[Phase 0] File Discovery Started (source: $source_path, output: $output_pa
```bash ```bash
# 2. Discover files by type # 2. Discover files by type
cd "$source_path" || exit 1 cd "$source" || exit 1
# CSS files # CSS files
if [ -n "$css" ]; then if [ -n "$css" ]; then
@@ -183,7 +183,7 @@ Task(ui-design-agent): `
[STYLE_TOKENS_EXTRACTION] [STYLE_TOKENS_EXTRACTION]
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types 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) ## Input Files (Can reference ANY file type)
@@ -210,7 +210,7 @@ Task(ui-design-agent): `
## Output Requirements ## 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) 1. design-tokens.json (production-ready design tokens)
2. style-guide.md (design philosophy and usage guide) 2. style-guide.md (design philosophy and usage guide)
@@ -359,13 +359,13 @@ Task(ui-design-agent): `
## Critical Requirements ## Critical Requirements
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only - ✅ 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 - ✅ Cross-reference between file types for better extraction
- ✅ Extract all visual token types systematically - ✅ 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: - ✅ Use Write() to save both files:
- ${output_path}/style-extraction/style-1/design-tokens.json - ${base_path}/style-extraction/style-1/design-tokens.json
- ${output_path}/style-extraction/style-1/style-guide.md - ${base_path}/style-extraction/style-1/style-guide.md
- ✅ Include _metadata.completeness field to track missing content - ✅ Include _metadata.completeness field to track missing content
- ❌ NO external research or MCP calls - ❌ NO external research or MCP calls
` `
@@ -380,7 +380,7 @@ Task(ui-design-agent): `
[ANIMATION_TOKENS_EXTRACTION] [ANIMATION_TOKENS_EXTRACTION]
Extract animation/transition tokens from ALL file types 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) ## Input Files (Can reference ANY file type)
@@ -407,7 +407,7 @@ Task(ui-design-agent): `
## Output Requirements ## 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) 1. animation-tokens.json (production-ready animation tokens)
2. animation-guide.md (animation usage guide) 2. animation-guide.md (animation usage guide)
@@ -532,13 +532,13 @@ Task(ui-design-agent): `
## Critical Requirements ## Critical Requirements
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - ✅ 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 - ✅ Detect animation framework if used
- ✅ Extract all animation-related tokens - ✅ 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: - ✅ Use Write() to save both files:
- ${output_path}/animation-extraction/animation-tokens.json - ${base_path}/animation-extraction/animation-tokens.json
- ${output_path}/animation-extraction/animation-guide.md - ${base_path}/animation-extraction/animation-guide.md
- ✅ Include _metadata.completeness field to track missing content - ✅ Include _metadata.completeness field to track missing content
- ❌ NO external research or MCP calls - ❌ NO external research or MCP calls
` `
@@ -553,7 +553,7 @@ Task(ui-design-agent): `
[LAYOUT_PATTERNS_EXTRACTION] [LAYOUT_PATTERNS_EXTRACTION]
Extract layout patterns and component structures from ALL file types 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) ## Input Files (Can reference ANY file type)
@@ -580,7 +580,7 @@ Task(ui-design-agent): `
## Output Requirements ## 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: ### layout-templates.json Structure:
{ {
@@ -677,11 +677,11 @@ Task(ui-design-agent): `
## Critical Requirements ## Critical Requirements
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - ✅ 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 - ✅ Identify naming conventions and layout systems
- ✅ Extract component patterns with variants and states - ✅ Extract component patterns with variants and states
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${output_path}/layout-extraction") - ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
- ✅ Use Write() to save: ${output_path}/layout-extraction/layout-templates.json - ✅ Use Write() to save: ${base_path}/layout-extraction/layout-templates.json
- ✅ Include extraction_metadata.completeness field to track missing content - ✅ Include extraction_metadata.completeness field to track missing content
- ❌ NO external research or MCP calls - ❌ NO external research or MCP calls
` `
@@ -712,11 +712,11 @@ echo "[Phase 1] Parallel agent analysis complete"
### Generated Files ### Generated Files
**Location**: `${output_path}/` **Location**: `${base_path}/`
**Directory Structure**: **Directory Structure**:
``` ```
${output_path}/ ${base_path}/
├── style-extraction/ ├── style-extraction/
│ └── style-1/ │ └── style-1/
│ ├── design-tokens.json # Production-ready design tokens │ ├── design-tokens.json # Production-ready design tokens
@@ -771,7 +771,7 @@ ${output_path}/
| Error | Cause | Resolution | | 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 | | 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 | | 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) | | Missing file type | Specific file type not discovered | Use explicit glob flags (--css, --js, --html, --scss) |
@@ -781,8 +781,8 @@ ${output_path}/
## Best Practices ## Best Practices
1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically 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 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**: Always use distinct `--source-path` (where source code lives) and `--output-path` (where design tokens are generated) to avoid polluting source code directory 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 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 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

57
.claude/commands/workflow/ui-design/layout-extract.md
View File

@@ -1,8 +1,8 @@
--- ---
name: layout-extract name: layout-extract
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis 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>] 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(*), Task(ui-design-agent), mcp__exa__web_search_exa(*) allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
--- ---
# Layout Extraction Command # Layout Extraction Command
@@ -66,7 +66,7 @@ ELSE:
device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive
# Determine base path (auto-detect and convert to absolute) # 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) base_path=$(cd "$relative_path" && pwd)
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found") bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
# OR use --base-path / --session parameters # 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 **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 ```bash
# Read options file # Read options file
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json) options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
@@ -354,6 +366,9 @@ FOR each target:
### Step 4: Write User Selection File ### Step 4: Write User Selection File
```bash ```bash
# Create user-selections directory
bash(mkdir -p {base_path}/.intermediates/user-selections)
# Calculate total selections across all targets # Calculate total selections across all targets
total_selections = sum([len(selections[t].selected_indices) for t in targets]) total_selections = sum([len(selections[t].selected_indices) for t in targets])
@@ -365,14 +380,14 @@ selection_data = {
"session_id": "{session_id}", "session_id": "{session_id}",
"total_selections": total_selections "total_selections": total_selections
}, },
"selections": selections // {target: {selected_indices: [...], concept_names: [...]}} "selected_variants": selections // {target: {selected_indices: [...], concept_names: [...]}}
} }
# Write to file # Write to standardized selection file
bash(echo '{selection_data}' > {base_path}/.intermediates/layout-analysis/user-selection.json) bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/layout-extract-selection.json)
# Verify # 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 ### 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** **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 ```bash
# Read user selections # Check if user selection file exists (interactive mode)
selection = Read({base_path}/.intermediates/layout-analysis/user-selection.json) IF exists({base_path}/.intermediates/user-selections/layout-extract-selection.json):
selections_per_target = selection.selections # 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 # Read concept details
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json) options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)

50
.claude/commands/workflow/ui-design/style-extract.md
View File

@@ -1,8 +1,8 @@
--- ---
name: style-extract name: style-extract
description: Extract design style from reference images or text prompts using Claude analysis with variant generation 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>]" argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*) allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
--- ---
# Style Extraction Command # Style Extraction Command
@@ -46,7 +46,7 @@ variants_count = --variants OR 3
VALIDATE: 1 <= variants_count <= 5 VALIDATE: 1 <= variants_count <= 5
# Determine base path (auto-detect and convert to absolute) # 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) base_path=$(cd "$relative_path" && pwd)
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found") bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
# OR use --base-path / --session parameters # 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 **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 ```bash
# Read options file # Read options file
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json) 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 ### Step 4: Write User Selection File
```bash ```bash
# Create user-selections directory
bash(mkdir -p {base_path}/.intermediates/user-selections)
# Create user selection JSON # Create user selection JSON
selection_data = { selection_data = {
"metadata": { "metadata": {
@@ -298,17 +313,17 @@ selection_data = {
"session_id": "{session_id}", "session_id": "{session_id}",
"selection_count": selected_indices.length "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": { "refinements": {
"enabled": false "enabled": false
} }
} }
# Write to file # Write to standardized selection file
bash(echo '{selection_data}' > {base_path}/.intermediates/style-analysis/user-selection.json) bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/style-extract-selection.json)
# Verify # 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 ### 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) **Executor**: `Task(ui-design-agent)` for selected variant(s)
### Step 1: Load User Selection ### Step 1: Load User Selection or Default to All
```bash ```bash
# Read user selection # Check if user selection file exists (interactive mode)
selection = Read({base_path}/.intermediates/style-analysis/user-selection.json) IF exists({base_path}/.intermediates/user-selections/style-extract-selection.json):
selected_indices = selection.selected_indices # Array of selected indices # 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 # Read the selected direction details from options
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json) options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)