Design Iteration Workflow

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

Design Plan File (MANDATORY)

CRITICAL: Before starting any design work, create a persistent design plan file.

Location: .tmp/design-plans/{project-name}-{feature-name}.md

Purpose:

Preserve design decisions across stages
Allow user to review and edit the plan
Maintain context for subagent calls
Track design evolution and iterations

When to Create:

BEFORE Stage 1 (Layout Design)
After understanding user requirements
Before any design work begins

Template:

---
project: {project-name}
feature: {feature-name}
created: {ISO timestamp}
updated: {ISO timestamp}
status: in_progress
current_stage: layout
---

# Design Plan: {Feature Name}

## User Requirements
{What the user asked for - verbatim or close paraphrase}

## Design Goals
- {goal 1}
- {goal 2}
- {goal 3}

## Target Audience
{Who will use this UI}

## Technical Constraints
- Framework: {Next.js, React, etc.}
- Responsive: {Yes/No}
- Accessibility: {WCAG level}
- Browser support: {Modern, IE11+, etc.}

---

## Stage 1: Layout Design

### Status
- [ ] Layout planned
- [ ] ASCII wireframe created
- [ ] User approved

### Layout Structure
{ASCII wireframe will be added here}

### Component Breakdown
{Component list will be added here}

### User Feedback
{User comments and requested changes}

---

## Stage 2: Theme Design

### Status
- [ ] Design system selected
- [ ] Color palette chosen
- [ ] Typography defined
- [ ] User approved

### Theme Details
{Theme specifications will be added here}

### User Feedback
{User comments and requested changes}

---

## Stage 3: Animation Design

### Status
- [ ] Micro-interactions defined
- [ ] Animation timing set
- [ ] User approved

### Animation Details
{Animation specifications will be added here}

### User Feedback
{User comments and requested changes}

---

## Stage 4: Implementation

### Status
- [ ] HTML structure complete
- [ ] CSS applied
- [ ] Animations implemented
- [ ] User approved

### Output Files
- HTML: {file path}
- CSS: {file path}
- Assets: {file paths}

### User Feedback
{Final comments and requested changes}

---

## Design Evolution

### Iteration 1
- Date: {timestamp}
- Changes: {what changed}
- Reason: {why it changed}

### Iteration 2
- Date: {timestamp}
- Changes: {what changed}
- Reason: {why it changed}

Workflow Integration:

Create plan file → Write to .tmp/design-plans/{name}.md
Each stage → Update plan file with decisions and user feedback
User approval → Edit plan file with approved decisions
User requests changes → Edit plan file with feedback, iterate
Subagent calls → Pass plan file path for context preservation
Completion → Plan file contains full design history

Benefits:

✅ Context preserved across subagent calls
✅ User can review and edit plan directly
✅ Design decisions documented
✅ Easy to iterate and refine
✅ Full design history tracked

Workflow Stages

Stage 0: Create Design Plan (MANDATORY FIRST STEP)

Purpose: Create persistent plan file before any design work

Process:

Understand user requirements
Identify design goals and constraints
Create plan file at .tmp/design-plans/{project-name}-{feature-name}.md
Populate with user requirements and goals
Present plan file location to user
Proceed to Stage 1

Deliverable: Design plan file created and initialized

Example:

✅ Design plan created: .tmp/design-plans/saas-landing-page.md

You can review and edit this file at any time. All design decisions will be tracked here.

Ready to proceed to Stage 1 (Layout Design)?

Approval Gate: "Plan file created. Ready to start layout design?"

Stage 1: Layout Design

Purpose: Define the structure and component hierarchy before visual design

Process:

Read design plan file from .tmp/design-plans/{name}.md
Analyze user requirements from plan
Identify core UI components
Plan layout structure and responsive behavior
Create ASCII wireframe
Update plan file with layout structure and component breakdown
Present to user for approval
Update plan file with user feedback and approval status

Deliverable:

ASCII wireframe with component breakdown
Updated plan file with Stage 1 complete

Example Output:

## Core UI Components

**Header Area**
- Logo/brand (Top left)
- Navigation menu (Top center)
- User actions (Top right)

**Main Content Area**
- Hero section (Full width)
- Feature cards (3-column grid on desktop, stack on mobile)
- Call-to-action (Centered)

**Footer**
- Links (4-column grid)
- Social icons (Centered)
- Copyright (Bottom)

## Layout Structure

