Exploration, product baseline, requirements, flow diagram, clickable prototype and audit, drawn with AI on one canvas, connected end to end and ready to export.
Scroll to unroll
How a teahouse mini program was made
Yizhan · Demo outputProblem map: where walkers give upMap
Yizhan · Demo projectBrief
A cup waits up the hill.
A seat-booking mini program for walkers: know if there’s a seat before you turn in, and book one.
For whom
Walkers book and arrive; the keeper sees bookings and confirms arrival
Smallest loop
See the teahouse → check seats → book → arrive and give your name
Later
Delivery and loyalty points (first prove booking brings people in)
Success
Arrival rate = arrived / booked, target to be measured; guardrail: no-show rate
Only decisions that were adopted.
Yizhan · Demo projectSpec
Book a seat
R-01One walker holds one seat per time slot.
R-02Hold time to be decided, set by the keeper.
R-03Once the keeper confirms, the seat becomes arrived.
States
Booked → Arrived / Expired / Cancelled
AC-01
With a free seat, give a name and tap “Book a seat”: the seat number and “give your name on arrival” appear.
Yizhan · Demo outputCore flow: booking loopFlow
YizhanClickable prototype
Pine teahouse · 3 seats free today
Tired? Book a cup first.
Today’s teaDragon-phoenix cake tea · one whisked cup
Local interactive demo
When it’s full, where does the walker go next?Product
Signal is poor up here. Is the name lost if booking fails?Design
Yizhan · Demo projectAudit
Audit: Book a seat
F-01MISSING_INFORMATION
The spec doesn’t say what happens when it’s full; the prototype has no next step.
Advice: add R-04 and a full-house branch to the flow.
F-02CONFIRMED_DEFECT
A failed booking clears the name, against the “keep input” requirement.
Advice: add R-05; keep the name in the prototype.
Checked: baseline, spec, flow, prototype first screen. Not covered: prototype walkthrough.
Yizhan · Demo projectIndex
What’s in this scroll
Role
Deliverable
Checked to
Explore
Walkers’ rest problem
Read back
Explore
Problem map · SVG
Rendered · visual pass
Goal
Product baseline
Read back
Spec
Book a seat
Read back · R-04/05 added
Flow
Booking loop · SVG
Rendered · visual pass
Prototype
Menu and booking
Runs · not walked through
Audit
Audit report
2 fixed
Export
DocumentsMarkdown, Word, PDF
DiagramsSVG, PNG
PrototypeHTML, PNG
Whole canvasZIP, PNG
Below is the demo project “Yizhan”, a seat-booking mini program for a mountain teahouse. Everything on the scroll is a sample.
Sketch · Exploration and problem map
First, put the problem
on the canvas
Describe the idea. The Agent writes an exploration first: who gets stuck in what situation and how they cope today, then draws it as a problem map. Opportunities stay marked as assumptions.
Colour · Baseline and requirements
Then turn options
into decisions
Adopted decisions go into the baseline: who it’s for, the smallest loop, what waits, how success is measured. The spec follows with rules, states and acceptance. Three colourings are three interface styles; pick one and the prototype follows.
Use the buttons or the arrow keys to recolour. The scroll, prototype and review change with it.
Detail · Flow and clickable prototype
Step inside
the prototype
The loop from the spec becomes a flow diagram, with a way out for a full house and for a failed booking. The prototype runs right on the scroll: give a name and book a seat.
Inscribe · Audit and revision
Ask everyone
to find problems
The audit checks baseline, spec, flow and prototype against each other. Every finding has an id, a category and advice. Comments are written on the scroll and sealed once fixed.
Seal · Delivery index and export
Roll it up.
It’s one scroll
Exploration, baseline, spec, flow, prototype and audit form one scroll. The delivery index records how far each was checked, and says so where it wasn’t. Export what you need to hand over.
On the scroll · Six components
Everything on the scroll
is a component you can keep editing
Documents, diagrams, prototypes, data views, code prototypes and decks. The Agent drafts them, you keep editing on the canvas, and export when it’s time to hand over.
Product baselineEdit
Yizhan · Demo projectBrief
A cup waits up the hill.
A seat-booking mini program for walkers: know if there’s a seat before you turn in, and book one.
For whom
Walkers book and arrive; the keeper sees bookings and confirms arrival
Smallest loop
See the teahouse → check seats → book → arrive and give your name
Later
Delivery and loyalty points (first prove booking brings people in)
Success
Arrival rate = arrived / booked, target to be measured; guardrail: no-show rate
Only decisions that were adopted.
DocumentCite to Agent
Core loopEdit
Yizhan · Demo outputCore loopLoop
MermaidCite to Agent
Teahouse prototypeEdit
YizhanClickable prototype
Pine teahouse · 3 seats free today
Tired? Book a cup first.
Today’s teaDragon-phoenix cake tea · one whisked cup