mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
Refactor documentation for UI Design Workflow (v4.2.1): Optimize explore-auto and imitate-auto commands, enhance clarity and maintainability, and reduce file sizes while preserving functionality. Remove CHANGELOG-v4.2.0.md as it is no longer needed. Update README and README_CN to reflect new version and features.
This commit is contained in:
catlog22
@@ -20,117 +20,89 @@ Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix m
|
||||
- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` for parallel generation
|
||||
- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values
|
||||
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
||||
- **Template-Based**: Decouples HTML structure from CSS styling for optimal performance
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Path Resolution & Context Loading (Enhanced)
|
||||
### Phase 1: Path Resolution & Context Loading
|
||||
|
||||
```bash
|
||||
# Determine base path
|
||||
# 1. Determine base path
|
||||
IF --base-path provided:
|
||||
base_path = {provided_base_path} # e.g., ".workflow/WFS-xxx/runs/run-xxx/.design"
|
||||
base_path = {provided_base_path}
|
||||
ELSE IF --session provided:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/latest/.design" # Use latest run
|
||||
base_path = ".workflow/WFS-{session}/latest/.design"
|
||||
ELSE:
|
||||
# Standalone mode: search for most recent design-session in scratchpad
|
||||
base_path = find_latest_design_session(".workflow/.scratchpad/")
|
||||
|
||||
# Determine style and layout variant counts
|
||||
# 2. Determine variant counts
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
layout_variants = --layout-variants OR 3 # Default to 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
VALIDATE: 1 <= layout_variants <= 5
|
||||
|
||||
# Enhanced page list parsing
|
||||
# 3. Enhanced page list parsing
|
||||
page_list = []
|
||||
page_source = "none"
|
||||
|
||||
# Priority 1: Explicit --pages parameter (with robust parsing)
|
||||
# Priority 1: Explicit --pages parameter
|
||||
IF --pages provided:
|
||||
# Enhanced parsing: handle spaces, multiple delimiters
|
||||
raw_pages = {--pages value}
|
||||
|
||||
# Split by comma, semicolon, or Chinese comma, then clean
|
||||
# Split by comma, semicolon, or Chinese comma
|
||||
page_list = split_and_clean(raw_pages, delimiters=[",", ";", "、"])
|
||||
|
||||
# Clean each page name: strip whitespace, convert to lowercase
|
||||
# Clean: strip whitespace, lowercase, replace spaces with hyphens
|
||||
page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
|
||||
|
||||
page_source = "explicit_parameter"
|
||||
REPORT: "📋 Using provided pages: {', '.join(page_list)}"
|
||||
|
||||
# Priority 2: Extract from synthesis-specification.md
|
||||
ELSE IF --session:
|
||||
# Read synthesis-specification.md to extract page requirements
|
||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
page_list = extract_pages_from_synthesis(synthesis_spec)
|
||||
page_source = "synthesis_specification"
|
||||
REPORT: "📋 Extracted pages from synthesis: {', '.join(page_list)}"
|
||||
|
||||
# Priority 3: Detect from existing prototypes
|
||||
# Priority 3: Detect from existing prototypes or default
|
||||
ELSE:
|
||||
# Infer from existing prototypes or default
|
||||
page_list = detect_from_prototypes({base_path}/prototypes/)
|
||||
IF page_list:
|
||||
page_source = "existing_prototypes"
|
||||
REPORT: "📋 Detected pages from existing prototypes: {', '.join(page_list)}"
|
||||
ELSE:
|
||||
page_list = ["home"]
|
||||
page_source = "default"
|
||||
REPORT: "⚠️ No pages found, using default: 'home'"
|
||||
page_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]
|
||||
REPORT: "📋 Detected/default pages: {', '.join(page_list)}"
|
||||
|
||||
# Validation: ensure page names are valid
|
||||
validated_pages = []
|
||||
invalid_pages = []
|
||||
FOR page IN page_list:
|
||||
# Validate format: must start with letter/number, can contain alphanumeric, hyphens, underscores
|
||||
IF regex_match(page, r"^[a-z0-9][a-z0-9_-]*$"):
|
||||
validated_pages.append(page)
|
||||
ELSE:
|
||||
invalid_pages.append(page)
|
||||
# 4. Validate page names
|
||||
validated_pages = [p for p in page_list if regex_match(p, r"^[a-z0-9][a-z0-9_-]*$")]
|
||||
invalid_pages = [p for p in page_list if p not in validated_pages]
|
||||
|
||||
IF invalid_pages:
|
||||
REPORT: "⚠️ Skipped invalid page names: {', '.join(invalid_pages)}"
|
||||
REPORT: " Valid format: lowercase, alphanumeric, hyphens, underscores"
|
||||
|
||||
VALIDATE: validated_pages not empty, "No valid pages found"
|
||||
|
||||
# Use validated list
|
||||
page_list = validated_pages
|
||||
REPORT: "✅ Final page list ({len(page_list)}): {', '.join(page_list)}"
|
||||
|
||||
# Verify design systems exist for all styles
|
||||
# 5. Verify design systems exist
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
VERIFY: {base_path}/style-consolidation/style-{style_id}/design-tokens.json exists
|
||||
VERIFY: {base_path}/style-consolidation/style-{style_id}/style-guide.md exists
|
||||
|
||||
# Load requirements (if integrated mode)
|
||||
# 6. Load requirements (if integrated mode)
|
||||
IF --session:
|
||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
```
|
||||
|
||||
### Phase 2: Optimized Matrix UI Generation (Layered, Template-Based)
|
||||
### Phase 2: Optimized Matrix UI Generation
|
||||
|
||||
**Strategy**: Two-layer generation reduces complexity from `O(S×L×P)` to `O(L×P)`, achieving **`S` times faster** performance.
|
||||
|
||||
**Strategy**: Decouple HTML structure from CSS styling to eliminate redundancy.
|
||||
- **Layer 1**: Generate `L × P` layout templates (HTML structure + structural CSS)
|
||||
- **Layer 2**: Instantiate `S × L × P` final prototypes via fast file operations
|
||||
|
||||
**Performance**: Reduces core generation tasks from `O(S×L×P)` to `O(L×P)` — **`S` times faster**
|
||||
|
||||
---
|
||||
|
||||
#### Phase 2a: Layout Template Generation (Parallel Agent Execution)
|
||||
#### Phase 2a: Layout Template Generation
|
||||
|
||||
Generate style-agnostic layout templates for each `{page} × {layout}` combination.
|
||||
Total agent tasks: `layout_variants × len(page_list)`
|
||||
|
||||
```bash
|
||||
# Create template directory
|
||||
# Create directories
|
||||
CREATE: {base_path}/prototypes/_templates/
|
||||
CREATE: {base_path}/prototypes/
|
||||
|
||||
# Launch layout_variants × page_list parallel tasks
|
||||
# Launch parallel template generation tasks
|
||||
FOR layout_id IN range(1, layout_variants + 1):
|
||||
FOR page IN page_list:
|
||||
Task(conceptual-planning-agent): "
|
||||
@@ -165,7 +137,7 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
- Mobile-first responsive design using token-based breakpoints
|
||||
|
||||
## Layout Diversity Strategy
|
||||
You are responsible for Layout {layout_id}. Apply this strategy CONSISTENTLY to all styles in your batch.
|
||||
Apply this strategy CONSISTENTLY to all styles:
|
||||
|
||||
{IF layout_id == 1}
|
||||
**Layout 1: Classic Hierarchy**
|
||||
@@ -187,14 +159,11 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
- Develop a unique and consistent layout structure different from the standard three
|
||||
{ENDIF}
|
||||
|
||||
Adapt this strategy to each page's purpose while maintaining layout consistency.
|
||||
|
||||
## Token Usage Requirements (STRICT)
|
||||
- For each style, load design tokens from its specific file: {base_path}/style-consolidation/style-{style_id}/design-tokens.json
|
||||
- All colors: var(--color-brand-primary), var(--color-surface-background), etc.
|
||||
- All spacing: var(--spacing-4), var(--spacing-6), etc.
|
||||
- All typography: var(--font-family-heading), var(--font-size-lg), etc.
|
||||
- NO hardcoded values (e.g., #4F46E5, 16px) allowed
|
||||
- NO hardcoded values allowed
|
||||
|
||||
## HTML Requirements
|
||||
- Semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||
@@ -203,7 +172,6 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
- Mobile-first responsive design
|
||||
|
||||
## CSS Requirements
|
||||
- Link to design-tokens.css: <link rel=\"stylesheet\" href=\"../../design-tokens.css\">
|
||||
- Use CSS custom properties from design-tokens.json
|
||||
- Mobile-first media queries using token breakpoints
|
||||
- No inline styles
|
||||
@@ -226,53 +194,43 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
completely style-agnostic (no hardcoded colors, fonts, or spacing).
|
||||
"
|
||||
|
||||
# Wait for all {layout_variants × len(page_list)} parallel tasks to complete
|
||||
# Generated templates: L × P (significantly fewer than the old S × L × P approach)
|
||||
REPORT: "✅ Phase 2a complete: Generated {layout_variants * len(page_list)} layout templates"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Phase 2b: Prototype Instantiation (Fast File Operations)
|
||||
#### Phase 2b: Prototype Instantiation
|
||||
|
||||
Create final `S × L × P` prototypes by copying templates and injecting style-specific CSS links.
|
||||
This phase uses **fast file operations** instead of expensive Agent calls.
|
||||
Uses **fast file operations** instead of expensive Agent calls.
|
||||
|
||||
```bash
|
||||
REPORT: "🚀 Phase 2b: Instantiating prototypes from templates..."
|
||||
|
||||
# Ensure design tokens are converted to CSS for each style
|
||||
# Convert design tokens to CSS for each style
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
tokens_json = Read({base_path}/style-consolidation/style-{style_id}/design-tokens.json)
|
||||
tokens_css = convert_json_to_css_variables(tokens_json)
|
||||
|
||||
# Write tokens.css for this style
|
||||
Write({base_path}/style-consolidation/style-{style_id}/tokens.css, tokens_css)
|
||||
|
||||
# Instantiate S × L × P final prototypes via file copying and placeholder replacement
|
||||
# Instantiate S × L × P final prototypes
|
||||
Bash(
|
||||
cd {base_path}/prototypes/
|
||||
|
||||
# For each style, layout, and page combination...
|
||||
for s in $(seq 1 {style_variants}); do
|
||||
for l in $(seq 1 {layout_variants}); do
|
||||
for p in {' '.join(page_list)}; do
|
||||
|
||||
# Define file names
|
||||
# Define file paths
|
||||
TEMPLATE_HTML="_templates/${p}-layout-${l}.html"
|
||||
STRUCTURAL_CSS="./_templates/${p}-layout-${l}.css"
|
||||
TOKEN_CSS="../../style-consolidation/style-${s}/tokens.css"
|
||||
OUTPUT_HTML="${p}-style-${s}-layout-${l}.html"
|
||||
|
||||
# 1. Copy the HTML template
|
||||
# Copy template and replace placeholders
|
||||
cp "${TEMPLATE_HTML}" "${OUTPUT_HTML}"
|
||||
|
||||
# 2. Replace CSS placeholders with actual paths
|
||||
# Using | delimiter for sed to handle paths with slashes
|
||||
sed -i "s|{{STRUCTURAL_CSS}}|${STRUCTURAL_CSS}|g" "${OUTPUT_HTML}"
|
||||
sed -i "s|{{TOKEN_CSS}}|${TOKEN_CSS}|g" "${OUTPUT_HTML}"
|
||||
|
||||
# 3. Create implementation notes file
|
||||
# Create implementation notes
|
||||
cat > "${p}-style-${s}-layout-${l}-notes.md" <<EOF
|
||||
# Implementation Notes: ${p}-style-${s}-layout-${l}
|
||||
|
||||
@@ -300,7 +258,6 @@ To modify this prototype:
|
||||
1. Edit the layout template: \`${TEMPLATE_HTML}\` (affects all styles)
|
||||
2. Edit the structural CSS: \`${STRUCTURAL_CSS}\` (affects all styles)
|
||||
3. Edit design tokens: \`${TOKEN_CSS}\` (affects only this style variant)
|
||||
|
||||
EOF
|
||||
done
|
||||
done
|
||||
@@ -319,7 +276,6 @@ REPORT: " Performance: {style_variants}× faster than original approach"
|
||||
| Example (3×3×3) | 27 Agent calls | 9 Agent calls |
|
||||
| Speed Improvement | Baseline | **3× faster** (S times) |
|
||||
| Resource Usage | High (creative generation for each combo) | Optimized (creative only for templates) |
|
||||
```
|
||||
|
||||
### Phase 3: Generate Preview Files
|
||||
|
||||
@@ -327,21 +283,19 @@ REPORT: " Performance: {style_variants}× faster than original approach"
|
||||
# Read matrix visualization template
|
||||
template_content = Read("~/.claude/workflows/_template-compare-matrix.html")
|
||||
|
||||
# Prepare template variables
|
||||
# Inject variables into template
|
||||
pages_json = JSON.stringify(page_list)
|
||||
run_id = extract_run_id_from_base_path({base_path})
|
||||
|
||||
# Inject variables into template
|
||||
injected_content = template_content
|
||||
.replace("{{run_id}}", run_id)
|
||||
.replace("{{style_variants}}", style_variants)
|
||||
.replace("{{layout_variants}}", layout_variants)
|
||||
.replace("{{pages_json}}", pages_json)
|
||||
|
||||
# Write interactive matrix comparison
|
||||
Write({base_path}/prototypes/compare.html, injected_content)
|
||||
|
||||
# Generate design-tokens.css (unified CSS custom properties for all styles)
|
||||
# Generate fallback design-tokens.css
|
||||
Write({base_path}/prototypes/design-tokens.css):
|
||||
/* Auto-generated from all style design systems */
|
||||
/* Note: Each prototype links to its specific style's tokens */
|
||||
@@ -351,7 +305,7 @@ Write({base_path}/prototypes/design-tokens.css):
|
||||
/* See style-consolidation/style-{n}/design-tokens.json for actual values */
|
||||
}
|
||||
|
||||
# Generate simple index.html for quick navigation
|
||||
# Generate simple index.html
|
||||
Write({base_path}/prototypes/index.html):
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@@ -360,53 +314,16 @@ Write({base_path}/prototypes/index.html):
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Prototypes - Matrix View</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
|
||||
h1 { color: #2563eb; }
|
||||
.info {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.info { background: #f3f4f6; padding: 1rem; border-radius: 0.5rem; margin: 1rem 0; }
|
||||
.cta { display: inline-block; background: #2563eb; color: white; padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem; text-decoration: none; font-weight: 600; margin-top: 1rem; }
|
||||
.cta:hover { background: #1d4ed8; }
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.stat {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #2563eb;
|
||||
}
|
||||
.stat-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
|
||||
.stat { background: white; border: 1px solid #e5e7eb; padding: 1rem; border-radius: 0.5rem; text-align: center; }
|
||||
.stat-value { font-size: 2rem; font-weight: bold; color: #2563eb; }
|
||||
.stat-label { color: #6b7280; font-size: 0.875rem; margin-top: 0.25rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -452,7 +369,7 @@ Write({base_path}/prototypes/index.html):
|
||||
</body>
|
||||
</html>
|
||||
|
||||
# Generate PREVIEW.md with instructions
|
||||
# Generate PREVIEW.md
|
||||
Write({base_path}/prototypes/PREVIEW.md):
|
||||
# UI Prototype Preview Guide
|
||||
|
||||
@@ -495,7 +412,8 @@ Refer to corresponding `style-guide.md` for design philosophy and usage guidelin
|
||||
4. Run `/workflow:ui-design:update` to integrate chosen designs
|
||||
```
|
||||
|
||||
### Phase 3.5: Cross-Page Consistency Validation (Optional, Multi-Page Only)
|
||||
### Phase 3.5: Cross-Page Consistency Validation
|
||||
|
||||
**Condition**: Only executes if `len(page_list) > 1`
|
||||
|
||||
```bash
|
||||
@@ -506,7 +424,6 @@ IF len(page_list) <= 1:
|
||||
# For multi-page workflows, validate cross-page consistency
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
FOR layout_id IN range(1, layout_variants + 1):
|
||||
# Generate consistency report for this style-layout combo across all pages
|
||||
Task(conceptual-planning-agent): "
|
||||
[CROSS_PAGE_CONSISTENCY_VALIDATION]
|
||||
|
||||
@@ -572,7 +489,7 @@ FOR style_id IN range(1, style_variants + 1):
|
||||
IMPORTANT: Focus on truly shared elements (header, nav, footer). Page-specific content variations are expected and acceptable.
|
||||
"
|
||||
|
||||
# Aggregate all consistency reports
|
||||
# Aggregate consistency reports
|
||||
Write({base_path}/prototypes/CONSISTENCY_SUMMARY.md):
|
||||
# Multi-Page Consistency Summary
|
||||
|
||||
@@ -598,13 +515,13 @@ This report summarizes consistency validation across all {len(page_list)} pages.
|
||||
Run `/workflow:ui-design:update` once all issues are resolved.
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
### Phase 4: Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: `Generate ${layout_variants}×${page_list.length} layout templates (optimized)`, status: "completed", activeForm: "Generating layout templates"},
|
||||
{content: `Generate ${layout_variants}×${page_list.length} layout templates`, status: "completed", activeForm: "Generating layout templates"},
|
||||
{content: `Instantiate ${style_variants}×${layout_variants}×${page_list.length} final prototypes`, status: "completed", activeForm: "Instantiating prototypes"},
|
||||
{content: "Generate interactive preview files", status: "completed", activeForm: "Generating preview"}
|
||||
]
|
||||
@@ -642,29 +559,16 @@ Generated Structure:
|
||||
2. Quick Index: Open index.html
|
||||
3. Instructions: See PREVIEW.md
|
||||
|
||||
Features:
|
||||
- 3×3 matrix grid with synchronized scrolling
|
||||
- Zoom controls and fullscreen mode
|
||||
- Selection export for implementation
|
||||
- Per-page comparison
|
||||
- Template-based consistency across style variants
|
||||
|
||||
Technical Highlights:
|
||||
- ✅ Decoupled HTML structure from CSS styling
|
||||
- ✅ Reusable layout templates (affects all styles uniformly)
|
||||
- ✅ Dynamic style injection via CSS custom properties
|
||||
- ✅ Significantly reduced generation time
|
||||
|
||||
Next: /workflow:ui-design:update {--session flag if applicable}
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure (Optimized, Template-Based)
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/prototypes/
|
||||
├── _templates/ # Reusable layout templates (NEW)
|
||||
├── _templates/ # Reusable layout templates
|
||||
│ ├── {page}-layout-1.html # Style-agnostic HTML structure
|
||||
│ ├── {page}-layout-1.css # Structural CSS with var() references
|
||||
│ ├── {page}-layout-2.html
|
||||
@@ -675,48 +579,49 @@ Note: When called from /workflow:ui-design:auto, design-update is triggered auto
|
||||
├── PREVIEW.md # Preview instructions
|
||||
├── design-tokens.css # CSS custom properties fallback
|
||||
├── {page}-style-{s}-layout-{l}.html # Final prototypes (copied from templates)
|
||||
├── {page}-style-{s}-layout-{l}-notes.md # Implementation notes (auto-generated)
|
||||
├── {page}-style-{s}-layout-{l}-notes.md # Implementation notes
|
||||
└── ... (S × L × P total final files)
|
||||
|
||||
{base_path}/style-consolidation/
|
||||
├── style-1/
|
||||
│ ├── design-tokens.json
|
||||
│ ├── tokens.css # NEW: CSS variables for style-1
|
||||
│ ├── tokens.css # CSS variables for style-1
|
||||
│ └── style-guide.md
|
||||
├── style-2/
|
||||
│ ├── design-tokens.json
|
||||
│ ├── tokens.css # NEW: CSS variables for style-2
|
||||
│ ├── tokens.css # CSS variables for style-2
|
||||
│ └── style-guide.md
|
||||
└── ...
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No design systems found**: Run `/workflow:ui-design:consolidate --keep-separate` first
|
||||
- **Invalid page names**: Extract from synthesis-specification.md or error
|
||||
- **Agent execution errors**: Report details, suggest retry
|
||||
- **Invalid page names**: Extract from synthesis-specification.md or error with validation message
|
||||
- **Agent execution errors**: Report details, suggest retry with specific phase
|
||||
- **Missing template**: Provide fallback or error with template path
|
||||
|
||||
## Quality Checks
|
||||
|
||||
After generation, ensure:
|
||||
- [ ] All CSS values reference design token custom properties
|
||||
- [ ] No hardcoded colors, spacing, or typography
|
||||
- [ ] Semantic HTML structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Responsive design implemented
|
||||
- [ ] Mobile-first approach
|
||||
- [ ] Semantic HTML structure with proper element hierarchy
|
||||
- [ ] ARIA attributes present for accessibility
|
||||
- [ ] Responsive design implemented with mobile-first approach
|
||||
- [ ] File naming follows `{page}-style-{s}-layout-{l}` convention
|
||||
- [ ] compare.html loads correctly with all prototypes
|
||||
- [ ] Template files are reusable and style-agnostic
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Optimized Template-Based Architecture** (NEW)
|
||||
1. **Optimized Template-Based Architecture**
|
||||
- Decouples HTML structure from CSS styling
|
||||
- Generates `L × P` reusable templates instead of `S × L × P` unique files
|
||||
- **`S` times faster** than previous approach (typically 3× faster)
|
||||
- **`S` times faster** than previous approach (typically 3× faster for S=3)
|
||||
|
||||
2. **Two-Layer Generation Strategy**
|
||||
- **Layer 1**: Agent-driven creative generation of layout templates
|
||||
- **Layer 2**: Fast file operations for prototype instantiation
|
||||
- Layer 1: Agent-driven creative generation of layout templates
|
||||
- Layer 2: Fast file operations for prototype instantiation
|
||||
- Reduces expensive Agent calls by ~67% (for S=3)
|
||||
|
||||
3. **Consistent Cross-Style Layouts**
|
||||
@@ -740,7 +645,9 @@ After generation, ensure:
|
||||
- Token-driven styling (no hardcoded values)
|
||||
|
||||
## Integration Points
|
||||
|
||||
- **Input**: Per-style design-tokens.json from `/workflow:ui-design:consolidate --keep-separate`
|
||||
- **Output**: Matrix HTML/CSS prototypes for `/workflow:ui-design:update`
|
||||
- **Template**: `~/.claude/workflows/_template-compare-matrix.html` (global)
|
||||
- **Context**: synthesis-specification.md for page requirements (optional)
|
||||
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
|
||||
|
||||
Reference in New Issue
Block a user