KI-Website Komplettkurs

Die meisten KI-Webdesign-Tutorials zeigen dir in den ersten zwei Minuten ein hübsches Stitch-Ergebnis und behaupten dann, das sei jetzt eine grossartige Webseite. Ist es nicht. Es ist ein generisches Schablonen-Design, das genauso wirkt wie tausend andere KI-Webseiten und genauso wenig konvertiert.

Wichtig: Der Unterschied zwischen einer Webseite, die im Median bei zwei Prozent rumdümpelt, und einer Webseite, die über elf Prozent erreicht, sitzt nicht im Design. Er sitzt in der Sprache, die du vor dem ersten Pixel über deine Zielgruppe gesammelt hast.

Genau deshalb beginnt dieses Tutorial nicht in Stitch, sondern in Gemini.

1. Gemini Deep Research liefert die Tiefe: Schmerzpunkte, Ängste, Sprachmuster, verkaufspsychologische Trigger der Zielgruppe. Originalton aus Foren, Reviews, Communities. Was Halter wirklich sagen, wenn sie über ihren Hund sprechen.
2. Gemini Online-Research läuft parallel im zweiten Tab und liefert das Gerüst: psychologisch korrekte Section-Reihenfolge, branchenspezifische Trust-Trigger, Conversion-Hebel.
3. Synthese in Claude: aus beiden Recherche-Berichten wird ein einziger Master-Brief. Headlines in Halter-Sprache, fertige Body-Texte für jede Section, ein HTML-Wireframe als visueller Anker, ein befüllter Stitch-Prompt zum Reinkopieren, ein Bilder-Brief für Nano Banana. Eine Quelle der Wahrheit für alles, was danach kommt.
4. Google Stitch baut auf Basis des Master-Briefs das Design. Mit klarer Design-Sprache, klaren Farben, klaren Typo-Regeln. Wenn der Brief sauber ist, sitzt das Ergebnis beim ersten Versuch.
5. Nano Banana Pro ersetzt die Stockfotos. Konsistente Bildwelt: gleicher Trainer, gleicher Hund, gleiche Lichtstimmung. Stockfotos zerstören in einer Vertrauens-Branche jede Wirkung, die der Text vorher aufgebaut hat.
6. Claude Code im Terminal nimmt den Stitch-Export plus die Bilder und baut die Seite in Next.js neu. Smoothe Scroll-Animationen, Ken-Burns-Effekt im Hero, Counter, sticky Click-to-Call auf Mobile, responsives Menü. Das, was eine Stitch-Generierung allein nie liefert.

Das Beispielprojekt im Video ist eine Hundetrainer-Landingpage. Bewusst gewählt, weil bei Hundetrainern Vertrauen über alles entscheidet: der Hund ist Familie, der Trainer bekommt Zugang zu einem Hochsicherheitsbereich. Jeder Verkaufspsychologie-Effekt ist hier sofort sichtbar.

Rechts in der Sidebar findest du vier Downloads:

• Alle Prompts: die vier Prompts gebündelt in einer Markdown-Datei. Deep-Research-Prompt, Online-Research-Prompt, Stitch-Prompt mit allen elf Sektionen und Design-System, Nano-Banana-Prompts für die komplette Bildwelt.
• Zielgruppen-Analyse Hundetrainer: der komplette Gemini-Deep-Research-Output aus dem Video, als Beispiel was für eine Tiefe du erwarten darfst, wenn du den Prompt auf deine Branche loslässt.
• Best-Practices Hundeschul-Landingpages: der zweite Recherche-Output, mit Section-Framework und priorisierten Conversion-Hebeln. Die Vorlage für deine eigene Branchen-Recherche.
• Finale Landingpage: die fertige HTML-Generierung, die du oben in der Sidebar als Live-Demo aufrufen kannst. Einmal durchscrollen, dann verstehst du, wie alle Sektionen ineinandergreifen.

Oben in der Sidebar siehst du ausserdem die fertige Demo-Seite. Klick einmal rein, scroll bis ganz unten, schau dir die elf Sektionen an: Hero mit Foto-Collage, Pain-Resonance-Block, Methoden-Block, Leistungen, Process, Über mich, Stimmen, FAQ, Final CTA, Footer und Mobile-Sticky.

Die Pipeline funktioniert für jede Vertrauens-Dienstleistung. Coaches, Therapeuten, Heilpraktiker, Berater, Steuerberater, Architekten, Handwerker. Überall, wo der Kunde nicht ein Produkt kauft, sondern einen Menschen.

So gehst du vor:

1. Öffne prompts.md und ersetze in Demo 1 das Hundetrainer-Profil durch deine Branche, dein Angebot, deinen methodischen Ansatz, deine Zielgruppen-Segmente. Die Struktur des Prompts (vier Customer-Journey-Phasen, drei Ebenen pro Phase, Originalzitate-Anforderung) bleibt gleich.
2. Starte parallel Demo 2 mit deiner Branche im Prompt. Dauert ein bis drei Minuten und liefert das Section-Gerüst, während Demo 1 noch läuft.
3. Lade beide Recherche-Outputs in einen neuen Claude-Chat hoch und bitte Claude um den Master-Brief: Section-Reihenfolge, Headlines in Halter-Sprache, fertige Body-Texte, befüllten Stitch-Prompt, Bilder-Brief.
4. Stitch-Prompt aus dem Master-Brief in Stitch reinkopieren. Falls die erste Generierung schwach ist, zwei bis drei Iterationen, beste Variante weiterverwenden.
5. Bilder-Brief in Nano Banana Pro abarbeiten. Konsistenz-Anker definieren (gleiche Person, gleiches Licht, gleicher Look), erstmal das Master-Bild generieren, dann die Variationen ableiten.
6. Stitch-Export plus die finalen Bilder in einen leeren Ordner, Claude Code starten, einen Polish-Prompt mit allen gewünschten Animationen rauslassen.

Den richtigen Recherche-Prompt formulieren, die Erkenntnisse priorisieren, das Design an die Marke anpassen, entscheiden welcher Hund auf das Hero-Bild gehört und welcher nicht: das ist der Punkt, an dem ehrliche Verkaufspsychologie unverzichtbar wird.

Die KI kann recherchieren, sie kann generieren, sie kann polieren. Aber sie kann nicht für dich entscheiden, was bei deinem Kunden wirklich Vertrauen aufbaut und was nur generischer Marketing-Sprech ist. Das musst du wissen, das musst du entscheiden. Und genau das ist der Grund, warum so viele KI-Webseiten am Ende doch wie Schablonen aussehen: nicht weil die Tools schwach sind, sondern weil der Mensch davor zu wenig über seine eigene Zielgruppe weiss.

Schreib es in die Kommentare unter dem Video. Steuerberater, Heilpraktiker, dein eigenes Unternehmen: ich lese jeden Vorschlag und das nächste Branchen-Beispiel kann genauso gut deine Branche sein.