Ich habe KI diese Website bauen lassen — das ist wirklich passiert

Die Website, die du gerade liest, wurde von KI-Agenten gebaut. Nicht „KI-unterstützt” im vagen Marketing-Sinne, wo jemand Copilot für ein paar Autovervollständigungen genutzt hat. Der eigentliche Code, das Blog-System, die SVG-Illustrationen, die SEO-Infrastruktur, die Sitemap-Generierung — Agenten haben das alles geschrieben, während ich Entscheidungen getroffen habe.

Das ist die Geschichte, wie das wirklich gelaufen ist. Inklusive der Teile, die kaputtgegangen sind. Und da jeder Commit von Agenten gemacht wurde, ist die Git-History die buchstäbliche Quittung.

Das Git Log: 37 Commits erzählen die Geschichte

Bevor wir einsteigen, hier die tatsächliche Commit-History — chronologisch, unbearbeitet. So sieht es aus, wenn man eine Website mit KI-Agenten baut, aus der Perspektive von git log:

ad1a7bc feat: initial project setup with CLAUDE.md
1c57962 simplify: remove backend, go fully static
562d2cd update: align CLAUDE.md with final architecture
84c09e5 feat: scaffold complete website from mobile teaser
3ce1584 fix: navbar links now work from subpages
1f42183 fix: make each section full viewport height
cb67e08 style: add section dividers and emerald CTA section
a7a2a73 feat: add HeroOrchestrator animation to Levels section
1fb408c fix: improve CTA section contrast
6a025f5 fix: make CTA button white for maximum contrast
aa1b909 feat: add Impressum and Datenschutz pages
764c7b4 feat: design CWA logo with code brackets and agent dots
e55408f feat: add full CodeWithAgents logo to Levels section
a3c8906 feat: show CodeWithAgents text next to logo on desktop
3c74f7d style: use full logo in navbar
cd620cf feat: add square logo variant — stacked Code/With/Agents
10f0be4 style: replace jarring emerald bg with subtle glow
cd07206 content: add real contact data to Impressum and Datenschutz
7d8485e style: switch from dark theme to clean white/light theme
8ee6490 feat: redesign logo with bracket-glasses nerd face character
f76d0c8 chore: add logo reference image and project TODO
d191168 style: desktop layout overhaul — grids, section backgrounds
d8240d9 feat: add blog system, services page, and contact page
7529137 content: new blog post, fix image system, add SVG skill
1ce3802 content: add SVG illustrations to AI slop blog post
96bb3db chore: add anti-slop quality checklist to blog-write skill
9b0e0ce docs: update CLAUDE.md with bilingual policy and current pages
1c48526 feat: rework Services and Contact pages with richer layout
e833c5d feat: add i18n routing infrastructure with /de/ routes
28eb17f feat: add German translations for all pages
15594af feat: add SEO infrastructure — Open Graph, hreflang, robots.txt
21a7d49 feat: auto-generate sitemap.xml at build time
d76b1e7 feat: add JSON-LD structured data
a871d56 fix: add /de/impressum and /de/datenschutz routes
dc79e9a fix: update favicon to match bracket-eyes nerd face logo
86cde4e feat: replace journey link with language switcher hint
63cdb16 fix: remove fake online indicator and enlarge profile photo

Lies das von oben nach unten und du siehst den gesamten Bogen: Setup → Scaffold → visuelles Feintuning → Logo-Iterationen → Theme-Wechsel → Blog-System → Content → i18n → SEO → Fixes. Jeder Commit von einem Agenten. Jede Commit-Nachricht von einem Agenten geschrieben. Der Mensch — ich — hat entschieden, was gebaut wird. Die Agenten haben entschieden, wie sie beschreiben, was sie gebaut haben.

Ein paar Dinge fallen auf:

Das Logo durchlief vier Iterationen — Code-Klammern, Text-Varianten und schließlich das Bracket-Glasses-Nerd-Gesicht. Kein Scheitern; Design-Exploration mit Maschinengeschwindigkeit. Jede Iteration dauerte Minuten, nicht Tage.

Das Theme wechselte mitten im Build von Dark zu Light (7d8485e). Ein komplettes Redesign. In einem normalen Projekt ist das ein schmerzhafter Arbeitstag. Hier war es eine Agent-Session.

Die Fix-Commits erzählen ehrliche Geschichten. fix: make CTA button white for maximum contrast — das ist ein Mensch, der auf den Bildschirm schaut und sagt „ich kann das nicht lesen.” fix: remove fake online indicator — das ist ein Mensch, der eine unehrliche Design-Entscheidung bemängelt. KI korrigiert sich nicht selbst bei visuellen oder ethischen Fragen. Das ist der Job des Menschen.

