astro-knots

Our systems keep getting better

Redesign a site as
three real directions.

Working code, proper two-tier theming, themed image assets, one consistent stack — built in parallel against a single shared content layer, so a stakeholder can compare them like-for-like instead of squinting at a mood board.

1–3 prompts, start to finish
15–30 minutes per loop
3–5 complete variants per run

↑ try the mode toggle — every variant below ships all three modes.

Three spikes. 9 complete variants.

Three different prospective clients, three different problems, the same method. Each repo holds a chooser at /, one direction per sibling route, and its own /brand-kit and /design-system.

Why the variants are actually comparable

Generating three designs is easy. Generating three that share a spine, a token system and a mode contract — and that can be narrowed to one without a refactor — is the part that needed a method.

  1. 01

    Spine before pixels

    The argument is written down as content — beats, sections, orientation — before a single component exists. That is what lets N agents build N designs concurrently without any of them quietly rewriting the pitch.

  2. 02

    One content layer, N directions

    Every direction reads the same collections. Same articles, same beats, same tiers, same cart. Only form differs, so the comparison is honest — you are choosing a design, not a product.

  3. 03

    Variants are themes, not forks

    A direction costs one Tier 2 theme file, not a copy of the component tree. Tier 1 named tokens hold raw values; components only ever read Tier 2. Re-pointing a brand is one new token and one re-aimed semantic token.

  4. 04

    Three modes, every direction

    Light, dark and vibrant on every direction — three directions means nine combinations, and all nine get verified. Vibrant is dark-based and sets its own ground explicitly rather than inheriting.

  5. 05

    Themed image assets, one family

    Not a light set and a dark set per direction. One family off a single locked seed, dissolved with a blend mode and tinted toward the active primary — so it re-colours with the brand. Better still, drawn in SVG and CSS so there is no raster to keep in sync at all.

  6. 06

    Retiring is a delete

    Per-direction components never cross-import. Narrowing three directions to one is: delete two folders, delete two routes, promote the winner. Not a refactor under deadline.

Creative latitude, executable constraints

An agent given room to be creative will fill space with invented copy unless the constraint is something the build can check. So the discipline lives in the code.

A word budget the build enforces

WORD_BUDGET is checked against each direction’s built HTML. Over budget means copy was invented — the constraint is executable, not a note in a document nobody opens.

dominocielo-site

Orientation enforced by schema

Articles carry a required plain_question, and index cards render it above the clinical title. “Orient before you introduce a term of art” cannot be forgotten, because the data model will not let it.

gth-site

Strict-superset tiers

Each tier a superset of the one below is what lets a cart show a delta instead of swapping in a whole new cart. A content constraint that buys an interaction.

gth-site

The loop

  1. Prompt one — the spine. Point at the source: a deck, the live site, a PDF. Out comes the content layer and a brief in context-v/specs/. Nothing visual yet.
  2. Prompt two — the fan-out. One agent per direction, each handed the shared content layer, the Tier 1 tokens, the mode contract, its own stance, and the no-cross-imports rule. They build concurrently, because the argument is already fixed.
  3. Prompt three — the surfaces. Chooser, brand kit, design system, the imagery family, astro check, README.

Each direction gets a stance rather than a mood — “closest to the source deck”, “furthest from it”, “reinterprets it” — so they diverge on purpose instead of converging on the same safe layout.

The method is written down as an agent skill, context-v/agent-skills/generate-site-design-variants, so the next run starts from it rather than from memory.