Anatomie eines 35-Minuten-Webseitenaufbaus: ein echter Teardown

Eine Minute-für-Minute Analyse, wie eine Prager Bäckerin mit Codrik Voice Mode, gpt-image-2 und einer einzigen Chat-Korrektur eine Live-Seite veröffentlicht hat.

Anleitung 19. April 2026 8 Min. Lesezeit Codrik Team
Anatomie eines 35-Minuten-Webseitenaufbaus: ein echter Teardown

Marta betreibt eine kleine Bäckerei in der Nähe der Riegrovy sady in Prag. Sie hat ein Logo, das ihre Schwester gezeichnet hat, Fotos auf dem Handy und null Geduld für Drag-and-Drop-Baukästen. An einem Dienstagmorgen um 09:14 öffnete sie Codrik, zahlte den Stundensatz von 490 Kč und startete eine Sitzung. Der Brief im Kopf war einfach: eine Webseite, die so wirkt, wie sich die Bäckerei tatsächlich anfühlt, auf Tschechisch und Englisch, mit einer Speisekarte, einer Über-uns-Seite und einer Möglichkeit für Büroangestellte, Croissants vorzubestellen. Es folgt eine ehrliche Analyse der nächsten 35 Minuten, kleine Reibungen inklusive.

00:00 — Der Brief

Das Dashboard öffnet sich mit drei Modus-Kacheln: Voice, Chat, Config sowie zusätzlich der Redesigner, falls eine alte URL vorhanden ist. Marta hat keine alte Seite, also wählt sie den Voice Mode. Eine kurze Eingabe verlangt eine einzeilige Beschreibung. Sie tippt: kleine handwerkliche Bäckerei in Prag, Sauerteig und Viennoiserie, ich möchte ein warmes, leicht nostalgisches Gefühl, Tschechisch und Englisch, Speisekarte und Vorbestellungen. Das ist die gesamte schriftliche Eingabe für die ganze Sitzung. Die Uhr startet in dem Moment, in dem sie auf Beginnen klickt.

03:00 — Klärung per Stimme

Der Voice Mode öffnet ein Video-Panel von Angesicht zu Angesicht. Der Agent verwendet ElevenLabs für die Stimme und darunter Claude für das Reasoning, sodass das Hin und Her eher wie ein Kickoff-Gespräch als wie ein Chatbot wirkt. Er stellt drei klärende Fragen hintereinander: wer an einem normalen Wochentag hereinkommt, welches eine Produkt sie auf dem Hero haben möchte und ob sie eher nach einer Pariser Patisserie oder einer tschechischen Pekárna aussehen will. Marta antwortet auf Tschechisch, der Agent transkribiert und bestätigt am Bildschirm. Als Hero-Produkt wählt sie den Kouign-amann und sagt irgendwo zwischen Paris und Prag, was der Agent als Tonalitätsnotiz ablegt.

06:00 — Erster Generierungsdurchlauf

Bei der Sechs-Minuten-Marke ist der erste vollständige Durchlauf auf dem Bildschirm. Layout, Palette und Tonalität kommen alle gleichzeitig: ein cremefarbener Hintergrund mit einem tiefen Roggenkrusten-Braun für Überschriften, eine weiche Serife nur für die Wortmarke und Geist für den Fließtext. Fünf Seiten sind angelegt, Start, Speisekarte, Vorbestellungen, Über uns und Kontakt. Der Hero-Text lautet, gebacken um vier Uhr morgens, verkauft bis elf. Marta ist mit der Reihenfolge in der Navigation nicht ganz glücklich, aber das Grundgerüst stimmt offensichtlich. Sie entscheidet sich, weiterzumachen und Details lieber per Chat zu korrigieren als von vorne zu generieren.

12:00 — Anpassungen per Chat

