Ich habe das Ganze aufgezeichnet und dann Schritt für Schritt aufgeschlüsselt, damit du es nachmachen kannst. Die Website unten sieht aus, als hätte ein Freelancer fünfstellige Beträge dafür verlangt. Niemand, der sie besucht, kann erkennen, dass eine KI den Code geschrieben hat. Die Gesamtkosten für die Veröffentlichung: etwa 60 $.
GIF
Zuerst – der ehrliche Faktencheck
Ich werde dir keine Illusionen verkaufen. Bevor es losgeht, hier, was real ist und was nicht.
Was real ist:
- Claude Code schreibt den gesamten Code für eine Website von Grund auf basierend auf deiner Beschreibung. Keine Vorlage, also sieht deine Seite nicht aus wie jeder andere Wix/Squarespace-Klon. Das ist der Hauptgrund, warum das Ergebnis ein Premium-Niveau erreichen kann.
- Die beiden Fähigkeiten (Skills), die ich verwende, sind echt und kostenlos. Eine ist frontend-design, erstellt von Anthropic – sie läuft im Hintergrund und verbietet die am häufigsten verwendeten KI-Schriftarten und -Layouts. Die andere ist UI/UX Pro Max, ein von der Community erstellter Skill, der Dutzende von UI-Stilen, Farbpaletten und Schriftkombinationen mitbringt, die du auf Abruf nutzen kannst.
- Der Bild-/Video-Workflow ist real. ElevenLabs bündelt jetzt die führenden visuellen Modelle (GPT Image, Google Veo 3.1) plus Topaz-Upscaling in einem Tab – ich habe das überprüft, sie sind Ende 2025 auf Bild & Video umgestiegen. Du generierst also ein Standbild, animierst es und skalierst es hoch, ohne die Seite verlassen zu müssen.
- Claude Code ist im Claude Pro-Plan für 20 $/Monat enthalten (17 $ bei jährlicher Abrechnung). Du brauchst keinen Max-Plan dafür. Stand Juni 2026 bestätigt.
- Hosting bei einem günstigen Anbieter mit einer kostenlosen Domain im ersten Jahr kostet etwa 40–45 $/Jahr.
Was NICHT magisch ist: Die „10.000 $" sind der Wert des Ergebnisses, nicht dein garantierter Zahltag. Eine solche Seite verlangen Agenturen für 5.000–15.000 $. Ob du das tatsächlich verdienst, hängt davon ab, wie du sie verkaufst – mehr zum Geld weiter unten. Die Prompts hier sind Ausgangspunkte, kein Automat.
Jedes genannte Tool ist real. Jeder Preis entspricht dem Stand von Juni 2026.
Was eine 10.000-$-Website von einer 200-$-Website unterscheidet
Bevor du etwas baust, brauchst du ein Ziel. Ich habe Claude gefragt, was eine Website eigentlich teuer aussehen lässt, und es läuft auf 8 Dinge in 3 Gruppen hinaus:
Geschmack
- Standpunkt – eine echte Designrichtung, kein Moodboard
- Typografie – bewusste Schriftarten (und nicht die überstrapazierten)
- Farbe – Zurückhaltung, maximal 4–5 Hex-Werte, kein Regenbogen
Substanz 4. Hierarchie – die Größe sagt dem Auge, was zuerst, zweitens, drittens gelesen wird 5. Bildmaterial – maßgeschneidert oder überzeugend KI-generiert, niemals Stock-Müll 6. Text – zurückhaltend, sinnlich, geschrieben wie ein Mensch, nicht wie eine Adjektiv-Maschine
Fühlbare Qualität 7. Bewegung – Cursor-Effekte und Mikro-Interaktionen, die die Seite lebendig machen 8. Mobil – entworfen für Smartphones, nicht eine verkleinerte Desktop-Version
Behalte diese Liste. Am Ende bewertest du deine eigene Website anhand aller 8 Punkte. Dieser Selbstbewertungsdurchgang ist der entscheidende Schritt, der ein poliertes Ergebnis von einem generischen unterscheidet.

