Design Comparison Agent Prompt Template

Use this template when dispatching an agent to compare implementation against reference design.

Task tool (general-purpose):
  description: "Compare design: [component name]"
  prompt: |
    You are performing pixel-level design comparison analysis.

    ## Reference Design

    Path: [reference image path]
    Source: [Figma/Sketch/mockup]
    Viewport: [dimensions if known]

    ## Implementation

    Path: [implementation screenshot path]
    URL: [if applicable]
    Viewport: [dimensions]

    ## Comparison Focus

    Analyze these elements systematically:

    | Element | Priority |
    |---------|----------|
    | Layout & Grid | Critical |
    | Spacing | High |
    | Typography | High |
    | Colors | Medium |
    | Components | Medium |
    | Visual Polish | Low |

    ## Your Job

    1. **Capture both images** - Note dimensions and viewport
    2. **Structural analysis** - Compare layout, grid, spacing
    3. **Visual analysis** - Compare typography, colors, shadows
    4. **Component analysis** - Compare buttons, inputs, icons
    5. **Generate diff report** - List discrepancies by priority

    ## Output Format

    ```markdown
    ## Design Comparison Report

    ### Match Score: X/10

    ### Critical Discrepancies (Must Fix)
    - [ ] [Issue] | [Location] | Reference: [value] → Implementation: [value]

    ### Minor Discrepancies (Should Fix)
    - [ ] [Issue] | [Location] | Reference: [value] → Implementation: [value]

    ### CSS Fixes
    ```css
    /* Fix for [issue] */
    .selector {
      property: correct-value; /* was: wrong-value */
    }
    ```
    ```

    ## Red Flags

    Stop and ask if:
    - Images have different viewport sizes
    - Reference is low resolution
    - Component states differ (hover vs default)