Spawn design variants

The default design is plain on purpose. In this chapter you’ll ask Claude Code to spawn several agents in parallel, each producing a different design direction. Each variant deploys to its own preview URL so you can compare them side by side in your browser.

What’s about to happen

You’ll paste one prompt. Claude Code will dispatch N agents (default 5). Each agent:

• Creates a new git branch named variant/<short-name>.
• Reads your content/shell.yaml (especially the tone tags) and your admired sites.
• Picks a distinct design direction.
• Edits only the design files: src/layouts/BaseLayout.astro, src/styles/tokens.css, src/pages/index.astro, and src/pages/articles/[...id].astro.
• Builds, commits, pushes, and deploys to a preview URL.

Your content/ folder is never touched. So your bio and articles render identically across every variant.

The spawn prompt

Paste this verbatim into Claude Code from inside ~/Code/megmude-site. Edit the N=5 value if you want more or fewer variants.

Spawn N parallel agents using the Agent tool. Run them concurrently in a single message. N = 5.

Each agent must:

1. Read content/shell.yaml. Pay attention to tone_tags and admired_sites. If admired_sites is reachable, fetch them for inspiration.
2. Pick a distinct design direction. No two agents should produce the same direction. Vary across: typography pairing, color palette, layout density, hero treatment, navigation style, article-list presentation. Each agent picks a one-sentence design rationale and sticks to it.
3. Create a new git branch named "variant/<short-distinct-name>" (examples: variant/editorial-serif, variant/dense-grid, variant/mono-minimal, variant/warm-magazine, variant/quiet-modern).
4. Edit only these files:
 - src/layouts/BaseLayout.astro
 - src/styles/tokens.css
 - src/pages/index.astro
 - src/pages/articles/[...id].astro
 Do NOT modify content/, package.json, astro.config.mjs, or any other file.
5. Run npm run build and confirm it succeeds. If the build fails, fix it before pushing.
6. Commit with the message: "feat: variant/<name> — <one-sentence rationale>"
7. Push the branch to origin.
8. Deploy a preview to Cloudflare Pages:
 wrangler pages deploy dist --project-name=megmude-site --branch=<branch-name> --commit-dirty=true
 Wrangler prints both a hash URL and a "Deployment alias URL". The alias URL has the form https://<branch-name>.megmude-site.pages.dev — that's the stable preview link.
9. Report back with: branch name, one-sentence rationale, alias preview URL.

After all agents finish, summarize the variants in a markdown table with three columns: branch, rationale, preview URL. Then return to the main branch with: git checkout main

While they run

Agents run in parallel and take a few minutes. While you wait, you can leave the prompt open — Claude streams progress as each agent finishes. Don’t start other prompts in the same Claude Code session until they’re all done.

Reading the results

When Claude reports the summary table, click each preview URL. Open them in separate browser tabs so you can flip between them quickly. Note your gut reactions — usually two or three will stand out and the rest won’t.

If something goes wrong

• One variant didn’t push or deploy. Ask Claude: “Variant X seems to have failed. Show me the agent’s output and tell me what to try.”
• Two variants look identical. Ask Claude to retry one of them with stronger instruction to differ on a specific axis (e.g. “Reroll variant X with a serif typography pairing and warmer palette.”).
• A build failed. The prompt instructs each agent to fix builds before pushing, but if one slipped through, ask Claude to fix it on that branch and redeploy.

In chapter 05 you’ll narrow down the choices using a Nexus-Council expert review.