# Split-test — Fable vs Opus on the code step

Both models are strong at frontend. Which one reproduces a *specific* UI most accurately is empirical, so
test it on the actual interface rather than trusting a general leaderboard. Run this as a **mode to decide a
default**, not on every job (it doubles cost and wall-clock).

## Protocol

1. **Prepare one brief.** Write a single, complete instruction set: the ground-truth (real screenshot or
   reference image), the exact strings, the fonts/tokens (or where to find them), the target size, 2D or 3D,
   and "produce one standalone HTML file that renders this exactly; bundle fonts locally; hardcode visible
   text." Subagents start blank — inject *everything* (working dir, source paths, the ground-truth, and
   "never mention Alex's age" if generating anything Alex-facing).

2. **Spawn both in the same turn**, identical brief, different model:
   - Agent A: `model: "fable"`  (claude-fable-5)
   - Agent B: `model: "opus"`   (claude-opus-4-8)
   Each returns a standalone HTML mockup (and its own render if it can, but you'll re-render uniformly).

3. **Render both identically** — same viewport, same 2× settings, via `scripts/screenshot.mjs` or the
   Playwright MCP. Save `fable.png` and `opus.png`.

4. **Score both against ground truth** on the rubric below (1–10 each, be harsh). Show BOTH renders side by
   side with the ground truth and the scored table, so the user can see and decide.

5. **Record the winner** for this kind of UI and default to it in future normal-mode runs. Re-test
   occasionally or when models update — this is a snapshot, not a law.

## Scoring rubric (1–10 each; average, note any dimension < 7)

| Dimension | What it measures |
|---|---|
| Text accuracy | Every string exact and correctly spelled/placed; truncation matches |
| Layout precision | Positions, alignment, spacing, column widths match the target |
| Styling fidelity | Colors, font weight, radii, borders, shadows, background match |
| Detail polish | Icons, hover/selected states, small touches (the things that betray a fake) |
| Code cleanliness | Readable, maintainable HTML/CSS you'd want to keep and iterate |

Winner = higher average with no dimension < 8 (AGENTS.md §4 gate). If tied, prefer the one whose code is easier to iterate — you
will refine the winner to pixel-perfect, so maintainability compounds.

## Notes
- Keep the comparison fair: same brief, same fonts available, same render settings. If one model didn't get
  the font bundled, fix the harness, not the score.
- This tests the CODE step only. The GPT Image 2 finish is model-agnostic and runs after the winner is chosen.
- If you want a rigorous, bias-free call, have a third subagent judge the two renders blind (not told which
  model made which) against the ground truth.