Die Ausgangslage

Ich bin nicht mit einer leeren Leinwand gestartet und habe gesagt „bau mir eine Consulting-Website.” Ich hatte eine klare Vision, bevor eine einzige Zeile Code geschrieben wurde.

Die Inhalte kamen aus einer mobilen Präsentation, die ich schon gebaut hatte — ein Teaser-Deck namens PowerBen mit sieben Folien über meinen Ansatz zum Agentic Engineering. Sieben Folien wurden zu sieben Scroll-Abschnitten. Gleicher Inhalt, gleiche visuelle Sprache, auf natives Scrolling portiert. Ich habe den Agent nicht gebeten, konzeptionell etwas zu erfinden — ich habe ihn gebeten, eine konkrete Übersetzung von Präsentation zu Web umzusetzen.

Die technischen Entscheidungen waren bewusst und meine: React 19 + Vite 6 + Tailwind CSS v4 für ein schnelles, modernes Frontend. GitHub Pages für null Infrastruktur. Kein Backend, kein CMS, keine Datenbank. Statische SPA, deployed bei jedem Push auf main. Den Stack hat nicht der Agent ausgesucht — das war ich. Der Agent hat damit gebaut.

Die eigentliche Frage war nie „kann KI eine Website bauen.” Das war geklärt, bevor ich angefangen habe — ich hatte bereits eine vollständige Präsentation in einer Session gebaut. Die Frage war: kann KI die Website bauen, die ich wirklich will? Das ist eine schwierigere Frage, und die Antwort ist komplizierter als „ja.”

Was sofort funktioniert hat

Die erste Landing Page kam schnell zusammen. Hero-Abschnitt, Navigation, Services-Cards, About-Abschnitt — der Agent hat die Layoutstruktur im ersten Durchgang getroffen. Er hat das Design-System umgesetzt, das ich beschrieben habe (dunkler Hintergrund, Smaragd-Akzente, Inter-Schrift), und die Komponentenstruktur war von Anfang an sauber. Keine größeren Überarbeitungen nötig.

Das Blog-System entstand in einer einzigen Session. Content-Loader, Markdown-Rendering, Routing, Blog-Übersichtsseite, Post-Detailseite — alles auf einmal. Der Agent wählte gray-matter für Frontmatter-Parsing und react-markdown für Rendering, baute die Content-Verzeichnisstruktur auf und verdrahtete alles mit React Router. Ende-zu-Ende funktionsfähig in einem Durchgang.

Deutsche Übersetzungen ganzer Seiten liefen parallel. Drei Agenten haben gleichzeitig Home, Services und Contact übersetzt — ausgehend vom englischen Original. Was eine mühsame sequentielle Aufgabe gewesen wäre — übersetzen, reviewen, formatieren, committen — wurde zur parallelen Operation.

Code-Splitting kam proaktiv. Der Agent bemerkte, dass das Main-Bundle 510 KB groß war, und schlug React.lazy() mit Suspense für Route-Level-Splitting vor, bevor ich danach gefragt hatte. Bundle auf 291 KB reduziert. Diese Art von unaufgeforderter Optimierung ist das, was Leute wirklich überrascht, die noch nicht mit fähigen Agenten gearbeitet haben.

Was kaputtging (und wie wir es gefixt haben)

gray-matter nutzt intern Nodes Buffer. Funktioniert prima in Node. Crasht im Browser mit „ReferenceError: Buffer is not defined.” Der Agent hat die Kompatibilitätsgrenze zwischen Browser und Node nicht im Blick gehabt — er hat eine Library gewählt, die für eine Node-Umgebung perfekt richtig und für einen Vite-Browser-Build falsch war.

Der Fix war, gray-matter durch einen eigenen schlanken Frontmatter-Parser zu ersetzen, der einfaches String-Splitting nutzt — keine Node-Built-ins, keine Umgebungsannahmen. Unkompliziert, sobald man weiß, wo man suchen muss. Aber der Diagnoseschritt erforderte jemanden, der verstand, warum „Buffer is not defined” auf eine Node.js-API hinweist, die in Browser-Code durchblutet — und kein Konfigurationsproblem ist.

