Was du in diesem Guide bekommst
Ich zeige dir Schritt für Schritt, wie ich mit Claude eine Webseite gebaut habe. Plus der wichtigste Trick, der dafür sorgt, dass deine Seite am Ende nach dir aussieht, nicht nach Standard-KI.
Was du am Ende hast: eine fertig programmierte Seite mit Texten und passendem Design. Bereit, online zu gehen.
Die vier Stunden waren mein Ergebnis bei dieser Landingpage. Deine Seite kann schneller oder langsamer gehen. Das hängt vor allem davon ab, wie klar dein Angebot und deine Texte schon sind und wie viele Schleifen du mit Claude drehst.
Was du vorher brauchst
Einen Claude Pro Account
Das ist die bezahlte Version. Für den Einstieg reicht das. Wenn du viel mit Claude Code arbeitest oder mehrere Seiten am Stück baust, kann der größere Account (Max) für den Erstellungsmonat sinnvoll sein.
Die Claude Desktop App
In der Browserversion geht nicht alles, sie hat weniger Funktionen. Wir brauchen die Desktop App, weil wir später in den Claude-Code-Modus wechseln und einen Ordner mit deinen Materialien verknüpfen. Du kannst sie hier herunterladen.
Eine Vorlage
Eine Seite oder ein Design, das dir optisch gefällt. Eine eigene alte Webseite, ein Pinterest-Pin, ein Canva-Design, ein Screenshot von einer Seite, bei der du denkst „so etwa". Keine Sorge: Wir kopieren nichts. Claude nutzt das Bild nur als visuelle Richtung.
Eine Idee davon, was die Seite tun soll
Soll sie für eine Warteliste sammeln? Ein Produkt verkaufen? Auf einen Workshop einladen? Du musst keinen fertigen Text haben. Aber du solltest wissen, wozu die Seite da ist.
Finde eine Webseiten-Vorlage
Hier fängt alles an. Bevor Claude eine Zeile Code schreibt, brauchst du eine visuelle Richtung. Sonst kommt das raus, was viele KI-Webseiten ausmacht: sauber, aber alles irgendwie ähnlich und austauschbar.
Wo du Beispiele finden kannst:
- deine eigene bestehende Webseite
- Pinterest (suche nach „Landing Page Design", „Consulting Website", „Personal Brand Website")
- Template-Shops wie z.B. Creative Market
- ein Screenshot von einer Webseite, die dir gefällt
- ein Moodboard oder Brand-Guidelines, die du eh schon hast
Wichtig: Es geht nicht ums Kopieren. Claude nutzt das Bild nur als Stilrichtung. Farben, Schriften, Aufbau, Stimmung — daraus leitet Claude im nächsten Schritt deinen eigenen Stil ab.
Mach dir davon einen Screenshot oder speichere das Bild ab. Du brauchst es im nächsten Schritt.
Claude macht dein Designsystem
Das ist vielleicht der wichtigste Schritt im ganzen Guide. ;) Der eine, der den Unterschied macht.
Geh in Claude Chat und lade dein Beispielbild oder Bilder hoch. Dann gibst du diesen Prompt dazu ein:
Erstelle mir aus diesem Beispielbild ein Designsystem in einem HTML-File und eine design.md-Datei.
Was passiert: Claude schaut sich das Bild an, erkennt Farben, Schriften, Abstände, visuelle Hierarchie und typische Elemente. Daraus entsteht eine Art Stil-Anleitung in zwei Dateien.
- ein HTML-File mit der visuellen Übersicht (so siehst du sofort, was Claude rausgelesen hat)
- eine design.md-Datei mit den Stilregeln in Textform (Farben mit Hex-Codes, Schriften, Abstände, Buttons, alles)
So sieht das Ergebnis dann konkret aus:
Lade beide Dateien herunter und speichere sie ab. Sie sind die Basis für deine ganze Seite.
Warum das so viel ausmacht: Ohne diesen Schritt baut Claude einfach „eine Webseite". Mit diesem Schritt baut Claude eine Webseite, die nach deinem Beispiel aussieht — also nach dir, nicht nach Standard-Claude.
Falls du dir gerade denkst: „Cool. Gibt’s Elkes kompletten Ablauf auch schon fertig?“ Jep. 😜
In Website Magic bekommst du meine Claude-Skills, erprobten Prompts und Vorlagen direkt zum Einsetzen.
Website Magic ansehen →Plan den Aufbau deiner Seite
Bevor du die Texte schreibst, brauchst du den Webseiten-Aufbau. Sonst entstehen am Ende Texte für Abschnitte, die du gar nicht brauchst, oder es fehlt was Wichtiges.
Geh diese Fragen für dich durch, oder mit Claude im Chat:
- Was soll die Seite verkaufen oder sichtbar machen?
- Für wen ist die Seite?
- Was soll jemand am Ende der Seite tun? (Anmelden, kaufen, Termin buchen, Newsletter abonnieren)
- Welche Abschnitte braucht die Seite? Die üblichen Bausteine: Hero, Vorteile, Über mich, Angebot, Kundenstimmen, FAQ, CTA
- Welche Einwände muss die Seite aufgreifen? („Was kostet das?", „Warum du?", „Für wen ist das nicht?")
- Welche Bilder, Logos oder Materialien hast du schon?
- Welche Tonalität soll die Seite haben?
Ergebnis: ein grober Aufbau mit allen Abschnitten deiner neuen Webseite. Wie ein Inhaltsverzeichnis für deine Seite, noch ohne fertige Texte, aber mit einer klaren Struktur.
Welche Abschnitte du tatsächlich brauchst und in welcher Reihenfolge sie stehen, hängt von deinem Angebot, deiner Zielgruppe und dem Ziel der Seite ab. Der Guide gibt dir dafür die richtigen Fragen. Die Entscheidungen triffst du für dein Business.
Warum das wichtig ist: Wenn du direkt mit den Texten anfängst, schreibst du oft Sätze, die nirgendwo gut hinpassen. Mit dem Aufbau weißt du, an welcher Stelle welcher Inhalt landet und kannst die Texte gezielt für genau diese Stellen schreiben.
Erarbeite die Texte mit Claude
Jetzt füllen wir die Seite mit Leben. Sektion für Sektion, mit Claude im Chat.
Für jeden Abschnitt brauchst du:
- eine Überschrift
- optional eine Unterzeile
- den eigentlichen Text
- ggf. Buttons und Fotos oder Grafiken
Das geht am besten im Dialog: Claude einen Vorschlag machen lassen, ablehnen wenn's nicht passt, anpassen, schärfen, kürzen. Den ersten Vorschlag nimmt man selten so wie er ist.
So sieht das in der Praxis aus:
Schreib mir die Headline für den Hero. Es geht um eine Warteliste für mein neues 4-Wochen-Programm. Halte dich an meine Beispieltexte.
„Endlich Klarheit für dein Business — trag dich ein und sei dabei."
Klingt zu glatt. Direkter. Wie ich rede. Lies meine Beispieltexte nochmal.
„Wenn du wissen willst, was wirklich geht — dann komm dazu."
Besser, aber noch zu vage. Gib mir drei Varianten, die klar sagen, worum's geht.
So gehst du jede Sektion durch: Vorschlag holen, schärfen, gegenfragen, schärfen. Das ist normal und gehört dazu.
Wichtig: Claude muss wissen, wie du klingst
Sonst kommen Texte raus, die nach Standard-KI klingen. Glatt, korrekt, aber leblos. Bevor du anfängst, gib Claude ein paar Sachen mit:
- 2 bis 3 Beispieltexte von dir, die typisch für deine Stimme sind (Newsletter, LinkedIn-Post, eine alte Webseite)
- eine kurze Beschreibung: Wie du klingst, was du nicht magst, welche Wörter du nicht benutzt
- für wen die Seite ist und welcher Ton zu dieser Zielgruppe passt
Dann gehst du Abschnitt für Abschnitt durch, lass Claude nicht die ganze Seite auf einmal schreiben, immer ein Abschnitt, Feinschliff und dann zum nächsten. Sag dazu einfach:
Schreib mir den Text für den Abschnitt XY, im Stil meiner Beispieltexte.
Das ist der zeitaufwendigste Teil im ganzen Prozess. Plan dafür ruhig ein paar Korrekturschleifen ein. Hier entscheidet sich, ob die Seite am Ende nach dir klingt und vor allem ob sie auch das gewünschte Ergebnis bringt.
Wenn alle Texte stehen: Speichere sie in einer einzigen Datei, in der Reihenfolge deines Aufbaus. Diese Datei brauchst du im nächsten Schritt.
Lass Claude Code die Seite bauen
Jetzt baut Claude die Seite. Drei kurze Vorbereitungen, dann geht's los.
Ordner anlegen
Erstelle auf deinem Rechner einen Ordner für deine Webseite. Speichere dort alle Materialien rein, die Claude später braucht:
- das HTML-Designsystem aus Schritt 2
- die design.md-Datei aus Schritt 2
- deine fertigen Texte aus Schritt 4
- Bilder, Logo und alles Weitere, was auf die Seite soll
In Claude Code wechseln
Öffne die Claude Desktop App und klick oben auf den Reiter „Code".
Ordner mit Claude Code verknüpfen
Klick auf das Ordner-Symbol im Eingabefeld und wähl den Ordner aus, den du gerade angelegt hast. Claude Code arbeitet ab jetzt mit den Dateien in diesem Ordner.
Dann gibst du Claude diesen Auftrag:
Bau mir aus den Texten in [Dateiname] eine Webseite. Nutze die Stilregeln aus design.md und das Designsystem aus [Dateiname]. Bau die Seite responsive. Achte darauf, dass die Stilregeln eingehalten werden und die Texte passend platziert sind.
Claude Code baut die Seite. Das dauert einige Minuten, je nach Länge und Umfang. Am Ende hast du eine fertige HTML-Datei, die du in deinem Browser öffnen und anschauen kannst.
Die Korrekturschleifen
Die erste Version ist nicht die finale, das ist total normal. Bei mir waren es schon einige Schleifen, bis die Seite saß.
Typische Sachen, die du anpassen lässt:
- Abschnitt kürzen oder verständlicher machen
- Button anders formulieren oder andere Farbe
- mobile Ansicht checken
- Header-Bereich stärker machen
- Abstände anpassen
- Schriftgrößen variieren
- ein Logo oder Fotos einbauen
- ein Anmeldeformular einbauen
Wie du Claude Code Änderungen sagst:
Das geht einfach in normaler Sprache, als würde Claude wie ein Mitarbeiter neben dir sitzen, sowas wie „Mach den Header-Bereich größer." „Die Farbe der Buttons soll heller sein." „Bau mir eine zweite Seite als Danke-Seite mit den Texten XY."
Wichtig: Claude versteht dich am besten, wenn du konkret bist. Statt „die Farbe gefällt mir nicht" sag „mach die Buttons in der Akzentfarbe aus dem Designsystem". Statt „das wirkt komisch" sag „der Abstand zwischen Header und nächstem Abschnitt ist zu klein, mach ihn doppelt so groß".
Spätestens bei der dritten Korrekturschleife weißt du, warum ich aus meinem Ablauf einen ganzen Kurs gemacht habe. 😜
In Website Magic installierst du meine fertigen Claude-Skills und klickst mir bei der Umsetzung einfach nach.
Das komplette System gerade für 37 statt 297 Euro ansehen →Online stellen
Du hast jetzt eine fertige Webseiten-Datei im HTML-Format und die zugehörigen Stildateien. Jetzt soll das Ganze ins Netz.
Für meine Seite habe ich Netlify benutzt. Es ist für eine einfache Webseite kostenlos und in unter 10 Minuten eingerichtet.
Der Ablauf grob:
- Account anlegen bei Netlify
- den Ordner mit deiner Seite hochladen (geht per Drag-and-Drop)
- die Seite ist online unter einer kostenlosen Subdomain (z.B. deinname.netlify.app)
- eigene Domain verknüpfen, falls du eine hast
Ich halte diesen Teil bewusst kurz, sonst sprengt der Guide den Rahmen. Netlify selbst hat sehr gute Einsteiger-Anleitungen, falls du irgendwo hängst.
Bevor du live gehst
Ein paar Sachen, die du checken solltest, bevor die Seite öffentlich erreichbar ist:
- Mobile Ansicht. Öffne die Seite auf deinem Handy. Sehen alle Abschnitte gut aus? Sind die Buttons klickbar groß? Lädt alles?
- Alle Links. Klick jeden Link auf der Seite einmal an. Geht jeder Link da hin, wo er soll?
- Impressum und Datenschutz. Prüf, ob Impressum und Datenschutzerklärung zu deiner Webseite, deinen eingebundenen Tools und deinem Business passen. Übernimm rechtliche Texte nicht ungeprüft von einer anderen Seite und verlass dich bei rechtlichen Aussagen nicht allein auf Claude.
💡 Tipp: Hier kannst du dir Impressum und Datenschutz kostenlos generieren lassen:
- Eingebundene Dienste. Prüf, welche externen Dienste, Schriften, Videos, Formulare oder Trackingtools deine Seite lädt und ob deine Datenschutz- und Cookie-Einstellungen dazu passen.
- Rechtschreibung. Letzter Korrekturlesen-Durchgang. Claude ist gut, aber nicht perfekt.
- Ladezeit. Wenn du große Bilder eingebaut hast: komprimier sie. Tinypng.com oder Squoosh.app machen das in 30 Sekunden.
Wenn sich was ändert
Deine Seite ist online und irgendwann willst du was ändern. Den Hero-Text, eine zusätzliche Unterseite, ein Detail im Design. Der Weg ist immer derselbe.
Du gehst zurück in Claude Code, in dieselbe Sitzung, in der du die Seite erstellt hast. Dann sagst du Claude in normaler Sprache, was sich ändern soll. So wie du es einem Mitarbeiter sagen würdest.
Ein paar typische Beispiele:
- „Ändere den Hero-Text. Statt 'X' soll dort 'Y' stehen."
- „Bau mir eine Danke-Seite, die nach dem Eintragen aufgeht."
- „Mach noch eine Doppel-Opt-In-Bestätigungsseite dazu."
Claude baut das. Dann lädst du die geänderten Dateien wieder hoch.
Aber: Prüf immer, was Claude liefert. Vor allem bei Formularen, Tracking, Datenschutz, Cookie-Einstellungen und anderen rechtlich relevanten Themen. Claude kann dir bei der technischen Umsetzung helfen, übernimmt aber nicht die Verantwortung für deine Webseite, diese bleibt bei dir.
Elke Greß · AI Mindflow
Hi, ich bin Elke.
Seit 2010 bin ich selbstständig und seit über 25 Jahren arbeite ich in Marketing und Webdesign. Früher war ich Mediendesignerin und Agenturinhaberin. Dazu kommen vier Jahre Storytelling-Ausbildung und über 200 gebaute Webseiten.
Heißt: Ich weiß nicht nur, wie man eine Seite baut – ich weiß, wie man sie so aufbaut, dass sie verkauft. 😜
Und ich sag dir ehrlich, was ich vom KI-Hype halte: nichts. „Drück einen Knopf, und die KI macht dein Marketing“ – dieses Versprechen finde ich moralisch grenzwertig. Klar spuckt dir KI auf Knopfdruck eine Website aus. Nur steckt in der kein einziger Gedanke daran, wie aus einem Besucher ein Kunde wird. KI muss geführt werden. Und genau dieses Führen bringe ich dir bei – mein Marketing-Wissen steckt schon in den Prompts, damit du nicht bei null anfängst.
Seit November 2022 arbeite ich täglich mit KI, und mich interessiert dabei nur eine Frage: Nimmt sie dir im Alltag Arbeit ab und macht sie dich und dein Business selbstbestimmter und erfolgreicher?
Du kannst jetzt loslegen. Oder du schnappst dir das wahrscheinlich coolste Website-System der Welt. 😜
Mit dem Guide hast du den kompletten Fahrplan. In Website Magic bekommst du meinen Onlinekurs, die fertigen Claude-Skills, alle erprobten Prompts, Wireframes, Vorlagen und Checklisten. Plus die Videos, in denen du mir direkt am Bildschirm über die Schulter schaust.
Du musst dir nicht jeden Schritt selbst zusammensuchen, sondern installierst easy meine Skills und klickst mir einfach nach.
Und jetzt kommt's: Gerade bekommst du Website Magic für 37 € statt 297 €.