Desktop (1024px+):
┌─────────────────────────────────────────────────┐
│ [Logo]        Navigation        [User Menu]     │
├─────────────────────────────────────────────────┤
│                                                 │
│              HERO SECTION                       │
│         (Full width, centered text)             │
│                                                 │
├─────────────────────────────────────────────────┤
│  ┌─────────┐  ┌─────────┐  ┌─────────┐         │
│  │ Card 1  │  │ Card 2  │  │ Card 3  │         │
│  │         │  │         │  │         │         │
│  └─────────┘  └─────────┘  └─────────┘         │
├─────────────────────────────────────────────────┤
│              [Call to Action]                   │
├─────────────────────────────────────────────────┤
│  Links    Links    Links    Social              │
│                    Copyright                    │
└─────────────────────────────────────────────────┘

Mobile (< 768px):
┌─────────────────┐
│ ☰  Logo   [👤]  │
├─────────────────┤
│                 │
│  HERO SECTION   │
│                 │
├─────────────────┤
│  ┌───────────┐  │
│  │  Card 1   │  │
│  └───────────┘  │
│  ┌───────────┐  │
│  │  Card 2   │  │
│  └───────────┘  │
│  ┌───────────┐  │
│  │  Card 3   │  │
│  └───────────┘  │
├─────────────────┤
│      [CTA]      │
├─────────────────┤
│     Links       │
│     Social      │
│   Copyright     │
└─────────────────┘

Approval Gate: "Would you like to proceed with this layout or need modifications?"

Stage 2: Theme Design

Purpose: Define colors, typography, spacing, and visual style

Process:

Read design plan file from .tmp/design-plans/{name}.md
Review approved layout from Stage 1
Choose design system (neo-brutalism, modern dark, custom)
Select color palette (avoid Bootstrap blue unless requested)
Choose typography (Google Fonts)
Define spacing and shadows
Generate theme CSS file
Update plan file with theme specifications
Present theme to user for approval
Update plan file with user feedback and approval status

Deliverable:

CSS theme file saved to design_iterations/theme_N.css
Updated plan file with Stage 2 complete

Theme Selection Criteria:

Style	Use When	Avoid When
Neo-Brutalism	Creative/artistic projects, retro aesthetic	Enterprise apps, accessibility-critical
Modern Dark	SaaS, developer tools, professional dashboards	Playful consumer apps
Custom	Specific brand requirements	Time-constrained projects

Example Output:

## Theme Design: Modern Professional

**Style Reference**: Vercel/Linear aesthetic
**Color Palette**: Monochromatic with accent
**Typography**: Inter (UI) + JetBrains Mono (code)
**Spacing**: 4px base unit
**Shadows**: Subtle, soft elevation

**Theme File**: design_iterations/theme_1.css

Key Design Decisions:
- Primary: Neutral gray for professional feel
- Accent: Subtle blue for interactive elements
- Radius: 0.625rem for modern, friendly feel
- Shadows: Soft, minimal elevation
- Fonts: System-like for familiarity

File Naming: theme_1.css, theme_2.css, etc.

Approval Gate: "Does this theme match your vision, or would you like adjustments?"

Stage 3: Animation Design

Purpose: Define micro-interactions and transitions

Process:

Read design plan file from .tmp/design-plans/{name}.md
Review approved theme from Stage 2
Identify key interactions (hover, click, scroll)
Define animation timing and easing
Plan loading states and transitions
Document animations using micro-syntax
Update plan file with animation specifications
Present animation plan to user for approval
Update plan file with user feedback and approval status

Deliverable:

Animation specification in micro-syntax format
Updated plan file with Stage 3 complete

Example Output:

## Animation Design: Smooth & Professional

### Button Interactions
hover: 200ms ease-out [Y0→-2, shadow↗]
press: 100ms ease-in [S1→0.95]
ripple: 400ms ease-out [S0→2, α1→0]

### Card Interactions
cardHover: 300ms ease-out [Y0→-4, shadow↗]
cardClick: 200ms ease-out [S1→1.02]

### Page Transitions
pageEnter: 300ms ease-out [α0→1, Y+20→0]
pageExit: 200ms ease-in [α1→0]

### Loading States
spinner: 1000ms ∞ linear [R360°]
skeleton: 2000ms ∞ [bg: muted↔accent]

### Micro-Interactions
inputFocus: 200ms ease-out [S1→1.01, ring]
linkHover: 250ms ease-out [underline 0→100%]

**Philosophy**: Subtle, purposeful animations that enhance UX without distraction
**Performance**: All animations use transform/opacity for 60fps
**Accessibility**: Respects prefers-reduced-motion

Approval Gate: "Are these animations appropriate for your design, or should we adjust?"

Stage 4: Implementation

Purpose: Generate complete HTML file with all components

Process:

