Pick a design direction before writing app code.
For developers and coding agents: explore HTML options using your own AI subscription.
Two real retained options in the Studio, unaltered: Parley Books, generator self-scored 8/10, and Margin, 7/10 — claude-sonnet-5-5, runs strip-landing and strip2-notes, 24 October 2026. Self-scores, below our 9/10 bar: a reviewed sample, not a quality claim.
Website · Quick start · Docs · Agent skill
npm install -g first-draft-axi
first-draft-axi init \
--agent byokit:codex \
--model gpt-6.1-sol
first-draft-axi make "A notes app" \
--out notes.html && \
first-draft-axi view notes.htmlRequires Node 22.18+, Chrome/Chromium, a usable AI generator and an independent signed-in subscription judge on a different engine (normally Claude plus Codex). Saved configuration is optional: first-draft resolves ready installed logins and supported BYOKit key routes, then names the chosen generator and judge in the run JSON. Without a usable engine it exits with one exact sign-in command, before generating pages. Open the URL view prints; Ctrl+C stops it. Generation uses your subscription quota; viewing makes no model calls.
Prefer Claude? Use --agent byokit:claude --model claude-sonnet-5-5 in step 2 with your signed-in Claude CLI. first-draft-axi doctor checks readiness without a model call and names the resolved engine. Other routes.
| Instead of… | You get… |
|---|---|
| Committing to the first page a model returns | Three design directions by default; choose one to refine |
| Describing a layout only in chat | Self-contained HTML you can open at desktop and phone width |
| Losing the original when you ask for changes | A new option; the original file stays untouched |
| Treating a model's first answer as finished | Render checks and a critic comparison against a plain-prompt page; low scores stay flagged |
The hero is a native capture of the Studio with two retained options; how it was captured.
- Explore more than one direction. Ask for 1–5 options, a named style, or a multi-screen flow.
- Compare at the right size. Studio has Desktop, Phone and Both views; Play opens a screen flow.
- Get the motion you asked for. A brief that asks for motion (a typing terminal, a pulse, a marquee) gets it for real: the option keeps its CSS animation and inline script and plays in the Studio, sandboxed, loading nothing from the network. A script loaded from a URL is still dropped. Four frames at 390 and four at 1280 are kept in
<option>.motion/and shown beside the option, and the independent judge scores motion from them, naming each defect. A page that does not move gets no motion score; a looping animation that only decorates is scored as a defect. - Click it, don't squint at it. An option whose brief asks for behaviour (a row opens, a filter narrows, a tab switches) is exported with its own inline script, so it really answers a click in Play. The host presses one of its controls with a real mouse event at 390 and 1280 before the judge sees it, and the judge scores
critique.behaviourfrom the page before and after that press, naming each control that does nothing. A drawn option carries its App.jsx source beside it in<option>.source/. - Point at the change. Click a spot to leave a comment; numbered pins and plain JSON keep the feedback beside the design.
- See the market first.
--competitorsfinds 3–5 real products of the brief's kind, captures their public pages through the same robots/terms review as a reference, and shows them beside the options with their sources and every refusal. - Keep the original. Refine into a new option, or send the choices to sign-off for someone's pick.
Polish one direction. Pick one option you already generated and refine only that direction. An independent judge scores each version, and the loop stops at 9/10, at --max-rounds (default 5), or after two rounds without improvement. It does not guarantee 9/10: a version below the bar is reported as below the bar, not as finished.
first-draft-axi polish notes-1.html "A notes app" \
--out-dir notes-polished \
--max-rounds 4 \
--feedback "Warmer paper background"
first-draft-axi polish-feedback notes-polished "Make the sidebar narrower"polish-feedback <run-folder> "<request>" adds cumulative feedback while a run is in progress; the next round judges it. The original file is untouched. An animated option keeps its motion through polish: each round has its own round-N.motion/ frames, and a round that stops moving is not accepted.
first-draft-axi init also installs the agent skill for Claude Code, Codex and pi in your repo. Commands return JSON, so your coding agent can drive the same workflow.
This is a formatted excerpt of real CLI output from a different run, not a generated page or an interactive critic screen: Claude Sonnet 5.5, 24 October 2026, 304 seconds, self-scored 8/10 versus 5/10 for its plain-prompt baseline. It failed the 9/10 quality bar. A generator rating itself is not independent evidence of quality.
Same brief, same model (Claude Sonnet 5.5), 24 October 2026 — First Draft on the right:
a landing page for a small accounting software company — First Draft wins, 8 to 6.5
| Plain prompt | First Draft ✅ |
|---|---|
 |
 |
a notes app — First Draft wins, 7.5 to 3
| Plain prompt | First Draft ✅ |
|---|---|
 |
 |
One run per cell, scored by the review worker, not customers and not an independent judge; before our fixes First Draft scored 4 on both of these. How good is it? has all four briefs side by side, the method, the limits, what we fixed and the rerun command.
- Published npm releases: the clean install path was checked with the packed 0.6.0 build; the release workflow publishes after merge.
- CI: builds and drives CLI/browser checks with local provider stand-ins, without paid generation. The 25 October 2026 local run passed 74 tests, zero failures, zero skips.
- Comparison contract: wrapper additions need paired rendered evidence; our own tool must not quietly lower the plain model's output bar.
| What you already have | init --agent |
|---|---|
| Signed-in Codex CLI / ChatGPT subscription | byokit:codex |
| Signed-in Claude CLI / Claude subscription | byokit:claude |
| A plan key, such as Z.ai | byokit:zai:plan_key |
| An API key, such as MiniMax | byokit:minimax:key |
Calls use BYOKit. An authenticated saved preference is tried first, then other ready supported sources. Account pools may rotate accounts only on the resolved engine/model; a cross-engine pick is refused. Native OpenCode login storage is detected but cannot yet be executed by this build's BYOKit; supported OpenCode key accounts work. Subscription routes use your normal CLI login, without copying credentials. Configuration and provider details.
Options are prototypes, not production apps. Model assessments can be wrong; independently judge designs and verify claims before shipping. Render checks need Chrome/Chromium. Generated assets are opt-in, separately approved spending; add --hero-video (or name Higgsfield) to a --assets run and the hero image also becomes a short looping hero video under the same approval. Public-URL redesign supports anonymous, script-disabled HTML, not signed-in apps or SPA flows.
Testing guide · All flags and viewer routes · Redesign an existing site · Assets · Logos · References and judge · Competitor search · Free inspiration sources · Engine
npm ci
npm testSee CONTRIBUTING.md for the paired-comparison quality bar.
MIT · License · Notice · Design engine: OpenDesign (Apache-2.0; pin and attribution)