Für die Neugestaltung meiner Homepage hatte ich mir ein klares Ziel gesetzt: Ich wollte nicht nur eine moderne Website erstellen, sondern möglichst viele Schritte des Entwicklungsprozesses mit Hilfe aktueller KI-Werkzeuge durchführen.
Das Projekt sollte gleichzeitig als Experiment dienen, um herauszufinden, wie weit sich professionelle Webentwicklung heute bereits durch KI unterstützen lässt.
Die Ausgangssituation
Meine bisherige Homepage war technisch und inhaltlich über die Jahre gewachsen. Für die neue Version hatte ich einige klare Anforderungen:
- modernes und professionelles Erscheinungsbild
- vollständige Responsiveness für Desktop, Tablet und Smartphone
- hohe Barrierefreiheit
- gute Suchmaschinenoptimierung
- statische Bereitstellung ohne komplexes Backend
- Markdown-basierter Workflow für Blogartikel
Statt direkt mit der Implementierung zu beginnen, wollte ich den gesamten Prozess möglichst KI-gestützt durchführen.
Schritt 1: Konzeption mit ChatGPT
Der erste Schritt war ein ausführliches Konzeptionsgespräch mit ChatGPT.
Dabei wurden Anforderungen gesammelt, hinterfragt, priorisiert und konkretisiert. Aus zahlreichen Fragen und Antworten entstand schrittweise eine technische und funktionale Zielbeschreibung der neuen Website.
Diskutiert wurden unter anderem:
- Anforderungen an Design und Benutzerführung
- Anforderungen an Responsiveness
- Anforderungen an Barrierefreiheit
- SEO-Aspekte
- Hosting-Konzept
- Content-Workflow
- Auswahl des Technologie-Stacks
Außerdem wurden verschiedene Alternativen für die technische Umsetzung diskutiert und bewertet. Insbesondere der Vergleich verschiedener Static Site Generatoren führte schließlich zur Entscheidung für Astro.
Das Ergebnis war eine relativ detaillierte Spezifikation, die später als Grundlage für die eigentliche Entwicklung dienen konnte.
Schritt 2: Designfindung mit Claude Design
Nachdem die Anforderungen definiert waren, folgte die visuelle Gestaltung.
Hier kam Claude Design zum Einsatz. Anstatt direkt Layouts in HTML und CSS zu entwickeln, wurden zunächst verschiedene Designkonzepte durch KI erzeugt.
Dadurch konnten innerhalb kurzer Zeit unterschiedliche Varianten verglichen werden:
- verschiedene Farbkonzepte
- unterschiedliche Navigationsansätze
- Layoutvarianten für Desktop und Mobile
- unterschiedliche visuelle Gewichtungen von Inhalten
Der Vorteil dieses Ansatzes besteht darin, dass man bereits sehr früh über konkrete Entwürfe diskutieren kann, ohne zuvor Design-Mockups manuell erstellen zu müssen.
Das ausgewählte Design diente anschließend als Vorlage für die eigentliche Implementierung.
Schritt 3: Prompt Engineering
Die Ergebnisse aus Konzeption und Design wurden anschließend in ausführliche Prompts überführt.
ChatGPT half dabei, die Anforderungen so zu strukturieren, dass sie von einem KI-Agenten möglichst eindeutig interpretiert werden konnten.
Dabei wurden unter anderem beschrieben:
- Projektstruktur
- gewünschte Komponenten
- Navigationskonzept
- Accessibility-Anforderungen
- Responsive-Verhalten
- SEO-Vorgaben
- Content-Struktur
- Designrichtlinien
Der Fokus lag darauf, möglichst präzise Anforderungen zu formulieren, damit der Agent nicht raten muss.
Schritt 4: Strukturierung mit Agentheim
Bevor die eigentliche Implementierung begann, kam außerdem Agentheim zum Einsatz.
Agentheim ist ein Open-Source-Plugin für agentische Entwicklungsumgebungen, das dabei unterstützt, Projekte systematisch zu strukturieren und die Zusammenarbeit mit KI-Agenten zu organisieren.
GitHub Repository:
https://github.com/heimeshoff/agentheim
Der Fokus liegt darauf, Anforderungen, Architekturentscheidungen und Arbeitsschritte nachvollziehbar zu dokumentieren und daraus einen strukturierten Entwicklungsprozess abzuleiten.
Gerade bei größeren Projekten hilft ein solcher Ansatz dabei, die häufig kritisierte Beliebigkeit von reinem “Vibe Coding” zu vermeiden.
Schritt 5: Umsetzung mit pi und GPT-5.5-mini
Die eigentliche Entwicklung erfolgte anschließend mit Hilfe eines KI-Agenten auf Basis von GPT-5.5-mini innerhalb von pi.
Der Agent übernahm große Teile der Implementierung:
- Anlegen des Projekts
- Erzeugen der Verzeichnisstruktur
- Erstellen von Komponenten
- Aufbau der Seiten
- Integration des Blog-Systems
- SEO-Konfiguration
- Umsetzung des Designs
- Responsive Optimierungen
- Accessibility-Anpassungen
Meine Rolle bestand dabei hauptsächlich darin:
- Anforderungen zu präzisieren
- Zwischenergebnisse zu bewerten
- Fehler zu identifizieren
- Verbesserungen anzustoßen
- Architekturentscheidungen zu treffen
Der Entwicklungsprozess ähnelte dadurch eher der Zusammenarbeit mit einem Junior-Entwickler als dem klassischen manuellen Programmieren.
Schritt 6: KI-generierte Grafiken
Auch die auf der Website verwendeten Grafiken entstanden vollständig mit KI.
Hierfür wurden zunächst Bildbeschreibungen erstellt, die anschließend zur Generierung verschiedener Illustrationen genutzt wurden.
Besonders hilfreich war dabei die Möglichkeit, Grafiken exakt auf die jeweiligen Inhalte und den gewünschten Stil der Website zuzuschneiden.
Anstatt passende Bilder suchen oder lizenzieren zu müssen, konnten individuelle Visualisierungen erzeugt und bei Bedarf mehrfach verfeinert werden.
Der gesamte Prozess im Überblick
┌──────────────────────────────────────┐
│ ChatGPT │
│ │
│ • Anforderungsanalyse │
│ • Technologieauswahl │
│ • Accessibility-Konzept │
│ • SEO-Konzept │
│ • Prompt Engineering │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ Claude Design │
│ │
│ • Layout-Ideen │
│ • Farbkonzepte │
│ • Designvarianten │
│ • Responsive Entwürfe │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ Agentheim │
│ │
│ • Projektstruktur │
│ • Architekturentscheidungen │
│ • Dokumentation │
│ • Agenten-Workflow │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ pi.dev + GPT-5.5-mini │
│ │
│ • Projektaufbau │
│ • Komponenten │
│ • Astro Integration │
│ • SEO │
│ • Accessibility │
│ • Responsiveness │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ KI-Bildgenerator │
│ │
│ • SVG Icons │
│ • Bloggrafiken │
│ • Illustrationen │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ Fertige Homepage │
│ │
│ • Astro │
│ • SEO optimiert │
│ • Barrierefrei │
│ • Responsive │
│ • Markdown Blog │
└──────────────────────────────────────┘Was ich gelernt habe
Das interessanteste Ergebnis des Projekts war für mich nicht die automatische Codegenerierung.
Der eigentliche Mehrwert entstand durch die Kombination verschiedener spezialisierter KI-Werkzeuge:
- ChatGPT für Konzeption und Prompt Engineering
- Claude Design für die visuelle Gestaltung
- Agentheim für Strukturierung und Organisation
- pi für die Implementierung
- KI-Bildgeneratoren für die Erstellung der Grafiken
Dadurch entstand ein Entwicklungsprozess, bei dem die eigentliche Implementierung nur noch einen Teil der Arbeit ausmacht.
Die zentrale Aufgabe verschiebt sich zunehmend in Richtung Anforderungsanalyse, Architektur, Qualitätskontrolle und Steuerung der eingesetzten Werkzeuge.
Meta: Auch dieser Artikel entstand mit KI
Passenderweise wurde auch dieser Blogartikel mit Unterstützung von KI erstellt.
Während die Homepage selbst mithilfe verschiedener KI-Werkzeuge konzipiert, gestaltet und implementiert wurde, entstand dieser Artikel in einem Gespräch mit ChatGPT. Die KI half dabei, die einzelnen Schritte des Projekts zu strukturieren, verständlich zu formulieren und zu einem zusammenhängenden Erfahrungsbericht auszuarbeiten.
Das macht diesen Beitrag gewissermaßen zu einem weiteren Artefakt desselben Experiments.
Fazit
Die neue Homepage ist nicht einfach nur eine Website geworden. Sie war gleichzeitig ein Experiment darüber, wie moderne KI-Werkzeuge heute bereits in einem realen Softwareprojekt zusammenarbeiten können.
Von der ersten Idee über Design, Architektur und Implementierung bis hin zu den verwendeten Grafiken wurde nahezu jeder Schritt durch KI unterstützt.
Das Ergebnis zeigt, dass KI mittlerweile weit mehr ist als ein Werkzeug zur Codegenerierung. Richtig eingesetzt kann sie den gesamten Entwicklungsprozess unterstützen – vorausgesetzt, es gibt weiterhin einen Menschen, der Ziele definiert, Entscheidungen trifft und die Qualität der Ergebnisse bewertet.
Genau darin sehe ich aktuell die spannendste Entwicklung: KI ersetzt den Entwickler nicht, sondern erweitert dessen Möglichkeiten erheblich.