Replay Before You Render

One real user. Ten golden pairs. A chat running on your own machine.

Self-pacedFDE Roadmap · Block 1

The practice set in one sentence

Write a spec for one real user with 10 golden pairs and a numeric verifier, replay one pair to derive the interface, then run that interface locally in Gradio and compare it with a vibe-coded version.

Which track are you on?

The page shows only your track's steps. Your choice is remembered on this device.

01Why This Exercise Exists

Aarav's status report was a proxy. The skill is not Gradio; it is deriving an interface from an output. In the lesson's worked example, 17 people voted for a search box and one follow-up question overturned it. You are going to run that same replay on your own user, where nobody hands you the answer.

From the notes: the vote that lost.

02Track A: Your Own Problem preferred

Write the spec. Observation (no solution in it, readable by a stranger), North Star (6 months, a direction not a product), hypothesis with a number, a deadline and a stop rule, one named user with their designation, input, output.
Collect 10 golden pairs. The exact text your user would type and the output that would solve their problem. Get them from the user, not from your head. If you are the user, check them with two people like you.
Write the verifier. Baseline, threshold and the arithmetic, the way Aarav's was worked: 15 minutes to 5, 10 a day, 50 a week against a 1 hour bar. State what a failing output looks like in the same units.
Replay one pair. Take your best golden output and write the first follow-up your user would ask after reading it. Then pick search, form or chat, with the one-line reason the replay gave you.
Build it in Gradio, locally. Hello World first. Then the interface you picked, with an echo or placeholder process, and input and output types that match your spec.
Vibe code the same interface with any tool you like, then write a three-line review: what each route gave you, and what the difference was.

03Track B: Aarav's Documents

Use the discovery document and golden pairs. Run the same loop with Aarav as the user and pair 1 (the Friday status report, around 3 hours) as your anchor.

Two changes stop this from being a copy:

Change 1

Write 3 new pairs yourself

For other repeated tasks Aarav could plausibly have, each with its own verifier.

Change 2

Replay a different follow-up

One that is not "What does backtesting mean?". If your replay still lands on chat, say why in your own words.

04Rules of the Build

Gradio only.

No deployment yet; the build guide takes your local app to a link.

Predict before you run.

Write down your interface pick before the replay, and the error you expect before your first python app.py. Keep both, even when wrong.

Docs before chatbots.

Learn gr.Interface and gr.ChatInterface from the Gradio documentation. Ask an LLM only after you have read the relevant page.

AI is allowed, blind pasting is not.

Use AI for hints and debugging. You must be able to point at the input, the process and the output in every line of your first-principles version. That version is the recall test, and it only works if you can explain it.

Log every error.

Message, cause, fix. Python not found and Gradio not installed count. This log is what you review when you work through the build guide.

Mask, do not withhold.

Replace proprietary numbers with percentages or X, Y, Z, but share the spec.

The starting template, for reference

05What You Should Have at the End

Tick each deliverable as it is ready. Ticks save on this device.

SpecObservation, North Star, hypothesis with a number and a stop rule, one named user with designation, input, output.
Golden datasetAt least 10 input and output pairs, each input written as the user would type it. Track B: 3 new pairs of your own.
VerifierBaseline, threshold, the arithmetic, and one example of an output that fails it.
Replay noteYour pre-replay pick, the follow-up question, the final interface, and the one-line reason.
ScreenshotsHello World and your chosen interface, both running on localhost on your machine.
CodeYour app.py, with a comment marking input, process and output.
Error logEvery error hit, with cause and fix.
Three-line reviewVibe coded versus first principles: what each gave you, and the difference.

Deliverables ready

0 / 8

06How to Get Unblocked

Stuck on installation: write down the exact error message and what you already tried before you ask anyone. First-time coders: pair up with someone else starting out and compare errors; one person's fix is often another's blocker.

Got an error? Search it in Troubleshooting. The help-post format is in the build guide.

07When You Are Done

The build guide walks you through checking your spec and error log, then deploys your local app to a shareable link. An FDE's work counts once someone who did not build it can open it and use it.

Replay before you render.Companion pages: build guide · checklist · beginner kit