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

refactor(ui-design): enhance imitate-auto workflow with key features and interactive confirmation

Browse Source
This commit is contained in:
catlog22
2025-10-10 11:12:34 +08:00
parent 83155ab662
commit a2a608f3ca
3 changed files with 177 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.claude/agents/ui-design-agent.md
View File

@@ -58,6 +58,39 @@ You are a specialized **UI Design Agent** that executes design generation tasks
- `{target}-layout-{id}.html`: Style-agnostic HTML structure - `{target}-layout-{id}.html`: Style-agnostic HTML structure
- `{target}-layout-{id}.css`: Token-driven structural CSS - `{target}-layout-{id}.css`: Token-driven structural CSS
**⚠️ CRITICAL: CSS Placeholder Links**
When generating HTML templates, you MUST include these EXACT placeholder links in the `<head>` section:
```html
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
<link rel="stylesheet" href="{{TOKEN_CSS}}">
```
**Placeholder Rules**:
1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
3. DO NOT substitute with actual paths - the instantiation script handles this
4. DO NOT add any other CSS `<link>` tags
5. These enable runtime style switching for all variants
**Example HTML Template Structure**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{target} - Layout {id}</title>
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
<link rel="stylesheet" href="{{TOKEN_CSS}}">
</head>
<body>
<!-- Content here -->
</body>
</html>
```
**Quality Gates**: 🎯 ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values) **Quality Gates**: 🎯 ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values)
### 4. Consistency Validation ### 4. Consistency Validation

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

@@ -137,120 +137,43 @@ FOR target IN target_list:
Task(ui-design-agent): " Task(ui-design-agent): "
[TARGET_LAYOUT_PLANNING] [TARGET_LAYOUT_PLANNING]
Generate a concrete, actionable layout plan for a specific target and WRITE it to the file system. TARGET: {target} | TARGET_TYPE: {target_type} | LAYOUT_ID: {layout_id}
## Context
TARGET: {target}
TARGET_TYPE: {target_type}
LAYOUT_ID: {layout_id}
BASE_PATH: {base_path} BASE_PATH: {base_path}
{IF --session: PROJECT_REQUIREMENTS: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)} {IF --session: PROJECT_REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
## Task ## Task
Research, design, and WRITE a modern, innovative layout plan specifically for '{target}'. Research and generate layout plan JSON for '{target}' ({target_type}).
## Research Phase (Use MCP Tools) ## Research (MCP Required)
1. Search for modern {target_type} layout patterns: mcp__exa__get_code_context_exa(
mcp__exa__get_code_context_exa( query=\"modern {target} {target_type} layout patterns 2024 2025\",
query=\"modern {target} {target_type} layout design patterns 2024 2025\", tokensNum=\"dynamic\"
tokensNum=\"dynamic\" )
)
2. Search for {target}-specific UI best practices
## Layout Planning Rules ## Output File
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json)
**For PAGES (target_type='page')**: ## JSON Structure (Required Fields)
- Define macro-layout: main regions (header, sidebar, main, footer)
- Specify grid/flexbox structure for content organization
- Define responsive breakpoints and behavior
- Include navigation and page-level components
**For COMPONENTS (target_type='component')**:
- Define micro-layout: internal element arrangement
- Specify alignment, spacing, and element sizing
- Focus on component-specific structure (no header/footer)
- Optimize for reusability and composition
## File Write Instructions
Generate layout plan JSON and WRITE it using Write() tool:
**Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.json
**Content** - JSON with this EXACT structure:
```json ```json
{ {
\"id\": \"layout-{layout_id}\", "id": "layout-{layout_id}",
\"target\": \"{target}\", "target": "{target}",
\"target_type\": \"{target_type}\", "target_type": "{target_type}",
\"name\": \"Descriptive name (2-4 words)\", "name": "Descriptive name (2-4 words)",
\"description\": \"Detailed description (2-3 sentences explaining structure, use cases, and unique aspects)\", "description": "2-3 sentences",
\"structure\": { "structure": {
// For pages, include: // IF page: type, regions, grid, sidebar, responsive
\"type\": \"sidebar-main\" | \"centered\" | \"asymmetric\" | \"grid-dashboard\", // IF component: arrangement, alignment, spacing, element_order
\"regions\": [\"header\", \"sidebar\", \"main\", \"footer\"],
\"grid\": {
\"columns\": 12,
\"rows\": \"auto\",
\"gap\": \"var(--spacing-6)\"
},
\"sidebar\": {
\"position\": \"left\" | \"right\",
\"width\": \"250px\",
\"fixed\": true,
\"collapsible\": true
},
\"responsive\": {
\"mobile\": {\"columns\": 1, \"sidebar\": \"hidden\"},
\"tablet\": {\"columns\": 6, \"sidebar\": \"overlay\"},
\"desktop\": {\"columns\": 12, \"sidebar\": \"fixed\"}
},
// For components, include:
\"arrangement\": \"flex-column\" | \"flex-row\" | \"grid\",
\"alignment\": \"center\" | \"start\" | \"end\" | \"stretch\",
\"spacing\": \"compact\" | \"normal\" | \"relaxed\",
\"element_order\": [\"icon\", \"title\", \"description\", \"action\"]
}, },
\"semantic_hints\": [ "semantic_hints": [...],
\"dashboard\", "accessibility_features": [...],
\"data-visualization\", "research_references": [...]
\"navigation-sidebar\",
\"card-based\"
],
\"accessibility_features\": [
\"skip-navigation\",
\"landmark-regions\",
\"keyboard-navigation\",
\"screen-reader-optimized\"
],
\"research_references\": [
\"URL or description of research source 1\",
\"URL or description of research source 2\"
]
} }
``` ```
## Write Operation Instructions ## Requirements
- Use Write() tool with the absolute path provided above - Research-informed, target-specific, meaningfully different from other layout IDs
- Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates') - Write file directly (not text output)
- Verify write operation succeeds
## Example Write Operation
```javascript
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", JSON.stringify(layout_plan, null, 2))
```
## Completion
Report successful file creation with path confirmation.
## Critical Requirements
- ✅ Layout plan is ONLY for '{target}' - tailor to this specific target's needs
- ✅ Consider {target_type} type (page vs component) when designing structure
- ✅ Research modern patterns using MCP tools before designing
- ✅ Provide concrete, implementable structure (not abstract descriptions)
- ✅ Different layout IDs should explore meaningfully different approaches
- ✅ Use semantic naming and clear documentation
- ✅ Write file directly using Write() tool - do NOT return contents as text
" "
# Wait for all agent tasks to complete # Wait for all agent tasks to complete
@@ -343,188 +266,44 @@ FOR layout_id IN range(1, layout_variants + 1):
Task(ui-design-agent): " Task(ui-design-agent): "
[UI_LAYOUT_TEMPLATE_GENERATION] [UI_LAYOUT_TEMPLATE_GENERATION]
🚨 **CRITICAL: TARGET INDEPENDENCE REQUIREMENT** 🚨 🚨 TARGET INDEPENDENCE: Generate template for EXACTLY ONE target: '{target}' (standalone, reusable)
You are generating a template for EXACTLY ONE target: '{target}'.
- Do NOT include content from other targets in the workflow
- This template is for '{target}' ONLY - treat it as a standalone UI entity
- Even if '{target}' might coexist with other targets in a final application,
your task is to create an INDEPENDENT, REUSABLE template for '{target}' alone
Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy.
🎯 **CRITICAL REQUIREMENTS**:
✅ **ADAPTIVE**: Multi-device responsive design (mobile, tablet, desktop)
✅ **STYLE-SWITCHABLE**: Support runtime theme/style switching via CSS variables
✅ **TOKEN-DRIVEN**: 100% CSS variable usage, zero hardcoded values
✅ **INDEPENDENT**: Template for '{target}' only, no other targets included
✅ **RESEARCH-INFORMED**: Use MCP tools to research modern UI patterns as needed
## Context
LAYOUT_ID: {layout_id} | TARGET: {target} | TARGET_TYPE: {target_type} LAYOUT_ID: {layout_id} | TARGET: {target} | TARGET_TYPE: {target_type}
BASE_PATH: {base_path} BASE_PATH: {base_path}
{IF --session: Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md} {IF --session: REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
**Target Type Details**: ## Layout Plan to Implement
{IF target_type == "page": **Path**: {layout_json_path}
- Type: Full-page layout | Wrapper: Complete HTML document (<html>, <head>, <body>) **Plan**: {JSON.stringify(layout_plan, null, 2)}
- Navigation: Include header/navigation | Footer: Include page footer
- Content: Complete page content structure
}
{ELSE IF target_type == "component":
- Type: Isolated UI component | Wrapper: Minimal container for demonstration
- Navigation: Exclude header/footer | Container: Simple wrapper (e.g., <div class=\"component-container\">)
- Content: Focus solely on component design
}
## Task ## Task
Generate TWO files that work together as a reusable template. Generate TWO template files implementing the layout plan above:
1. HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
2. CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
### File 1: HTML Template (`{target}-layout-{layout_id}.html`) ## HTML Requirements
- Semantic HTML5 + ARIA attributes
**Structure Requirements**: - Wrapper: {IF page: Full document (header/nav/main/footer) | IF component: Minimal container}
- Semantic HTML5 elements with ARIA attributes - ⚠️ CRITICAL: Include CSS placeholders in <head>:
- Complete {target_type} wrapper (full document for pages, minimal for components)
- Zero hardcoded styles, colors, or spacing
- Responsive structure ready for mobile/tablet/desktop
**⚠️ CRITICAL: CSS Placeholder Links**
You MUST include these EXACT placeholder links in the `<head>` section:
```html
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
```
**Placeholder Rules**:
1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
3. DO NOT substitute with actual paths - the script handles this
4. DO NOT add any other CSS `<link>` tags
5. These enable runtime style switching for all variants
**Complete HTML Template Examples**:
{IF target_type == \"page\":
```html
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>{target} - Layout {layout_id}</title>
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\"> <link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\"> <link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
</head>
<body>
<header><nav aria-label=\"Main navigation\"><!-- Nav content --></nav></header>
<main><!-- Page content --></main>
<footer><!-- Footer content --></footer>
</body>
</html>
```
}
{ELSE IF target_type == \"component\": ## CSS Requirements
```html - Token-driven: ALL values use var() (zero hardcoded values)
<!DOCTYPE html> - Mobile-first responsive design
<html lang=\"en\"> - Available tokens ({len(all_token_vars)} variables):
<head> * Colors: --color-brand-primary, --color-surface-background, --color-text-primary, ...
<meta charset=\"UTF-8\"> * Typography: --font-family-heading, --font-size-base, --font-weight-bold, ...
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> * Spacing: --spacing-0 through --spacing-24
<title>{target} Component - Layout {layout_id}</title> * Radius: --border-radius-none, --border-radius-sm, ..., --border-radius-full
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\"> * Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\"> * Breakpoints: --breakpoint-sm, --breakpoint-md, --breakpoint-lg
</head>
<body>
<div class=\"component-container\">
<!-- Component content only -->
</div>
</body>
</html>
```
}
### File 2: CSS Template (`{target}-layout-{layout_id}.css`) ## Write Operations
- 🎨 **TOKEN-DRIVEN STYLING**: ALL values use `var()` for dynamic theme switching
- 🔄 **RUNTIME SWITCHABLE**: `background-color: var(--color-surface-background);`
- 🚫 **ZERO LITERALS**: NO hardcoded values (#4F46E5, 16px, Arial)
- 📐 **SEMANTIC NAMING**: BEM or descriptive class naming
- 📱 **MOBILE-FIRST**: Responsive design using token-based breakpoints
- {IF target_type == "component": "Focus styles on component only, minimal global styles"}
## Layout Plan (Target-Specific)
Implement the following pre-defined layout plan for this target:
**Layout JSON Path**: {layout_json_path}
**Layout Plan**:
```json
{JSON.stringify(layout_plan, null, 2)}
```
**Critical**: Your job is to IMPLEMENT this exact layout plan, not to redesign it.
- Follow the structure defined in the 'structure' field
- Use semantic hints for appropriate HTML elements
- Respect the target_type (page vs component) wrapper requirements
- Apply the specified responsive behavior
## Token Usage Requirements (STRICT - USE EXACT NAMES)
**CRITICAL**: You MUST use ONLY the variable names listed below.
DO NOT invent variable names like --color-background-base, --radius-md, --transition-base, etc.
**Available Variables** ({len(all_token_vars)} total):
- Color variables ({len(color_vars)}): --color-brand-primary, --color-surface-background, --color-text-primary, etc.
- Typography variables ({len(typography_vars)}): --font-family-heading, --font-size-base, --font-weight-bold, etc.
- Spacing variables ({len(spacing_vars)}): --spacing-0, --spacing-1, ..., --spacing-24
- Border radius ({len(radius_vars)}): --border-radius-none, --border-radius-sm, ..., --border-radius-full
- Shadows ({len(shadow_vars)}): --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
- Breakpoints ({len(breakpoint_vars)}): --breakpoint-sm, --breakpoint-md, --breakpoint-lg, etc.
**STRICT RULES**:
1. Use ONLY the variables listed above - NO custom variable names
2. If you need a value not in the list, use the closest semantic match
3. For missing tokens (like transitions), use literal CSS values: `transition: all 0.2s ease;`
4. NO hardcoded colors, fonts, or spacing (e.g., #4F46E5, 16px, Arial)
5. All `var()` references must match exact variable names above
## File Write Instructions
Generate TWO template files and WRITE them using Write() tool:
### File 1: HTML Template
**Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
**Content**: Reusable HTML structure with CSS placeholders
### File 2: CSS Template
**Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
**Content**: Structural CSS using var() for all values
## Write Operation Instructions
- Use Write() tool for both files with absolute paths provided above
- Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates')
- Verify each write operation succeeds
## Example Write Operations
```javascript
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content) Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content)
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.css\", css_content) Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.css\", css_content)
```
## Completion Report completion with file paths. Write files directly (not text output).
Report successful file creation for both HTML and CSS templates with path confirmation.
🎯 **CRITICAL QUALITY GATES**:
✅ **ADAPTIVE**: Works on mobile (375px), tablet (768px), desktop (1024px+)
✅ **STYLE-SWITCHABLE**: Change {{TOKEN_CSS}} link → instant theme switching
✅ **TOKEN-ONLY**: 100% var() usage, inspectable with \"Search for: #|px|rem\" → 0 matches in values
✅ **REUSABLE**: Same HTML/CSS structure works for ALL style variants
✅ **FILE-WRITTEN**: Files written directly to file system, not returned as text
**Wrapper Strategy**:
{IF target_type == "page": Use complete HTML document structure with navigation and footer.}
{ELSE: Use minimal wrapper with component container only.}
DO NOT return file contents as text - write them directly using Write() tool.
" "
REPORT: "⏳ Phase 2a: Waiting for agents to complete template generation..." REPORT: "⏳ Phase 2a: Waiting for agents to complete template generation..."
@@ -656,32 +435,22 @@ FOR style_id IN range(1, style_variants + 1):
Task(@ui-design-agent): " Task(@ui-design-agent): "
[CROSS_PAGE_CONSISTENCY_VALIDATION] [CROSS_PAGE_CONSISTENCY_VALIDATION]
Validate design consistency across multiple {target_type}s for Style-{style_id} Layout-{layout_id}
🎯 **VALIDATION FOCUS**:
✅ **ADAPTIVE CONSISTENCY**: Same responsive behavior across all pages
✅ **STYLE-SWITCHING**: Verify token references enable uniform theme switching
✅ **CROSS-PAGE HARMONY**: Shared components use identical CSS variables
## Context
STYLE_ID: {style_id} | LAYOUT_ID: {layout_id} | TARGETS: {target_list} | TARGET_TYPE: {target_type} STYLE_ID: {style_id} | LAYOUT_ID: {layout_id} | TARGETS: {target_list} | TARGET_TYPE: {target_type}
BASE_PATH: {base_path} BASE_PATH: {base_path}
## Input Files ## Input
FOR each target: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css (all targets)
## Validation Tasks ## Validate
1. **Shared Component Consistency**: Check header/nav/footer structure matches 1. Shared component structure (header/nav/footer)
2. **Token Usage Consistency**: Verify same design-tokens file, no hardcoded values 2. Token usage consistency (no hardcoded values)
3. **Accessibility Consistency**: ARIA attributes, heading hierarchy, landmark roles 3. Accessibility compliance (ARIA, headings, landmarks)
4. **Layout Strategy Adherence**: Layout-{layout_id} strategy applied consistently 4. Layout strategy adherence
## Output ## Output
Generate consistency report markdown file at: Write({base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md, validation_report)
{base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md
Include validation results, issues found, and recommendations. Focus on shared elements. Page-specific variations are acceptable.
Focus on truly shared elements. Page-specific content variations are acceptable.
" "
# Aggregate consistency reports # Aggregate consistency reports

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

@@ -31,6 +31,16 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
**Ideal For**: MVP development, high-fidelity prototyping, design replication, studying successful patterns **Ideal For**: MVP development, high-fidelity prototyping, design replication, studying successful patterns
## Key Features
- **Fast-Track Imitation**: ~2-3× faster than explore-auto by bypassing consolidation phase
- **Reference-Driven**: Requires URL or images as primary design source for accurate replication
- **Auto-Screenshot Capability**: Intelligent fallback (Playwright → Chrome → Manual upload) for URL-based workflows
- **Single-Style Focus**: Always generates 1 style × 1 layout × N targets for streamlined execution
- **Consolidation Bypass**: Direct design token extraction saves 30-60s per workflow
- **Interactive Confirmation**: User validates inferred targets before execution to prevent mistakes
- **Flexible Target Types**: Supports both full-page layouts and isolated UI components
## Core Rules ## Core Rules
1. **Start Immediately**: TodoWrite initialization → Phase 0 execution 1. **Start Immediately**: TodoWrite initialization → Phase 0 execution
@@ -41,13 +51,45 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
## Parameter Requirements ## Parameter Requirements
**Required** (at least one): `--url "<url>"` OR `--images "<glob>"` **Required Parameters** (at least one must be provided):
- `--url "<url>"`: Reference website URL for style imitation (supports auto-screenshot)
- `--images "<glob>"`: Reference image paths (e.g., `refs/*.png`, `design-refs/*.jpg`)
**Optional**: `--targets "<list>"`, `--target-type "page|component"`, `--session <id>`, `--prompt "<desc>"` **Optional Parameters** (all have smart defaults):
- `--targets "<list>"`: Comma-separated targets (pages/components) to generate
- Examples: `"home,dashboard"`, `"navbar,hero,card"`
- If omitted: inferred from `--prompt` or defaults to `["home"]`
- `--target-type "page|component"`: Explicitly set target type
- `page`: Full-page layouts with complete structure
- `component`: Isolated UI elements with minimal wrapper
- Default: intelligent detection based on target names
- `--session <id>`: Workflow session ID (e.g., `WFS-ecommerce`)
- If provided: integrates with session brainstorming artifacts
- If omitted: runs in standalone mode
- `--prompt "<description>"`: Design guidance and target hints
- Used for target inference and style extraction refinement
- Examples: `"Imitate dark mode for dashboard"`, `"Focus on minimalist design"`
**Legacy**: `--pages "<list>"` (alias for `--targets` with type=page) **Legacy Parameters** (maintained for backward compatibility):
- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
**Not Supported**: `--style-variants`, `--layout-variants`, `--batch-plan` **Not Supported** (use `/workflow:ui-design:explore-auto` instead):
- `--style-variants`, `--layout-variants`, `--batch-plan`
**Input Rules**:
- Must provide at least one: `--url` OR `--images`
- Multiple parameters can be combined for guided imitation
- If `--targets` not provided, intelligently inferred from prompt or defaults to `["home"]`
- URL and images can be used together (screenshot + additional references)
**Supported Target Types**:
- **Pages** (full layouts): home, dashboard, settings, profile, login, pricing, etc.
- **Components** (UI elements):
- Navigation: navbar, header, menu, sidebar, tabs
- Content: hero, card, list, table, gallery
- Input: form, search, filter, button
- Feedback: modal, alert, toast, badge
- Other: footer, dropdown, avatar, pagination
## 5-Phase Execution ## 5-Phase Execution
@@ -90,12 +132,45 @@ IF NOT validated_targets: validated_targets = ["home"]; target_type = "page"
type_emoji = "📄" IF target_type == "page" ELSE "🧩" type_emoji = "📄" IF target_type == "page" ELSE "🧩"
type_label = "pages" IF target_type == "page" ELSE "components" type_label = "pages" IF target_type == "page" ELSE "components"
REPORT: "📋 Imitate mode: {len(validated_targets)} {type_label} with single style" # Interactive confirmation
DISPLAY_CONFIRMATION(target_type, target_source, validated_targets):
"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
"⚡ IMITATE MODE CONFIRMATION"
"Type: {target_type} | Source: {target_source}"
"Targets ({count}): {', '.join(validated_targets)}"
"Reference: {url_value OR images_pattern}"
"Options: 'continue/yes' | 'targets: a,b' | 'skip: x' | 'add: y' | 'type: page|component'"
"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
user_input = WAIT_FOR_USER_INPUT()
# Process user modifications
MATCH user_input:
"continue|yes|ok" → proceed
"targets: ..." → validated_targets = parse_new_list()
"skip: ..." → validated_targets = remove_items()
"add: ..." → validated_targets = add_items()
"type: ..." → target_type = extract_type()
default → proceed with current list
REPORT: "✅ Confirmed: {len(validated_targets)} {type_label} with single style"
REPORT: " {type_emoji} Targets: {', '.join(validated_targets)} | Type: {target_type} | Reference: {url_value OR images_pattern}" REPORT: " {type_emoji} Targets: {', '.join(validated_targets)} | Type: {target_type} | Reference: {url_value OR images_pattern}"
STORE: run_id, base_path, inferred_target_list = validated_targets, target_type STORE: run_id, base_path, inferred_target_list = validated_targets, target_type
``` ```
**Helper Function: detect_target_type()**
```bash
detect_target_type(target_list):
page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", "pricing", "about", "contact", ...]
component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", "modal", "alert", "dropdown", ...]
page_matches = count_matches(target_list, page_keywords + ["page", "screen", "view"])
component_matches = count_matches(target_list, component_keywords + ["component", "widget", "element"])
RETURN "component" IF component_matches > page_matches ELSE "page"
```
### Phase 0.5: URL Screenshot Capture (Auto-Fallback) ### Phase 0.5: URL Screenshot Capture (Auto-Fallback)
**Condition**: Only if `--url` provided **Condition**: Only if `--url` provided
@@ -163,7 +238,7 @@ command = "/workflow:ui-design:extract --base-path \"{base_path}\" {url_flag} {i
REPORT: "🚀 Phase 1: Style Extraction | Source: {source_desc} | Mode: Single style (imitation-optimized)" REPORT: "🚀 Phase 1: Style Extraction | Source: {source_desc} | Mode: Single style (imitation-optimized)"
SlashCommand(command) SlashCommand(command) # → Phase 2
``` ```
### Phase 2: Fast Token Adaptation (Bypass Consolidate) ### Phase 2: Fast Token Adaptation (Bypass Consolidate)
@@ -217,18 +292,19 @@ command = "/workflow:ui-design:generate --base-path \"{base_path}\" --targets \"
REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}" REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}"
REPORT: " {type_emoji} Targets: {targets_string} | Mode: 1×1 (imitation-optimized)" REPORT: " {type_emoji} Targets: {targets_string} | Mode: 1×1 (imitation-optimized)"
SlashCommand(command) SlashCommand(command) # → Phase 4
# Result: Prototypes: {target}-style-1-layout-1.html, Total: len(inferred_target_list), Type: {target_type} # Output: Prototypes: {target}-style-1-layout-1.html, Total: len(inferred_target_list), Type: {target_type}
``` ```
### Phase 4: Design System Integration ### Phase 4: Design System Integration
```bash ```bash
IF --session: IF --session:
SlashCommand("/workflow:ui-design:update --session {session_id}") SlashCommand("/workflow:ui-design:update --session {session_id}") # → Complete
ELSE: ELSE:
REPORT: "ℹ️ Standalone mode: Skipping integration | Prototypes at: {base_path}/prototypes/" REPORT: "ℹ️ Standalone mode: Skipping integration | Prototypes at: {base_path}/prototypes/"
# → Complete (standalone)
``` ```
## TodoWrite Pattern ## TodoWrite Pattern
@@ -301,7 +377,7 @@ TodoWrite({todos: [
# Continues: 1 → 2 → 3 → 4 # Continues: 1 → 2 → 3 → 4
``` ```
## Final Completion Message ## Completion Output
``` ```
✅ UI Design Imitation Complete! ✅ UI Design Imitation Complete!