Das Wichtigste in Kürze
Am Ende hast du
Eine komplette Premium-Website, vom Design bis zur Live-Schaltung
Du brauchst
- Google-Konto für Google Stitch (kostenlos)
- Zugang zu Gemini 3 Pro Image (Nano Banana)
- Claude Code
So entsteht die Website
1Briefing schreiben
Du beschreibst einmal, für wen die Seite ist und was sie leisten soll.
2Design entwerfen
Aus dem Briefing entsteht der Entwurf für Aufbau und Optik.
3Bilder erzeugen
Passende Bilder in deiner Bildsprache entstehen dazu.
4Zusammenbauen
Claude Code setzt daraus die fertige, echte Website zusammen.
Worum es geht
Drei KI-Tools, eine Premium-Website in 30 Minuten: Google Stitch für das Design, Gemini Nano Banana für die Bilder, Claude Code für den Code-Finish. Beispiel ist eine fiktive Tischlerei.
Schau dir rechts die Live-Demo an, dann lies unten, wie sie entsteht.
Schritt für Schritt
Briefing schreiben
Bevor du ein Tool öffnest: Wer ist der Kunde? Welche Zielgruppe? Welche Bereiche braucht die Website? Hier: Premium-Tischlerei mit 13 Sektionen von Hero bis Kontakt. Dieses Briefing steuert alles Weitere.
Website-Design in Google Stitch
Modell Thinking 3.1 Pro (nicht Flash). Prompt einfügen. Drei Anläufe waren nötig:
- V1: Zu dunkel. Stitch interpretiert „Premium Handwerk" als düstere Werkstatt.
- V2: Heller, aber Überschrift abgeschnitten. Stitch braucht Angabe zu Spaltenbreiten.
- V3 sitzt: 270 Zeilen mit Schriften, Abständen, allen Sektionen.
Den finalen V3-Prompt findest du rechts in der Sidebar zum Kopieren. Export als HTML/CSS-ZIP.
Kostenlos im Lab weiterlesen
Die restlichen 4 Schritte, alle Prompts und die Dateien zu diesem Tutorial gibt es kostenlos für Mitglieder.
- Die komplette Schritt-für-Schritt-Anleitung
- 1 Prompts zum Kopieren
- 4 Dateien und Vorlagen
- Fragen stellen und mitreden im Stammtisch
Keine Zeit zum Nachbauen?
Ich setze die Lösung für dich um oder schule dich und dein Team. Im kostenlosen Erstgespräch klären wir, was passt.
