02 · Your intervention
Keep the copy, colours and desktop layout. At 390 pixels, Mara should understand the project before reaching the main action. Prevent horizontal overflow.Build it with AI →
Book companion · executable workshop project
Try it first. Then build it yourself.
Lea needs help for her bicycle workshop, and Mara responds. Auftragsplatz is the marketplace connecting them. The demo shows the workflow; the starter lets you build from the first button onward.
The demo needs no account or installation. The starter takes you into the local project; real authentication, a database and cloud deployment follow in the German-language book.
One proposal. Three perspectives.
Start a draft as Mara. Then switch to Lea – before submitting it.
Mara has an idea. For now, it belongs to her alone.
One click creates a draft, not a submission.
What if the reading rule vanished?
Only in this simulation: let an outsider see the text and observe the difference. The download remains unchanged.
Start a draft, switch to Tobias and suspend the reading rule here.
Technical view
This demo illustrates a browser-side rule. Real permissions must be enforced on the server and, where appropriate, in the database. In chapter 12, you remove a condition in a local test project and see the matching test fail.
Browser simulation · fictional data · no sign-in. Nothing is saved or sent.
Chapters 9–12 · a look ahead at the role workflow
Watch one real browser walkthrough.
Five captures from the local workbench. No animation or recreated terminal: move at your own pace. The workshop UI is in German.
Mara starts. Nobody else reads along.
Select Mara, then start a draft. There is text, but no message to Lea yet. Writing and submitting are different actions.
About the capture
Captured on 7 September 2026 in the in-app browser at 1280 × 960 pixels. Synthetic accounts and server-side in-memory state; no real sign-in or persistent database. This is an image sequence, not a video recording.
Chapter 8 · an optional UI iteration
A good instruction leaves a visible difference.
Real browser captures from an earlier project version named Vorhabenraum. This optional mobile exercise illustrates refinement; the current build path starts on Auftragsplatz’s empty learning page. The initial fault is deliberately introduced.
01 · Before
The action comes before the project. Mara is asked to decide before understanding the context.
03 · After
Context precedes action. The long title stays readable. Check the wide layout as well.
The agent delivered. Did it meet your goal?
Three example corrections for your next iteration. These are not conversation transcripts.
Looks good. Wrong problem.
New colours, new cards, same obstacle.
Steer it back
A redesign was not requested. Keep the existing design. Fix only mobile order and title wrapping; show the same content before and after.
Green is not a product decision.
A test fails. The agent wants to change the expectation.
Steer it back
The privacy rule stays. Reproduce the failure and fix the implementation. The test must fail on foreign access before the fix and reject that same access afterwards.
The page works. The sentence misleads.
The interface addresses the wrong person.
Steer it back
Read the text from the perspective of the person who owns the record. Correct only the viewpoint. Keep layout, roles and approval rules intact.
The first win
Now the workbench is yours.
Download the fixed starting point and run it locally. Your coding agent can now read and change the actual project files.
- 01
Unpack the project
Open the included auftragsplatz folder as a local project in Codex or Claude Code. START-HERE.md guides you and your agent through setup.
- 02
Run it locally
Ask the agent to read the project guide, set up compatible prerequisites, and open the learning page. You provide any required approvals.
- 03
Save the baseline
Have the agent save the unchanged state in Git and start a feature branch. The learning page is deliberately almost empty.
- 04
Build the first feature
Chapter 3 starts with a button that opens Mara’s form. Preview and editing follow later. Completed references help you compare; real accounts and storage are added from chapter 9.
Optional: run it yourself in a terminalauftragsplatz
npm ci
npm run dev
npm test
npm run lint
npm run buildLearning page (use the reported port)
http://localhost:3000/buildThe through-line
Four workshop stages, one growing platform
The learning page, completed references, and role simulation are included. Real sign-in, persistent storage, and cloud hosting are added in your own development environment.
Starting state
in the packageThe nearly empty learning page runs locally. Your agent sets it up using the included project guide.
Evidence: The learning page is reachable; the unchanged baseline is saved in Git before the first feature.
Chapter 3/buildForm, preview, and editing
in the packageBuild your feature on the learning page. Separate references for chapters 3, 4, and 7 show completed examples, not work already done by you.
Evidence: Included browser tests check the references on desktop and mobile. Add matching tests for your own features.
Chapter 3–8/build-reference?step=3Two-role slice
in the packageDrafting, submission, decision, and blocked third-party access can be exercised with three synthetic accounts.
Evidence: Seven product-rule tests and a visible event log.
Chapter 9–12/workbenchReal accounts, data, and pilot
your environmentAuthentication, persistent data, preview, observability, and release are added in the reader's own development project.
Evidence: A private preview URL, role counter-checks, deployment evidence, and a repair trail.
Chapter 9–16—
Tool selection
Who takes the next task?
This matrix is a dated division of labour, not a permanent model ranking. One agent is enough; a second perspective makes a counter-check more independent.
Codex
last reviewed 2026-09-05Read the repository, plan changes, implement one vertical slice, and run a fresh counter-review.
Plan, bounded diff, tests, and build
Core path
Boundary: External effects such as deployment, migrations, or messages still require explicit approval.
Claude Code
last reviewed 2026-09-05Refine interfaces in small steps with screenshots. The package includes a local frontend-design project helper, not the official Anthropic plugin.
The same state at 390 and 1440 pixels, keyboard path, and diff
Core path
Boundary: Design tokens, product rules, and permissions are constraints, not raw design material.
Browser & DevTools
last reviewed 2026-09-05Inspect the actual user journey, responsive states, console, network, and overflow.
Browser journey, screenshots, and a clean console
Core path
Boundary: A polished screenshot replaces neither permission checks nor product-rule tests.
Git
last reviewed 2026-09-05Secure a known starting point, understand changes, and discard failed iterations without losing work.
Clean status, readable diff, and a named workshop state
Core path
Boundary: Never silently overwrite someone else's or uncommitted work.
Supabase
last reviewed 2026-09-05Add authentication, PostgreSQL, migrations, and row-level security in a private pilot project.
Migrations plus positive and negative role checks
Extension
Boundary: Use isolated development data only; never paste production accounts or keys into agent tasks.
Vercel
last reviewed 2026-09-05Provide a private preview for the bounded pilot and expose build failures.
Preview URL, build log, and tested recovery path
Extension
Boundary: A preview is not a production release. Environment variables remain separated.
Stripe Sandbox
last reviewed 2026-09-05Exercise the optional paid-access path with test products, webhooks, and explicit states.
Signed test webhook, idempotency check, and visible access status
Extension
Boundary: No live keys and no real charge during the book exercise.
Sentry
last reviewed 2026-09-05Observe and reproduce pilot failures, then connect them to an approved repair.
Reproducible event, linked fix, and controlled release
Extension
Boundary: Use a data-minimised development environment and filter sensitive payloads before transmission.
Only one coding agent available?
Stay with the same tool and start the counter-review in a fresh context. The independent question matters more than a second logo.
Two agents available?
Use the proven division of labour: Claude Code for atomic visual iteration, Codex for structured repository work and counter-checks. The observable result still decides.
Traceable
A release, not a moving example
The book, download, and workshop state name the same version. The checksum reveals whether the archive arrived unchanged, while the included START-HERE file keeps the path usable without this website.
Fixed starting point · 0.5.3
- Included
- Empty learning page, completed references, and role simulation
- Data
- fully synthetic
- SHA-256
- 57faf36e9f510abb98a210e5ca01d5d72747e2f0a4869b63541709d49815b097
Starter: version 0.5.3, released on 2026-10-05. Matches the first edition’s step-by-step build path. The tool matrix has its own review dates.