Website mit KI erstellen: Wie Claude Code aus einem Prompt eine 10'000-Franken-Seite baut

Ich baue meine eigene Website totalexperience.ch mit Claude Code. Kostenpunkt: 30 CHF, ein Samstag und zwei Abende. Seither bekomme ich dieselbe Frage öfter, als mir lieb ist: Wie schafft man es, dass eine selbstgebaute Seite nicht nach Baukasten aussieht, sondern nach einer Agentur, die 10'000 Franken verlangt hätte?

Die Antwort ist keine Geheimzutat. Es ist ein klarer Ablauf, von der ersten Anmeldung bis zur Live-Seite. Genau den zeige ich hier, inklusive der Tools, die ich einsetze, und der typischen Fehler, die eine KI-Website sofort als KI-Website verraten.

Was "Website mit KI erstellen" in der Praxis bedeutet

Der Unterschied zu Wix, Squarespace oder Webflow ist strukturell, nicht kosmetisch. Bei einem klassischen Baukasten startet man mit einer Vorlage. Egal wie viel man daran schraubt, am Ende erkennt man die Vorlage trotzdem, weil hunderte andere Seiten von derselben Vorlage abstammen.

Claude Code schreibt den Code für Ihre Seite von Grund auf, basierend auf dem, was Sie beschreiben. Kein Template im Hintergrund, das durchscheint. Das Ergebnis kann komplett eigenständig aussehen, ohne dass Sie selbst eine Zeile Code schreiben.

Was am Ende über hochwertig oder generisch entscheidet, ist selten der Code selbst. Es sind Typografie, ein zurückhaltendes Farbsystem, Bildsprache mit Absicht und ob die mobile Version eigens gestaltet wurde, statt nur verkleinert zu sein. Genau darauf achte ich bei jedem Projekt zuerst.

Zwei Design-Skills verändern dabei, wie das Ergebnis aussieht. Ein Skill ist im Grunde eine Anleitung, eine Textdatei, die Claude in einem bestimmten Bereich klüger macht, einmal installiert, für immer nutzbar. Der Front-End-Design-Skill von Anthropic bannt die überstrapaziertesten Schriftarten und Layouts im Netz und drängt Richtung mutigerer Design-Entscheidungen. Der UI/UX-Pro-Max-Skill bringt 57 UI-Stile, 95 Farbpaletten und 56 Schriftkombinationen mit, auf die man gezielt zugreifen kann, statt bei null anzufangen.

Für wen sich das lohnt, und wann nicht

Website mit KI erstellen lohnt sich, wenn Sie eine einfache, statische Seite brauchen: Landingpage, Portfolio, Restaurant- oder Beratungsseite ohne Login, ohne Warenkorb, ohne Datenbank im Hintergrund. Genau dafür reicht das einfachste Hosting-Paket, und Claude Code liefert in wenigen Durchläufen ein Ergebnis, das sich sehen lassen kann.

Es lohnt sich weniger, wenn Ihr Projekt Benutzerkonten, eine Zahlungsabwicklung oder eine echte Datenbank im Hintergrund braucht. Dann wird aus einer statischen Seite eine Anwendung, und das ist ein anderes Projekt mit anderen Anforderungen an Hosting und Wartung.

Das merkt man oft erst, wenn man versucht, eine fertige Komponente aus einer Bibliothek in eine eigentlich einfache, statische Seite einzubauen. Claude widerspricht dann zu Recht, weil das die gesamte Architektur verändern würde, und schlägt eine einfachere Lösung vor, die zum bestehenden Projekt passt. Das ist der Moment, an dem man erkennt: Wenn Claude bei Ihrem Projekt "nein" sagt, ist das ein Hinweis, dass Sie ein komplexeres Hosting-Paket brauchen als das einfachste.

Schritt für Schritt: So bauen Sie Ihre Website

1. Claude Code besorgen. Auf claude.com anmelden und ein Abo wählen, der Pro-Plan für rund 20 US-Dollar im Monat reicht für ein komplettes Website-Projekt vollständig. Danach die Desktop-App herunterladen, installieren und anmelden. In der App wird von Chat-Modus auf Code-Modus umgeschaltet, meist über eine Tastenkombination oder einen Umschalter oben in der Ansicht.

2. Einen Projektordner anlegen. Claude Code arbeitet am besten mit einem eigenen Ordner für genau dieses eine Projekt. Einen neuen, leeren Ordner erstellen und ihn in der App über die Ordnerauswahl öffnen. Das ist ab jetzt der Arbeitsbereich.

3. Skills installieren. Beide Design-Skills werden einmalig installiert, danach stehen sie für jedes weitere Projekt zur Verfügung. Man verlinkt Claude auf die jeweilige Skill-Quelle und lässt sie einrichten. Den UI/UX-Pro-Max-Skill rufe ich danach gezielt mit einem eigenen Befehl auf, wenn eine grössere Design-Entscheidung ansteht. Sinnvoll ist an dieser Stelle auch, in den Auto-Modus zu wechseln, dann fragt Claude nicht bei jedem einzelnen Schritt nach, sondern arbeitet den Auftrag zügiger durch.