Sie wechselt in den Chat Mode und tippt auf Tschechisch: verschiebe Vorbestellungen vor Über uns und mache das Hero eine Stufe wärmer. Der Agent ordnet die Navigation neu, schiebt den Hero-Hintergrund zwei Nuancen wärmer und zeigt vor dem Commit eine Vorher-Nachher-Vorschau. Erster Reibungsmoment: das wärmere Hero hat den Kontrast der Überschrift unter die Schwelle gezogen, die sie auf ihrem Telefon noch lesen kann. Sie sagt, zurück zur dunkleren Überschrift, aber den wärmeren Hintergrund behalten, der Agent teilt die Änderung auf, und der Kontrast ist zurück. Gesamte Korrekturzeit etwa vierzig Sekunden.

18:00 — Bildgenerierung mit gpt-image-2

Codrik leitet die Bildarbeit über gpt-image-2. Marta lässt vier Sektionsbilder generieren: ein Hero-Shot eines Kouign-amann auf Backpapier, eine Weitwinkelaufnahme der Theke bei Öffnung, ein Porträt mehlbestäubter Hände beim Formen des Teigs und ein Flat Lay der Wochenend-Speisekarte. Drei kommen beim ersten Versuch brauchbar zurück. Das vierte, die Speisekartenkarte, hat den klassischen Patzer generativer Modelle, leicht verschwommenen Text auf der gedruckten Karte. Sie schickt eine einzige Chat-Nachricht: generiere das Speisekartenbild neu, aber ohne Text auf der Karte, wir legen unseren eigenen darüber. Dreißig Sekunden später ist das neue Bild sauber, und die echte Speisekarte sitzt im HTML obendrauf.

24:00 — Texte und Mehrsprachigkeit

Die Textverfeinerung läuft als ein einziger Chat-Thread. Sie markiert zwei Absätze als zu generisch, der Agent schreibt sie mit Details aus ihrem Brief um, Sauerteig vierzig Stunden fermentiert, Butter aus einer kleinen Molkerei in Südböhmen. Die Mehrsprachigkeit ist ein Schalter: Tschechisch als Hauptsprache, Englisch als Sekundärsprache, und der Agent übersetzt alles direkt vor Ort, anstatt sie in einen separaten Workflow zu werfen. Sie bemerkt eine Formulierung, die sie laut nie sagen würde, ändert zwei Worte und macht weiter. Der Sprachwechsler landet im Header, ohne dass sie danach fragen musste.

30:00 — Letzte Prüfung und Mobile-Vorschau

Codrik zeigt eine eingebaute Mobile-Vorschau neben der Desktop-Ansicht. Das Vorbestellformular ist der Teil, der ihr am wichtigsten ist, also geht sie es in der Telefon-Vorschau durch: Produkt wählen, Abholtag wählen, Name, Telefon, fertig. Der Performance-Check läuft im selben Panel, der Build kommt unter einer Sekunde am Kabel und bei rund zwei Sekunden auf simuliertem 4G an. Lighthouse-ähnliche Werte zeigen sich in einem kleinen Badge, alle vier grün. Mehr ist nicht zu reparieren, hauptsächlich weil die früheren Reibungen rechtzeitig abgefangen wurden und nicht erst im Review.

33:00 — Veröffentlichung und eigene Domain

Sie wählt Codrik Hosting für 249 Kč im Monat, fügt ihre bestehende Domain hinzu und das Panel zeigt die zwei DNS-Einträge, die auf den Hetzner-Endpunkt in Deutschland zeigen müssen. Ihr Registrar hatte die Einträge bereits aus einem früheren Versuch vorausgefüllt, sodass die Propagation etwa neunzig Sekunden statt der üblichen Wartezeit dauerte. SSL wurde automatisch bereitgestellt. Um 35:02 nach der Uhr ihres Laptops lud die Live-Seite auf ihrem Handy über mobile Daten, mit dem Foto des Kouign-amann, dem wärmeren Hero, für das sie sich eingesetzt hatte, und einem funktionierenden Vorbestellformular. Gesamtkosten der Sitzung, eine Stunde Miete für 490 Kč plus der erste Monat Hosting. Tatsächliche Bauzeit, fünfunddreißig Minuten.