Tailwind CSS v4 hat die Plugin-Syntax geändert. Der Agent nutzte die @import-Variante aus v3. Der Fix war eine einzeilige Änderung auf @plugin. Kleines Ding, aber ein gutes Beispiel dafür, wo KI-Wissen Grenzen hat: das Modell wurde mit v3-Mustern trainiert, die korrekt waren, als es sie gelernt hat, und falsch für die Version, die wir tatsächlich nutzten.

SVG-Illustrationen waren strukturell valide und visuell schlecht. Falsche Proportionen, Schriften, die winzig gerendert wurden, zu viel Whitespace, Kompositionen, die im Code stimmig aussahen und auf dem Bildschirm schief wirkten. KI kann SVG generieren, das die Validierung besteht. Sie kann das Ergebnis nicht sehen. Jede Illustration brauchte menschliches Review — „der Text links oben ist zu klein, der Abstand zwischen den Elementen ist ungleichmäßig, die Gesamtproportionen lassen das wie ein Poster aussehen, nicht wie eine Inline-Grafik” — und Iterationen gegen ein Design-Skill, das ich speziell für den Agenten geschrieben hatte. Das Skill hat geholfen. Das Hin-und-Her hat es nicht eliminiert.

Bildpfade brauchten drei Versuche. Erster Versuch: Assets co-located mit Markdown in src/content/, zur Build-Zeit importiert. Problem: der Blog-Content-Loader lief im Browser und konnte Build-Zeit-Imports nicht dynamisch nutzen. Zweiter Versuch: import.meta.glob mit ?url-Suffix, um eine statische Map aufgelöster Pfade zu generieren. Problem: funktionierte in Dev, crashte in Production-Builds wegen Feinheiten beim Glob-Pattern-Matching. Dritter Versuch: Assets in public/blog/{slug}/, mit relativen ./-Pfaden im Markdown referenziert, die zur Render-Zeit durch den Content-Loader zu absoluten /blog/{slug}/-Pfaden umgeschrieben werden. Das hat überall funktioniert. Drei Versuche, zwei Sackgassen, ein funktionierendes Muster.

Was mich überrascht hat

Geschwindigkeit. Nicht „schneller als tippen” — „schneller als denken.” Während ich überlegte, was als nächstes gebaut werden soll, hatte der Agent das Vorige schon gebaut. Der Engpass hat sich von Implementierung zu Entscheidungsfindung verschoben, auf eine Art, die ich nicht vollständig antizipiert hatte, bis es passierte.

Orchestrierungsqualität. Das System, das ich nutze — Cairn — delegiert an spezialisierte Agenten: ein typescript-implementer für Frontend-Code, ein git-agent für Commits und Branches, ein github-pr-handler für PRs, ein code-reviewer für Qualitätsprüfungen. Spezialisierte Agenten zu haben ist tatsächlich besser als ein Agent, der alles macht. Token-Kosten sinken, weil jeder Agent nur Kontext lädt, der für seinen Bereich relevant ist. Qualität steigt, weil jeder Agent Tiefe in seinem Gebiet hat. Als der code-reviewer zum ersten Mal ein Pattern-Problem entdeckte, das der typescript-implementer eingebaut hatte, wurde mir klar, warum Spezialisierung wichtig ist.

Konsistenz. Session 1 bis Session N, gleiche Qualität, gleiche Energie. Kein Freitagnachmittags-Einbruch. Kein „das fixen wir später”-Drift. Der Agent, der die 40. Komponente schrieb, hat dieselbe Sorgfalt aufgebracht wie bei der ersten. Das klingt nach einer Kleinigkeit. Ist es nicht. Menschliche Konsistenz lässt auf Wegen nach, die wir nicht immer bemerken — bis wir Code aus sechs Monaten zuvor reviewen.

Persistentes Memory funktioniert. Das Agenten-System nutzt CLAUDE.md-Dateien und STATUS.md für sitzungsübergreifenden Kontext. Als ich nach einer Pause zum Projekt zurückkehrte, kannte der Agent den Tech-Stack, die Design-System-Tokens, die Komponentenmuster und was bereits gebaut worden war. Nicht aus meiner Erklärung — aus strukturierten Dateien, die zwischen Sessions erhalten geblieben sind. Das ist die unspektakuläre Infrastruktur, die Agentic Development über Wochen und Monate praktikabel macht — nicht nur für einen einzelnen Nachmittag.

Das Phase-1-Fundament

Was heute live ist: eine vollständig zweisprachige (Englisch und Deutsch) Site mit Blog, Services-Seite, Kontakt-Seite, rechtlichen Seiten, SEO-Infrastruktur inklusive JSON-LD Structured Data und einer automatisch generierten Sitemap, gebaut von einem Script, das der Agent geschrieben hat.