Für wen das gedacht ist
Das funktioniert, wenn du:
- Websites an lokale Unternehmen verkaufen willst (Restaurants, Fitnessstudios, Kliniken, Immobilien usw.) und nicht programmieren kannst
- Bereits freiberuflich tätig bist und deine Leistung und deine Preise verzehnfachen willst
- Eine Premium-Website für dein eigenes Unternehmen oder deine persönliche Marke haben willst
- Einen fokussierten Nachmittag investieren kannst und bereit bist, zu iterieren, anstatt eine perfekte Lösung auf Knopfdruck zu erwarten
Das ist nicht für dich, wenn du ein Spielzeug willst, bei dem du „Knopf drücken, Geld verdienen" erwartest. Die Qualität deiner Vorgaben und deine Bereitschaft, nachzubessern, wenn etwas flach wirkt, ist die Arbeit.
Was du brauchst (und was es kostet)

Realistische Gesamtkosten für eine fertige Website: ~60 $ (ein Monat Claude Pro + Hosting + Domain für das Jahr).
Der komplette Bau, Schritt für Schritt
Schritt 1 – Claude Code einrichten
Melde dich für Claude Pro an unter claude.com. Lade die Desktop-App herunter (Download-Symbol, unten links → Claude Code-Bereich → Desktop-App → Installationsprogramm ausführen). Melde dich an.
Wechsle vom Chat-Modus in den Code-Modus (Tab oben links, oder Cmd/Ctrl + 3).
Erstelle einen neuen, leeren Ordner irgendwo auf deinem Computer – das ist dein Arbeitsbereich. Klicke auf die Ordnerauswahl-Schaltfläche in der Nähe des Chat-Feldes und öffne ihn in der App. Claude Code funktioniert am besten, wenn es einen eigenen Ordner hat.
Die Oberfläche wird oft aktualisiert. Wenn also ein Button nicht genau dort ist, wo ich ihn beschreibe, keine Panik – das Konzept ist dasselbe, finde einfach die Entsprechung.

Schritt 2 – Claude mit zwei Skills aufwerten
Standardmäßig ist Claude ein Generalist. Sein Standarddesign ist okay – es greift zu denselben Schriftarten und Layouts, die du auf jeder KI-Website gesehen hast. Skills beheben das.
Skill #1 installieren – frontend-design (läuft im Hintergrund): Füge den frontend-design-Skill-Link mit folgendem Befehl in Claude Code ein:

1Installiere diesen Skill global.
Erlaube die Bearbeitungen, wenn du dazu aufgefordert wirst.
Skill #2 installieren – UI/UX Pro Max (du rufst ihn bei Bedarf auf): Füge den UI/UX Pro Max-Link mit genau dieser Formulierung in Claude Code ein – die Formulierung ist wichtig, da sie sauber über das Terminal installiert wird:

1Installiere dieses Plugin mit npm, global.
Erlaube die Bearbeitungen.

Schritt 3 – Auto-Modus aktivieren
Unten links, unter dem Chat, schalte den Modus-Wahlschalter auf Auto-Modus. Dadurch kann Claude arbeiten, ohne bei jedem Schritt um Erlaubnis fragen zu müssen. Mit aktiviertem Auto-Modus und beiden installierten Skills bist du bereit zu bauen.
Schritt 4 – Referenzen sammeln (deine Abkürzung zu gutem Geschmack)

