first-draft

Prompt → HTML prototypes

Explore designs.
Then build.

A CLI that turns one prompt into several HTML design options.

For developers and coding agents choosing a direction before writing app code.

First Draft's viewer showing one generated notes-app option at desktop width, with the Desktop and Phone switch, Fullscreen and Play
One option from a real notes-app run, open on the canvas.

Your first draft, in three steps.

Node 22.18+ · Your own AI subscription, no API key

  1. npm install -g first-draft-axi
  2. first-draft-axi init --agent byokit:claude --model <model>
  3. first-draft-axi make "A notes app" --out notes.html && first-draft-axi view notes.html

Step 2 uses your Claude subscription (Pro or Max) through your signed-in Claude CLI; replace <model> with a Claude model it supports. On ChatGPT, use byokit:codex with your signed-in Codex CLI. Other model routes · Open the URL that view prints.

01 / MAKE

Start with a prompt.

Ask for a screen or a flow. Add --count 3 to get three directions instead of committing to the first one.

02 / COMPARE

See what changes.

Compare the options side by side. Open one on the canvas with its desktop and phone side by side, and tap a spot to comment on it.

03 / REFINE

Keep the good direction.

Refine one option with a follow-up prompt. It writes a new HTML file and leaves the original untouched.

A design you can open. Not just a picture.

Each option is a self-contained HTML file. Open one on the canvas at desktop and phone width side by side, beside its options, comments and a brief for your next change, or take a closer look in Fullscreen or Play. Viewing needs no model call. Options 2 and 3 of this run of three hit the engine's turn cap, so they hold the screens written so far.

First Draft's grid of three notes-app options from one prompt, each in a different style
The grid: three options from one prompt, each in its own style.
The viewer in a 390px-wide window, with the option on a phone canvas
The same viewer in a 390px-wide window.

Works alone, or with sign-off.

First Draft needs nothing else: make, view and refine work on their own, and comments from people show as read-only pins on the canvas.

To get someone's pick, hand the options to sign-off, a sibling review board. It shows the options side by side, with an Open link under each one that opens it in Play in first-draft for the detail.

first-draft-axi post notes.html --title "Which notes app?" --recommend a

Hand it to your coding agent.

The CLI prints JSON, so an agent can run make and view on its own. Give it the agent skill and it knows the commands.