Das Blog-System hat Frontmatter-gesteuertes Metadata, Kategorie- und Tag-Support, Featured-Post-Pinning, Draft-Modus und ein Build-Time-Index-Script, das das Frontmatter jedes Posts vor dem Deploy prüft.

Aber die Meta-Ebene macht es nachhaltig. Das Agenten-System enthält Skills — strukturierte Instruktionsdateien, die Agenten beibringen, bestimmte Aufgaben auszuführen. Der /blog-write-Skill enthält das Frontmatter-Schema, Ordner-Konventionen, Regeln zur Bildplatzierung und — entscheidend — eine Anti-Slop-Qualitäts-Checkliste. Bevor ein Post veröffentlicht wird, muss er vier Fragen mit „ja” beantworten:

• Basiert er auf konkreter Erfahrung?
• Enthält er eine echte Meinung?
• Hätte ihn jeder schreiben können? (Wenn ja, nicht veröffentlichen.)
• Lernt der Leser etwas Neues?

Wenn eine Antwort nicht stimmt, wird der Post überarbeitet oder gelöscht. Diese Checkliste gibt es, weil ich einen Blog-Post über KI-Slop geschrieben habe und gemerkt habe, dass die Filter, die ich für Leser beschrieben hatte, auch für meine eigenen Agenten gelten sollten. Also habe ich sie ihnen beigebracht.

Es gibt auch einen /svg-create-Skill mit Design-Regeln für Illustrationen — kompakte ViewBox, Mindest-Schriftgrößen, Smaragd-Farbpalette — weil die ersten SVGs technisch valide und visuell schrecklich waren. Der Skill kodiert das Gelernte, damit sich dieselben Fehler nicht wiederholen.

Das ist Phase 1. Das Fundament. Als technische Leistung ist es nicht spektakulär — es ist eine statische Site. Was es zeigt, ist ein funktionierender Workflow: ein Projekt über mehrere Sessions mit persistentem Kontext, spezialisierten Agenten und einer durch Code-Review durchgesetzten Qualitätsschwelle aufbauen und betreiben.

Die Blog-Posts? Mit KI-Unterstützung geschrieben, von mir reviewt. Die SVGs? Von Agenten nach einem Design-Skill generiert. Die Sitemap? Automatisch zur Build-Zeit generiert. Jedes Teil hat dasselbe Muster: ich entscheide was, KI führt aus wie, ich verifiziere das Ergebnis.

Die ehrliche Einschätzung

Mit KI-Agenten zu bauen ist keine Magie. Es ist eine andere Art von Arbeit.

Du hörst auf, Code zu schreiben, und fängst an, Entscheidungen zu treffen. Du hörst auf, Syntax zu debuggen, und fängst an, Architektur zu debuggen. Du hörst auf zu tippen und fängst an zu denken — wirklich zu denken, nicht nur Gedanken in Tastenanschläge zu übersetzen.

Ist es schneller? Ja, deutlich. Der Abstand zwischen „ich will ein Feature” und „das Feature existiert” hat sich für die meisten Dinge von Stunden auf Minuten komprimiert. Ist es besser? Manchmal. Der Agent produziert konsistenten, gut strukturierten Code. Er produziert auch SVGs, die technisch korrekt und visuell schrecklich aussehen. Er wählt die richtige Library für die falsche Umgebung. Er nutzt die API-Syntax der vorherigen Major-Version.

Die eigentliche Fähigkeit ist nicht Prompting. Jeder redet über Prompting. Der tatsächliche Hebel liegt woanders: wissen, was man bauen will, erkennen wenn der Output falsch ist, das Urteilsvermögen haben zu iterieren, und die richtige Infrastruktur für den Agent aufzubauen. Ein gut geschriebenes SKILL.md oder CLAUDE.md ist mehr wert als jeder Prompt-Trick.

Diese Site ist der Beweis, dass das Modell funktioniert. Nicht weil sie perfekt ist — ist sie nicht. Sondern weil sie existiert, funktioniert und in einem Bruchteil der Zeit gebaut wurde, die ich allein gebraucht hätte. Phase 1 ist abgeschlossen.

Jetzt wird es interessant. (Das erste Architekturproblem, das die Agenten mitgeliefert haben — eine 97% Bundle-Reduktion nachdem ein Mensch eine schleichende Zeitbombe entdeckt hat — gibt es in Der 97% Bundle Cut.)