Visuellen Geschmack in Worten zu beschreiben ist schwer, besonders wenn du neu im Design bist. Referenzen beheben das: Screenshots von Websites, die dir gefallen, die du Claude gibst, damit es den Stil trifft. Es ist viel einfacher, Geschmack zu zeigen, als ihn zu beschreiben.
Wo ich sie finde:
- Dribbble – wo Designer ihre Arbeiten zeigen
- Awwwards – preisgekrönte Websites, sehr hohes Niveau
- Pinterest – suche genau das, z. B. „modernes Restaurant-Webdesign"
Finde 3–5 Websites, die dir gefallen, und speichere Screenshots. Du kopierst sie nicht – du zeigst Claude die Richtung.
Schritt 5 – Der eine Prompt, der die Website baut
Das ist das ganze Video in einem einzigen Schritt. Du rufst den Design-Skill auf, gibst die Vorgaben, hängst deine Referenz-Screenshots an und endest mit der magischen Zeile.
Für meinen Bau habe ich eine Website für ein Restaurant in Seattle erstellt. Hier ist die Prompt-Struktur – passe die Vorgaben an dein Projekt an:
1/ui-ux-pro-max23Baue eine einseitige Website für [UNTERNEHMEN – z. B. ein gehobenes Steakhouse in Seattle].45Richtung: [die Stimmung in deinen eigenen Worten – z. B. dunkel, stimmungsvoller Luxus, aber verwurzelt im Pazifischen Nordwesten, NICHT ein generisches Steakhouse in Manhattan].67Abschnitte (in Reihenfolge): [z. B. Hero, Philosophie/Geschichte, Speisekarte, Der Raum, Reservierung].8Keine Galerie, kein Buchungssystem – nur eine Seite, die von oben nach unten scrollt.910Ich hänge 3–5 Referenz-Screenshots für den visuellen Stil an.11Triff das *Gefühl*, kopiere sie nicht.1213Tech-Stack: statisches HTML/CSS/JS in einer einzigen Datei (kein React – halte es einfach).1415Bevor du Code schreibst, stelle mir klärende Fragen.
Diese letzte Zeile – „stelle mir klärende Fragen" – bringt Claude dazu, innezuhalten und nachzudenken, bevor es baut. Es kam mit etwa 7 Fragen zurück: der Name, die Stilrichtung, welche Abschnitte, wer den Text schreibt, der Tech-Stack, das Animationsniveau und noch einiges mehr.
Der wichtigste Teil: Claude bot mir drei Stilrichtungen zur Auswahl an, wie ein Menü. Ich wählte dunklen/stimmungsvollen Luxus mit einer Verankerung im Pazifischen Nordwesten, fünf Abschnitte, keine Galerie, keine Buchung – eine scrollende Seite.
Dies ist der wichtigste Moment im gesamten Bauprozess. Deine Antworten hier werden zur gesamten Website. Je spezifischer du jetzt bist, desto weniger musst du später mit Claude kämpfen. Nimm dir Zeit.
Dann sende es ab. Claude braucht etwa 3 Minuten zum Lesen und Planen, bevor es eine Zeile schreibt, dann etwa 4–5 Minuten zum Bauen. Springe zur Enthüllung vor.

Fragen, gefolgt von Claude

Enthüllung der 1. Version
Schritt 6 – Bewerte dich selbst anhand der 8-Punkte-Checkliste

