Von der Idee zum Prototyp in einem Tag: KI-gestützte Entwicklung in der Praxis

Kein hypothetisches Beispiel

Die meisten Artikel über KI-gestützte Entwicklung arbeiten mit erfundenen Szenarien. “Stellen Sie sich vor, Firma X…” — abstrakt, theoretisch, unverbindlich.

Dieser Artikel ist anders. Was ich hier beschreibe, ist an einem einzigen Tag tatsächlich passiert. Die Website, auf der Sie diesen Artikel lesen, ist das Ergebnis.

Die Ausgangslage: Freitagmorgen

Ich brauchte eine persönliche Website. Nicht irgendeine — eine die mich als KI-Experten positioniert, professionell aussieht und potenzielle Kunden überzeugt. Der Plan war:

Moderne Homepage mit mehreren Sektionen (Hero, Services, Prozess, About, Security, Social Proof, CTA)
Drei Service-Seiten mit detaillierten Beschreibungen und Pricing
Über-mich-Seite mit Werdegang und Tech-Stack
Kontaktformular mit Spam-Schutz
Komplett zweisprachig (Deutsch und Englisch)
SEO-optimiert (Meta-Tags, Structured Data, Sitemap, Open Graph)
Dark Theme mit professionellem Design

Bei einer klassischen Agentur wäre das ein Projekt für 4–8 Wochen und 8.000–15.000 €. Als Freelancer ohne KI hätte ich mindestens zwei Wochen eingeplant.

Die Werkzeuge

Mein Setup war bewusst schlank:

Claude Code als primärer Entwicklungsassistent (CLI, arbeitet direkt im Projekt)
Astro als Static-Site-Generator (schnell, modern, SEO-freundlich)
Tailwind CSS für das Styling
VS Code als Editor
Kein Figma, kein Photoshop, keine Design-Vorlage

Das ist kein 50.000-€-Toolstack. Das sind Tools die jeder Entwickler für unter 50 € pro Monat nutzen kann.

Was in einem Tag passiert ist

8:00 — Projektstruktur und Design-System

Ich habe Claude Code beschrieben, was ich mir vorstelle: “Persönliche Homepage eines KI-Experten. Dark Theme, modern, professionell. Astro mit Tailwind.” Innerhalb von Minuten stand die Projektstruktur: Design-Tokens, Farbschema, Typografie, Spacing-System.

Kein endloses Konfigurieren. Kein “welches CSS-Framework nehmen wir?”-Meeting. Eine Beschreibung, ein Ergebnis.

9:00 — Homepage mit allen Sektionen

Die Homepage ist das Herzstück. Neun Sektionen, jede mit eigenem Design, Animationen und Inhalten. Claude Code hat nicht einfach generischen Code ausgespuckt — es hat ein konsistentes Design-System umgesetzt. Gleiche Abstände, gleiche Farben, gleiche Hover-Effekte. Durchgehend.

Das Partikel-Netzwerk im Hero? Ein Canvas-Element mit dynamischer Animation. Der Terminal-Typewriter? Eine Character-für-Character-Animation mit realistischen Tipp-Pausen. Die Scroll-Animationen? IntersectionObserver mit Stagger-Timing.

Das sind keine Copy-Paste-Snippets. Das ist Code der zusammengehört und als System funktioniert.

11:00 — Service-Seiten und i18n

Drei Service-Seiten, jede mit:

Detaillierter Leistungsbeschreibung
FAQ-Sektion mit Schema.org-Markup (für Google Rich Snippets)
Pricing-Bereich
Call-to-Action

Und alles komplett zweisprachig. Nicht mit einem Übersetzungs-Plugin, sondern mit einem eigenen i18n-System: deutsche und englische JSON-Dateien, URL-basiertes Routing, korrekte hreflang-Tags.

14:00 — Kontaktformular und Impressum

PHP-Backend für das Kontaktformular. Honeypot-Spamschutz, Rate-Limiting, Validierung, E-Mail-Versand. Dazu Impressum und Datenschutzerklärung — beides rechtlich korrekt, beides in beiden Sprachen.

16:00 — SEO, Performance, Security

