Design Iteration Workflow - Overview

Overview

A structured 4-stage workflow for creating and iterating on UI designs. This process ensures thoughtful design decisions with user approval at each stage.

Quick Reference

Stages: Layout → Theme → Animation → Implementation Approval: Required between each stage Output: Single HTML file per design iteration Location: design_iterations/ folder

When to Use This Workflow

Delegate to OpenFrontendSpecialist When:

✅ STRONGLY RECOMMENDED to delegate for:

New UI/UX design work - Landing pages, dashboards, app interfaces
Design system creation - Component libraries, theme systems, style guides
Complex layouts - Multi-column grids, responsive designs, intricate structures
Visual polish - Animations, transitions, micro-interactions
Brand-focused work - Marketing pages, product showcases, hero sections
Accessibility-critical UI - Forms, navigation, interactive components

Why delegate?

OpenFrontendSpecialist follows the 4-stage design workflow (Layout → Theme → Animation → Implementation)
Ensures thoughtful design decisions with approval gates
Produces polished, accessible, production-ready UI
Handles responsive design, OKLCH colors, semantic HTML
Creates single-file HTML prototypes for quick iteration

Execute Directly When:

⚠️ Simple cases only:

Minor text/content updates to existing UI
Small CSS tweaks (colors, spacing, fonts)
Adding simple utility classes
Updating existing component props
Bug fixes in existing UI code

Delegation Pattern

// For UI design work
task(
  subagent_type="OpenFrontendSpecialist",
  description="Design {feature} UI",
  prompt="Design a {feature} following the 4-stage workflow:
  
  Requirements:
  - {requirement 1}
  - {requirement 2}
  
  Context: {what this UI is for}
  
  Follow the design iteration workflow:
  1. Layout (ASCII wireframe)
  2. Theme (design system, colors)
  3. Animation (micro-interactions)
  4. Implementation (single HTML file)
  
  Request approval between each stage."
)

Example Scenarios

Scenario	Action	Why
"Create a landing page for our SaaS product"	✅ Delegate to OpenFrontendSpecialist	Complex UI design, needs 4-stage workflow
"Design a user dashboard with charts"	✅ Delegate to OpenFrontendSpecialist	Complex layout, visual design, interactions
"Build a component library with our brand"	✅ Delegate to OpenFrontendSpecialist	Design system work, requires theme expertise
"Fix button color from blue to green"	⚠️ Execute directly	Simple CSS change
"Update hero text content"	⚠️ Execute directly	Content update only

Related Files

Design Plan File - MANDATORY plan file template
Stage 1: Layout
Stage 2: Theme
Stage 3: Animation
Stage 4: Implementation
Visual Content Generation
Best Practices
Plan Iterations

design-iteration-overview.md 3.4 KB History Raw