Das Wichtigste in Kürze
Am Ende hast du
Eine lebendige, responsive Next.js-Website auf Basis deiner Design-Vorlage
Du brauchst
- Claude Code
- Gemini-API-Key für Nano Banana Pro (Bildgenerierung)
- Lizenzfreie Design-Vorlage als Referenz (Lizenz beachten)
So wird aus der Vorlage eine Website
1Vorlage bereitlegen
Du startest mit einer fertigen Design-Vorlage statt mit einem leeren Blatt.
2In eine Website verwandeln
Claude Code macht daraus eine echte, funktionierende Seite.
3Bilder erzeugen
Die Platzhalter weichen echten Bildern in deiner Bildsprache.
4Auf deine Branche umstellen
Zum Schluss wird aus der Vorlage deine Seite: Texte, Farben, Beispiele.
Worum es geht
Eine fertige Design-Vorlage ist erst mal nur ein Bild: schön, aber tot. In diesem Video machst du daraus mit Claude Code eine echte, funktionierende Website. Sie ist responsive, hat selbst generierte Bilder und lässt sich am Ende mit einem einzigen Prompt auf jede Branche umstellen.
Schau dir rechts die Live-Website an (ein fiktives Café namens „Röststube Nord"), dann lies hier, wie sie entsteht.
Schritt für Schritt
Vorlage bereitlegen
Leg die Screenshots oder den Export deiner Design-Vorlage in einen Ordner namens design-ref/. Das ist die einzige Vorbereitung, den Rest übernimmt Claude Code.
Vorlage in eine Website verwandeln
Jetzt kommt der Hauptprompt (rechts in der Sidebar zum Kopieren). Claude Code baut daraus eine vollständige, responsive Seite mit derselben Struktur und Stimmung wie die Vorlage. Wo Bilder hingehören, setzt es zunächst beschriftete Platzhalter. Nach ein paar Minuten läuft die Seite schon im Browser, es fehlen nur noch die Bilder.
Kostenlos im Lab weiterlesen
Die restlichen 3 Schritte, alle Prompts und die Dateien zu diesem Tutorial gibt es kostenlos für Mitglieder.
- Die komplette Schritt-für-Schritt-Anleitung
- 3 Prompts zum Kopieren
- 2 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.
