An AI builder that makes the next correction easier.
Project
Self-initiated · no client
My role
Product design & implementation
Scope
References · editing · checkpoints
Status
Working product
01 / Problem
The first result is only a starting point.
I built Cozonac to turn a reference and an idea into a working page, then make it specific. The design problem was everything after the first result: choosing what to keep, correcting a detail and recovering an earlier version.
The first page is the beginning of the design work.
02 / What exists today
The starting point was an idea, a reference and a prompt.
My starting workflow used text to describe the page I wanted. The generated page then became something I needed to inspect and direct visually.
Three inputs have to become one page someone can direct.
03 / What’s wrong
A small visual change should not need another full brief.
Text can describe intent, but it is a cumbersome way to point to one wrong element or compare two versions. Repeating the brief for each correction puts extra work between seeing a problem and fixing it.
A small visual correction should stay a small task.
04 / What I explored
Make each correction a smaller decision.
I worked through three parts of the flow: reviewing the reference interpretation before building, editing an element beside its preview, and separating a look at an earlier version from restoring it.
I also built Quality, Hybrid and Local paths. Their differences in cost and fidelity made the choice of build mode part of the design problem.
Give reference review, local edits and recovery their own place.
05 / Low-fi architecture
Direction, generation, correction and a way back.
I put reference review before generation, editing beside the preview, and recovery alongside revision.
01 / DIRECTION
Reference + intent
Inspect the interpretation. Edit the structure.
02 / GENERATION
Choose the build
Quality · Hybrid · Local Different cost and fidelity tradeoffs.
03 / CORRECTION
Inspect the result
Change an element. Keep code and preview close.
↶
Checkpoint → compare → restore
The correction loop includes a way back.
06 / Wireframes
A sequence of smaller decisions.
Wireframe sequenceExplore the sequence
01 / 03
Make the interpretation editable
○ ○ ○Reference reviewWireframe
Reference image
Design attributes
Layout
Typography
Color
Page structure
Header
Selected work
About
Continue to build ↗
01The reference and editable structure make the direction visible before generation.
02 / 03
Keep the page beside its instructions
○ ○ ○Build workspaceWireframe
QualityHybridLocal
Brief
Intent
References
Instructions
Live page preview
CodePreviewBuild status
02Mode choice, brief, and preview share one workspace.
03 / 03
Change a part without starting over
○ ○ ○Direct correctionWireframe
Selected page element
Element boundary
Properties
Text—
Layout—
Style—
Previous checkpointCurrent revision
Restore checkpoint ↗
03Selection, properties, and recovery stay close to the generated page.
Reconstructed from the documented design; sample content is illustrative.
07 / Solution
A workspace for directing the result.
A checkpoint should be more than a history item.
The iteration loopIllustrative interaction
STUDIO / 01Work · About
A place for the work.
A simple portfolio layout, ready to direct.
Project one
Project two
Project three
An original checkpoint is ready.
This small example demonstrates revision and recovery. It does not call a model.
This interaction explains revision and recovery. The actual product recording appears below.
Quality, speed and cost change the experience.
Quality uses cloud generation. Hybrid separates planning and execution, while Local runs through Ollama. They are different paths through the product, with different capabilities and fidelity.
The implementation also handles a revealing exception: creative prompts in Hybrid can route to full-context cloud generation. A mode label alone cannot explain the work the system will do. The interface needs to make the relevant tradeoff understandable.
Build modeExplore the design choice
Quality
Cloud generation prioritizes fidelity to the brief. Usage depends on the model and provider.
Project gallery
01 / 03
Before generation: confirm the interpretation and choose how to build.A closer view of the editing surface.The working builder, with the page and its controls together.
Recording and product images captured from the live Cozonac project.
Cozonac is a self-initiated project, based on my own building workflow. The evidence here is the implemented product, its controls and its recording; I have not presented a customer study.
The next questions are practical: can someone correct one element without restating the page, understand what a build mode changes, and compare or restore a checkpoint without losing their place? Correction time and confidence still need to be measured.
The next test is whether people can direct and recover their work.
09 / Outcome
A working builder with correction and recovery.
Looking back and restoring are separate actions.
Working product
Look back without losing the current work.
My decision
I made previewing an earlier version a separate action from restoring it.
What changed
You can look at an earlier version without changing the current page. Restoring it first saves a backup of the current work.
Evidence
Preview and restore work in the builder. Their effect on correction time still needs testing.