mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-30 20:21:09 +08:00
refactor: unify UI design workflow target parameters for pages and components
Consolidate separate page/component modes into a unified target system to reduce code duplication and simplify the workflow parameter model. Changes: - Merge --pages and --components into unified --targets parameter - Add --target-type (auto|page|component) with intelligent detection - Remove Phase 0d from explore-auto.md (131 lines of duplicate logic) - Implement detect_target_type() helper for automatic classification - Update generate.md to support adaptive wrapper generation - Full HTML structure for pages - Minimal wrapper for isolated components - Update imitate-auto.md and update.md for parameter consistency - Enhance ui-design-agent.md with adaptive design capabilities - Maintain full backward compatibility with legacy syntax Benefits: - Code reduction: -35% in target inference logic (255 → 165 lines) - Maintenance: Single unified logic path vs dual implementations - Extensibility: Foundation for future mixed-mode support - UX: Simpler parameter model with automatic type detection Technical Details: - explore-auto.md: 605 lines changed (unified Phase 0c) - generate.md: 353 lines changed (targets + adaptive wrapper) - Net change: +685 insertions, -504 deletions across 5 files All existing workflows remain compatible via legacy parameter support. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -1,15 +1,16 @@
|
||||
---
|
||||
name: explore-auto
|
||||
description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations for pages OR components (3×3 matrix exploration)
|
||||
usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>" | --components "<list>"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
|
||||
argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\" | --components \"navbar,hero,card\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
|
||||
description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration)
|
||||
usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
|
||||
argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--targets \"dashboard,auth,navbar,hero\"] [--target-type \"auto\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author"
|
||||
- /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options"
|
||||
- /workflow:ui-design:explore-auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png"
|
||||
- /workflow:ui-design:explore-auto --components "navbar,hero" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
|
||||
- /workflow:ui-design:explore-auto --components "card,form" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||
- /workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
|
||||
- /workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||
- /workflow:ui-design:explore-auto --targets "home,dashboard" --target-type "page"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
@@ -17,23 +18,24 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
|
||||
## Overview & Execution Model
|
||||
|
||||
**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning. Supports two exploration modes:
|
||||
**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning.
|
||||
|
||||
**Exploration Modes**:
|
||||
- **Page Mode** (default): Generates `style_variants × layout_variants × pages` full-page prototypes
|
||||
- **Component Mode**: Generates `style_variants × layout_variants × components` isolated component prototypes
|
||||
**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be:
|
||||
- **Pages** (full-page layouts): home, dashboard, settings, etc.
|
||||
- **Components** (isolated UI elements): navbar, card, hero, form, etc.
|
||||
- **Mixed**: Can combine both in a single workflow
|
||||
|
||||
**Autonomous Flow**:
|
||||
1. User triggers: `/workflow:ui-design:explore-auto [params]`
|
||||
2. Phase 1 (style-extract) → Auto-continues
|
||||
3. Phase 2 (style-consolidate) → Auto-continues
|
||||
4. Phase 3 (ui-generate) → Auto-continues with appropriate mode
|
||||
4. Phase 3 (ui-generate) → Auto-continues with unified target list
|
||||
5. Phase 4 (design-update) → Auto-continues
|
||||
6. Phase 5 (batch-plan, optional) → Reports completion
|
||||
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon completion, coordinator constructs next command and executes immediately. No user intervention required.
|
||||
|
||||
**Mode Selection**: Determined by `--pages` vs `--components` parameter (mutually exclusive).
|
||||
**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
|
||||
|
||||
## Core Rules
|
||||
|
||||
@@ -46,28 +48,33 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
## Parameter Requirements
|
||||
|
||||
**Optional Parameters** (all have smart defaults):
|
||||
- `--pages "<list>"`: Pages to generate (inferred from prompt/session if omitted) - **Page Mode**
|
||||
- `--components "<list>"`: Components to generate (inferred from prompt if omitted) - **Component Mode**
|
||||
- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted)
|
||||
- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection)
|
||||
- `--session <id>`: Workflow session ID (standalone mode if omitted)
|
||||
- `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
|
||||
- `--prompt "<description>"`: Design style and pages/components description
|
||||
- `--prompt "<description>"`: Design style and target description
|
||||
- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
|
||||
- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
|
||||
- `--batch-plan`: Auto-generate implementation tasks after design-update
|
||||
|
||||
**Input Rules**:
|
||||
- Must provide at least one: `--images` or `--prompt`
|
||||
- Both can be combined for guided analysis
|
||||
- `--pages` and `--components` are **mutually exclusive**
|
||||
- Default mode: **Page Mode** if neither specified
|
||||
**Legacy Parameters** (maintained for backward compatibility):
|
||||
- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
|
||||
- `--components "<list>"`: Alias for `--targets` with `--target-type component`
|
||||
|
||||
**Supported Component Types**:
|
||||
- **Navigation**: navbar, header, menu, breadcrumb, tabs, sidebar
|
||||
- **Content**: hero, card, list, table, grid, timeline
|
||||
- **Input**: form, search, filter, input-group
|
||||
- **Feedback**: modal, alert, toast, badge, progress
|
||||
- **Media**: gallery, carousel, video-player, image-card
|
||||
- **Other**: footer, pagination, dropdown, tooltip, avatar
|
||||
**Input Rules**:
|
||||
- Must provide at least one: `--images` or `--prompt` or `--targets`
|
||||
- Multiple parameters can be combined for guided analysis
|
||||
- If `--targets` not provided, intelligently inferred from prompt/session
|
||||
|
||||
**Supported Target Types**:
|
||||
- **Pages** (full layouts): home, dashboard, settings, profile, login, etc.
|
||||
- **Components** (UI elements):
|
||||
- Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
|
||||
- Content: hero, card, list, table, grid, timeline
|
||||
- Input: form, search, filter, input-group
|
||||
- Feedback: modal, alert, toast, badge, progress
|
||||
- Media: gallery, carousel, video-player, image-card
|
||||
- Other: footer, pagination, dropdown, tooltip, avatar
|
||||
|
||||
**Intelligent Prompt Parsing**: Extracts variant counts from natural language:
|
||||
- "Generate **3 style variants**" → `--style-variants 3`
|
||||
@@ -77,11 +84,14 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
|
||||
## Execution Modes
|
||||
|
||||
**Matrix Mode** (default and only):
|
||||
- Generates `style_variants × layout_variants × pages` prototypes
|
||||
**Matrix Mode** (unified):
|
||||
- Generates `style_variants × layout_variants × targets` prototypes
|
||||
- **Phase 1**: `style_variants` style options
|
||||
- **Phase 2**: `style_variants` independent design systems
|
||||
- **Phase 3**: `style_variants × layout_variants` prototypes per page
|
||||
- **Phase 3**: `style_variants × layout_variants × targets` prototypes
|
||||
- Pages: Full-page layouts with complete structure
|
||||
- Components: Isolated elements with minimal wrapper
|
||||
- Mixed: Combination based on intelligent detection
|
||||
|
||||
**Integrated vs. Standalone**:
|
||||
- `--session` flag determines session integration or standalone execution
|
||||
@@ -138,261 +148,206 @@ Write({base_path}/.run-metadata.json): {
|
||||
STORE: run_id, base_path
|
||||
```
|
||||
|
||||
### Phase 0c: Enhanced Page Inference with Dynamic Analysis
|
||||
### Phase 0c: Unified Target Inference with Intelligent Type Detection
|
||||
```bash
|
||||
page_list = []
|
||||
page_source = "none"
|
||||
target_list = []
|
||||
target_type = "auto" # auto, page, component
|
||||
target_source = "none"
|
||||
|
||||
# Priority 1: Explicit --pages parameter
|
||||
# Step 1: Handle legacy parameters (backward compatibility)
|
||||
IF --pages provided:
|
||||
raw_pages = {--pages value}
|
||||
# Split by comma/semicolon/Chinese comma, clean and normalize
|
||||
page_list = split_and_clean(raw_pages, delimiters=[",", ";", "、"])
|
||||
page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
|
||||
page_source = "explicit"
|
||||
REPORT: "📋 Using explicitly provided pages: {', '.join(page_list)}"
|
||||
target_list = split_and_clean(--pages, delimiters=[",", ";", "、"])
|
||||
target_type = "page"
|
||||
target_source = "explicit_legacy"
|
||||
REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}"
|
||||
ELSE IF --components provided:
|
||||
target_list = split_and_clean(--components, delimiters=[",", ";", "、"])
|
||||
target_type = "component"
|
||||
target_source = "explicit_legacy"
|
||||
REPORT: "🧩 Using explicitly provided components (legacy): {', '.join(target_list)}"
|
||||
|
||||
# Priority 2: Dynamic prompt decomposition (Claude analysis)
|
||||
# Step 2: Handle unified --targets parameter
|
||||
ELSE IF --targets provided:
|
||||
target_list = split_and_clean(--targets, delimiters=[",", ";", "、"])
|
||||
target_source = "explicit"
|
||||
|
||||
# Override type if explicitly set
|
||||
IF --target-type provided AND --target-type != "auto":
|
||||
target_type = --target-type
|
||||
REPORT: "🎯 Using explicitly provided targets with type '{target_type}': {', '.join(target_list)}"
|
||||
ELSE:
|
||||
# Intelligent type detection
|
||||
target_type = detect_target_type(target_list)
|
||||
REPORT: "🎯 Using explicitly provided targets (detected type: {target_type}): {', '.join(target_list)}"
|
||||
|
||||
# Step 3: Dynamic prompt analysis
|
||||
ELSE IF --prompt provided:
|
||||
REPORT: "🔍 Analyzing prompt to identify pages..."
|
||||
REPORT: "🔍 Analyzing prompt to identify targets..."
|
||||
|
||||
# Internal Claude analysis
|
||||
analysis_prompt = """
|
||||
Analyze the UI design request and identify all distinct pages/screens.
|
||||
Analyze the UI design request and identify targets (pages or components) with their types.
|
||||
|
||||
Request: "{prompt_text}"
|
||||
|
||||
Output JSON:
|
||||
{
|
||||
"pages": [{"name": "page-name", "purpose": "description", "priority": "high|medium|low"}],
|
||||
"shared_components": ["header", "footer"],
|
||||
"navigation_structure": {"primary": ["home"], "secondary": ["settings"]}
|
||||
"targets": [
|
||||
{"name": "normalized-name", "type": "page|component", "purpose": "description", "priority": "high|medium|low"}
|
||||
],
|
||||
"primary_type": "page|component|mixed",
|
||||
"shared_elements": ["header", "footer"],
|
||||
"context": "application context description"
|
||||
}
|
||||
|
||||
Rules:
|
||||
- Normalize to URL-friendly (lowercase, hyphens, no spaces)
|
||||
- Consolidate synonyms (homepage → home, user-profile → profile)
|
||||
- Identify hierarchical relationships
|
||||
- Prioritize by user intent
|
||||
- Common patterns: home, dashboard, settings, profile, login, signup
|
||||
- Detect type: page (full layouts like home, dashboard) vs component (UI elements like navbar, card)
|
||||
- Consolidate synonyms (homepage → home, navigation → navbar)
|
||||
- Common pages: home, dashboard, settings, profile, login, signup
|
||||
- Common components: navbar, header, hero, card, form, button, modal, footer
|
||||
- If prompt mentions "page", "screen", "view" → type: page
|
||||
- If prompt mentions "component", "element", "widget" → type: component
|
||||
"""
|
||||
|
||||
page_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
||||
page_list = extract_page_names_from_structure(page_structure)
|
||||
page_source = "prompt_analysis"
|
||||
target_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
||||
target_list = extract_target_names_from_structure(target_structure)
|
||||
target_type = target_structure.primary_type OR detect_target_type(target_list)
|
||||
target_source = "prompt_analysis"
|
||||
|
||||
IF page_list:
|
||||
REPORT: "📋 Identified pages from prompt:"
|
||||
FOR page IN page_structure.pages:
|
||||
REPORT: " • {page.name}: {page.purpose} [{page.priority}]"
|
||||
IF page_structure.shared_components:
|
||||
REPORT: "🔧 Shared components: {', '.join(shared_components)}"
|
||||
IF target_list:
|
||||
REPORT: "🎯 Identified targets from prompt (type: {target_type}):"
|
||||
FOR target IN target_structure.targets:
|
||||
icon = "📄" IF target.type == "page" ELSE "🧩"
|
||||
REPORT: " {icon} {target.name}: {target.purpose} [{target.priority}]"
|
||||
IF target_structure.shared_elements:
|
||||
REPORT: "🔧 Shared elements: {', '.join(shared_elements)}"
|
||||
|
||||
# Priority 3: Extract from synthesis-specification.md
|
||||
# Step 4: Extract from synthesis-specification.md (for session mode)
|
||||
ELSE IF --session AND exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
|
||||
synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
page_list = extract_pages_from_synthesis(synthesis)
|
||||
page_source = "synthesis"
|
||||
REPORT: "📋 Extracted from synthesis: {', '.join(page_list)}"
|
||||
target_list = extract_targets_from_synthesis(synthesis) # Returns pages by default
|
||||
target_type = "page"
|
||||
target_source = "synthesis"
|
||||
REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}"
|
||||
|
||||
# Priority 4: Fallback default
|
||||
IF NOT page_list:
|
||||
page_list = ["home"]
|
||||
page_source = "default"
|
||||
REPORT: "⚠️ No pages identified, using default: 'home'"
|
||||
# Step 5: Fallback default
|
||||
IF NOT target_list:
|
||||
target_list = ["home"]
|
||||
target_type = "page"
|
||||
target_source = "default"
|
||||
REPORT: "⚠️ No targets identified, using default: 'home' (page)"
|
||||
|
||||
# Validate page names
|
||||
validated_pages = []
|
||||
invalid_pages = []
|
||||
FOR page IN page_list:
|
||||
cleaned = page.strip().lower().replace(" ", "-")
|
||||
# Validate and clean target names
|
||||
validated_targets = []
|
||||
invalid_targets = []
|
||||
FOR target IN target_list:
|
||||
cleaned = target.strip().lower().replace(" ", "-")
|
||||
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
||||
validated_pages.append(cleaned)
|
||||
validated_targets.append(cleaned)
|
||||
ELSE:
|
||||
invalid_pages.append(page)
|
||||
invalid_targets.append(target)
|
||||
|
||||
IF invalid_pages:
|
||||
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_pages)}"
|
||||
IF invalid_targets:
|
||||
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_targets)}"
|
||||
|
||||
IF NOT validated_pages:
|
||||
validated_pages = ["home"]
|
||||
IF NOT validated_targets:
|
||||
validated_targets = ["home"]
|
||||
target_type = "page"
|
||||
REPORT: "⚠️ All invalid, using default: 'home'"
|
||||
|
||||
# Override target type if explicitly set
|
||||
IF --target-type provided AND --target-type != "auto":
|
||||
target_type = --target-type
|
||||
REPORT: "🔧 Target type overridden to: {target_type}"
|
||||
|
||||
# Interactive confirmation
|
||||
type_emoji = "📄" IF target_type == "page" ELSE ("🧩" IF target_type == "component" ELSE "🎯")
|
||||
type_label = "PAGES" IF target_type == "page" ELSE ("COMPONENTS" IF target_type == "component" ELSE "TARGETS")
|
||||
|
||||
REPORT: ""
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "📌 PAGE LIST CONFIRMATION"
|
||||
REPORT: "{type_emoji} {type_label} CONFIRMATION"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "Source: {page_source}"
|
||||
REPORT: "Pages ({len(validated_pages)}): {', '.join(validated_pages)}"
|
||||
REPORT: "Type: {target_type}"
|
||||
REPORT: "Source: {target_source}"
|
||||
REPORT: "Targets ({len(validated_targets)}): {', '.join(validated_targets)}"
|
||||
REPORT: ""
|
||||
REPORT: "Options:"
|
||||
REPORT: " • 'continue/yes' - proceed"
|
||||
REPORT: " • 'pages: page1,page2' - replace list"
|
||||
REPORT: " • 'skip: page-name' - remove pages"
|
||||
REPORT: " • 'add: page-name' - add pages"
|
||||
REPORT: " • 'targets: item1,item2' - replace list"
|
||||
REPORT: " • 'skip: item-name' - remove targets"
|
||||
REPORT: " • 'add: item-name' - add targets"
|
||||
REPORT: " • 'type: page|component' - change type"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
user_input = WAIT_FOR_USER_INPUT()
|
||||
|
||||
# Process input
|
||||
IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
|
||||
REPORT: "✅ Proceeding with: {', '.join(validated_pages)}"
|
||||
ELSE IF user_input MATCHES r"^pages:\s*(.+)$":
|
||||
new_pages = split_and_clean(extract_after("pages:"), [",", ";"])
|
||||
validated_pages = [p.strip().lower().replace(" ", "-") for p in new_pages if p.strip()]
|
||||
REPORT: "✅ Updated: {', '.join(validated_pages)}"
|
||||
REPORT: "✅ Proceeding with {len(validated_targets)} {target_type}(s): {', '.join(validated_targets)}"
|
||||
ELSE IF user_input MATCHES r"^targets:\s*(.+)$":
|
||||
new_targets = split_and_clean(extract_after("targets:"), [",", ";"])
|
||||
validated_targets = [t.strip().lower().replace(" ", "-") for t in new_targets if t.strip()]
|
||||
REPORT: "✅ Updated: {', '.join(validated_targets)}"
|
||||
ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
|
||||
to_skip = [p.strip().lower() for p in extract_after("skip:").split(",")]
|
||||
validated_pages = [p for p in validated_pages if p not in to_skip]
|
||||
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_pages)}"
|
||||
to_skip = [t.strip().lower() for t in extract_after("skip:").split(",")]
|
||||
validated_targets = [t for t in validated_targets if t not in to_skip]
|
||||
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_targets)}"
|
||||
ELSE IF user_input MATCHES r"^add:\s*(.+)$":
|
||||
to_add = [p.strip().lower().replace(" ", "-") for p in extract_after("add:").split(",") if p.strip()]
|
||||
validated_pages.extend(to_add)
|
||||
validated_pages = list(dict.fromkeys(validated_pages)) # Remove duplicates
|
||||
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_pages)}"
|
||||
to_add = [t.strip().lower().replace(" ", "-") for t in extract_after("add:").split(",") if t.strip()]
|
||||
validated_targets.extend(to_add)
|
||||
validated_targets = list(dict.fromkeys(validated_targets)) # Remove duplicates
|
||||
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_targets)}"
|
||||
ELSE IF user_input MATCHES r"^type:\s*(page|component)$":
|
||||
target_type = extract_after("type:").strip()
|
||||
REPORT: "✅ Type changed to: {target_type}"
|
||||
ELSE:
|
||||
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_pages)}"
|
||||
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_targets)}"
|
||||
|
||||
IF NOT validated_pages:
|
||||
validated_pages = ["home"]
|
||||
IF NOT validated_targets:
|
||||
validated_targets = ["home"]
|
||||
target_type = "page"
|
||||
|
||||
STORE: inferred_page_list = validated_pages
|
||||
STORE: page_inference_source = page_source
|
||||
STORE: page_structure_data = page_structure
|
||||
STORE: exploration_mode = "page"
|
||||
STORE: inferred_target_list = validated_targets
|
||||
STORE: target_type = target_type
|
||||
STORE: target_inference_source = target_source
|
||||
STORE: target_structure_data = target_structure IF exists(target_structure) ELSE {}
|
||||
```
|
||||
|
||||
### Phase 0d: Component Inference (Component Mode Only)
|
||||
**Helper Function: detect_target_type()**
|
||||
```bash
|
||||
component_list = []
|
||||
component_source = "none"
|
||||
exploration_mode = "page" # Default
|
||||
detect_target_type(target_list):
|
||||
# Common page keywords
|
||||
page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth",
|
||||
"landing", "about", "contact", "pricing", "account", "admin"]
|
||||
|
||||
# Determine exploration mode
|
||||
IF --components provided:
|
||||
exploration_mode = "component"
|
||||
raw_components = {--components value}
|
||||
# Split and clean
|
||||
component_list = split_and_clean(raw_components, delimiters=[",", ";", "、"])
|
||||
component_list = [c.strip().lower().replace(" ", "-") for c in component_list if c.strip()]
|
||||
component_source = "explicit"
|
||||
REPORT: "🧩 Using explicitly provided components: {', '.join(component_list)}"
|
||||
# Common component keywords
|
||||
component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form",
|
||||
"modal", "alert", "toast", "menu", "sidebar", "breadcrumb", "tabs",
|
||||
"table", "list", "grid", "carousel", "gallery", "search", "filter"]
|
||||
|
||||
# Component inference from prompt (if no --pages and no --components)
|
||||
ELSE IF --prompt provided AND NOT --pages:
|
||||
REPORT: "🔍 Analyzing prompt to identify components..."
|
||||
page_matches = 0
|
||||
component_matches = 0
|
||||
|
||||
# Internal Claude analysis for components
|
||||
analysis_prompt = """
|
||||
Analyze the UI design request and identify component-level design elements.
|
||||
FOR target IN target_list:
|
||||
IF target IN page_keywords:
|
||||
page_matches += 1
|
||||
ELSE IF target IN component_keywords:
|
||||
component_matches += 1
|
||||
ELSE IF contains_keyword(target, ["page", "screen", "view"]):
|
||||
page_matches += 1
|
||||
ELSE IF contains_keyword(target, ["component", "widget", "element"]):
|
||||
component_matches += 1
|
||||
|
||||
Request: "{prompt_text}"
|
||||
|
||||
Output JSON:
|
||||
{
|
||||
"components": [
|
||||
{"name": "component-type", "purpose": "description", "variants": ["variant1", "variant2"]}
|
||||
],
|
||||
"component_context": "page or section where components appear",
|
||||
"interaction_patterns": ["hover", "click", "scroll"]
|
||||
}
|
||||
|
||||
Component Categories:
|
||||
- Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
|
||||
- Content: hero, card, list, table, grid, timeline
|
||||
- Input: form, search, filter, input-group
|
||||
- Feedback: modal, alert, toast, badge, progress
|
||||
- Media: gallery, carousel, video-player, image-card
|
||||
- Other: footer, pagination, dropdown, tooltip, avatar
|
||||
|
||||
Rules:
|
||||
- Normalize to lowercase with hyphens
|
||||
- Be specific (e.g., "navbar" not "navigation")
|
||||
- Include interaction context
|
||||
"""
|
||||
|
||||
component_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
||||
|
||||
# Check if prompt is component-focused
|
||||
IF component_structure.components AND len(component_structure.components) > 0:
|
||||
component_list = extract_component_names_from_structure(component_structure)
|
||||
component_source = "prompt_analysis"
|
||||
exploration_mode = "component"
|
||||
|
||||
REPORT: "🧩 Identified components from prompt:"
|
||||
FOR comp IN component_structure.components:
|
||||
REPORT: " • {comp.name}: {comp.purpose}"
|
||||
IF component_structure.interaction_patterns:
|
||||
REPORT: "🎯 Interaction patterns: {', '.join(interaction_patterns)}"
|
||||
|
||||
# Validate component names
|
||||
IF exploration_mode == "component":
|
||||
validated_components = []
|
||||
invalid_components = []
|
||||
FOR comp IN component_list:
|
||||
cleaned = comp.strip().lower().replace(" ", "-")
|
||||
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
||||
validated_components.append(cleaned)
|
||||
ELSE:
|
||||
invalid_components.append(comp)
|
||||
|
||||
IF invalid_components:
|
||||
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_components)}"
|
||||
|
||||
IF NOT validated_components:
|
||||
# Fallback to page mode with default page
|
||||
exploration_mode = "page"
|
||||
inferred_page_list = ["home"]
|
||||
REPORT: "⚠️ No valid components, switching to page mode: 'home'"
|
||||
# Decision logic
|
||||
IF component_matches > page_matches:
|
||||
RETURN "component"
|
||||
ELSE IF page_matches > 0 OR len(target_list) == 0:
|
||||
RETURN "page"
|
||||
ELSE:
|
||||
# Interactive confirmation for components
|
||||
REPORT: ""
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🧩 COMPONENT LIST CONFIRMATION"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "Mode: Component Exploration"
|
||||
REPORT: "Source: {component_source}"
|
||||
REPORT: "Components ({len(validated_components)}): {', '.join(validated_components)}"
|
||||
REPORT: ""
|
||||
REPORT: "Options:"
|
||||
REPORT: " • 'continue/yes' - proceed"
|
||||
REPORT: " • 'components: comp1,comp2' - replace list"
|
||||
REPORT: " • 'skip: comp-name' - remove components"
|
||||
REPORT: " • 'add: comp-name' - add components"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
user_input = WAIT_FOR_USER_INPUT()
|
||||
|
||||
# Process input
|
||||
IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
|
||||
REPORT: "✅ Proceeding with: {', '.join(validated_components)}"
|
||||
ELSE IF user_input MATCHES r"^components:\s*(.+)$":
|
||||
new_comps = split_and_clean(extract_after("components:"), [",", ";"])
|
||||
validated_components = [c.strip().lower().replace(" ", "-") for c in new_comps if c.strip()]
|
||||
REPORT: "✅ Updated: {', '.join(validated_components)}"
|
||||
ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
|
||||
to_skip = [c.strip().lower() for c in extract_after("skip:").split(",")]
|
||||
validated_components = [c for c in validated_components if c not in to_skip]
|
||||
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_components)}"
|
||||
ELSE IF user_input MATCHES r"^add:\s*(.+)$":
|
||||
to_add = [c.strip().lower().replace(" ", "-") for c in extract_after("add:").split(",") if c.strip()]
|
||||
validated_components.extend(to_add)
|
||||
validated_components = list(dict.fromkeys(validated_components)) # Remove duplicates
|
||||
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_components)}"
|
||||
ELSE:
|
||||
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_components)}"
|
||||
|
||||
IF NOT validated_components:
|
||||
# Fallback to page mode
|
||||
exploration_mode = "page"
|
||||
inferred_page_list = ["home"]
|
||||
REPORT: "⚠️ No components, switching to page mode: 'home'"
|
||||
|
||||
STORE: inferred_component_list = validated_components IF exploration_mode == "component" ELSE []
|
||||
STORE: component_inference_source = component_source
|
||||
STORE: component_structure_data = component_structure IF exploration_mode == "component" ELSE {}
|
||||
STORE: exploration_mode = exploration_mode # "page" or "component"
|
||||
# Ambiguous - default to page
|
||||
RETURN "page"
|
||||
```
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
@@ -427,49 +382,51 @@ SlashCommand(command)
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Matrix UI Generation (Mode-Aware)
|
||||
### Phase 3: Matrix UI Generation (Unified)
|
||||
**Command**:
|
||||
```bash
|
||||
run_base_flag = "--base-path \"{base_path}\""
|
||||
|
||||
IF exploration_mode == "page":
|
||||
# Page Mode: Generate full pages
|
||||
pages_string = ",".join(inferred_page_list)
|
||||
VERIFY: pages_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
||||
# Build unified targets string
|
||||
targets_string = ",".join(inferred_target_list)
|
||||
VERIFY: targets_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
||||
|
||||
pages_flag = "--pages \"{pages_string}\""
|
||||
command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
# Prepare command with unified parameters
|
||||
targets_flag = "--targets \"{targets_string}\""
|
||||
type_flag = "--target-type \"{target_type}\""
|
||||
|
||||
total_prototypes = style_variants * layout_variants * len(inferred_page_list)
|
||||
REPORT: "🚀 Phase 3: Matrix UI Generation (Page Mode)"
|
||||
REPORT: " Pages: {pages_string}"
|
||||
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
||||
REPORT: " Total: {total_prototypes} full-page prototypes"
|
||||
command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
|
||||
ELSE IF exploration_mode == "component":
|
||||
# Component Mode: Generate isolated components
|
||||
components_string = ",".join(inferred_component_list)
|
||||
VERIFY: components_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
||||
total_prototypes = style_variants * layout_variants * len(inferred_target_list)
|
||||
|
||||
components_flag = "--components \"{components_string}\""
|
||||
command = "/workflow:ui-design:generate {run_base_flag} {components_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
# Report based on type
|
||||
IF target_type == "page":
|
||||
type_icon = "📄"
|
||||
type_label = "Pages"
|
||||
context_note = "Full-page layouts"
|
||||
ELSE IF target_type == "component":
|
||||
type_icon = "🧩"
|
||||
type_label = "Components"
|
||||
context_note = "Isolated elements with minimal wrapper"
|
||||
ELSE:
|
||||
type_icon = "🎯"
|
||||
type_label = "Targets"
|
||||
context_note = "Mixed pages and components"
|
||||
|
||||
total_prototypes = style_variants * layout_variants * len(inferred_component_list)
|
||||
REPORT: "🚀 Phase 3: Matrix UI Generation (Component Mode)"
|
||||
REPORT: " Components: {components_string}"
|
||||
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
||||
REPORT: " Total: {total_prototypes} component prototypes"
|
||||
REPORT: " Context: Components displayed in minimal page wrapper"
|
||||
REPORT: "🚀 Phase 3: Matrix UI Generation"
|
||||
REPORT: " {type_icon} {type_label}: {targets_string}"
|
||||
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
||||
REPORT: " Total: {total_prototypes} prototypes"
|
||||
REPORT: " Context: {context_note}"
|
||||
|
||||
SlashCommand(command)
|
||||
```
|
||||
|
||||
**Result**:
|
||||
- **Page Mode**: `{page}-style-{s}-layout-{l}.html`
|
||||
- **Component Mode**: `{component}-style-{s}-layout-{l}.html`
|
||||
- Total: `style_variants × layout_variants × (pages|components)`
|
||||
- File naming: `{target}-style-{s}-layout-{l}.html`
|
||||
- Total: `style_variants × layout_variants × targets`
|
||||
- Matrix view: `compare.html` with interactive grid
|
||||
- Component isolation: Minimal wrapper for focus on component design
|
||||
- Rendering: Full-page for pages, minimal wrapper for components
|
||||
|
||||
**Auto-Continue**: On completion → Phase 4
|
||||
|
||||
@@ -493,8 +450,13 @@ SlashCommand(command)
|
||||
|
||||
**Execution**:
|
||||
```bash
|
||||
FOR page IN inferred_page_list:
|
||||
SlashCommand("/workflow:plan --agent \"Implement {page} page based on design system\"")
|
||||
FOR target IN inferred_target_list:
|
||||
IF target_type == "page":
|
||||
SlashCommand("/workflow:plan --agent \"Implement {target} page based on design system\"")
|
||||
ELSE IF target_type == "component":
|
||||
SlashCommand("/workflow:plan --agent \"Implement {target} component based on design system\"")
|
||||
ELSE:
|
||||
SlashCommand("/workflow:plan --agent \"Implement {target} based on design system\"")
|
||||
```
|
||||
**Completion**: Workflow complete
|
||||
|
||||
@@ -537,79 +499,95 @@ TodoWrite({todos: [
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Modern minimalist blog with home, article, and author pages"
|
||||
|
||||
# Mode: Page
|
||||
# Auto-detected type: page
|
||||
# Inferred: 3 style variants, 3 layout variants (default)
|
||||
# Pages: home, article, author
|
||||
# Targets: home, article, author
|
||||
# Total: 27 full-page prototypes (3×3×3)
|
||||
```
|
||||
|
||||
### Example 2: Custom 2×2 Matrix with Session (Page Mode)
|
||||
### Example 2: Custom 2×2 Matrix with Session
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
|
||||
|
||||
# Mode: Page
|
||||
# Executes with session integration
|
||||
# Auto-detected from session synthesis
|
||||
# Total: 2×2×N prototypes (N from inference)
|
||||
```
|
||||
|
||||
### Example 3: Component Mode - Navbar Design Comparison
|
||||
### Example 3: Unified - Navbar Design Comparison
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --components "navbar,hero" --prompt "Compare 3 navigation bar designs for SaaS product" --style-variants 3 --layout-variants 2
|
||||
/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs for SaaS product" --style-variants 3 --layout-variants 2
|
||||
|
||||
# Mode: Component
|
||||
# Components: navbar, hero
|
||||
# Explicit type: component
|
||||
# Targets: navbar, hero
|
||||
# Matrix: 3 styles × 2 layouts
|
||||
# Total: 12 component prototypes (3×2×2)
|
||||
# Output: navbar-style-1-layout-1.html, navbar-style-1-layout-2.html, ...
|
||||
```
|
||||
|
||||
### Example 4: Component Mode - Card & Form Exploration
|
||||
### Example 4: Unified - Card & Form Exploration
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --components "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||
/workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||
|
||||
# Mode: Component
|
||||
# Components: card, form, button
|
||||
# Auto-detected type: component (based on keywords)
|
||||
# Targets: card, form, button
|
||||
# Matrix: 2 styles × 3 layouts
|
||||
# Total: 18 component prototypes (2×3×3)
|
||||
# Context: Each component in minimal wrapper for isolated comparison
|
||||
```
|
||||
|
||||
### Example 5: Intelligent Parsing + Batch Planning (Page Mode)
|
||||
### Example 5: Intelligent Parsing + Batch Planning
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan
|
||||
|
||||
# Mode: Page
|
||||
# Auto-detected type: page
|
||||
# Parsed: 4 styles, 2 layouts
|
||||
# Pages: dashboard, settings
|
||||
# Targets: dashboard, settings
|
||||
# Total: 16 full-page prototypes (4×2×2)
|
||||
# Auto-generates implementation tasks for each page
|
||||
# Auto-generates implementation tasks for each target
|
||||
```
|
||||
|
||||
### Example 6: Component Mode - Prompt-Inferred Components
|
||||
### Example 6: Auto-Detected Components from Prompt
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Design exploration for pricing table and testimonial card components" --style-variants 3 --layout-variants 2
|
||||
|
||||
# Mode: Component (auto-detected from prompt)
|
||||
# Inferred components: pricing-table, testimonial-card
|
||||
# Auto-detected type: component (keyword: "components")
|
||||
# Inferred targets: pricing-table, testimonial-card
|
||||
# Matrix: 3 styles × 2 layouts
|
||||
# Total: 12 component prototypes (3×2×2)
|
||||
```
|
||||
|
||||
### Example 7: Legacy Parameter Support
|
||||
```bash
|
||||
# Using legacy --pages parameter (backward compatible)
|
||||
/workflow:ui-design:explore-auto --pages "home,dashboard,settings"
|
||||
|
||||
# Equivalent to: --targets "home,dashboard,settings" --target-type "page"
|
||||
```
|
||||
|
||||
### Example 8: Mixed Mode (Future Enhancement)
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --targets "home,dashboard,navbar,hero,card" --target-type "auto"
|
||||
|
||||
# Auto-detection: home, dashboard → page; navbar, hero, card → component
|
||||
# Generates appropriate wrapper for each target type
|
||||
# Future: Support per-target type specification
|
||||
```
|
||||
|
||||
## Final Completion Message
|
||||
|
||||
**Page Mode**:
|
||||
**Unified Template**:
|
||||
```
|
||||
✅ UI Design Explore-Auto Workflow Complete! (Page Mode)
|
||||
✅ UI Design Explore-Auto Workflow Complete!
|
||||
|
||||
Run ID: {run_id}
|
||||
Session: {session_id or "standalone"}
|
||||
Mode: Full-Page Exploration
|
||||
Type: {target_type_icon} {target_type_label}
|
||||
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes)
|
||||
Input: {images and/or prompt summary}
|
||||
|
||||
Phase 1 - Style Extraction: {style_variants} style variants
|
||||
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{pages_count} = {total_prototypes} page prototypes
|
||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{target_count} = {total_prototypes} prototypes
|
||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
||||
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
|
||||
|
||||
@@ -620,10 +598,13 @@ Phase 4 - Design Update: Brainstorming artifacts updated
|
||||
|
||||
🌐 Interactive Preview: {base_path}/prototypes/compare.html
|
||||
- {style_variants}×{layout_variants} matrix view with synchronized scrolling
|
||||
- Zoom controls and fullscreen mode
|
||||
- {IF target_type == "component": "Isolated rendering with minimal wrapper" ELSE: "Full-page layouts"}
|
||||
- Side-by-side comparison for design decisions
|
||||
- Selection export for implementation
|
||||
|
||||
📄 Pages Explored: {', '.join(inferred_page_list)}
|
||||
{target_type_icon} Targets Explored: {', '.join(inferred_target_list)}
|
||||
Type: {target_type}
|
||||
Context: {IF target_type == "page": "Full-page layouts" ELSE IF target_type == "component": "Isolated UI elements" ELSE: "Mixed targets"}
|
||||
|
||||
{IF batch-plan:
|
||||
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
|
||||
@@ -631,43 +612,15 @@ Next: /workflow:execute to begin implementation
|
||||
}
|
||||
{ELSE:
|
||||
Next Steps:
|
||||
1. Open compare.html to preview all page variants
|
||||
2. Select preferred style×layout combinations per page
|
||||
1. Open compare.html to preview all variants
|
||||
2. Select preferred style×layout combinations per target
|
||||
3. Run /workflow:plan to create implementation tasks
|
||||
{IF target_type == "component": "4. Integrate selected components into pages"}
|
||||
}
|
||||
```
|
||||
|
||||
**Component Mode**:
|
||||
```
|
||||
✅ UI Design Explore-Auto Workflow Complete! (Component Mode)
|
||||
|
||||
Run ID: {run_id}
|
||||
Session: {session_id or "standalone"}
|
||||
Mode: Component Exploration
|
||||
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total component prototypes)
|
||||
Input: {images and/or prompt summary}
|
||||
|
||||
Phase 1 - Style Extraction: {style_variants} style variants
|
||||
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{component_count} = {total_prototypes} component prototypes
|
||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
||||
|
||||
📂 Run Output: {base_path}/
|
||||
├── style-consolidation/ ({style_variants} design systems)
|
||||
├── prototypes/ ({total_prototypes} component HTML/CSS files)
|
||||
└── .run-metadata.json (run configuration)
|
||||
|
||||
🌐 Interactive Preview: {base_path}/prototypes/compare.html
|
||||
- {style_variants}×{layout_variants} component matrix view
|
||||
- Isolated component rendering (minimal wrapper)
|
||||
- Side-by-side comparison for design decisions
|
||||
- Selection export for implementation
|
||||
|
||||
🧩 Components Explored: {', '.join(inferred_component_list)}
|
||||
|
||||
Next Steps:
|
||||
1. Open compare.html to preview all component variants
|
||||
2. Select preferred style×layout combinations per component
|
||||
3. Extract selected components for integration into pages
|
||||
4. Run /workflow:plan with component integration context
|
||||
```
|
||||
**Dynamic Values**:
|
||||
- `target_type_icon`: "📄" for page, "🧩" for component, "🎯" for mixed/auto
|
||||
- `target_type_label`: "Pages" for page, "Components" for component, "Targets" for mixed/auto
|
||||
- `target_count`: `len(inferred_target_list)`
|
||||
- All other placeholders are resolved from stored phase data
|
||||
|
||||
Reference in New Issue
Block a user