parallel-design-variants

Parallel Design Variants

Overview

Generate N genuinely different design directions at once, each built by its own subagent locked to a distinct visual reference, collect them in one gallery, pick winners, then run a second round that mixes the winning styles.

Core principle: divergence comes from reference anchors, not from asking "be creative." Ten subagents told "make a nice hero" produce ten similar heroes. Ten subagents anchored to terminal / broadsheet / brutalist / swiss / zine produce ten different worlds. Same content, different reference → real choice.

When to Use

• You'd otherwise build one design and iterate — but you don't yet know the direction.
• Redesign, landing, hero, thumbnail layout, email, slide system, any visual surface.
• Live/stream or team bake-off where people vote on options.

Not for: a single known direction (just build it), or pixel-level refinement of one chosen design (that's normal iteration).

The Loop

ask how many variants (N)
  → spec issue (constant content + N reference anchors + briefs)
  → N subagents in parallel (blind to each other)
  → gallery index.html (side by side)
  → pick winners (optionally by vote)
  → second round: mix winning styles

Workflow

1. Ask how many variants (N) — first, before anything else. Don't silently pick a number; ask the user. Suggest 6–10 as the sweet spot (enough for real divergence, few enough to review side by side) and offer the default, but the count is theirs. Their answer is N for the rest of the flow.

2. Write ONE spec issue — it is the orchestration doc, not a throwaway prompt. It contains:

   • Constant content: the real data and the required sections every variant must render (identical across all). You compare style, never completeness.
   • Result layout: redesign/index.html (gallery) + redesign/{slug}/index.html per direction. Self-contained HTML — inline CSS, vanilla JS, Google Fonts ok, no build step, no framework (so the gallery just opens).
   • A table of N directions: slug · name · reference / media-analog.
   • A shared prompt scaffold (identity, required sections, real data, output files) — every subagent gets the same scaffold + its own brief.
   • Per-direction briefs: 2–4 sentences each, naming the reference and its concrete cues (fonts, palette, layout move).

3. Pick N divergent anchors (the N the user chose). Each anchor a recognizable, different reference — adjacent styles waste a variant. Starter palette:

   slug	reference	slug	reference
   terminal	TUI dashboard (btop, lazygit)	swiss	Int'l Typographic grid
   broadsheet	newspaper (NYT)	teletext	Ceefax / VT323
   neon-wire	tech tabloid (The Verge)	ticker	Bloomberg terminal
   brutalist	raw web brutalism	zine	photocopy punk zine
   magazine	print Wired spread	wire-feed	Hacker News / teletype

4. Dispatch N subagents in parallel (one message, N tool calls), each: shared scaffold + its brief. Blind to each other — that independence is what produces divergence. Use sonnet for design-build subagents.

5. Build the gallery redesign/index.html linking + previewing all N. Review side by side: python3 -m http.server → /redesign/.

6. Pick winners (1–3). For live/team: the gallery carries a real-time vote (emoji / poll) so the audience picks — the engagement payoff of doing it in public.

7. Second round — mix winners. Combine the strongest elements of the top styles into 1–2 refined variants (e.g. swiss grid + zine accents). Converge by remixing, not by restarting and not by polishing only one.

Common Mistakes

Mistake	Fix
Picking N yourself without asking	Ask the user how many variants first; suggest 6–10, but the count is theirs.
2–3 variants in adjacent styles	≥6, each a distinct named reference. No real choice otherwise.
Building variants serially yourself	Parallel subagents, blind to each other — speed + true divergence.
Different content per variant	Lock the data and required sections; vary only the visual system.
"Refine the one I liked" as the whole ending	Second round mixes winning elements — runners-up have good ideas too.
Frameworks / build steps	Self-contained HTML so the gallery opens with no toolchain.
Prompts thrown away in chat	One spec issue = scaffold + briefs → reproducible and reviewable.

Real-World Impact

Proven live on the sereja.tech redesign (YouTube stream "Claude Fable 5, day 2"): a single spec issue → 10 directions, 10 subagents in parallel → gallery → audience voted in chat → second round mixed the winning styles. One session, ten fully-realized directions, a real decision instead of a guess.