Alle Guides

Website & Conversion · Von der Idee zur Live-Seite

Eine Website mit Claude bauen — und welche Skills du brauchst

Eine Website mit KI zu bauen ist heute real. Aber der Unterschied zwischen „sieht nach Baukasten aus" und „sieht aus wie eine Agentur-Seite" liegt in zwei Dingen: der richtigen Reihenfolge und den richtigen Skills, die Claude beim Bauen befolgt.

12 Min Lesezeit

Vor zwei Jahren brauchte eine gute Website ein Team: Designer, Entwickler, Texter, Wochen an Zeit. Heute kann eine einzelne Person mit Claude Code eine professionelle Seite bauen — in Tagen. Das ist keine Übertreibung, das ist die neue Realität.

Aber es gibt einen Haken, den kaum jemand ausspricht: Ohne die richtige Anleitung produziert jede KI dieselben Muster. Überall gleiche Karten, Farbverlauf-Überschriften, Standard-Schriften — der unverkennbare „KI-Look". Der Unterschied zwischen einer Seite, die nach Baukasten aussieht, und einer, die aussieht wie von einer Agentur, liegt in zwei Dingen: der Reihenfolge und den Skills.

Die Reihenfolge, die funktioniert

Der häufigste Anfängerfehler ist, sofort „bau mir eine Website" zu sagen. Die KI baut dann irgendetwas Hübsches — das aber nichts verkauft, weil das Ziel fehlt. Gute Websites entstehen in einer klaren Reihenfolge.

  1. 1Ziel klären: Für wen ist die Seite, was soll sie auslösen (Anfrage, Termin, Kauf)? Ohne Ziel kein gutes Design — nur hübsche Deko.
  2. 2Struktur vor Optik: erst die Abschnitte und ihre Reihenfolge (Hero, Nutzen, Beweis, Handlung), dann das Aussehen. Die Struktur ist das Skelett, das Design die Haut.
  3. 3Bauen lassen: Claude Code setzt die Seite um — du beschreibst, es baut, ihr verfeinert gemeinsam in Runden.
  4. 4Prüfen & live: Ladezeit, Handy-Ansicht, Rechtstexte — dann veröffentlichen.
Design ist nicht, wie es aussieht. Design ist, ob es das Ziel erreicht.
Der richtige Start-Auftrag
Bevor du irgendetwas baust: Stell mir Fragen zu meinem Angebot, meiner Zielgruppe und dem Ziel der Seite. Danach schlägst du mir eine Struktur vor (welche Abschnitte in welcher Reihenfolge und warum). Erst wenn ich die Struktur freigebe, fangen wir mit dem Design an.

Die Skills, die den Unterschied machen

Damit die Seite nicht nach „KI-Standard" aussieht, braucht Claude Design-Regeln — als Skills hinterlegt. Ein Skill ist eine einmal geschriebene Anleitung, die die KI automatisch befolgt. Genau diese Regeln zwingen zu bewussten, geschmackssicheren Entscheidungen statt zur Schablone.

Ein Anti-Slop-Skill

Verbietet die typischen KI-Design-Tells: überall gleiche Karten, Farbverlauf-Text, Neon-Glühen, dieselben drei Standard-Schriften, generische Symbole. Ohne diese Regel greift jede KI zu denselben Mustern — und alle Seiten sehen gleich aus.

Ein Typografie- & Farb-Skill

Sorgt für harmonische Schrift-Paarungen, genau einen Akzent, getönte Neutrale statt reinem Schwarz und Weiß. Farbe und Schrift entscheiden über 80 % des ersten Eindrucks — hier trennt sich billig von hochwertig.

Ein Motion- & UX-Skill

Dezente, hochwertige Animationen (nur ruhige Bewegungen, kein Zappeln), dazu die unsichtbaren Grundlagen: Touch-Flächen groß genug fürs Handy, sichtbare Fokus-Zustände, mobile-first. Das merkt niemand bewusst — aber alle spüren es.

Warum das zählt

Diese Skills sind der Grund, warum zwei Menschen mit demselben Werkzeug völlig unterschiedliche Ergebnisse bekommen. Der eine sagt „bau eine Website" und bekommt Standard. Der andere hat Design-Skills hinterlegt und bekommt eine Seite mit Handschrift. Das ist der Unterschied zwischen „von KI gebaut" und „unverwechselbar".

Mockups: so entsteht das Aussehen heute

Früher wurde jedes Design mühsam in einem Extra-Programm gezeichnet, bevor eine Zeile Code entstand. Heute geht das schneller: KI-gestützte Mockup-Werkzeuge (etwa Google Stitch) liefern in Minuten Design-Entwürfe für Desktop und Handy, die als Ausgangspunkt dienen. Du siehst früh, wohin es geht, und sparst Wochen.

Der Ablauf: grobe Richtung als Mockup, Feedback-Runde, dann setzt Claude Code das umgesetzte Design direkt in die echte, funktionierende Seite um. Kein Bruch zwischen „Design" und „Umsetzung" mehr.

Was du realistisch erwarten kannst

Sei ehrlich mit dir: Eine schnelle, saubere, mobil-optimierte Seite mit klarer Struktur und gutem Text — absolut machbar, in Tagen. Ein individuelles Kunstwerk mit aufwändigen Spezial-Animationen — möglich, aber mit deutlich mehr Feinschliff.

Für die allermeisten Unternehmen ist das Erste genau das, was verkauft. Die perfekte Seite, die nie fertig wird, bringt null Anfragen. Die gute Seite, die diese Woche live geht, bringt welche. Bau die gute Seite.

Die KI baut die Seite. Die Skills entscheiden, ob sie gut wird. Du entscheidest, ob sie live geht.

Der ehrliche erste Schritt

Wenn du noch nie mit Claude Code gearbeitet hast, starte nicht mit deiner Hauptwebsite. Bau eine einfache Landingpage für ein einzelnes Angebot — überschaubar, mit klarem Ziel. Daran lernst du die Reihenfolge und den Umgang, und hast am Ende etwas Nützliches in der Hand. Von dort ist die große Seite nur noch eine Frage des Umfangs, nicht des Prinzips.

Weiterführende Links

Das Werkzeug dazu

Gelesen ist gut. Gebaut ist besser.

Den kompletten Weg — von der ersten Zeile bis zur Live-Seite mit eigener Domain und den passenden Design-Skills — gehst du in der Business Dezigner Academy mit uns.

  • Der komplette Weg: 3 Stufen, 15 Lektionen — kostenlos
  • Die Vorlagen daraus zum Mitnehmen
  • Die Community
Datenschutzerklärung

Schon dabei? Hier einloggen.