catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-13 02:41:50 +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

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

@@ -137,120 +137,43 @@ FOR target IN target_list:
Task(ui-design-agent): "
[TARGET_LAYOUT_PLANNING]
Generate a concrete, actionable layout plan for a specific target and WRITE it to the file system.
## Context
TARGET: {target}
TARGET_TYPE: {target_type}
LAYOUT_ID: {layout_id}
TARGET: {target} | TARGET_TYPE: {target_type} | LAYOUT_ID: {layout_id}
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
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)
1. Search for modern {target_type} layout patterns:
mcp__exa__get_code_context_exa(
query=\"modern {target} {target_type} layout design patterns 2024 2025\",
tokensNum=\"dynamic\"
)
2. Search for {target}-specific UI best practices
## Research (MCP Required)
mcp__exa__get_code_context_exa(
query=\"modern {target} {target_type} layout patterns 2024 2025\",
tokensNum=\"dynamic\"
)
## Layout Planning Rules
## Output File
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json)
**For PAGES (target_type='page')**:
- 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 Structure (Required Fields)
```json
{
\"id\": \"layout-{layout_id}\",
\"target\": \"{target}\",
\"target_type\": \"{target_type}\",
\"name\": \"Descriptive name (2-4 words)\",
\"description\": \"Detailed description (2-3 sentences explaining structure, use cases, and unique aspects)\",
\"structure\": {
// For pages, include:
\"type\": \"sidebar-main\" | \"centered\" | \"asymmetric\" | \"grid-dashboard\",
\"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\"]
"id": "layout-{layout_id}",
"target": "{target}",
"target_type": "{target_type}",
"name": "Descriptive name (2-4 words)",
"description": "2-3 sentences",
"structure": {
// IF page: type, regions, grid, sidebar, responsive
// IF component: arrangement, alignment, spacing, element_order
},
\"semantic_hints\": [
\"dashboard\",
\"data-visualization\",
\"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\"
]
"semantic_hints": [...],
"accessibility_features": [...],
"research_references": [...]
}
```
## Write Operation Instructions
- Use Write() tool with the absolute path provided above
- Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates')
- 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
## Requirements
- Research-informed, target-specific, meaningfully different from other layout IDs
- Write file directly (not text output)
"
# Wait for all agent tasks to complete
@@ -343,188 +266,44 @@ FOR layout_id IN range(1, layout_variants + 1):
Task(ui-design-agent): "
[UI_LAYOUT_TEMPLATE_GENERATION]
🚨 **CRITICAL: TARGET INDEPENDENCE REQUIREMENT** 🚨
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
🚨 TARGET INDEPENDENCE: Generate template for EXACTLY ONE target: '{target}' (standalone, reusable)
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}
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**:
{IF target_type == "page":
- Type: Full-page layout | Wrapper: Complete HTML document (<html>, <head>, <body>)
- 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
}
## Layout Plan to Implement
**Path**: {layout_json_path}
**Plan**: {JSON.stringify(layout_plan, null, 2)}
## 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`)
**Structure Requirements**:
- Semantic HTML5 elements with ARIA attributes
- 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>
## HTML Requirements
- Semantic HTML5 + ARIA attributes
- Wrapper: {IF page: Full document (header/nav/main/footer) | IF component: Minimal container}
- ⚠️ CRITICAL: Include CSS placeholders in <head>:
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_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\":
```html
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>{target} Component - Layout {layout_id}</title>
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
</head>
<body>
<div class=\"component-container\">
<!-- Component content only -->
</div>
</body>
</html>
```
}
## CSS Requirements
- Token-driven: ALL values use var() (zero hardcoded values)
- Mobile-first responsive design
- Available tokens ({len(all_token_vars)} variables):
* Colors: --color-brand-primary, --color-surface-background, --color-text-primary, ...
* Typography: --font-family-heading, --font-size-base, --font-weight-bold, ...
* Spacing: --spacing-0 through --spacing-24
* Radius: --border-radius-none, --border-radius-sm, ..., --border-radius-full
* Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
* Breakpoints: --breakpoint-sm, --breakpoint-md, --breakpoint-lg
### File 2: CSS Template (`{target}-layout-{layout_id}.css`)
- 🎨 **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 Operations
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content)
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.css\", css_content)
```
## Completion
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 completion with file paths. Write files directly (not text output).
"
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): "
[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}
BASE_PATH: {base_path}
## Input Files
FOR each target: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css
## Input
{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css (all targets)
## Validation Tasks
1. **Shared Component Consistency**: Check header/nav/footer structure matches
2. **Token Usage Consistency**: Verify same design-tokens file, no hardcoded values
3. **Accessibility Consistency**: ARIA attributes, heading hierarchy, landmark roles
4. **Layout Strategy Adherence**: Layout-{layout_id} strategy applied consistently
## Validate
1. Shared component structure (header/nav/footer)
2. Token usage consistency (no hardcoded values)
3. Accessibility compliance (ARIA, headings, landmarks)
4. Layout strategy adherence
## Output
Generate consistency report markdown file at:
{base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md
Write({base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md, validation_report)
Include validation results, issues found, and recommendations.
Focus on truly shared elements. Page-specific content variations are acceptable.
Focus on shared elements. Page-specific variations are acceptable.
"
# Aggregate consistency reports