02 · Dein Eingriff
Behalte Texte, Farben und Desktopansicht. Auf 390 Pixeln soll Mara zuerst das Vorhaben verstehen und erst danach die Hauptaktion erreichen. Verhindere seitlichen Überlauf.Weiterbauen mit KI →
Buchbegleitung · ausführbares Werkstattprojekt
Erst ausprobieren. Dann selbst bauen.
Lea sucht Unterstützung für ihre Fahrradwerkstatt, Mara antwortet. Auftragsplatz ist der Marktplatz, der sie verbindet. Die Demo zeigt dir den Ablauf; im Starter baust du selbst vom ersten Button an.
Die Demo braucht weder Konto noch Installation. Der Starter führt danach ins lokale Projekt; echte Anmeldung, Datenbank und Cloud folgen im Buch.
Ein Vorschlag. Drei Blickwinkel.
Starte als Mara einen Entwurf. Wechsle dann zu Lea – bevor du ihn einreichst.
Mara hat einen Ansatz. Noch gehört er nur ihr.
Ein Klick genügt. Danach gibt es einen Entwurf, aber noch keine Einreichung.
Was wäre ohne die Leseregel?
Nur in dieser Simulation: Lass einen fremden Blick zu und beobachte den Unterschied. Der Download bleibt unverändert.
Starte einen Entwurf, wechsle zu Tobias und setze hier die Leseregel aus.
Technischer Blick
Diese Demo veranschaulicht eine Regel im Browser. Echte Berechtigungen müssen serverseitig und gegebenenfalls in der Datenbank geprüft werden. In Kapitel 12 entfernst du eine Bedingung im lokalen Testprojekt und siehst den passenden Test scheitern.
Browser-Simulation · erfundene Daten · keine Anmeldung. Nichts wird gespeichert oder versendet.
Kapitel 9–12 · Ausblick auf den Rollenweg
Einmal über die Schulter schauen.
Fünf echte Browseraufnahmen aus der lokalen Werkbank. Keine Animation, kein nachgebautes Terminal: Du bestimmst das Tempo.
Mara beginnt. Noch sieht niemand mit.
Mara wählen, Entwurf starten. Der Text ist da, aber noch keine Nachricht an Lea. Schreiben und Einreichen sind zwei verschiedene Handlungen.
Zur Aufnahme
Aufgenommen am 7. September 2026 im In-App-Browser, 1280 × 960 Pixel. Synthetische Konten, Serverzustand im Arbeitsspeicher; keine echte Anmeldung oder dauerhafte Datenbank. Die Bildfolge ist keine Videoaufnahme.
Kapitel 8 · eine optionale UI-Runde
Ein guter Auftrag hinterlässt einen sichtbaren Unterschied.
Echte Browseraufnahmen einer früheren Projektversion namens Vorhabenraum. Diese optionale Mobile-Übung zeigt das Vorgehen beim Nachbessern; der aktuelle Bauweg beginnt auf der leeren Lernseite von Auftragsplatz. Der Ausgangsfehler ist absichtlich eingebaut.
01 · Vorher
Die Aktion drängt sich vor das Vorhaben. Mara soll entscheiden, bevor sie den Kontext kennt.
03 · Danach
Kontext kommt vor der Aktion. Der lange Titel bleibt lesbar. Die breite Ansicht bleibt die Gegenprobe.
Der Agent hat geliefert. Trifft es auch dein Ziel?
Drei Beispielkorrekturen für die nächste Runde. Keine behaupteten Gesprächsmitschnitte.
Hübsch. Aber die falsche Baustelle.
Neue Farben, neue Karten, derselbe Stolperstein.
So lenkst du zurück
Die neue Gestaltung war nicht beauftragt. Behalte das vorhandene Design. Korrigiere nur Reihenfolge und Titelumbruch auf Mobile; zeige mir denselben Inhalt vorher und nachher.
Grün ist keine Produktentscheidung.
Ein Test scheitert. Der Agent möchte die Erwartung ändern.
So lenkst du zurück
Die Privatheitsregel bleibt bestehen. Reproduziere den Fehler und korrigiere die Implementierung. Der Test muss vorher am fremden Zugriff scheitern und danach denselben Zugriff abweisen.
Die Seite läuft. Der Satz führt falsch.
Die Oberfläche spricht die falsche Person an.
So lenkst du zurück
Prüfe den Text aus Sicht der Person, der der Nachweis gehört. Ändere nur die falsche Perspektive. Layout, Rollen und Freigaberegeln bleiben bestehen.
Der erste Erfolg
Jetzt gehört die Werkbank dir.
Lade den festen Ausgangsstand herunter und öffne ihn lokal. Ab hier kann dein Coding-Agent die tatsächlichen Projektdateien lesen und ändern.
- 01
Paket entpacken
Öffne den enthaltenen Ordner auftragsplatz als lokales Projekt in Codex oder Claude Code. START-HERE.md führt dich und deinen Agenten durch die Einrichtung.
- 02
Lokal starten
Bitte den Agenten, die Projektanleitung zu lesen, passende Voraussetzungen einzurichten und die Lernseite „Platz für Maras Vorschlag“ zu öffnen. Nötige Freigaben erteilst du selbst.
- 03
Den Ausgangspunkt sichern
Lass den Agenten den unveränderten Stand in Git sichern und einen Feature-Branch für die erste Funktion beginnen. Die Lernseite ist absichtlich fast leer.
- 04
Die erste Funktion bauen
Kapitel 3 beginnt mit einem Button, der Maras Formular öffnet. Vorschau und Bearbeiten folgen später. Fertige Referenzen dienen zum Vergleichen; echte Konten und Speicherung ergänzt ihr ab Kapitel 9.
Optional: selbst im Terminal startenauftragsplatz
npm ci
npm run dev
npm test
npm run lint
npm run buildLernseite (Port laut Agentenausgabe)
http://localhost:3000/buildDer rote Faden
Vier Werkstattstände, eine wachsende Plattform
Lernseite, fertige Vergleichsstände und Rollen-Simulation sind enthalten. Echte Anmeldung, dauerhafte Speicherung und Cloud-Betrieb entstehen erst beim Ausbau in deiner eigenen Entwicklungsumgebung.
Startzustand
im PaketDie fast leere Lernseite „Platz für Maras Vorschlag“ läuft lokal. Dein Agent übernimmt die Einrichtung anhand der Projektanleitung.
Beleg: Die Lernseite ist erreichbar; der unveränderte Ausgangsstand wird vor der ersten Funktion in Git gesichert.
Kapitel 3/buildFormular, Vorschau und Bearbeiten
im PaketDu baust deine Funktion auf der Lernseite. Getrennte Referenzen für Kapitel 3, 4 und 7 zeigen fertige Vergleichsstände; sie ersetzen deine eigene Umsetzung nicht.
Beleg: Mitgelieferte Browsertests prüfen die Referenzen auf Desktop und Mobile. Eigene Funktionen erhalten passende eigene Tests.
Kapitel 3–8/build-reference?step=3Zwei-Rollen-Schnitt
im PaketEntwurf, Einreichung, Entscheidung und ausgeschlossener Fremdzugriff lassen sich mit drei synthetischen Konten durchspielen.
Beleg: Sieben Produktregeltests und ein sichtbares Ereignisprotokoll.
Kapitel 9–12/workbenchEchte Konten, Daten und Pilot
eigene UmgebungAuthentifizierung, persistente Daten, Preview, Beobachtbarkeit und Freigabe werden im eigenen Entwicklungsprojekt ergänzt.
Beleg: Eigene Preview-URL, Rollen-Gegenproben, Deployment- und Reparaturnachweis.
Kapitel 9–16—
Werkzeugwahl
Wer übernimmt den nächsten Handgriff?
Die Matrix ist eine datierte Arbeitsteilung, keine ewige Modellrangliste. Ein Agent reicht aus; ein zweiter Blick erhöht die Unabhängigkeit der Gegenprüfung.
Codex
zuletzt geprüft 2026-09-05Repository lesen, Änderungen planen, einen vertikalen Schnitt umsetzen und einen frischen Gegencheck durchführen.
Plan, begrenzter Diff, Tests und Build
Kernweg
Grenze: Äußere Wirkung wie Deployment, Migration oder Nachricht bleibt freigabepflichtig.
Claude Code
zuletzt geprüft 2026-09-05Oberflächen mit Screenshot in kleinen Schritten verfeinern. Das Paket enthält eine lokale Frontend-Design-Projekthilfe; sie ist nicht das offizielle Anthropic-Plugin.
Gleicher Zustand bei 390 und 1440 Pixeln, Tastaturweg und Diff
Kernweg
Grenze: Design-Tokens, Produktregeln und Berechtigungen sind Vorgaben, keine Gestaltungsmasse.
Browser & DevTools
zuletzt geprüft 2026-09-05Den echten Nutzerweg, responsive Zustände, Konsole, Netzwerk und Überlauf prüfen.
Browserweg, Screenshots und fehlerfreie Konsole
Kernweg
Grenze: Ein schöner Screenshot ersetzt weder Berechtigungs- noch Produktregeltests.
Git
zuletzt geprüft 2026-09-05Einen bekannten Ausgangspunkt sichern, Änderungen verstehen und fehlgeschlagene Runden verlustfrei verwerfen.
Sauberer Status, lesbarer Diff und benannter Werkstattstand
Kernweg
Grenze: Keine fremden oder ungesicherten Änderungen still überschreiben.
Supabase
zuletzt geprüft 2026-09-05Im eigenen Pilotprojekt Authentifizierung, PostgreSQL, Migrationen und Row-Level Security ergänzen.
Migrationen und positive wie negative Rollenprüfungen
Ausbau
Grenze: Nur isolierte Entwicklungsdaten; keine produktiven Konten oder Schlüssel in Agentenaufträge kopieren.
Vercel
zuletzt geprüft 2026-09-05Eine private Preview für den abgegrenzten Pilot bereitstellen und Buildfehler sichtbar machen.
Preview-URL, Buildprotokoll und getesteter Rückweg
Ausbau
Grenze: Preview ist keine Produktionsfreigabe. Umgebungsvariablen bleiben getrennt.
Stripe Sandbox
zuletzt geprüft 2026-09-05Den optionalen Bezahlzugang mit Testprodukten, Webhooks und nachvollziehbaren Zuständen erproben.
Signierter Test-Webhook, Wiederholungstest und sichtbarer Zugangsstatus
Ausbau
Grenze: Keine Live-Schlüssel und keine echte Abbuchung im Buchdurchlauf.
Sentry
zuletzt geprüft 2026-09-05Fehler im Pilot beobachten, reproduzieren und mit einer freigegebenen Reparatur verbinden.
Reproduzierbares Ereignis, zugeordneter Fix und kontrollierter Release
Ausbau
Grenze: Datensparsame Entwicklungsumgebung; sensible Nutzlasten vor der Übertragung filtern.
Nur ein Coding-Agent verfügbar?
Bleib beim selben Werkzeug und starte die Gegenprüfung in einem frischen Kontext. Wichtig ist die unabhängige Frage, nicht ein zweites Logo.
Zwei Agenten verfügbar?
Nutze die erprobte Arbeitsteilung: Claude Code für atomare visuelle Iteration, Codex für strukturiertes Arbeiten im Repository und Gegenchecks. Entscheidend bleibt das beobachtbare Ergebnis.
Nachvollziehbar
Release statt bewegliches Beispiel
Buch, Download und Werkstattstand nennen dieselbe Version. Die Checksumme zeigt, ob das Archiv unverändert angekommen ist; die enthaltene START-HERE-Datei führt auch ohne diese Website weiter.
Fester Ausgangspunkt · 0.5.3
- Enthalten
- Leere Lernseite, fertige Referenzen und Rollen-Simulation
- Daten
- vollständig synthetisch
- SHA-256
- 57faf36e9f510abb98a210e5ca01d5d72747e2f0a4869b63541709d49815b097
Starter: Version 0.5.3, veröffentlicht am 2026-10-05. Passend zum schrittweisen Bauweg der ersten Auflage. Die Werkzeugmatrix nennt ihren eigenen Prüfstand.