Yoga booking prototype from a Figma-first setup
A five-screen mobile booking prototype in React, built from an archive setup that expected Figma frames that were never provided.
- Time
- 5 min
- Cost
- EUR 1.20
- Turns
- 8
- Tests
- 12 of 12 (100%)
ReactViteTypeScriptTailwindReact RouterVitestBuilt from the archive setup Yoga studio booking clickable prototype.
Yoga booking prototype from a Figma-first setup
What the project is
A clickable, phone-sized prototype of a yoga studio booking flow: a class list with a seven-day selector, class details, a booking form with a fake payment step, a confirmation page and a My Bookings page with cancel. All data is fake and bookings live in localStorage, so they survive a reload. Spots left go down on booking and come back on cancel. Nothing takes real money.
How the setup steered the work
The setup shipped a CLAUDE.md, a SPEC.md with exact screens, routes, data shapes and flow rules, a five-phase PLAN.md, a verify skill, a figma-to-screen skill, a test-runner agent and a REVIEW.md. The SPEC was the most useful file. Routes, empty states, the not-found messages, the "Prototype - no real payment" label and the Class and Booking shapes could be built almost word for word, and the unit tests came straight from the Phase 2 goal (create reduces spots, cancel restores, full class rejects, data survives reload). CLAUDE.md fixed the command names, so typecheck, lint, test and build all exist and pass. The rule of no inline mock data and no hardcoded hex values also shaped the code: fake data sits in src/data and colours sit in tailwind.config.ts.
Where it was missing something
The whole design half of the setup assumes a design/ folder with exported Figma frames and a notes file. None was provided, and the setup says to stop and ask rather than guess colours. Since nobody could answer, I used placeholder token values and listed all of them under needs owner confirmation in tokens.md. The visual fidelity checklist and the design check in the verify skill could not run at all. The verify skill and test-runner agent also require a Playwright smoke test, but the settings only allow npx playwright test and the plan asks for a browser download that this run did not do, so I wrote the smoke test with Testing Library in jsdom instead. That checks the flow but not 390px layout or tap target size in a real browser. The settings file was safe: curl and sudo are denied, nothing touches the network, so no hooks or rules were removed.
What I would change in the setup
Add a fallback token set so a build without Figma still has sensible colours, and say which values are placeholders. Allow a jsdom smoke test as an alternative to Playwright, or add a line that installs the Playwright browser. Name the test framework in CLAUDE.md, since it only says unit tests. Also make the PLAN prompts say what to do when a TODO in the SPEC (header, selected day state, currency) cannot be resolved, because the owner questions were never answered.