4. Referenzen sammeln. Bevor der eigentliche Prompt geschrieben wird, sammle ich drei bis fünf Screenshots von Seiten, die in die gewünschte Richtung gehen. Nicht zum Kopieren, sondern um Claude zu zeigen, was gemeint ist, statt es umständlich in Worten zu beschreiben. Dribbble zeigt Design-Arbeiten aus praktisch allen Stilrichtungen, Awwwards kuratiert preisgekrönte Seiten, und Pinterest findet zu fast jedem Stichwort passende Beispiele.

5. Den Prompt schreiben. Das ist der wichtigste Schritt im ganzen Ablauf. Der entscheidende Satz am Ende des Prompts lautet sinngemäss: "Stell mir Rückfragen, bevor du anfängst." Genau das bringt Claude dazu, erst nachzudenken, statt sofort loszulegen. Darauf folgen typischerweise fünf bis sieben Rückfragen: Name oder Angebot, Stilrichtung, gewünschte Abschnitte, wer die Texte schreibt, welcher technische Unterbau, wie viel Bewegung und Animation. Bei der Stilrichtung schlägt Claude oft mehrere konkrete Varianten vor, aus denen man wählen kann. Je präziser die Antworten an dieser Stelle, desto weniger muss später nachgebessert werden.

6. Bauen lassen. Claude braucht ein paar Minuten zum Nachdenken, bevor die erste Zeile Code geschrieben wird, danach folgen einige weitere Minuten für den eigentlichen Bau. Am Ende steht ein erster Entwurf, der bereits über das hinausgeht, was die meisten KI-Website-Demos zeigen.

7. Ergebnis prüfen und in Batches verfeinern. Sobald das Grundgerüst steht, gehe ich es Abschnitt für Abschnitt durch und frage: Wirkt das hier nach Vorlage, oder hat es eine eigene Handschrift? Wo bleibt es mittelmässig? Statt einzelne Details nacheinander anzufragen, formuliere ich eine ganze Reihe an Verbesserungen auf einmal, mit Absicht statt mit Detailanweisungen. Nicht "füge einen Hover-Effekt hinzu", sondern "die unteren Abschnitte wirken generisch, machen Sie sie hochwertiger, ohne sie unruhiger zu machen". Claude übersetzt diese Absicht in mehrere konkrete Änderungen gleichzeitig.

8. Bilder ergänzen. Eigene Fotos sind immer die beste Wahl. Ohne eigenes Fotoshooting helfen KI-Bildmodelle, dazu gleich mehr im Abschnitt zu den Tools.

9. Live schalten. Ein Hosting-Paket wählen, eine Domain registrieren und die fertigen Dateien hochladen. Für eine einfache, statische Seite reicht das einfachste Paket vollständig, mehr dazu im nächsten Abschnitt.

Die Tools hinter dem Ergebnis

Claude Code schreibt den Code. Die Desktop-App bündelt alles in einem Fenster, ohne zusätzliches Entwickler-Setup.

Front-End-Design-Skill von Anthropic läuft im Hintergrund und drängt Richtung bewussterer Typografie und Farbwahl, statt der immer gleichen KI-Standardschriften.

UI/UX-Pro-Max-Skill wird gezielt aufgerufen, wenn ein grösserer Design-Schub gebraucht wird, mit fertigen Stilrichtungen, Paletten und Schriftpaarungen.

21st.dev ist eine Bibliothek fertiger Web-Komponenten, Animationen und Scroll-Effekte. Man kann sich dort inspirieren lassen oder einen Prompt kopieren, der Claude genau erklärt, wie eine bestimmte Komponente nachgebaut werden soll.

Bildgenerierung ist der einzige Punkt, den Claude nicht allein lösen kann. Eigene Fotos sind immer die beste Wahl. Ohne eigenes Fotoshooting helfen KI-Bildmodelle, die inzwischen gut genug sind, dass niemand den Unterschied merkt, wenn man sie richtig einsetzt.

Hosting. Für eine einfache, statische Seite reicht ein einfaches Hosting-Paket vollständig. Braucht Ihr Projekt Benutzerkonten oder eine echte Datenbank im Hintergrund, ist die nächsthöhere Stufe die richtige Wahl. Ich nutze für eigene Projekte und für Kunden gerne Hostinger, weil das Preis-Leistungs-Verhältnis stimmt und eine Domain für das erste Jahr im Paket enthalten ist. Über diesen Link erhalten Sie 20% Rabatt auf Ihren ersten Vertrag, transparent gesagt: Es ist mein eigener Empfehlungslink.

Was am Ende rauskommt: Zahlen statt Behauptungen

