What is Visual draft?
A rendered proposal for an interface — ideally produced from the real application, so the options can be compared as they would ship.
Interfaces are the most disputed layer; seeing beats describing.
On this page
A visual draft is a rendered proposal for an interface — a real, lookable artifact of a design direction, produced so the people deciding can compare options as they would actually ship rather than imagine them from prose. Ideally it is rendered from the real application's components and data, because the further a mock sits from the shipping surface, the more surprises the distance hides.
The term names a unit of design work that sits between the idea and the implementation — the same role a proposal plays for engineering work, carried out in the medium where interface decisions actually live: pixels.
Why interfaces need rendered options
Interface decisions are unusual in how badly people judge them from descriptions. "A compact toolbar with the primary action on the left" sounds fine — until three variants are on screen and two of them are obviously wrong. Words about interfaces are decisions deferred; renders are decisions presented.
Three properties make rendered options work when descriptions fail:
- Comparison is honest. Two real variants side by side expose trade-offs that a description of one variant conceals. The human eye is a better diff tool for layouts than any brief.
- The cost of being wrong is paid before the build. An interface objection raised at the render costs a revision of the draft; the same objection raised at review costs the implementation.
- Choice stays with the owner. The producing side can offer genuinely different directions; the deciding side sees what each direction is. Neither has to trust the other's taste through a wall of adjectives.
Rendered from the application, not beside it
The "ideally" in the definition carries most of the quality bar. Mock-ups drawn in a separate tool describe a fiction: real data breaks the layout, real text overflows, real states (empty, error, loading, long names) were never drawn. A draft produced from the application's own components with realistic data inherits the truth of the surface it proposes to change.
| Standalone mock | Draft from the real application | |
|---|---|---|
| Layout | Idealised content | Real content, real states |
| Feasibility | Implied | Demonstrated — it renders |
| Comparison | Aspirations | Shipping candidates |
| Distance to implementation | The whole build | A reviewed diff |
The second column is also where review gains teeth: a draft that renders can be checked — contrast measured, states exercised — the same way code is checked, before anyone approves it.
Drafts in a workflow
Used well, visual drafts are a gate in the pipeline, not a side channel:
- Produce genuinely different directions — not one idea rendered three ways. Two drafts that agree on everything except a shade of blue are one draft with noise.
- Present the round as a set: what each direction trades away and what it buys belongs beside the renders.
- Decide once, on the record: the pick is a decision about the interface, recorded where the work that implements it can reference it.
- Implement from the pick, and let review check the result against the draft that was approved.
The failure modes are all violations of "genuinely different" and "on the record": variants so similar the round is theatre, drafts with no stated trade-offs so the choice is blind, and picks that live in a chat scroll while the implementation guesses.
Visual drafts in YATFA
Visual drafts in YATFA are rendered from the real application, offered in rounds of genuinely different alternatives with each direction's trade-offs stated, and decided by the owner on the record — the chosen draft then anchors the work that implements it. The review of the finished interface checks against the approved render, not against memory. See visual drafts in YATFA.
Frequently asked questions
Isn't this just a mock-up with a fancier name?
The name marks the difference that matters: a mock-up decorates a conversation; a visual draft is a decision unit — produced, compared, picked on the record, and implementable. If the artefact does not end in a recorded choice that work can anchor to, it was a picture.
How many alternatives should a round have?
Enough to make the decision real, few enough to make it affordable — in practice two to four genuinely different directions. One draft is a presentation; ten are noise. The quality bar is divergence: each alternative should differ where the decision actually is.
Do agents produce visual drafts or only humans?
Both, and the division follows the same pattern as code: an agent can produce the alternatives fast, while the pick stays human — interface taste and intent are exactly the judgement human gates exist for. The agent's leverage is making "show me three real options" cheap enough to be the default rather than the luxury.