Bevor du weiter polierst, überprüfe die Website anhand der von dir gesetzten Messlatte. Füge die 8-Punkte-Checkliste (weiter oben in diesem Artikel) in Claude ein und frage:
1Hier ist meine 8-Punkte-Checkliste für eine 10.000-$-Website. Gehe die aktuelle Website durch und sage mir ehrlich, wo sie bei jedem Punkt steht: stark, gemischt oder fehlend. Sei schonungslos.
Bei meinem Bau kam Claude zurück mit: Standpunkt – stark, Farbe – stark, Hierarchie – stark, Typografie – gemischt, und Bildmaterial/Bewegung/Mobil/Unsichtbares – alles gemischt. Du wirst eine ähnliche Aufteilung bekommen, und das ist in Ordnung. Der Punkt ist, genau zu wissen, was noch fehlt.
Schritt 7 – Hier geht es von professionell zu teuer
Dieses Kapitel macht den ganzen Unterschied aus. Behebe nicht Dinge einzeln – das verschwendet Tokens und das Ergebnis wirkt zusammengestückelt. Führe mit Absicht, nicht mit Details, und bitte um eine Stapelverarbeitung.
Hier ist der genaue Prompt, den ich verwende:
1Wir brauchen mehr handgefertigte Mikro-Interaktionen. Die unteren Abschnitte wirken etwas generisch. Wir müssen sie nicht geschäftiger machen – nur teurer. Schlage eine Reihe von Verfeinerungen vor und wende sie alle auf einmal an.
Beachte, dass ich Claude nicht sage, was es hinzufügen soll – ich sage ihm, wie ich will, dass es sich anfühlt. Claude ist besser darin, Absicht in Details umzusetzen, als die meisten Menschen darin, Spezifikationen zu schreiben. Es kam mit einem Stapel zurück: Filmkorn auf der gesamten Website, animierte Messinglinien zwischen den Abschnitten, ein glimmender Gluteffekt, wortweise Überschriften-Enthüllungen. Fünf Änderungen, ein Prompt, zusammen ausgeliefert.
Dann führe den abschnittsweisen Durchgang selbst durch. Scrolle durch, finde die Abschnitte, die immer noch flach wirken – es gibt immer ein paar – und gib Claude eine Bewegung oder Cursor-Interaktion pro Abschnitt:
1Der [Geschichte]-Abschnitt wirkt statisch. Füge hier eine elegante Mikro-Bewegung oder Cursor-Interaktion hinzu. Halte sie subtil und raffiniert – lebendig, nicht laut.
Wenn der erste Versuch zu offensichtlich ist, hake nach: „Mach es subtiler, füge eine leichte Verzögerung hinzu, damit es dem Cursor folgt." Bei meinem Bau verwandelte das einen statischen Kerzenlicht-Halo in einen, der deinem Cursor mit einer sanften Verzögerung folgt. Zwei Prompts, zwei Abschnitte – diese Schicht ist der Unterschied zwischen einer Website, die teuer aussieht, und einer, die sich teuer anfühlt, während du navigierst.
Schritt 8 – Bildmaterial: selbst mitbringen oder generieren
GIF
Bildmaterial ist die eine Säule, die Claude nicht vollständig allein lösen kann. Beste Option: maßgeschneiderte Fotografie. Lege sie in deinen Projektordner und sage Claude, was es ist und wo es hingehört.
Kein Budget für Fotos? KI-Generierung ist jetzt gut genug, dass niemand den Unterschied erkennen kann. Der Trick, der das schnell macht: schreibe den Bild-Prompt nicht selbst – Claude kennt dein Projekt bereits, also bitte es, den Prompt für dich zu schreiben:
1Schreibe mir einen Bildgenerierungs-Prompt für den Hero dieser Website. Er sollte exakt die Stimmung, Farbpalette und Richtung treffen, die wir bisher aufgebaut haben. Gib nur den Prompt aus.
Füge das in deinen Bildgenerator ein, und du bekommst beim ersten Versuch etwas Markenkonformes. In ElevenLabs kannst du ein Standbild generieren (GPT Image), diesen genauen Frame in Google Veo 3.1 einfügen, um es zu animieren, und mit Topaz hochskalieren – alles in einem Tab. Lege das endgültige Asset in deinen Projektordner.
Schritt 9 – Pro-Komponenten von 21st.dev einbinden
GIF
Wenn du ein auffälliges visuelles Element haben möchtest (einen Scrolleffekt, einen ausgefallenen Hero), ist 21st.dev eine kostenlose Bibliothek mit Komponenten, die von echten Entwicklern erstellt wurden. Finde eine, die dir gefällt, klicke auf Copy Prompt, füge sie in Claude Code ein, hänge dein Asset an und sage Claude, es solle den Hero damit bauen.
Hier ist der wichtige Teil: Claude schützt deine Architektur. Die Scroll-Komponente, die ich auswählte, war für React gebaut; mein Projekt war eine einfache statische Website, also weigerte sich Claude, die React-Version einzufügen, weil sie die Funktionsweise des gesamten Projekts verändert hätte – und baute den Effekt stattdessen in einfachem HTML nach. (Wenn dein Projekt wirklich React braucht – ein Dashboard, ein Checkout, ein Login – würde Claude zustimmen. Es zerbricht Dinge nicht nur, weil du darum bittest.)
Wenn der Effekt beim ersten Versuch nicht funktioniert – bei mir war das so – beschreibe einfach, was falsch ist:
1Das Video wird angezeigt, aber es scrollt nicht so, wie die Komponente sollte. Grabe tiefer – öffne die Seite im Browser, überprüfe, was tatsächlich passiert, und behebe die eigentliche Ursache.
Claude öffnete die Seite selbst, überprüfte sie live und fand den eigentlichen Fehler drei Ebenen tief. Die Lektion: Gib nicht auf. Erkläre, was kaputtging und was du erwartet hast – Claude kann es fast immer lösen, wenn du es genauer hinsehen lässt.
Schritt 10 – Text, Schriftarten und Mobil (die schnellen Erfolge)
GIF
Text: KI-Texte erklären standardmäßig zu viel. Premium-Texte sind zurückhaltend und sinnlich – „Dry-aged Ribeye. 16oz. 60-day. Hearth-fired." liest sich, als hätte ein Koch es geschrieben. Der frontend-design-Skill drängt Claude in diese Richtung, weshalb er seinen Platz in jedem Projekt verdient.
Schriftarten: Es gibt eine Schriftart – Inter – die so überstrapaziert ist, dass sie sofort „KI hat das gemacht" schreit. Wenn du sie in deiner Ausgabe siehst:
1Ersetze Inter überall durch eine weniger überstrapazierte Schriftart – Geist funktioniert gut. Behalte die Überschriftenschriftart bei.
Mobil: „Responsive" ist nicht „für Smartphones entworfen". Smartphones werden deine Website viel häufiger sehen als Desktops. Bitte um einen dedizierten Durchgang:
1Mache einen dedizierten Mobil-Durchgang. Entscheide, was auf kleinen Bildschirmen ausgeblendet werden sollte, was enger sein sollte und was seine Größe ändern sollte. Das ist die Version, die die meisten Leute tatsächlich sehen werden.
Bei meinem Bau wurde die Navigation eingeklappt, das Wortzeichen bekam einen engeren Abstand und die Buttons bekamen eine kleinere Variante. Damit sind alle 8 Checklistenpunkte erledigt.
Schritt 11 – Veröffentliche die Website (der Teil, den jeder vermasselt)

