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.
Mara schreibt. Lea antwortet. Du wechselst die Perspektive und erlebst, was eine Plattform verbindet. Danach baust du mit deinem KI-Agenten daran weiter.
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 2 + 11 · der ganze Kernweg
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 2 · eine begrenzte UI-Runde
Ein guter Auftrag hinterlässt einen sichtbaren Unterschied.
Echte Browseraufnahmen aus Vorhabenraum. Der Ausgangsfehler ist absichtlich eingebaut, nicht als Fehlleistung eines bestimmten Agenten behauptet.
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 Ordner vorhabenraum in einem Terminal. Das unveränderte ZIP bleibt dein Rückkehrpunkt.
- 02
Lokal starten
Installiere die Abhängigkeiten und starte den Entwicklungsserver.
- 03
Beide Seiten erleben
Öffne die Werkstatt und spiele Entwurf, Einreichung, Entscheidung und ausgeschlossenen Fremdzugriff durch.
- 04
Die erste Änderung bestellen
Gib deinem Agenten docs/quickstart-agent-task.md. Vergleiche Mobile und Desktop; lass ihn danach Lint und Build ausführen. Die sieben Produktregeltests bleiben für spätere Änderungen dabei.
Befehle für dein Terminalvorhabenraum
npm install
npm run dev
npm test
npm run lint
npm run buildDanach öffnen
http://localhost:3000/workbenchDer rote Faden
Vier Werkstattstände, eine wachsende Plattform
Die ersten drei Zustände liegen im Download. Der Pilot entsteht bewusst in deiner eigenen isolierten Entwicklungsumgebung.
Startzustand
im PaketDie veröffentlichte Vorhabenansicht läuft lokal und der Agent beschreibt zunächst nur den sichtbaren Nutzerweg.
Beleg: Seite lädt, Projektregeln sind gelesen, noch keine Datei wurde verändert.
Kapitel 2/Erste Agentenschleife
im PaketEin reproduzierbarer mobiler Stolperstein wird mit npm run workshop:start hergestellt, begrenzt korrigiert und mit npm run workshop:refined wiederhergestellt.
Beleg: Vorher/Nachher-Screenshots, Diff, Lint und Produktionsbuild.
Kapitel 2–4/Zwei-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/workbenchIsolierter 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 13–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 visuell und atomar verfeinern; besonders hilfreich mit Screenshot und dem enthaltenen Frontend-Design-Skill.
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.3.1
- Enthalten
- Werkstattstände 01–03
- Daten
- vollständig synthetisch
- SHA-256
- 7ac7e9a4c876840c4c63d3bf268d499d3a0355f5303e009b28134951c4eaa17c
Starter: Version 0.3.1 vom 8. September 2026, mit erweitertem Einstieg und isolierten Fehlerübungen. Die Werkzeugmatrix nennt ihren eigenen Prüfstand.