Emerging

Draft mode

A cheap, fast, explicitly provisional pass for exploring before committing to a full-quality run.

MResearchChurn brief for Thursday's exec review Draft mode

3 drafts 12 credits · 38 s

Finalising runs the full pass on the chosen draft

23 sources read in fullnumbers checkedchart built

120 credits · about 2 min · keeps the draft's outline and seed

Q3 churn: small teams never got set up

Small accounts that churned mostly never finished setup. Completion looks like about half for small teams, versus most larger ones source?

Onboarding emails may not be landing
Pricing probably played a part too

Chart: first-month setup completion by account size

Drafts can't be exported.

Try it: Flip between the three cheap drafts, then finalise one. Drafts are visibly marked and can't be exported; the final keeps the same outline with checked numbers.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Midjourney web grid of cat-astronaut illustrations with a red 'Draft' label before the prompt, and hover buttons 'V Subtle', 'V Strong' and 'Enhance' on one image, with an arrow pointing to Enhance. — Midjourney
Draft Mode renders cheap, low-fidelity images marked 'Draft'. An Enhance button re-renders a chosen draft at full quality.
Source: Midjourney docs ↗

When to use

Expensive generation — video, high-res images, deep research, large refactors.

Seen in

Runway draft renders, Midjourney fast-vs-relax, low-effort model tiers, preview-quality exports.

For engineers

Mark draft artifacts in metadata and carry the seed forward so the final run matches the draft.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Draft mode" pattern: `DraftCompare`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A cheap, fast, explicitly provisional pass for exploring before committing to a full-quality run.

Use it when: Expensive generation — video, high-res images, deep research, large refactors.

## What to build
A view for cheap, fast draft outputs that are unmistakably marked as provisional, with a single step to finalise a chosen draft at full quality. It lets a person compare a few directions before spending on the real run, and blocks drafts from being exported as if they were final. It renders in a generation or research workspace.

### Props
- `drafts`: Array<{ id: string; title: string; summary: string; body: React.ReactNode; seed: string; limitations: string[] }>, where `limitations` lists what the cheap pass skipped, e.g. "Numbers not checked".
- `selectedId`: string and `onSelect(id: string)`, controlled.
- `draftCost?`: string, what the drafts cost, e.g. "3 drafts, 12 credits, 38 s".
- `finalCost`: string, the cost of the full pass, e.g. "120 credits, about 2 min".
- `finalPassIncludes?`: string[], what the full pass adds, e.g. "23 sources read in full".
- `status`: "drafts" | "finalising" | "final" | "error", controlled by the parent.
- `final?`: { body: React.ReactNode; fromDraftId: string; seed: string }, the full-quality result.
- `onFinalise(draftId: string, seed: string)` and `onExport()`: callbacks. The component never generates or exports anything itself.

### States it must render
- Drafts: draft cards each carry a persistent "Draft" badge, a provisional visual treatment (for example a hatched or tinted frame) and the limitations line "Fast pass from 6 sources. Numbers not checked. Not for sharing."
- Draft selected: the chosen draft is shown larger with its gaps marked inline ("source?"), plus the Finalise button showing `finalCost` and what the full pass adds.
- Finalising: draft choice is locked and progress reads "Finalising, reading 23 sources".
- Final: the draft badge and treatment are removed, a line says "Finalised from draft B, same outline and seed", and Export becomes enabled.
- Error: the draft remains, marked as draft, with Retry finalise.

### Interactions
- Clicking a draft card selects it; arrow keys move between cards.
- Finalise calls `onFinalise(draftId, seed)` so the full run keeps the draft's seed and outline.
- Export is disabled while any draft is shown, with the reason "Drafts can't be exported" next to it; it calls `onExport` only in Final.

### Edge cases
- Copying text out of a draft: copied content carries a "Draft" prefix or note, so it can't leave looking final.
- Final output that differs noticeably from the draft outline: show "Changed from draft" markers rather than implying they match.
- A single draft: skip the comparison layout but keep the badge and limitations.
- Printing or screenshots: the draft badge stays visible in print styles.

## Must avoid
Draft output that looks final, so users ship it without knowing they saw the cheap version.

## Engineering constraint
Mark draft artifacts in metadata and carry the seed forward so the final run matches the draft.

## Accessibility
- Draft cards form a `radiogroup`; each card's accessible name starts with "Draft:" so the provisional status is not only visual.
- Announce the switch from draft to final, including which draft it came from.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for governors

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Is the gate placed per action, by reversibility — not per agent?
Does the approval card show evidence, expected result, and downside?
Can the user stop a run in progress and keep partial work?
Is there an audit record naming who approved what?