mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
feat: 增强 command-guide skill，新增 UI 设计工作流指南和自动同步功能
## 主要更新 ### 1. 新增 UI 设计工作流完整指南 - 新增 `ui-design-workflow-guide.md` (12KB) - 使用 Gemini 分析 11 个 UI 设计命令文件 - 提供 4 种工作流模式详细指导： - 探索式设计（新概念） - 设计复制（模仿现有网站） - 代码优先导入 - 批量生成（高容量） - 包含架构最佳实践、性能优化和故障排查 ### 2. 更新工作流模式指南 - 在 `workflow-patterns.md` 中新增 Pattern 7: UI设计工作流 - 提供三种子模式的中文示例 - 添加 UI 设计指南的交叉引用 ### 3. 增强索引构建脚本 - 更新 `analyze_commands.py` 支持自动同步 reference 目录 - 新增 `sync_reference_directory()` 函数： - 自动删除旧的 reference 文件 - 从 `.claude/agents` 和 `.claude/commands` 复制最新文件 - 确保索引构建前 reference 目录为最新 - 增强统计输出，显示 reference 目录同步状态 ### 4. 更新索引文件 - 重建所有索引文件（all-commands.json, by-category.json 等） - 优化命令元数据和分类 - 同步最新的 UI 设计命令（包括新增的 import-from-code.md） ## 技术细节 **命令分类体系**: - Orchestrators: explore-auto, imitate-auto, batch-generate - Core Extractors: style-extract, layout-extract, animation-extract - Input & Capture: capture, explore-layers, import-from-code - Assemblers: generate, update **架构原则**: - 关注点分离：Style、Structure、Motion 独立 - Token-First CSS：使用 CSS 变量而非硬编码 - 并行执行：支持最多 6 个并发任务 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -107,7 +107,43 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
|
||||
## 6-Phase Execution
|
||||
|
||||
### Phase 0a: Intelligent Prompt Parsing
|
||||
### Phase 0a: Intelligent Path Detection & Source Selection
|
||||
```bash
|
||||
# Step 1: Detect if prompt/images contain existing file paths
|
||||
code_files_detected = false
|
||||
code_base_path = null
|
||||
has_visual_input = false
|
||||
|
||||
IF --prompt:
|
||||
# Extract potential file paths from prompt
|
||||
potential_paths = extract_paths_from_text(--prompt)
|
||||
FOR path IN potential_paths:
|
||||
IF file_or_directory_exists(path):
|
||||
code_files_detected = true
|
||||
code_base_path = path
|
||||
BREAK
|
||||
|
||||
IF --images:
|
||||
# Check if images parameter points to existing files
|
||||
IF glob_matches_files(--images):
|
||||
has_visual_input = true
|
||||
|
||||
# Step 2: Determine design source strategy
|
||||
design_source = "unknown"
|
||||
IF code_files_detected AND has_visual_input:
|
||||
design_source = "hybrid" # Both code and visual
|
||||
ELSE IF code_files_detected:
|
||||
design_source = "code_only" # Only code files
|
||||
ELSE IF has_visual_input OR --prompt:
|
||||
design_source = "visual_only" # Only visual/prompt
|
||||
ELSE:
|
||||
ERROR: "No design source provided (code files, images, or prompt required)"
|
||||
EXIT 1
|
||||
|
||||
STORE: design_source, code_base_path, has_visual_input
|
||||
```
|
||||
|
||||
### Phase 0a-2: Intelligent Prompt Parsing
|
||||
```bash
|
||||
# Parse variant counts from prompt or use explicit/default values
|
||||
IF --prompt AND (NOT --style-variants OR NOT --layout-variants):
|
||||
@@ -267,29 +303,101 @@ detect_target_type(target_list):
|
||||
RETURN "component" IF component_matches > page_matches ELSE "page"
|
||||
```
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
### Phase 0d: Code Import & Completeness Assessment (Conditional)
|
||||
```bash
|
||||
command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--mode explore --variants {style_variants}"
|
||||
SlashCommand(command)
|
||||
IF design_source IN ["code_only", "hybrid"]:
|
||||
REPORT: "🔍 Phase 0d: Code Import ({design_source})"
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --base-path \"{code_base_path}\""
|
||||
SlashCommand(command)
|
||||
|
||||
# Output: {style_variants} style cards with design_attributes
|
||||
# SlashCommand blocks until phase complete
|
||||
# Upon completion, IMMEDIATELY execute Phase 2.3 (auto-continue)
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
layout_complete = false
|
||||
missing_categories = []
|
||||
|
||||
# Style completeness check
|
||||
IF style_exists:
|
||||
tokens = Read("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
style_complete = (
|
||||
tokens.colors?.brand && tokens.colors?.surface &&
|
||||
tokens.typography?.font_family && tokens.spacing &&
|
||||
Object.keys(tokens.colors.brand || {}).length >= 3 &&
|
||||
Object.keys(tokens.spacing || {}).length >= 8
|
||||
)
|
||||
IF NOT style_complete AND tokens._metadata?.completeness?.missing_categories:
|
||||
missing_categories.extend(tokens._metadata.completeness.missing_categories)
|
||||
ELSE:
|
||||
missing_categories.push("style tokens")
|
||||
|
||||
# Animation completeness check
|
||||
IF animation_exists:
|
||||
anim = Read("{base_path}/animation-extraction/animation-tokens.json")
|
||||
animation_complete = (
|
||||
anim.duration && anim.easing &&
|
||||
Object.keys(anim.duration || {}).length >= 3 &&
|
||||
Object.keys(anim.easing || {}).length >= 3
|
||||
)
|
||||
IF NOT animation_complete AND anim._metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(anim._metadata.completeness.missing_items)
|
||||
ELSE:
|
||||
missing_categories.push("animation tokens")
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
needs_visual_supplement = false
|
||||
|
||||
IF design_source == "code_only" AND NOT (style_complete AND layout_complete):
|
||||
REPORT: "⚠️ Missing: {', '.join(missing_categories)}"
|
||||
REPORT: "Options: 'continue' | 'supplement: <images>' | 'cancel'"
|
||||
user_response = WAIT_FOR_USER_INPUT()
|
||||
MATCH user_response:
|
||||
"continue" → needs_visual_supplement = false
|
||||
"supplement: ..." → needs_visual_supplement = true; --images = extract_path(user_response)
|
||||
"cancel" → EXIT 0
|
||||
default → needs_visual_supplement = false
|
||||
ELSE IF design_source == "hybrid":
|
||||
needs_visual_supplement = true
|
||||
|
||||
STORE: needs_visual_supplement, style_complete, animation_complete, layout_complete
|
||||
```
|
||||
|
||||
### Phase 2.3: Animation Extraction (Optional - Interactive Mode)
|
||||
### Phase 1: Style Extraction
|
||||
```bash
|
||||
# Animation extraction for motion design patterns
|
||||
REPORT: "🚀 Phase 2.3: Animation Extraction (interactive mode)"
|
||||
REPORT: " → Mode: Interactive specification"
|
||||
REPORT: " → Purpose: Define motion design patterns"
|
||||
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}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--mode explore --variants {style_variants}"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 1: Style (Using Code Import)"
|
||||
```
|
||||
|
||||
command = "/workflow:ui-design:animation-extract --base-path \"{base_path}\" --mode interactive"
|
||||
|
||||
SlashCommand(command)
|
||||
### Phase 2.3: Animation Extraction
|
||||
```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"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
|
||||
|
||||
# Output: animation-tokens.json + animation-guide.md
|
||||
# SlashCommand blocks until phase complete
|
||||
@@ -299,23 +407,16 @@ SlashCommand(command)
|
||||
### Phase 2.5: Layout Extraction
|
||||
```bash
|
||||
targets_string = ",".join(inferred_target_list)
|
||||
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--targets \"{targets_string}\" " +
|
||||
"--mode explore --variants {layout_variants} " +
|
||||
"--device-type \"{device_type}\""
|
||||
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction (explore mode)"
|
||||
REPORT: " → Targets: {targets_string}"
|
||||
REPORT: " → Layout variants: {layout_variants}"
|
||||
REPORT: " → Device: {device_type}"
|
||||
|
||||
SlashCommand(command)
|
||||
|
||||
# Output: layout-templates.json with {targets × layout_variants} layout structures
|
||||
# SlashCommand blocks until phase complete
|
||||
# Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
|
||||
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}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--targets \"{targets_string}\" --mode explore --variants {layout_variants} --device-type \"{device_type}\""
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
```
|
||||
|
||||
### Phase 3: UI Assembly
|
||||
|
||||
@@ -115,6 +115,23 @@ ELSE:
|
||||
# Create base directory
|
||||
Bash(mkdir -p "{base_path}")
|
||||
|
||||
# Step 0.1: Intelligent Path Detection
|
||||
code_files_detected = false
|
||||
code_base_path = null
|
||||
design_source = "web" # Default for imitate-auto
|
||||
|
||||
IF --prompt:
|
||||
# Extract potential file paths from prompt
|
||||
potential_paths = extract_paths_from_text(--prompt)
|
||||
FOR path IN potential_paths:
|
||||
IF file_or_directory_exists(path):
|
||||
code_files_detected = true
|
||||
code_base_path = path
|
||||
design_source = "hybrid" # Web + Code
|
||||
BREAK
|
||||
|
||||
STORE: design_source, code_base_path
|
||||
|
||||
# Parse url-map
|
||||
url_map_string = {--url-map}
|
||||
VALIDATE: url_map_string is not empty, "--url-map parameter is required"
|
||||
@@ -196,11 +213,110 @@ TodoWrite({todos: [
|
||||
]})
|
||||
```
|
||||
|
||||
### Phase 0.5: Code Import & Completeness Assessment (Conditional)
|
||||
|
||||
```bash
|
||||
# Only execute if code files detected
|
||||
IF design_source == "hybrid":
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🔍 Phase 0.5: Code Import & Analysis"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: " → Source: {code_base_path}"
|
||||
REPORT: " → Mode: Hybrid (Web + Code)"
|
||||
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " +
|
||||
"--base-path \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(command)
|
||||
CATCH error:
|
||||
WARN: "Code import failed: {error}"
|
||||
WARN: "Falling back to web-only mode"
|
||||
design_source = "web"
|
||||
|
||||
IF design_source == "hybrid":
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
layout_complete = false
|
||||
missing_categories = []
|
||||
|
||||
# Style completeness check
|
||||
IF style_exists:
|
||||
tokens = Read("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
style_complete = (
|
||||
tokens.colors?.brand && tokens.colors?.surface &&
|
||||
tokens.typography?.font_family && tokens.spacing &&
|
||||
Object.keys(tokens.colors.brand || {}).length >= 3 &&
|
||||
Object.keys(tokens.spacing || {}).length >= 8
|
||||
)
|
||||
IF NOT style_complete AND tokens._metadata?.completeness?.missing_categories:
|
||||
missing_categories.extend(tokens._metadata.completeness.missing_categories)
|
||||
ELSE:
|
||||
missing_categories.push("style tokens")
|
||||
|
||||
# Animation completeness check
|
||||
IF animation_exists:
|
||||
anim = Read("{base_path}/animation-extraction/animation-tokens.json")
|
||||
animation_complete = (
|
||||
anim.duration && anim.easing &&
|
||||
Object.keys(anim.duration || {}).length >= 3 &&
|
||||
Object.keys(anim.easing || {}).length >= 3
|
||||
)
|
||||
IF NOT animation_complete AND anim._metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(anim._metadata.completeness.missing_items)
|
||||
ELSE:
|
||||
missing_categories.push("animation tokens")
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
# Report code analysis results
|
||||
IF len(missing_categories) > 0:
|
||||
REPORT: ""
|
||||
REPORT: "⚠️ Code Analysis Partial"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "Missing Design Elements:"
|
||||
FOR category IN missing_categories:
|
||||
REPORT: " • {category}"
|
||||
REPORT: ""
|
||||
REPORT: "Web screenshots will supplement missing elements"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
ELSE:
|
||||
REPORT: ""
|
||||
REPORT: "✅ Code Analysis Complete"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "All design elements extracted from code"
|
||||
REPORT: "Web screenshots will verify and enhance findings"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
STORE: style_complete, animation_complete, layout_complete
|
||||
|
||||
TodoWrite(mark_completed: "Initialize and parse url-map",
|
||||
mark_in_progress: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})")
|
||||
```
|
||||
|
||||
### Phase 1: Screenshot Capture (Dual Mode)
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 1: Screenshot Capture"
|
||||
IF design_source == "hybrid":
|
||||
REPORT: " → Purpose: Verify and supplement code analysis"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
IF capture_mode == "batch":
|
||||
@@ -264,161 +380,84 @@ TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} target
|
||||
mark_in_progress: "Extract style (visual tokens)")
|
||||
```
|
||||
|
||||
### Phase 2: Style Extraction (Visual Tokens)
|
||||
### Phase 2: Style Extraction
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 2: Style Extraction"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
# Determine if style extraction needed
|
||||
skip_style = (design_source == "hybrid" AND style_complete)
|
||||
|
||||
# Use all screenshots as input to extract single design system
|
||||
IF capture_mode == "batch":
|
||||
images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
|
||||
ELSE: # deep mode
|
||||
images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}"
|
||||
|
||||
# Build extraction prompt
|
||||
IF --prompt:
|
||||
user_guidance = {--prompt}
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}'. User guidance: {user_guidance}"
|
||||
IF skip_style:
|
||||
REPORT: "✅ Phase 2: Style (Using Code Import)"
|
||||
ELSE:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
|
||||
REPORT: "🚀 Phase 2: Style Extraction"
|
||||
IF capture_mode == "batch":
|
||||
images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
|
||||
ELSE:
|
||||
images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}"
|
||||
|
||||
# Build url-map string for style-extract (enables computed styles extraction)
|
||||
url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()])
|
||||
IF --prompt:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}'. {--prompt}"
|
||||
ELSE:
|
||||
IF design_source == "hybrid":
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' to supplement code-imported design tokens."
|
||||
ELSE:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
|
||||
|
||||
# Call style-extract command (imitate mode, automatically uses single variant)
|
||||
# Pass --urls to enable auto-trigger of computed styles extraction
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --mode imitate"
|
||||
|
||||
TRY:
|
||||
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}\" --mode imitate"
|
||||
SlashCommand(extract_command)
|
||||
CATCH error:
|
||||
ERROR: "Style extraction failed: {error}"
|
||||
ERROR: "Cannot proceed without visual tokens"
|
||||
EXIT 1
|
||||
|
||||
# Verify extraction results
|
||||
design_tokens_path = "{base_path}/style-extraction/style-1/design-tokens.json"
|
||||
style_guide_path = "{base_path}/style-extraction/style-1/style-guide.md"
|
||||
|
||||
IF NOT exists(design_tokens_path) OR NOT exists(style_guide_path):
|
||||
ERROR: "style-extract did not generate required files"
|
||||
EXIT 1
|
||||
|
||||
TodoWrite(mark_completed: "Extract style (complete design systems)",
|
||||
mark_in_progress: "Extract animation (CSS auto mode)")
|
||||
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
|
||||
```
|
||||
|
||||
### Phase 2.3: Animation Extraction (CSS Auto Mode)
|
||||
### Phase 2.3: Animation Extraction
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 2.3: Animation Extraction"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
skip_animation = (design_source == "hybrid" AND animation_complete)
|
||||
|
||||
# Build URL list for animation-extract (auto mode for CSS extraction)
|
||||
url_map_for_animation = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
|
||||
# Call animation-extract command (auto mode for CSS animation extraction)
|
||||
# Pass --urls to auto-trigger CSS animation/transition extraction via Chrome DevTools
|
||||
animation_extract_command = f"/workflow:ui-design:animation-extract --base-path \"{base_path}\" --urls \"{url_map_for_animation}\" --mode auto"
|
||||
|
||||
TRY:
|
||||
IF skip_animation:
|
||||
REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
|
||||
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"
|
||||
SlashCommand(animation_extract_command)
|
||||
CATCH error:
|
||||
ERROR: "Animation extraction failed: {error}"
|
||||
ERROR: "Cannot proceed without animation tokens"
|
||||
EXIT 1
|
||||
|
||||
# Verify animation extraction results
|
||||
animation_tokens_path = "{base_path}/animation-extraction/animation-tokens.json"
|
||||
animation_guide_path = "{base_path}/animation-extraction/animation-guide.md"
|
||||
|
||||
IF NOT exists(animation_tokens_path) OR NOT exists(animation_guide_path):
|
||||
ERROR: "animation-extract did not generate required files"
|
||||
EXIT 1
|
||||
|
||||
TodoWrite(mark_completed: "Extract animation (CSS auto mode)",
|
||||
mark_in_progress: "Extract layout (structure templates)")
|
||||
```
|
||||
|
||||
### Phase 2.5: Layout Extraction (Structure Templates)
|
||||
### Phase 2.5: Layout Extraction
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
skip_layout = (design_source == "hybrid" AND layout_complete)
|
||||
|
||||
# Build URL map for layout-extract
|
||||
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
|
||||
# Call layout-extract command (imitate mode for structure replication)
|
||||
# Pass --urls to enable auto-trigger of DOM structure extraction
|
||||
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)}\" --mode imitate"
|
||||
|
||||
TRY:
|
||||
IF skip_layout:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
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)}\" --mode imitate"
|
||||
SlashCommand(layout_extract_command)
|
||||
CATCH error:
|
||||
ERROR: "Layout extraction failed: {error}"
|
||||
ERROR: "Cannot proceed without layout templates"
|
||||
EXIT 1
|
||||
|
||||
# Verify layout extraction results
|
||||
layout_templates_path = "{base_path}/layout-extraction/layout-templates.json"
|
||||
|
||||
IF NOT exists(layout_templates_path):
|
||||
ERROR: "layout-extract did not generate layout-templates.json"
|
||||
EXIT 1
|
||||
|
||||
TodoWrite(mark_completed: "Extract layout (structure templates)",
|
||||
mark_in_progress: f"Assemble UI for {len(target_names)} targets")
|
||||
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
|
||||
```
|
||||
|
||||
### Phase 3: Batch UI Assembly
|
||||
### Phase 3: UI Assembly
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 3: UI Assembly"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
# Call generate command (pure assembler - combines layout templates + design tokens)
|
||||
generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --style-variants 1 --layout-variants 1"
|
||||
SlashCommand(generate_command)
|
||||
|
||||
TRY:
|
||||
SlashCommand(generate_command)
|
||||
CATCH error:
|
||||
ERROR: "UI assembly failed: {error}"
|
||||
ERROR: "Layout templates or design tokens may be invalid"
|
||||
EXIT 1
|
||||
|
||||
# Verify assembly results
|
||||
prototypes_dir = "{base_path}/prototypes"
|
||||
generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html")
|
||||
generated_count = len(generated_html_files)
|
||||
|
||||
IF generated_count < len(target_names):
|
||||
WARN: "⚠️ Expected {len(target_names)} prototypes, assembled {generated_count}"
|
||||
|
||||
TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets",
|
||||
mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
|
||||
TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion")
|
||||
```
|
||||
|
||||
### Phase 4: Design System Integration
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 4: Design System Integration"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
IF session_id:
|
||||
REPORT: "🚀 Phase 4: Design System Integration"
|
||||
update_command = f"/workflow:ui-design:update --session {session_id}"
|
||||
|
||||
TRY:
|
||||
SlashCommand(update_command)
|
||||
CATCH error:
|
||||
WARN: "⚠️ Design system integration failed: {error}"
|
||||
WARN: "Prototypes available at {base_path}/prototypes/"
|
||||
SlashCommand(update_command)
|
||||
|
||||
# Update metadata
|
||||
metadata = Read("{base_path}/.run-metadata.json")
|
||||
|
||||
@@ -0,0 +1,785 @@
|
||||
---
|
||||
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>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite
|
||||
auto-continue: true
|
||||
---
|
||||
|
||||
# UI Design: Import from Code
|
||||
|
||||
## Overview
|
||||
|
||||
Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using parallel agent analysis. Each agent can reference any file type for cross-source token extraction, and directly generates completeness reports with findings and gaps.
|
||||
|
||||
**Key Characteristics**:
|
||||
- Executes parallel agent analysis (3 agents: Style, Animation, Layout)
|
||||
- Each agent can read ALL file types (CSS/SCSS/JS/TS/HTML) for cross-reference
|
||||
- Direct completeness reporting without synthesis phase
|
||||
- Graceful failure handling with detailed missing content analysis
|
||||
- Returns concrete analysis results with recommendations
|
||||
|
||||
## Core Functionality
|
||||
|
||||
- **File Discovery**: Auto-discover or target specific CSS/SCSS/JS/HTML files
|
||||
- **Parallel Analysis**: 3 agents extract tokens simultaneously with cross-file-type support
|
||||
- **Completeness Reporting**: Each agent reports found tokens, missing content, and recommendations
|
||||
- **Cross-Source Extraction**: Agents can reference any file type (e.g., Style agent can read JS theme configs)
|
||||
|
||||
## Usage
|
||||
|
||||
### Command Syntax
|
||||
|
||||
```bash
|
||||
/workflow:ui-design:import-from-code [FLAGS]
|
||||
|
||||
# Flags
|
||||
--base-path <path> Base directory for analysis (default: current directory)
|
||||
--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 ./
|
||||
|
||||
# Target specific directories
|
||||
/workflow:ui-design:import-from-code --base-path ./src --css "theme/*.css" --js "theme/*.js"
|
||||
|
||||
# Tailwind config only
|
||||
/workflow:ui-design:import-from-code --js "tailwind.config.js"
|
||||
|
||||
# CSS framework import
|
||||
/workflow:ui-design:import-from-code --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
|
||||
# Universal style files
|
||||
/workflow:ui-design:import-from-code --style-files "**/theme.*"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Execution Process
|
||||
|
||||
### Step 1: Setup & File Discovery
|
||||
|
||||
**Purpose**: Initialize session, discover and categorize code files
|
||||
|
||||
**Operations**:
|
||||
|
||||
```bash
|
||||
# 1. Initialize directories
|
||||
base_path="${base_path:-.}"
|
||||
intermediates_dir="${base_path}/.intermediates/import-analysis"
|
||||
mkdir -p "$intermediates_dir"
|
||||
|
||||
echo "[Phase 0] File Discovery Started"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
|
||||
**TodoWrite**:
|
||||
```json
|
||||
[
|
||||
{"content": "Phase 0: 发现和分类代码文件", "status": "in_progress", "activeForm": "发现代码文件"},
|
||||
{"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "pending", "activeForm": "生成design system"}
|
||||
]
|
||||
```
|
||||
|
||||
**File Discovery Logic**:
|
||||
|
||||
```bash
|
||||
# 2. Discover files by type
|
||||
cd "$base_path" || exit 1
|
||||
|
||||
# CSS files
|
||||
if [ -n "$css" ]; then
|
||||
find . -type f -name "*.css" | grep -E "$css" > "$intermediates_dir/css-files.txt"
|
||||
elif [ -n "$style_files" ]; then
|
||||
find . -type f -name "*.css" | grep -E "$style_files" > "$intermediates_dir/css-files.txt"
|
||||
else
|
||||
find . -type f -name "*.css" -not -path "*/node_modules/*" -not -path "*/dist/*" > "$intermediates_dir/css-files.txt"
|
||||
fi
|
||||
|
||||
# SCSS files
|
||||
if [ -n "$scss" ]; then
|
||||
find . -type f \( -name "*.scss" -o -name "*.sass" \) | grep -E "$scss" > "$intermediates_dir/scss-files.txt"
|
||||
elif [ -n "$style_files" ]; then
|
||||
find . -type f \( -name "*.scss" -o -name "*.sass" \) | grep -E "$style_files" > "$intermediates_dir/scss-files.txt"
|
||||
else
|
||||
find . -type f \( -name "*.scss" -o -name "*.sass" \) -not -path "*/node_modules/*" -not -path "*/dist/*" > "$intermediates_dir/scss-files.txt"
|
||||
fi
|
||||
|
||||
# JavaScript files (theme/style related)
|
||||
if [ -n "$js" ]; then
|
||||
find . -type f \( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" \) | grep -E "$js" > "$intermediates_dir/js-files.txt"
|
||||
elif [ -n "$style_files" ]; then
|
||||
find . -type f \( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" \) | grep -E "$style_files" > "$intermediates_dir/js-files.txt"
|
||||
else
|
||||
# Look for common theme/style file patterns
|
||||
find . -type f \( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" \) -not -path "*/node_modules/*" -not -path "*/dist/*" | \
|
||||
grep -iE "(theme|style|color|token|design)" > "$intermediates_dir/js-files.txt" || touch "$intermediates_dir/js-files.txt"
|
||||
fi
|
||||
|
||||
# HTML files
|
||||
if [ -n "$html" ]; then
|
||||
find . -type f \( -name "*.html" -o -name "*.htm" \) | grep -E "$html" > "$intermediates_dir/html-files.txt"
|
||||
else
|
||||
find . -type f \( -name "*.html" -o -name "*.htm" \) -not -path "*/node_modules/*" -not -path "*/dist/*" > "$intermediates_dir/html-files.txt"
|
||||
fi
|
||||
|
||||
# 3. Count discovered files
|
||||
css_count=$(wc -l < "$intermediates_dir/css-files.txt" 2>/dev/null || echo 0)
|
||||
scss_count=$(wc -l < "$intermediates_dir/scss-files.txt" 2>/dev/null || echo 0)
|
||||
js_count=$(wc -l < "$intermediates_dir/js-files.txt" 2>/dev/null || echo 0)
|
||||
html_count=$(wc -l < "$intermediates_dir/html-files.txt" 2>/dev/null || echo 0)
|
||||
|
||||
echo "[Phase 0] Discovered: CSS=$css_count, SCSS=$scss_count, JS=$js_count, HTML=$html_count"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Mark Phase 0 complete, start Phase 1 -->
|
||||
|
||||
**TodoWrite**:
|
||||
```json
|
||||
[
|
||||
{"content": "Phase 0: 发现和分类代码文件", "status": "completed", "activeForm": "发现代码文件"},
|
||||
{"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "in_progress", "activeForm": "生成design system"}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Parallel Agent Analysis
|
||||
|
||||
**Purpose**: Three agents analyze all file types in parallel, each producing completeness-report.json
|
||||
|
||||
**Operations**:
|
||||
- **Style Agent**: Extracts visual tokens (colors, typography, spacing) from ALL files (CSS/SCSS/JS/HTML)
|
||||
- **Animation Agent**: Extracts animations/transitions from ALL files
|
||||
- **Layout Agent**: Extracts layout patterns/component structures from ALL files
|
||||
|
||||
**Validation**:
|
||||
- Each agent can reference any file type (not restricted to single type)
|
||||
- Direct output: Each agent generates completeness-report.json with findings + missing content
|
||||
- No synthesis needed: Agents produce final output directly
|
||||
|
||||
```bash
|
||||
echo "[Phase 1] Starting parallel agent analysis (3 agents)"
|
||||
```
|
||||
|
||||
#### Style Agent Task (style-completeness-report.json)
|
||||
|
||||
**Agent Task**:
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[STYLE_TOKENS_EXTRACTION]
|
||||
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types
|
||||
|
||||
MODE: style-extraction | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
## Extraction Strategy
|
||||
|
||||
**You can read ALL file types** - Cross-reference for better extraction:
|
||||
1. **CSS/SCSS**: Primary source for colors, typography, spacing, shadows, borders
|
||||
2. **JavaScript/TypeScript**: Theme objects (styled-components, Tailwind config, CSS-in-JS tokens)
|
||||
3. **HTML**: Inline styles, class usage patterns, component examples
|
||||
|
||||
**Smart inference** - Fill gaps using cross-source data:
|
||||
- Missing CSS colors? Check JS theme objects
|
||||
- Missing spacing scale? Infer from existing values in any file type
|
||||
- Missing typography? Check font-family usage in CSS + HTML + JS configs
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 2 files in ${base_path}/style-extraction/style-1/:
|
||||
1. design-tokens.json (production-ready design tokens)
|
||||
2. style-guide.md (design philosophy and usage guide)
|
||||
|
||||
### design-tokens.json Structure:
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": {"value": "#0066cc", "source": "file.css:23"},
|
||||
"secondary": {"value": "#6c757d", "source": "file.css:24"}
|
||||
},
|
||||
"surface": {
|
||||
"background": {"value": "#ffffff", "source": "file.css:10"},
|
||||
"card": {"value": "#f8f9fa", "source": "file.css:11"}
|
||||
},
|
||||
"semantic": {
|
||||
"success": {"value": "#28a745", "source": "file.css:30"},
|
||||
"warning": {"value": "#ffc107", "source": "file.css:31"},
|
||||
"error": {"value": "#dc3545", "source": "file.css:32"}
|
||||
},
|
||||
"text": {
|
||||
"primary": {"value": "#212529", "source": "file.css:15"},
|
||||
"secondary": {"value": "#6c757d", "source": "file.css:16"}
|
||||
},
|
||||
"border": {
|
||||
"default": {"value": "#dee2e6", "source": "file.css:20"}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"base": {"value": "system-ui, sans-serif", "source": "theme.js:12"},
|
||||
"heading": {"value": "Georgia, serif", "source": "theme.js:13"}
|
||||
},
|
||||
"font_size": {
|
||||
"xs": {"value": "0.75rem", "source": "styles.css:5"},
|
||||
"sm": {"value": "0.875rem", "source": "styles.css:6"},
|
||||
"base": {"value": "1rem", "source": "styles.css:7"},
|
||||
"lg": {"value": "1.125rem", "source": "styles.css:8"},
|
||||
"xl": {"value": "1.25rem", "source": "styles.css:9"}
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": {"value": "400", "source": "styles.css:12"},
|
||||
"medium": {"value": "500", "source": "styles.css:13"},
|
||||
"bold": {"value": "700", "source": "styles.css:14"}
|
||||
},
|
||||
"line_height": {
|
||||
"tight": {"value": "1.25", "source": "styles.css:18"},
|
||||
"normal": {"value": "1.5", "source": "styles.css:19"},
|
||||
"relaxed": {"value": "1.75", "source": "styles.css:20"}
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": {"value": "-0.025em", "source": "styles.css:24"},
|
||||
"normal": {"value": "0", "source": "styles.css:25"},
|
||||
"wide": {"value": "0.025em", "source": "styles.css:26"}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"0": {"value": "0", "source": "styles.css:30"},
|
||||
"1": {"value": "0.25rem", "source": "styles.css:31"},
|
||||
"2": {"value": "0.5rem", "source": "styles.css:32"},
|
||||
"3": {"value": "0.75rem", "source": "styles.css:33"},
|
||||
"4": {"value": "1rem", "source": "styles.css:34"},
|
||||
"6": {"value": "1.5rem", "source": "styles.css:35"},
|
||||
"8": {"value": "2rem", "source": "styles.css:36"},
|
||||
"12": {"value": "3rem", "source": "styles.css:37"}
|
||||
},
|
||||
"opacity": {
|
||||
"0": {"value": "0", "source": "styles.css:40"},
|
||||
"50": {"value": "0.5", "source": "styles.css:41"},
|
||||
"100": {"value": "1", "source": "styles.css:42"}
|
||||
},
|
||||
"border_radius": {
|
||||
"none": {"value": "0", "source": "styles.css:45"},
|
||||
"sm": {"value": "0.125rem", "source": "styles.css:46"},
|
||||
"base": {"value": "0.25rem", "source": "styles.css:47"},
|
||||
"lg": {"value": "0.5rem", "source": "styles.css:48"},
|
||||
"full": {"value": "9999px", "source": "styles.css:49"}
|
||||
},
|
||||
"shadows": {
|
||||
"sm": {"value": "0 1px 2px rgba(0,0,0,0.05)", "source": "theme.css:45"},
|
||||
"base": {"value": "0 1px 3px rgba(0,0,0,0.1)", "source": "theme.css:46"},
|
||||
"md": {"value": "0 4px 6px rgba(0,0,0,0.1)", "source": "theme.css:47"},
|
||||
"lg": {"value": "0 10px 15px rgba(0,0,0,0.1)", "source": "theme.css:48"}
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": {"value": "640px", "source": "media.scss:3"},
|
||||
"md": {"value": "768px", "source": "media.scss:4"},
|
||||
"lg": {"value": "1024px", "source": "media.scss:5"},
|
||||
"xl": {"value": "1280px", "source": "media.scss:6"}
|
||||
},
|
||||
"_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"completeness": {
|
||||
"colors": "complete | partial | minimal",
|
||||
"typography": "complete | partial | minimal",
|
||||
"spacing": "complete | partial | minimal",
|
||||
"missing_categories": ["accent", "warning"],
|
||||
"recommendations": [
|
||||
"Define accent color for interactive elements",
|
||||
"Add semantic colors (warning, error, success)"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
### style-guide.md Structure:
|
||||
|
||||
# Design System Style Guide
|
||||
|
||||
## Overview
|
||||
Extracted from code files: [list of source files]
|
||||
|
||||
## Colors
|
||||
- **Brand**: Primary, Secondary
|
||||
- **Surface**: Background, Card
|
||||
- **Semantic**: Success, Warning, Error
|
||||
- **Text**: Primary, Secondary
|
||||
- **Border**: Default
|
||||
|
||||
## Typography
|
||||
- **Font Families**: Base (system-ui), Heading (Georgia)
|
||||
- **Font Sizes**: xs to xl (0.75rem - 1.25rem)
|
||||
- **Font Weights**: Normal (400), Medium (500), Bold (700)
|
||||
|
||||
## Spacing
|
||||
System: 8px-grid (0, 0.25rem, 0.5rem, ..., 3rem)
|
||||
|
||||
## Missing Elements
|
||||
- Accent colors for interactive elements
|
||||
- Extended shadow scale
|
||||
|
||||
## Usage
|
||||
All tokens are production-ready and can be used with CSS variables.
|
||||
|
||||
|
||||
## Completeness Criteria
|
||||
- **colors**: ≥5 categories (brand, semantic, surface, text, border), ≥10 tokens
|
||||
- **typography**: ≥3 font families, ≥8 sizes, ≥5 weights
|
||||
- **spacing**: ≥8 values in consistent system
|
||||
- **shadows**: ≥3 elevation levels
|
||||
- **borders**: ≥3 radius values, ≥2 widths
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Cross-reference between file types for better extraction
|
||||
- ✅ Extract all visual token types systematically
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${base_path}/style-extraction/style-1/design-tokens.json
|
||||
- ${base_path}/style-extraction/style-1/style-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
```
|
||||
|
||||
#### Animation Agent Task
|
||||
|
||||
**Agent Task**:
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[ANIMATION_TOKENS_EXTRACTION]
|
||||
Extract animation/transition tokens from ALL file types
|
||||
|
||||
MODE: animation-extraction | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
## Extraction Strategy
|
||||
|
||||
**You can read ALL file types** - Find animations anywhere:
|
||||
1. **CSS/SCSS**: @keyframes, transition properties, animation properties
|
||||
2. **JavaScript/TypeScript**: Animation configs (Framer Motion, GSAP, CSS-in-JS animations)
|
||||
3. **HTML**: Inline animation styles, data-animation attributes
|
||||
|
||||
**Cross-reference**:
|
||||
- CSS animations referenced in JS configs
|
||||
- JS animation libraries with CSS class triggers
|
||||
- HTML elements with animation classes/attributes
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 2 files in ${base_path}/animation-extraction/:
|
||||
1. animation-tokens.json (production-ready animation tokens)
|
||||
2. animation-guide.md (animation usage guide)
|
||||
|
||||
### animation-tokens.json Structure:
|
||||
{
|
||||
"duration": {
|
||||
"instant": {"value": "0ms", "source": "animations.css:10"},
|
||||
"fast": {"value": "150ms", "source": "animations.css:12"},
|
||||
"base": {"value": "250ms", "source": "animations.css:13"},
|
||||
"slow": {"value": "500ms", "source": "animations.css:14"}
|
||||
},
|
||||
"easing": {
|
||||
"linear": {"value": "linear", "source": "animations.css:20"},
|
||||
"ease-in": {"value": "cubic-bezier(0.4, 0, 1, 1)", "source": "theme.js:45"},
|
||||
"ease-out": {"value": "cubic-bezier(0, 0, 0.2, 1)", "source": "theme.js:46"},
|
||||
"ease-in-out": {"value": "cubic-bezier(0.4, 0, 0.2, 1)", "source": "theme.js:47"}
|
||||
},
|
||||
"transitions": {
|
||||
"color": {
|
||||
"property": "color",
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "transitions.css:30"
|
||||
},
|
||||
"transform": {
|
||||
"property": "transform",
|
||||
"duration": "var(--duration-base)",
|
||||
"easing": "var(--ease-in-out)",
|
||||
"source": "transitions.css:35"
|
||||
},
|
||||
"opacity": {
|
||||
"property": "opacity",
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "transitions.css:40"
|
||||
}
|
||||
},
|
||||
"keyframes": {
|
||||
"fadeIn": {
|
||||
"name": "fadeIn",
|
||||
"keyframes": {
|
||||
"0%": {"opacity": "0"},
|
||||
"100%": {"opacity": "1"}
|
||||
},
|
||||
"source": "styles.css:67"
|
||||
},
|
||||
"slideInUp": {
|
||||
"name": "slideInUp",
|
||||
"keyframes": {
|
||||
"0%": {"transform": "translateY(20px)", "opacity": "0"},
|
||||
"100%": {"transform": "translateY(0)", "opacity": "1"}
|
||||
},
|
||||
"source": "styles.css:75"
|
||||
}
|
||||
},
|
||||
"interactions": {
|
||||
"button-hover": {
|
||||
"trigger": "hover",
|
||||
"properties": ["background-color", "transform"],
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "button.css:45"
|
||||
}
|
||||
},
|
||||
"_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"framework_detected": "css-animations | framer-motion | gsap | none",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"completeness": {
|
||||
"durations": "complete | partial | minimal",
|
||||
"easing": "complete | partial | minimal",
|
||||
"keyframes": "complete | partial | minimal",
|
||||
"missing_items": ["bounce easing", "slide animations"],
|
||||
"recommendations": [
|
||||
"Add slow duration for complex animations",
|
||||
"Define spring/bounce easing for interactive feedback"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
### animation-guide.md Structure:
|
||||
|
||||
# Animation System Guide
|
||||
|
||||
## Overview
|
||||
Extracted from code files: [list of source files]
|
||||
Framework detected: [css-animations | framer-motion | gsap | none]
|
||||
|
||||
## Durations
|
||||
- **Instant**: 0ms
|
||||
- **Fast**: 150ms (UI feedback)
|
||||
- **Base**: 250ms (standard transitions)
|
||||
- **Slow**: 500ms (complex animations)
|
||||
|
||||
## Easing Functions
|
||||
- **Linear**: Constant speed
|
||||
- **Ease-out**: Fast start, slow end (entering elements)
|
||||
- **Ease-in-out**: Smooth acceleration and deceleration
|
||||
|
||||
## Keyframe Animations
|
||||
- **fadeIn**: Opacity 0 → 1
|
||||
- **slideInUp**: Slide from bottom with fade
|
||||
|
||||
## Missing Elements
|
||||
- Bounce/spring easing for playful interactions
|
||||
- Slide-out animations
|
||||
|
||||
## Usage
|
||||
All animation tokens use CSS variables and can be referenced in transitions.
|
||||
|
||||
|
||||
## Completeness Criteria
|
||||
- **durations**: ≥3 (fast, medium, slow)
|
||||
- **easing**: ≥3 functions (ease-in, ease-out, ease-in-out)
|
||||
- **keyframes**: ≥3 animation types (fade, scale, slide)
|
||||
- **transitions**: ≥5 properties defined
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Detect animation framework if used
|
||||
- ✅ Extract all animation-related tokens
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${base_path}/animation-extraction/animation-tokens.json
|
||||
- ${base_path}/animation-extraction/animation-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
```
|
||||
|
||||
#### Layout Agent Task
|
||||
|
||||
**Agent Task**:
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_PATTERNS_EXTRACTION]
|
||||
Extract layout patterns and component structures from ALL file types
|
||||
|
||||
MODE: layout-extraction | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
|
||||
## Extraction Strategy
|
||||
|
||||
**You can read ALL file types** - Find layout patterns anywhere:
|
||||
1. **CSS/SCSS**: Grid systems, flexbox utilities, layout classes, media queries
|
||||
2. **JavaScript/TypeScript**: Layout components (React/Vue), grid configurations, responsive logic
|
||||
3. **HTML**: Layout structures, semantic patterns, component hierarchies
|
||||
|
||||
**Cross-reference**:
|
||||
- HTML structure + CSS classes → layout system
|
||||
- JS components + CSS styles → component patterns
|
||||
- Responsive classes across all file types
|
||||
|
||||
## Output Requirements
|
||||
|
||||
Generate 1 file: ${base_path}/layout-extraction/layout-templates.json
|
||||
|
||||
### layout-templates.json Structure:
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"analysis_time": "ISO8601 timestamp",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"naming_convention": "BEM | SMACSS | utility-first | css-modules | custom",
|
||||
"layout_system": {
|
||||
"type": "12-column | flexbox | css-grid | custom",
|
||||
"confidence": "high | medium | low",
|
||||
"container_classes": ["container", "wrapper"],
|
||||
"row_classes": ["row"],
|
||||
"column_classes": ["col-1", "col-md-6"],
|
||||
"source_files": ["grid.css", "Layout.jsx"]
|
||||
},
|
||||
"responsive": {
|
||||
"breakpoint_prefixes": ["sm:", "md:", "lg:", "xl:"],
|
||||
"mobile_first": true,
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px"
|
||||
},
|
||||
"source": "responsive.scss:5"
|
||||
},
|
||||
"completeness": {
|
||||
"layout_system": "complete | partial | minimal",
|
||||
"components": "complete | partial | minimal",
|
||||
"responsive": "complete | partial | minimal",
|
||||
"missing_items": ["gap utilities", "modal", "dropdown"],
|
||||
"recommendations": [
|
||||
"Add gap utilities for consistent spacing in grid layouts",
|
||||
"Define modal/dropdown/tabs component patterns"
|
||||
]
|
||||
}
|
||||
},
|
||||
"layout_templates": [
|
||||
{
|
||||
"target": "button",
|
||||
"variant_id": "layout-1",
|
||||
"device_type": "responsive",
|
||||
"component_type": "component",
|
||||
"dom_structure": {
|
||||
"tag": "button",
|
||||
"classes": ["btn", "btn-primary"],
|
||||
"children": [
|
||||
{"tag": "span", "classes": ["btn-text"], "content": "{{text}}"}
|
||||
],
|
||||
"variants": {
|
||||
"primary": {"classes": ["btn", "btn-primary"]},
|
||||
"secondary": {"classes": ["btn", "btn-secondary"]}
|
||||
},
|
||||
"sizes": {
|
||||
"sm": {"classes": ["btn-sm"]},
|
||||
"base": {"classes": []},
|
||||
"lg": {"classes": ["btn-lg"]}
|
||||
},
|
||||
"states": ["hover", "active", "disabled"]
|
||||
},
|
||||
"css_layout_rules": "display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-base);",
|
||||
"source": "button.css:12"
|
||||
},
|
||||
{
|
||||
"target": "card",
|
||||
"variant_id": "layout-1",
|
||||
"device_type": "responsive",
|
||||
"component_type": "component",
|
||||
"dom_structure": {
|
||||
"tag": "div",
|
||||
"classes": ["card"],
|
||||
"children": [
|
||||
{"tag": "div", "classes": ["card-header"], "content": "{{title}}"},
|
||||
{"tag": "div", "classes": ["card-body"], "content": "{{content}}"},
|
||||
{"tag": "div", "classes": ["card-footer"], "content": "{{footer}}"}
|
||||
]
|
||||
},
|
||||
"css_layout_rules": "display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-4); background: var(--color-surface-card);",
|
||||
"source": "card.css:25"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
## Completeness Criteria
|
||||
- **layout_system**: Clear grid/flexbox system identified
|
||||
- **components**: ≥5 component patterns (button, card, input, modal, dropdown)
|
||||
- **responsive**: ≥3 breakpoints, clear mobile-first strategy
|
||||
- **naming_convention**: Consistent pattern identified
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Identify naming conventions and layout systems
|
||||
- ✅ Extract component patterns with variants and states
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
|
||||
- ✅ Use Write() to save: ${base_path}/layout-extraction/layout-templates.json
|
||||
- ✅ Include extraction_metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
`
|
||||
```
|
||||
|
||||
**Wait for All Agents**:
|
||||
|
||||
```bash
|
||||
# Note: Agents run in parallel and write separate completeness reports
|
||||
# Each agent generates its own completeness-report.json directly
|
||||
# No synthesis phase needed
|
||||
echo "[Phase 1] Parallel agent analysis complete"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Mark all complete -->
|
||||
|
||||
**TodoWrite**:
|
||||
```json
|
||||
[
|
||||
{"content": "Phase 0: 发现和分类代码文件", "status": "completed", "activeForm": "发现代码文件"},
|
||||
{"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "completed", "activeForm": "生成design system"}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Output Files
|
||||
|
||||
### Generated Files
|
||||
|
||||
**Location**: `${base_path}/`
|
||||
|
||||
**Directory Structure**:
|
||||
```
|
||||
${base_path}/
|
||||
├── style-extraction/
|
||||
│ └── style-1/
|
||||
│ ├── design-tokens.json # Production-ready design tokens
|
||||
│ └── style-guide.md # Design philosophy and usage
|
||||
├── animation-extraction/
|
||||
│ ├── animation-tokens.json # Animation/transition tokens
|
||||
│ └── animation-guide.md # Animation usage guide
|
||||
├── layout-extraction/
|
||||
│ └── layout-templates.json # Layout patterns and component structures
|
||||
└── .intermediates/
|
||||
└── import-analysis/
|
||||
├── css-files.txt # Discovered CSS/SCSS files
|
||||
├── js-files.txt # Discovered JS/TS files
|
||||
└── html-files.txt # Discovered HTML files
|
||||
```
|
||||
|
||||
**Files**:
|
||||
1. **style-extraction/style-1/design-tokens.json**
|
||||
- Production-ready design tokens
|
||||
- Categories: colors, typography, spacing, opacity, border_radius, shadows, breakpoints
|
||||
- Metadata: extraction_source, files_analyzed, completeness assessment
|
||||
|
||||
2. **style-extraction/style-1/style-guide.md**
|
||||
- Design system overview
|
||||
- Token categories and usage
|
||||
- Missing elements and recommendations
|
||||
|
||||
3. **animation-extraction/animation-tokens.json**
|
||||
- Animation tokens: duration, easing, transitions, keyframes, interactions
|
||||
- Framework detection: css-animations, framer-motion, gsap, etc.
|
||||
- Metadata: extraction_source, completeness assessment
|
||||
|
||||
4. **animation-extraction/animation-guide.md**
|
||||
- Animation system overview
|
||||
- Usage guidelines and examples
|
||||
|
||||
5. **layout-extraction/layout-templates.json**
|
||||
- Layout templates for each discovered component
|
||||
- Extraction metadata: naming_convention, layout_system, responsive strategy
|
||||
- Component patterns with DOM structure and CSS rules
|
||||
|
||||
**Intermediate Files**: `.intermediates/import-analysis/`
|
||||
- `css-files.txt` - Discovered CSS/SCSS files
|
||||
- `js-files.txt` - Discovered JS/TS files
|
||||
- `html-files.txt` - Discovered HTML files
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Common Errors
|
||||
|
||||
| Error | Cause | Resolution |
|
||||
|-------|-------|------------|
|
||||
| No files discovered | Glob patterns too restrictive or wrong base-path | Check glob patterns and base-path, verify file locations |
|
||||
| Agent reports "failed" status | No tokens found in any file | Review file content, check if files contain design tokens |
|
||||
| Empty completeness reports | Files exist but contain no extractable tokens | Manually verify token definitions in source files |
|
||||
| Missing file type | Specific file type not discovered | Use explicit glob flags (--css, --js, --html, --scss) |
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically
|
||||
2. **Target specific directories for speed**: Use `--base-path` + specific globs for focused analysis
|
||||
3. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
4. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
5. **Verify file discovery**: Check `.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
Reference in New Issue
Block a user