Im Moment existiert deine Website nur auf deinem Computer – diese localhost-URL funktioniert nur auf deinem Rechner. Um sie zu teilen, brauchst du Hosting + eine echte Domain.
Wähle einen Host mit einer kostenlosen Domain im ersten Jahr. Für eine einfache statische Website (kein Login, kein Checkout, keine Datenbank) reicht die günstigste „Premium/Shared"-Stufe. Stelle die Laufzeit auf 12 Monate ein – das ist das Minimum, um die kostenlose Domain zu erhalten. Suche nach deiner Domain, beanspruche sie. Meine Gesamtsumme betrug etwa 43 $ für das Jahr: Hosting + Domain + E-Mail.
Wenn Claude dir etwas mit einem echten Backend gebaut hat (es hat
ja
zu React gesagt, Node.js eingerichtet, eine Datenbank usw.), wähle stattdessen die
Business
-Stufe – sie unterstützt Node.js. Der Moment, in dem Claude React in Schritt 9 akzeptiert oder abgelehnt hat, sagt dir, welchen Plan du brauchst.
Der eine Fehler, der eine leere Seite lädt: Wenn du hochlädst, zippe die Dateien innerhalb deines Projektordners – nicht den Ordner selbst. Öffne deinen Projektordner, wähle alles darin aus (Cmd/Ctrl + A), dann komprimiere. Du willst eine Zip-Datei, in der index.htmlauf der obersten Ebene sitzt. Wenn du den gesamten Ordner zippst, entpackt der Host ihn eine Verzeichnisebene zu tief und deine Domain zeigt eine leere Seite.
Wähle im Onboarding des Hosts Bestehende Website migrieren → Backup-Dateien hochladen, wähle deine Domain, ziehe die Zip-Datei hinein, sende ab. Klicke auf deine Domain – und da ist sie, deine 10.000-$-Website live unter einer eigenen URL.