Open Graph Images (automatisch generiert aus SVG via Sharp)
Structured Data (ProfessionalService + Person Schema)
.htaccess mit Cache-Control, Compression, HSTS, Security-Headers
Sitemap und robots.txt

Lighthouse-Score nach dem ersten Deploy: 100/100/100/100. Nicht 98. Nicht “fast perfekt”. Hundert. In allen vier Kategorien.

18:00 — Live

npm run build, FTP-Upload auf Strato. Die Website war live. An einem Tag.

Was danach passiert ist

Die Website war fertig — aber das Projekt nicht. In den folgenden Tagen habe ich mit dem gleichen Workflow weitergebaut:

Erstberatungs-Buchungsseite mit strukturiertem Formular, automatischer Bestätigungsmail, Detail-Mail mit vorformatiertem Claude-Briefing-Prompt und Push-Notification aufs Handy via ntfy.sh
Blog-System mit Astro Content Collections, Markdown-Artikeln, RSS-Feeds, BlogPosting-Schema — Sie lesen gerade das Ergebnis
Sprachschalter-Bug gefunden und gefixt der auf allen englischen Seiten existierte (die KI hat den Bug nicht eingeführt — sie hat ihn gefunden und behoben)

Jedes dieser Features hätte bei einer klassischen Agentur einen eigenen Sprint bedeutet. Mit KI war es eine Session.

Was die KI getan hat — und was nicht

Ich möchte hier keinen Eindruck erwecken, der nicht stimmt. Deshalb eine ehrliche Aufteilung:

Was die KI übernommen hat

Code schreiben: HTML, CSS, JavaScript, PHP, TypeScript — alles
Architektur umsetzen: Komponenten-Struktur, Routing, i18n-System
Design implementieren: Vom Farbschema bis zur Animation
SEO-Technik: Structured Data, Meta-Tags, Performance-Optimierung
Debugging: Fehler finden, analysieren und fixen

Was ich gemacht habe

Entscheidungen treffen: Welche Sektionen, welcher Ton, welche Zielgruppe
Richtung vorgeben: “Dark Theme, professionell, nicht generisch”
Qualität prüfen: Jedes Ergebnis anschauen, testen, Feedback geben
Inhalte definieren: Was auf der Seite stehen soll — die KI hat formuliert, aber die Aussagen sind meine
Business-Logik: Pricing-Modell, Erstberatungs-Workflow, Lead-Routing

Die KI ist das schnellste Team das ich je hatte. Aber sie ist kein Autopilot. Ohne klare Richtung liefert sie generische Ergebnisse. Die Kombination aus Erfahrung + KI macht den Unterschied.

Was das für Sie bedeutet

Wenn ich an einem Tag eine komplette Website mit Blog, Buchungssystem und Push-Notifications bauen kann — was könnte Ihr Team in einer Woche schaffen?

Die Technologie ist nicht das Hindernis. Die Tools sind verfügbar, bezahlbar und ausgereift. Was den meisten Unternehmen fehlt, ist die Umgebung: die richtige Konfiguration, die richtigen Workflows, das Wissen wie man die KI so einsetzt, dass sie nicht generischen Müll liefert sondern qualitativ hochwertige Ergebnisse.

Das ist kein Geheimwissen. Das ist eine Entwicklungsumgebung die man einrichten kann.

Probieren Sie es selbst

Sie müssen mir nicht glauben. Testen Sie es:

Installieren Sie Claude Code (CLI)
Öffnen Sie ein bestehendes Projekt
Beschreiben Sie eine Aufgabe die normalerweise einen halben Tag dauert
Schauen Sie was passiert

Und wenn Sie dabei Unterstützung wollen — eine professionelle Umgebung die von Anfang an richtig konfiguriert ist — sprechen wir darüber.

Update: Mit genau diesem Workflow ist inzwischen auch gobelet.de entstanden — ein Webdesign-Service für Kleinunternehmen. Vom leeren Projekt zur fertigen Website in einer Session. Der lebende Beweis, dass das Konzept funktioniert.

Weiterführend: Was kostet eine KI-Entwicklungsumgebung? — eine ehrliche Aufschlüsselung der Kosten. Und Welches KI-Tool passt zu Ihrem Team? — ein Vergleich der Tools die ich in diesem Artikel eingesetzt habe.