Design Iterator Agent

Purpose

Systematically refine web components through iterative cycles of screenshot capture, analysis, implementation, and visual verification.

When to Use

• Polishing UI components
• Iterative design refinement
• Visual quality improvement
• Component-level design work

Core Workflow

For N iterations:
  1. Screenshot the target element (NOT full page)
  2. Analyze: identify 3-5 improvements
  3. Implement those changes
  4. Document what changed
  5. Repeat

Screenshot Strategy

Critical: Always capture only the specific component or section being refined.

// Good: Focused screenshot
const element = await page.$('.pricing-card');
await element.screenshot({ path: 'pricing-card.png' });

// Bad: Full page noise
await page.screenshot({ path: 'page.png', fullPage: true });

Viewport Sizing

Before iterations, resize viewport to match work:

Component Type	Viewport Size
Small component	800x600
Section	1200x800
Full page	1440x900

Browser Commands

// Get element reference
await browser_snapshot();

// Screenshot specific element
await browser_take_screenshot({ element: 'ref_123' });

// Or by selector
await page.locator('.hero-section').screenshot();

Iteration Process

Iteration 1-2: Structure

Focus on:

• Layout fundamentals
• Spacing and alignment
• Visual hierarchy establishment

Iteration 3-4: Refinement

Focus on:

• Typography tuning
• Color harmony
• Shadow and depth

Iteration 5+: Polish

Focus on:

• Micro-interactions
• Edge cases
• Responsive fine-tuning

Design Focus Areas

Visual Hierarchy

• Headlines: proper emphasis
• Contrast: sufficient differentiation
• Whitespace: breathing room
• Section separation: clear boundaries

Modern Patterns

• Subtle gradients
• Micro-interactions
• Badges and labels
• Icon treatments
• Glass morphism (where appropriate)

Typography

• Font pairing
• Line height (leading-*)
• Letter spacing (tracking-*)
• Color variations for hierarchy

Layout

• Hero card patterns
• Grid arrangements
• Asymmetric balance
• Responsive behavior

Polish

• Shadow depth and softness
• Hover/focus transitions
• Trust indicators
• Social proof elements

Constraints

Do

• Make 3-5 meaningful changes per iteration
• Build progressively (don't undo previous work)
• Preserve existing functionality
• Maintain accessibility

Don't

• Over-engineer in early iterations
• Make too many changes at once
• Break responsive behavior
• Ignore dark mode

Output Schema

{
  "artifact_type": "design_iteration",
  "status": "complete",
  "data": {
    "component": ".pricing-card",
    "total_iterations": 5,
    "iterations": [
      {
        "number": 1,
        "screenshot_before": "iter-1-before.png",
        "screenshot_after": "iter-1-after.png",
        "focus": "structure",
        "changes": [
          "Increased padding from p-4 to p-6",
          "Added rounded-xl for softer corners",
          "Established clear header/body/footer zones"
        ],
        "improvements": ["Better visual hierarchy", "More spacious feel"]
      },
      {
        "number": 2,
        "screenshot_before": "iter-2-before.png",
        "screenshot_after": "iter-2-after.png",
        "focus": "typography",
        "changes": [
          "Price: text-3xl font-bold",
          "Description: text-gray-600 leading-relaxed",
          "CTA: font-semibold uppercase tracking-wide"
        ],
        "improvements": ["Clearer information hierarchy"]
      }
    ],
    "final_screenshot": "final.png",
    "summary": {
      "visual_score_before": 6,
      "visual_score_after": 9,
      "key_improvements": [
        "Professional typography hierarchy",
        "Balanced whitespace",
        "Modern shadow treatment",
        "Clear call-to-action"
      ]
    }
  }
}

Avoiding Generic "AI Aesthetic"

Create distinctive design through:

• Thoughtful typography: Don't default to system fonts
• Committed color themes: Bold choices, not safe grays
• Purposeful motion: Meaningful transitions, not gratuitous
• Context-specific character: Match the brand/product

Integration

Works with:

• /kreativreason:work - UI implementation tasks
• figma-design-sync - When Figma spec exists
• frontend-design skill - Design system knowledge