Grob gerechnet kommt man mit einem KI-Abo für rund 20 US-Dollar im Monat und einem Hosting-Paket inklusive Domain für rund 40 bis 45 US-Dollar im ersten Jahr aus. Zusammen ein zweistelliger bis niedriger dreistelliger Betrag für eine Seite, die aussieht, als hätte sie eine Agentur für 10'000 Franken gebaut.

Meine eigene Zahl aus einem echten Projekt: totalexperience.ch hat mich 30 CHF gekostet, verteilt auf einen Samstag und zwei Abende. Am ersten Abend habe ich die Programmierschnittstelle direkt genutzt und dabei 13 CHF verbraucht, bis ich gemerkt habe, dass das Abo-Modell für 17 CHF im Monat deutlich günstiger ist. Eine Lektion, die ich gerne früher gehabt hätte.

Diese Zahlen schwanken je nach Anbieter, Aktion und Wechselkurs, das ist normal. Was konstant bleibt: Der Betrag liegt in beiden Fällen weit unter dem, was eine Agentur für eine vergleichbare Seite verlangen würde.

Typische Fehler, die eine KI-Website generisch wirken lassen

Die immer gleiche Schriftart. Eine bestimmte, sehr weit verbreitete Schriftart ist inzwischen so oft in KI-generierten Seiten zu sehen, dass sie sofort auffällt. Sobald sie auftaucht, lohnt sich die Bitte, sie durch etwas Eigenständigeres zu ersetzen.

Mobile nur verkleinert, nicht gestaltet. Claude macht eine Seite standardmässig responsiv, das heisst, sie passt sich der Bildschirmgrösse an. Das ist nicht dasselbe wie eine Seite, die für Telefone durchdacht wurde. Da die meisten Besucher über das Telefon kommen, lohnt sich ein eigener Durchgang: Was wird auf kleinen Bildschirmen ausgeblendet, was enger, was neu skaliert.

Texte, die zu viel erklären wollen. KI-Texte neigen dazu, zu viele Adjektive zu verwenden und zu sehr überzeugen zu wollen. Zurückhaltende, konkrete Formulierungen wirken hochwertiger als jede Superlativ-Kette.

Bewegung, die fehlt oder übertreibt. Eine Seite ohne jede Bewegung wirkt flach. Eine Seite, die bei jedem Scroll etwas Neues macht, wirkt unruhig. Der Punkt dazwischen: Ein bis zwei zurückhaltende Cursor- oder Scroll-Effekte pro Abschnitt, dort, wo die Seite sonst am flachsten wirkt.

Kein zweiter Blick am Ende. Der wohl grösste Unterschied zwischen einer okayen und einer sehr guten KI-Website ist schlicht, ob jemand am Ende noch einmal jeden Abschnitt einzeln durchgeht und fragt: Wirkt das hier lebendig, oder wirkt es wie eine Pflichtübung?

Mein Praxisbeispiel: Die eigene Website für 30 CHF

Als Wirtschaftspsychologe hatte ich vor totalexperience.ch keine Zeile Code geschrieben. Ich habe mich mit Claude Code hingesetzt, und nach einem Samstag und zwei Abenden stand eine Seite, die nicht perfekt ist, aber besser aussieht als alles, was ich vorher je hatte.

Drei Dinge hätte ich gerne früher gewusst. Erstens: Sofort das Abo nutzen statt die Schnittstelle direkt anzusprechen, das hätte mir die 13 CHF Lehrgeld gespart. Zweitens: Ohne konkrete Design-Vorgaben liefert das Modell brauchbares, aber generisches Design. Skills und Referenzbilder verändern das Ergebnis massiv. Drittens: Ein klarer Systemprompt am Anfang sorgt dafür, dass jede weitere Anfrage konsistent bleibt, ohne festen Rahmen bekommt man bei jedem Durchgang ein etwas anderes Ergebnis.

Diese drei Punkte gehören heute fest zu meinem Ablauf, bevor ich irgendein Projekt mit Claude Code anfange.

Website mit KI erstellen, je nach Ausgangslage

Sie sind Einzelunternehmer oder Freelancer. Eine einfache, statische Seite mit fünf bis sechs Abschnitten reicht meistens vollständig. Genau das Szenario, für das dieser Ansatz am schnellsten zum Ergebnis führt.

Sie führen ein kleines Team. Hier lohnt sich zusätzlich ein kurzer Blick darauf, wer die Texte schreibt und wer die Bilder liefert. Claude baut die Struktur, aber Inhalt und Bildsprache brauchen jemanden, der die Marke kennt.

Ihr Betrieb braucht mehr als eine Visitenkarte im Netz. Sobald Kundenkonten, Buchungssysteme oder eine Anbindung an bestehende Systeme wie CRM oder Buchhaltung dazukommen, wird aus dem Website-Projekt ein Automatisierungsprojekt. Das ist der Punkt, an dem ich ohnehin lieber mit Ihnen spreche, bevor Sie sich in eine Architektur verrennen, die später schwer zu ändern ist.