Wie viel du damit tatsächlich verdienen kannst
Die Website selbst ist ein Vermögenswert im Wert von 10.000 $. So wird daraus Geld:
- Websites an lokale Unternehmen verkaufen ist der schnellste Weg. Restaurants, Zahnärzte, Fitnessstudios, Immobilienmakler und Handwerker zahlen regelmäßig 1.000–5.000 $ für eine einseitige Premium-Website. Baue eine an einem Nachmittag, berechne entsprechend. Zwei Kunden pro Monat für je 2.000 $ = 4.000 $/Monat in Teilzeit.
- Erfahrene Freiberufler / kleine Agenturen verlangen 5.000–15.000 $ für genau diese Art von maßgeschneiderter, animierter, für Mobilgeräte entworfener Website – und liefern sie jetzt in Stunden statt Wochen. Die Marge ist der springende Punkt.
- Produktisierte Dienstleistung: Verkaufe ein festes Paket „Premium-One-Pager in 5 Tagen für 1.500 $". Vorhersehbar, wiederholbar, und du kannst mehrere gleichzeitig bearbeiten.
- Eigene Marke: Wenn du sie für dich selbst nutzt, besteht das „Verdienen" aus den Geschäften und der Glaubwürdigkeit, die eine fünfstellig aussehende Website einbringt.
Realistische Entwicklung für jemanden, der heute startet: erster zahlender Kunde innerhalb weniger Wochen, 1.000–5.000 $/Monat in Teilzeit innerhalb weniger Monate, wenn du tatsächlich Akquise betreibst. Der Bau ist nicht länger der Engpass – der Verkauf ist es.
Was sich für dich danach ändert
GIF
Vorher bedeutete eine Premium-Maßwebsite entweder monatelanges Programmieren lernen oder Tausende an einen Entwickler zu zahlen. Danach ist die technische Hürde verschwunden. Du kannst in einem Nachmittag eine wirklich teuer aussehende, vollständig maßgeschneiderte, animierte, für Mobilgeräte entworfene Website produzieren – und sie entweder verkaufen oder nutzen, um dein eigenes Projekt seriös aussehen zu lassen.
Die Fähigkeit, die du tatsächlich mitnimmst, ist nicht „Programmieren". Es ist Regieführen – zu wissen, wie teuer aussieht, es präzise zu briefen und nachzuhaken, bis es richtig ist. Diese Fähigkeit verstärkt sich mit jeder Website, die du danach baust.
Dein nächster Schritt (mach das heute)
- Melde dich für Claude Pro an und installiere die Desktop-App.
- Installiere beide Skills (Schritt 2) und aktiviere den Auto-Modus.
- Speichere 3–5 Referenz-Screenshots von Dribbble oder Awwwards.
- Führe den Bau-Prompt aus Schritt 5 aus – einschließlich „stelle mir klärende Fragen" – und antworte sorgfältig.
Überspringe nicht das Sammeln von Referenzen oder die klärenden Fragen. Da kommen 80 % der Qualität her. Baue eine Website vollständig Ende-zu-Ende, bevor du dir Gedanken über den Verkauf machst – du musst zuerst sehen, dass es funktioniert.
Eine ehrliche Sache
Das ist keine Wunderpille. Es ist ein echtes Werkzeug, das echte Arbeit leistet – aber das Ergebnis hängt von dir ab. Die obigen Prompts sind Ausgangspunkte, keine Drehbücher. Der Unterschied zwischen einer Website, die wie eine Vorlage aussieht, und einer, die wie 10.000 $ aussieht, ist der Geschmack, den du einbringst, die Referenzen, die du wählst, und wie oft du bei einem flachen Abschnitt nachhakst, anstatt „gut genug" zu akzeptieren.
Claude kümmert sich um die Ausführung. Deine Richtung und dein Einsatz entscheiden über das Ergebnis. Was du damit machst, liegt ganz bei dir.
*
*Bitte setze ein Lesezeichen, retweete und folge @thegreatest_sv für mehr Alpha, KI-Tools und qualitativ hochwertige Recherchen.HAFTUNGSAUSSCHLUSS (Einnahmen & Informationen) Die in diesem Artikel gezeigten Einnahmen oder Statistiken sind Beispiele aus meiner Recherche, meiner eigenen Erfahrung und keine Garantien für das, was du verdienen wirst. Die Ergebnisse variieren je nach Nische, Inhaltsqualität, RPM/CPM, Zielgruppenengagement, Beständigkeit, Aufwand und anderen Faktoren. Dies ist keine Finanz-, Steuer-, Rechts- oder Berufsberatung – konsultiere die entsprechenden Experten, bevor du Geschäftsentscheidungen triffst.Ressourcen & Links
Claude Code-Tools & -Ressourcen: https://claude.com/
**Frontend Design-Skill (von Anthropic):
**https://github.com/anthropics/skills/tree/main/skills/frontend-design
**UI/UX Pro Max-Skill:
**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Die 10.000-$-Website-Checkliste (kostenloser PDF-Download): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view
Design-Referenzseiten
Dribbble: https://dribbble.com
Awwwards: https://www.awwwards.com
Pinterest:https://pinterest.com