Read design plan file from .tmp/design-plans/{name}.md
Review all approved decisions from Stages 1-3
Build individual UI components
Integrate theme CSS
Add animations and interactions
Combine into single HTML file
Test responsive behavior
Save to design_iterations folder
Update plan file with output file paths
Present to user for review
Update plan file with user feedback and final approval status

Deliverable:

Complete HTML file with embedded or linked CSS
Updated plan file with Stage 4 complete and all output files documented

File Organization:

design_iterations/
├── theme_1.css              # Theme file from Stage 2
├── dashboard_1.html         # Initial design
├── dashboard_1_1.html       # First iteration
├── dashboard_1_2.html       # Second iteration
├── chat_ui_1.html           # Different design
└── chat_ui_1_1.html         # Iteration of chat UI

Naming Conventions:

Type	Format	Example
Initial design	`{name}_1.html`	`table_1.html`
First iteration	`{name}_1_1.html`	`table_1_1.html`
Second iteration	`{name}_1_2.html`	`table_1_2.html`
New design	`{name}_2.html`	`table_2.html`

Implementation Checklist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design Name</title>
  
  <!-- ✅ Preconnect to external resources -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- ✅ Load fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- ✅ Load Tailwind (script tag, not stylesheet) -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- ✅ Load Flowbite if needed -->
  <link href="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css" rel="stylesheet">
  
  <!-- ✅ Load icons -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  
  <!-- ✅ Link theme CSS -->
  <link rel="stylesheet" href="theme_1.css">
  
  <!-- ✅ Custom styles with !important for overrides -->
  <style>
    body {
      font-family: 'Inter', sans-serif !important;
      color: var(--foreground) !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600 !important;
    }
    
    /* Custom animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fade-in {
      animation: fadeIn 300ms ease-out;
    }
  </style>
</head>
<body>
  <!-- ✅ Semantic HTML structure -->
  <header>
    <!-- Header content -->
  </header>
  
  <main>
    <!-- Main content -->
  </main>
  
  <footer>
    <!-- Footer content -->
  </footer>
  
  <!-- ✅ Load Flowbite JS if needed -->
  <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
  
  <!-- ✅ Initialize icons -->
  <script>
    lucide.createIcons();
  </script>
  
  <!-- ✅ Custom JavaScript -->
  <script>
    // Interactive functionality
  </script>
</body>
</html>

Approval Gate: "Please review the design. Would you like any changes or iterations?"

Visual Content Generation

When to Use Image Specialist

Delegate to Image Specialist subagent when users request:

Diagrams & Visualizations: Architecture diagrams, flowcharts, system visualizations
UI Mockups & Wireframes: Visual mockups, design concepts, interface previews
Graphics & Assets: Social media graphics, promotional images, icons, illustrations
Image Editing: Photo enhancement, image modifications, visual adjustments

Invocation Pattern

task(
  subagent_type="Image Specialist",
  description="Generate/edit visual content",
  prompt="Context to load:
          - .opencode/context/core/visual-development.md
          
          Task: [Specific visual requirement]
          
          Requirements:
          - [Visual style/aesthetic]
          - [Dimensions/format]
          - [Key elements to include]
          - [Color scheme/branding]
          
          Output: [Expected deliverable]"
)

Example Use Cases

Architecture Diagram:

task(
  subagent_type="Image Specialist",
  description="Generate microservices architecture diagram",
  prompt="Create a diagram showing:
          - 5 microservices (API Gateway, Auth, Orders, Payments, Notifications)
          - Database connections
          - Message queue (RabbitMQ)
          - External services (Stripe, SendGrid)
          
          Style: Clean, professional, modern
          Format: PNG, 1920x1080"
)

UI Mockup:

task(
  subagent_type="Image Specialist",
  description="Generate dashboard mockup",
  prompt="Create a mockup for an analytics dashboard:
          - Header with navigation
          - 4 metric cards (Users, Revenue, Conversion, Retention)
          - Line chart showing trends
          - Data table below
          
          Style: Modern, dark theme, professional
          Format: PNG, 1440x900"
)

Social Media Graphic:

task(
  subagent_type="Image Specialist",
  description="Generate product launch graphic",
  prompt="Create a social media graphic announcing new feature:
          - Bold headline: 'Introducing Real-Time Collaboration'
          - Subtext: 'Work together, ship faster'
          - Brand colors: #6366f1 (primary), #1e293b (dark)
          - Include abstract collaboration visual
          
          Format: PNG, 1200x630 (Twitter/LinkedIn)"
)

Tools Required

tool:gemini - Gemini Nano Banana AI for image generation/editing
Automatically available in Developer profile

When NOT to Delegate

Use design-iteration workflow instead when:

Creating interactive HTML/CSS designs
Building complete UI implementations
Iterating on existing HTML files
Need responsive, production-ready code

Use image-specialist when:

Need static visual assets
Creating diagrams or illustrations
Generating mockups for presentation
Quick visual concepts without code

Iteration Process

When to Create Iterations

Create new iteration ({name}_1_1.html) when:

User requests changes to existing design
Refining based on feedback
A/B testing variations
Progressive enhancement

Create new design ({name}_2.html) when:

Complete redesign requested
Different approach/style
Alternative layout structure

Iteration Workflow

User: "Can you make the buttons larger and change the color?"

1. Read current file: dashboard_1.html
2. Make requested changes
3. Save as: dashboard_1_1.html
4. Present changes to user

User: "Perfect! Now can we add a sidebar?"

1. Read current file: dashboard_1_1.html
2. Add sidebar component
3. Save as: dashboard_1_2.html
4. Present changes to user

Best Practices

Layout Stage

✅ Do:

Use ASCII wireframes for clarity
Break down into component hierarchy
Plan responsive behavior upfront
Consider mobile-first approach
Get approval before proceeding

❌ Don't:

Skip wireframing and jump to code
Ignore responsive considerations
Proceed without user approval
Over-complicate initial layout

Theme Stage

✅ Do:

Reference design system context files
Use CSS custom properties
Save theme to separate file
Consider accessibility (contrast ratios)
Avoid Bootstrap blue unless requested

❌ Don't:

Hardcode colors in HTML
Use generic/overused color schemes
Skip contrast testing
Mix color formats (stick to OKLCH)

Animation Stage

✅ Do:

Use micro-syntax for documentation
Keep animations under 400ms
Use transform/opacity for performance
Respect prefers-reduced-motion
Make animations purposeful

❌ Don't:

Animate width/height (use scale)
Create distracting animations
Ignore performance implications
Skip accessibility considerations

Implementation Stage

✅ Do:

Use single HTML file per design
Load Tailwind via script tag
Reference theme CSS file
Use !important for framework overrides
Test responsive behavior
Provide alt text for images
Use semantic HTML

❌ Don't:

Split into multiple files
Load Tailwind as stylesheet
Inline all styles
Skip accessibility attributes
Use made-up image URLs
Use div soup (non-semantic HTML)

File Management

Folder Structure

design_iterations/
├── theme_1.css
├── theme_2.css
├── landing_1.html
├── landing_1_1.html
├── landing_1_2.html
├── dashboard_1.html
├── dashboard_1_1.html
└── README.md (optional: design notes)

Version Control

Track iterations:

Initial: design_1.html
Iteration 1: design_1_1.html
Iteration 2: design_1_2.html
Iteration 3: design_1_3.html

New major version:

Complete redesign: design_2.html
Then iterate: design_2_1.html, design_2_2.html

Communication Patterns

Stage Transitions

After Layout:

"Here's the proposed layout structure. The design uses a [description].
Would you like to proceed with this layout, or should we make adjustments?"

After Theme:

"I've created a [style] theme with [key features]. The theme file is saved as theme_N.css.
Does this match your vision, or would you like to adjust colors/typography?"

After Animation:

"Here's the animation plan using [timing/style]. All animations are optimized for performance.
Are these animations appropriate, or should we adjust the timing/effects?"

After Implementation:

"I've created the complete design as {filename}.html. The design includes [key features].
Please review and let me know if you'd like any changes or iterations."

Iteration Requests

User requests change:

"I'll update the design with [changes] and save it as {filename}_N.html.
This preserves the previous version for reference."

Handling Plan File Edits and Iterations

User Edits Plan File Directly

Scenario: User opens .tmp/design-plans/{name}.md and makes changes

Process:

User edits plan file (changes requirements, adds constraints, modifies goals)
User notifies agent: "I've updated the plan file"
Agent reads updated plan file
Agent identifies what changed
Agent proposes how to incorporate changes
Agent updates affected stages

Example:

User: "I've updated the plan file - changed the color scheme to dark mode"

Agent: 
✅ Read updated plan: .tmp/design-plans/saas-landing-page.md

Changes detected:
- Color scheme: Light → Dark mode
- Primary color: Blue → Purple

This affects:
- Stage 2 (Theme) - needs regeneration
- Stage 4 (Implementation) - needs CSS update

Would you like me to:
1. Regenerate theme with dark mode
2. Update implementation with new theme

Iteration Within a Stage

Scenario: User requests changes during a stage

Process:

Agent presents stage output (e.g., layout wireframe)
User requests changes: "Make the hero section taller"
Agent updates plan file with feedback
Agent makes changes
Agent updates plan file with new iteration
Agent presents updated output

Example:

Stage 1 - Layout Design

Agent: [presents wireframe]

User: "Make the hero section taller and move CTA above the fold"

Agent:
✅ Updated plan file with feedback
✅ Revised layout wireframe
✅ Updated plan file with Iteration 2

[presents updated wireframe]

Tracking Iterations in Plan File

Format:

## Design Evolution

### Iteration 1 - Initial Layout
- Date: 2026-01-30T10:00:00Z
- Stage: Layout
- Changes: Initial wireframe created
- User feedback: "Hero section too short, CTA below fold"

### Iteration 2 - Revised Layout
- Date: 2026-01-30T10:15:00Z
- Stage: Layout
- Changes: Increased hero height from 400px to 600px, moved CTA above fold
- User feedback: "Perfect! Approved."
- Status: ✅ Approved

### Iteration 3 - Theme Adjustment
- Date: 2026-01-30T10:30:00Z
- Stage: Theme
- Changes: Changed from light to dark mode, primary color blue → purple
- User feedback: "Love the dark mode!"
- Status: ✅ Approved

Subagent Context Preservation

Problem: Subagents lose context between calls

Solution: Always pass plan file path

Pattern:

// When delegating to subagent
task(
  subagent_type="OpenFrontendSpecialist",
  description="Implement Stage 4",
  prompt="Load design plan from .tmp/design-plans/saas-landing-page.md
  
  Read the plan file for:
  - All approved decisions from Stages 1-3
  - User requirements and constraints
  - Design evolution and iterations
  
  Implement Stage 4 (Implementation) following all approved decisions.
  
  Update the plan file with:
  - Output file paths
  - Implementation status
  - Any issues encountered"
)

Plan File as Single Source of Truth

Benefits:

✅ All design decisions in one place
✅ User can review and edit anytime
✅ Subagents have full context
✅ Design history preserved
✅ Easy to iterate and refine
✅ No context loss between stages

Best Practices:

Always read plan file at start of each stage
Update plan file after every user interaction
Track all iterations with timestamps
Document user feedback verbatim
Mark approved decisions clearly
Pass plan file path to all subagents

Quality Checklist

Before presenting each stage:

Layout Stage:

ASCII wireframe is clear and detailed
Components are well-organized
Responsive behavior is planned
User approval requested

Theme Stage:

Theme file created and saved
Colors use OKLCH format
Fonts loaded from Google Fonts
Contrast ratios meet WCAG AA
User approval requested

Animation Stage:

Animations documented in micro-syntax
Timing is appropriate (< 400ms)
Performance optimized (transform/opacity)
Accessibility considered
User approval requested

Implementation Stage:

Single HTML file created
Theme CSS referenced
Tailwind loaded via script tag
Icons initialized
Responsive design tested
Accessibility attributes added
Images use valid placeholder URLs
Semantic HTML used
User review requested

Troubleshooting

Common Issues

Issue: User wants to skip stages Solution: Explain benefits of structured approach, but accommodate if insisted

Issue: Theme doesn't match user vision Solution: Iterate on theme file, create theme_2.css with adjustments

Issue: Animations feel too slow/fast Solution: Adjust timing in micro-syntax, regenerate with new values

Issue: Design doesn't work on mobile Solution: Review responsive breakpoints, add mobile-specific styles

Issue: Colors have poor contrast Solution: Use WCAG contrast checker, adjust OKLCH lightness values

design-iteration.md 29 KB Permalink History Raw

Design Iteration Workflow

Overview

Quick Reference

When to Use This Workflow

Delegate to OpenFrontendSpecialist When:

Execute Directly When:

Delegation Pattern

Example Scenarios

Design Plan File (MANDATORY)

Workflow Stages

Stage 0: Create Design Plan (MANDATORY FIRST STEP)

Stage 1: Layout Design

Stage 2: Theme Design

Stage 3: Animation Design

Stage 4: Implementation

Visual Content Generation

When to Use Image Specialist

Invocation Pattern

Example Use Cases

Tools Required

When NOT to Delegate

Iteration Process

When to Create Iterations

Iteration Workflow

Best Practices

Layout Stage

Theme Stage

Animation Stage

Implementation Stage

File Management

Folder Structure

Version Control

Communication Patterns

Stage Transitions

Iteration Requests

Handling Plan File Edits and Iterations

User Edits Plan File Directly

Iteration Within a Stage

Tracking Iterations in Plan File

Subagent Context Preservation

Plan File as Single Source of Truth

Quality Checklist

Troubleshooting

Common Issues

References

design-iteration.md 29 KB

Permalink History Raw