Lossless Changelog
fleet

Three Client Spikes in One Night, and the Skill That Came Out of Them

Three sites got redesigned as three complete directions each — nine working variants, twenty-seven direction-and-mode combinations, all off one shared content layer per site. gth-site turns a docuseries funnel into a clinical publication, an anatomical atlas, or a consultation, with an upgrade cart whose tiers are strict supersets so it can show you a delta instead of a new cart. dominocielo-site holds a 300-word family-office page at 300 words and makes brevity read as confidence. multiphasic-site got the README treatment its CEO's interest deserved. The pattern repeated three times, so it stopped being improvisation and became `generate-site-design-variants` — a 257-line skill, plus a `/design-variants` page on the splash so the workflow is legible to people who are not us.

Michael StatonMusic Editoraugmented with Claude Code on Claude Opus 5 (1M context)

Changelog — 2026-09-13 (#1)

Three Client Spikes in One Night, and the Skill That Came Out of Them

Why Care?

Two years ago a redesign was two purchases. You paid for pictures, then you paid engineers to turn the pictures into a website, and somewhere in between the pictures lost an argument with the code.

The obvious correction — have an agent build the site directly — trades that problem for a worse one. You get a real, working site nobody can safely change, because nothing about how it was built is legible to the next person. It looks finished and it is a time sink the first time someone wants a different blue.

What shipped tonight is the third data point that Astro Knots resolves both. A redesign now arrives as three complete, genuinely different designs — working code, two-tier theming, three modes each, themed image assets, one consistent stack — generated in parallel against a single shared content layer, so a stakeholder compares them like-for-like and retiring the two losers is a delete rather than a refactor.

The part that matters is not that an agent made pretty pages. It is that the discipline is in the code output. Astro Knots is a conceptual map handed to the agent before it writes anything: the stack, the conventions, the constraints, the things we have learned not to do. So it gets creative within rails instead of creative and unpredictable. The test is the handoff — give any of these nine variants to a marketing team, an engineering team, or a different coding agent and they continue the same afternoon.

What's New?

sites/gth-site — the hard one

A docuseries-and-diagnostics funnel on a hosted storefront, carrying a 2008 information architecture: condensed all-caps headlines, one green button, a value-stack offer page ending in "WAIT, THAT'S NOT ALL!!", and two blocks of unreplaced Lorem ipsum sitting in production where the team bios belong.

Three directions off one content layer — twelve articles, eight episodes, three bundle tiers, one cart:

  • /journal — a clinical publication that happens to sell the instrument its research is built on. Masthead, editorial board, a library set as a table of contents, testimonials as letters to the editor. Built for a clinician who is shy about thought leadership: the corpus does the asserting.

  • /atlas — an anatomical axis runs down the page, mouth to colon, and every section docks to a node on it. Drawn per-section in CSS hairlines and inline SVG, so it is exact at any viewport and complete with JS off.

  • /practice — opens on six symptoms in the reader's own first person, then turns: those are not six complaints, they are six readings from the same place.

The measurable win. The live site says its coined product name by word 5. All three redesigns hold it past word 200, after the reader already knows what the thing is and what to do. That is enforced in the schema, not a style note: articles carries a plain_question field and every index card renders it above the clinical title.

sites/dominocielo-site — the inverse brief

A single-family-office one-pager, and the exact opposite problem. The live site is 300 words total and the client asked that it stay simple. Nothing to cut. The design problem is the harder one — make brevity read as confidence rather than as an unfinished page.

  • /card — a calling card. One screen, enormous air, the email in brass as the second-largest thing on the page. 230 words.

  • /sheet — a document an allocator would keep in a folder. Numbered sections, SHEET 1 OF 1, the two real figures promoted to display size. 263 words.

  • /aperture — a sky with a name on it. A curved horizon hairline, the portrait ringed like an instrument reticle. 243 words.

The restraint is a build artifact: WORD_BUDGET is an exported constant, each direction's built HTML is counted against it, and the content schema is shaped so one sentence per investment area is the only thing that fits comfortably.

Two findings worth keeping. The site loads about forty Google Font families in a single request for a page with nine headings. And it has no brand at all — every colour on it is the stock WordPress Gutenberg swatch set. So rather than honour a palette nobody chose, each direction proposes one drawn from the single deliberate visual the client owns: the headshot.

sites/multiphasic-site — README brought in line

No new directions; the three from the earlier build stand, and the CEO responded well to one. What changed is the document wrapped around them, which still opened with a pseudomonorepo explainer and closed with "Not commissioned, not deployed, not endorsed by Multiphasic Corporation."

generate-site-design-variants — the pattern, written down

Three spikes produced the same shape of work, so it stopped being improvisation. 257 lines, seven phases, and the ordering that makes the output trustworthy:

  • Phase 0 — extract the spine before any pixels. On multiphasic the agent's first job was not design at all; it was eight narrative beats written into a spec before a component existed. That ordering is why three radically different designs could be generated without any of them quietly rewriting the pitch.

  • One content layer, N directions. Variants are Tier 2 theme files, not forks.

  • Three modes per direction, vibrant dark-based, nothing inherited from light.

  • One themed image family, not one set per mode.

  • No cross-imports, so retiring a direction is rm -rf plus a route.

Splash gets a surface

New /design-variants page walking the workflow with real examples, three site-highlight entries so the spikes appear in the gallery with repo links, a home page section, and the seo.ts entry.

Two reusable artifacts fell out of client work

Solving these sites produced a blueprint and a reminder in the shared context-v/ — which is the context-vigilance skill doing its job, turning a one-off fix into a pattern for the next site without anyone remembering to write it down later:

  • [Build an Upgrade Ladder Cart from Superset Tiers] — make every tier a strict superset of the one below and the cart can show a delta instead of swapping in a whole new cart. A locked line item becomes a real affordance: click the thing you want and you move to the cheapest tier containing it.

  • [Orient Before You Introduce a Term of Art] — plain question above clinical title, enforced in the content model.

How the night actually went

Worth recording, because it is the argument for browser-drive verification.

Every subagent reported green: builds clean, astro check at zero errors, token discipline verified, contrast computed. Three real bugs survived all of that and were caught only by rasterizing the built HTML and looking at it.

  1. this,start — Astro's whitespace compression ate the space between a sentence and a following <em> in a hero headline. The source looked correct. The built HTML was ...feel like this,<em>start. Swept the codebase for the pattern afterward; no other instances.

  2. An opaque portrait. A client headshot that everyone, including the agents told to use it, assumed was transparent. It was a circle composited onto white — fine on a white WordPress page, a white box the moment it hit a dark ground. Fixed at the asset level with a real antialiased alpha circle, at half the file size, so all three directions benefited at once.

  3. Three fragile heuristics for one flag. Each direction had independently invented a way to find the one sentence on the page with a human voice in it — a regex on a word in the copy, a filename check, a hardcoded ID. All three would have silently removed the design the first time the client edited that sentence. Now it is feature: true in the content file.

Same lesson three times: a rule in the content model survives a template rewrite; a rule in a template does not. That is now the constraint-in-code section of the skill.

What's still open

  • LFM is not wired into gth-site. Article bodies render through Astro's native markdown pipeline. Acceptable for a spike, first follow-up if it proceeds.

  • Nothing is deployed. All three run locally; each has a vercel.json ready and ships noindex, nofollow.

  • gth-site prices are illustrative. Tier contents are real line items from the client's own offer page; the three price points are invented to demonstrate the mechanic, and every direction says so on the page.

  • Codenames are now vestigial. The specs still say Threshold and Meridian, but the repos are named for the actual clients, so the aliases hide nothing and only confuse. Worth a sweep.

  • context-v/agent-skills/generate-site-design-variants/SKILL.md

  • context-v/specs/Three-Directions-for-a-Practitioner-Led-Testing-and-Content-Site.md

  • context-v/specs/Three-Directions-for-a-Single-Family-Office-One-Pager.md

  • context-v/blueprints/Build-an-Upgrade-Ladder-Cart-from-Superset-Tiers.md

  • context-v/reminders/Orient-Before-You-Introduce-a-Term-of-Art.md