Variate Design Variations

variate

The user's own localhost is the canvas. You write real alternatives of one of their files; a small card at the bottom of their page lets them flip between them; the one they keep is the code. There is no studio, no preview server of ours, and no separate thing to keep in sync.

Critical floor

Obey these even if you read nothing else.

1. Variant 1 is the user's file as it was. Never edit it, never delete it, never overwrite it. Everything you write is a new numbered sibling.
2. Every variant is a complete, drop-in replacement for the target file. Same exports, same props, same imports the app relies on. It must run.
3. Speak the project's own language. Its design tokens, its utility classes, its components, its fonts, its real copy. A variant that adds a dependency or invents a colour has already failed.
4. Four positions that disagree. Each changes something different, and plan.json says what and what it costs. Four tweaked card grids is wallpaper, not a round. Write plan.json before the variants; check lints it.
5. A round narrows, it never accumulates. Once the user favours one, the others have done their job: variate narrow before drawing again, so they choose between live options rather than re-reading rejected ones. It hides rather than destroys, in .variate/<set>/.dropped/, and status lists them, so "go back to the split one" is a copy, not a redraw.
6. Talk in positions, never filenames. "2 of 4", not "3.tsx".
7. Ask one question per round, with your recommendation.
8. Presenting a round never ends your turn. Hand it over, then run the listening loop below. The card's keep, refine and pick land there.
9. Drain before you answer, every turn a round is open. The user decides on their own clock and may have clicked an hour ago, so variate drain is the first thing you run in any project with a .variate/ directory, even when their message has nothing to do with design. An ask left sitting is the user waiting for an answer you already have.
10. Never write the target file directly while a set is open. Write a variant and switch to it. The user's own hand edits are sacred: the next switch adopts them as a new variant, never destroys them.
11. variate end when the session is done. end <set> closes one round and keeps its live file; the bare variate end closes the session: it keeps what is live, deletes the rest, removes the tag, and stops variate's own little server.

The commands

<skill> below is this skill's own directory, the one holding this file. Every command takes --root <project>; pass it explicitly, since many harnesses reset the working directory between calls.

node <skill>/variate.mjs up    --root <project>              card appears on their page
node <skill>/variate.mjs add   <file> [--n 4] [--new]        register a set
node <skill>/variate.mjs check <set>                         lint before you present
node <skill>/variate.mjs use   <set> <n>                     put one on their page
node <skill>/variate.mjs status                              every set, and which position is live
node <skill>/variate.mjs peek                                is anything queued? counts only, claims nothing
node <skill>/variate.mjs narrow <set> [<n>]                  keep one, drop the rest, draw again from there
node <skill>/variate.mjs await [--timeout 20]                block briefly for the card's next ask
node <skill>/variate.mjs drain [--ack <id> --note "..."]     claim every queued ask now
node <skill>/variate.mjs end   [<set>]                       keep what is live, clean up

Exit codes: 0 did it, 1 error, 2 nothing to do, 3 the user has to act. up exits 3 when a sandbox blocks the card: not a failure, everything else works and the user reloads to see each switch. await, drain and peek exit 0 even when quiet, because hearing nothing is them working: read their JSON, never their exit code. Their one non-zero is await's 3, "no card runs, so no ask can ever arrive": skip the loop and ask in chat.

The one model

A set is one target file plus N alternatives in .variate/<set>/: target (one line: the path), plan.json (the round's question and one entry per position), 1.ext (their file, untouched), and your 2..N. Switching copies a variant over the target file and their dev server re-renders. Which variant is live is derived by hashing, never stored, so it cannot drift. Three words, one thing each: a variant is a file on disk, a position is its slot on the card, and a direction is the name plan.json gives it.

Starting from nothing

There is always something to attach to: a known framework (their dev server renders, we add the tag), plain HTML (variate serves their files), or an empty directory (up writes index.html and serves it). In the empty case do NOT scaffold a framework unless asked: up, then add index.html --new --n 4, write positions 1 to 4 as four real answers to the brief, use your favourite, hand over. A sentence to four designs on a URL is a first-class flow.

Opening a round

1. Settle the question first. One line: what is this round actually asking? Everything else is an answer to it, and it goes in plan.json.
2. Resolve the target: one file. A card pick attaches a selection; read it top down and stop at the first hit: set (the click landed in an open set's marker, so that set's target is the file; extend or narrow it, never a second set), src (a dev-build file and line, relative and inside the project; confirm with one read, then trust it), id, cls and the data or aria handles in chain (grep them literally), url.path (scope the search to that route's files), heading, then text (grep the words a user would see). place says what it looked like (sidebar, hero, header, footer); media lists image alt text when the section has no copy. With no selection, grep the words in the user's phrase. Still plural: ask, naming the two or three candidate files.
3. Read the substrate before you draft: their tokens (never raw hex), the target's own imports, the sections either side of it, their real copy, and how loud the product lets you be. variate status lists every direction this session already passed over: a dead direction is not a fresh idea. Read references/craft.md before your first generative work in a session; it has the shape of plan.json, the style bar, and the motion rules.
4. variate add <file> (--n counts positions including the user's original), write plan.json, then draft one variant per file, landing each as you finish: the card's pager grows as files land. In markup variants (never variant 1, never style files) the root element carries data-variate-section="<set>": it is how the card watches, flashes and locates the piece, and end strips it from the kept file.
5. variate check <set> and fix what it reports: it lints the round as well as the files. It is not a compiler, so run their typecheck or build too.
6. Look at every position before you speak, and at 390px once. A console error after a switch means that variant is broken.
7. Put your recommendation on the page with use before you speak.
8. Hand it over in one short block: what each position tries and costs, which you would keep and why, and the keys: arrows or digits flip, enter or keep decides, refine steers, and clicking the position you are on replays it. Then start the loop.