INHALT▾
Du brauchst keinen Entwickler. Du brauchst kein Budget. Du brauchst eine gute Idee, eine starke Design-Referenz und 60 bis 90 Minuten Zeit.
AUF EINEN BLICK: Claude Code ist Anthropics agentisches Coding-Tool, das im Terminal läuft, deine Dateien direkt schreibt und ganze Projekte baut, statt nur Snippets vorzuschlagen. Mit dem Workflow in diesem Tutorial baust du in 60 bis 90 Minuten eine eigene Premium-Landingpage: Inspiration auf Awwwards, Struktur in Chrome DevTools sichern, Claude Code lässt das Projekt entstehen, Higgsfield liefert Bilder und Videos, Vercel deployt unter eigener Domain. Realistische Kosten beim ersten Build: 0 bis 30 Euro. Stand: Mai 2026.
Wichtig vorab — keine fremde Seite klonen
Fremde Websites dienen ausschließlich als Design-Inspiration: Layout, Sektionsfolge, Abstände, Farbsysteme, Animationen. Texte, Bilder, Marken, Logos und Code baust du für dein eigenes Produkt komplett neu. Sonst hast du ein Markenrechts- und Urheberrechts-Problem auf dem Tisch, bevor die erste Conversion läuft.
Dieser Workflow nutzt fremde Seiten als Strukturreferenz, nicht als Vorlage zum Kopieren.
Was du am Ende hast
Eine deployte Landingpage unter deiner eigenen URL. Mobil optimiert. Mit Hero-Section, Pricing, FAQ, CTA. Eigene Texte, eigene Bilder, sauberer Code im GitHub-Repo. Ab dem Moment iterierst du direkt am Live-Stand: jede Änderung in Claude Code, ein `git push`, Vercel deployt automatisch.
Was du brauchst
- —Mac, Windows oder Linux mit aktuellem Browser
- —Node.js 18+ installiert (nodejs.org)
- —Claude-Account (claude.ai) — Pro-Abo (20 $/Monat) reicht oder API-Key über console.anthropic.com
- —GitHub-Account (github.com) — kostenlos
- —Vercel-Account (vercel.com) — Hobby-Plan kostenlos für Solo-Projekte
- —Optional: Higgsfield-Account (higgsfield.ai) für KI-Bilder und -Videos
- —Optional: ChatGPT-Plus oder OpenAI-API für den Codex-Sicherheits-Check am Ende
Lieber offline mitnehmen? Die komplette 10-Schritte-Anleitung mit allen Befehlen und Prompts gibt's auch als handliches 6-Seiten-PDF: Kostenlos herunterladen. Praktisch zum Abarbeiten am zweiten Bildschirm, ohne Tab-Wechsel.
Schritt 1 — Inspiration auf Awwwards finden
Geh auf awwwards.com. Awwwards kuratiert ausgezeichnete Websites — die Hit-Rate für hochwertige Design-Vorlagen ist dort deutlich höher als bei Google-Suche.
Filter setzen: Kategorie passend zu deinem Produkt (Coach? Schau bei Education. SaaS? Schau bei Technology). Such dir eine Seite aus, die dich optisch trifft. Eine reicht.
Alternativ: Eine Landingpage, die du bereits aus deinem Markt kennst und gut findest.
Schritt 2 — HTML-Struktur in Chrome sichern
Öffne die Referenz-Seite in Chrome.
- 1.Rechtsklick irgendwo auf die Seite
- 2.Untersuchen wählen — DevTools öffnen sich
- 3.Im Elements-Panel den `<body>`-Tag oder den Hauptcontainer suchen
- 4.Diesen Knoten einklappen (kleines Dreieck links davon)
- 5.Rechtsklick auf den eingeklappten Knoten
- 6.Copy → Copy outerHTML
- 7.In ein leeres Textdokument einfügen (z. B. `referenz.html`)
Dieser Code ist nicht zum Veröffentlichen. Er dient Claude Code als Struktur-Referenz: Welche Sektionen liegen in welcher Reihenfolge, welche Abstände, welche Animationen. Mehr nicht.
Schritt 3 — Claude Code installieren
Öffne dein Terminal (Mac: Spotlight → Terminal. Windows: Powershell. Linux: Terminal). Zwei Wege:
Weg A (empfohlen) — Offizieller Installer:
Weg B — Über npm:
Verifizieren:
Wenn eine Versionsnummer erscheint, läuft Claude Code. Offizielle Doku: docs.claude.com/claude-code.
Schritt 4 — Anthropic-Konto verbinden
Claude Code braucht Zugriff auf das Claude-Modell. Zwei Auth-Wege:
- —Claude Pro/Max-Abo (20 $ bzw. 100 $/Monat): Beim ersten Start `claude` ausführen, Login über Browser. Inklusive Usage-Limits.
- —Anthropic API-Key: Auf console.anthropic.com Key generieren, in `~/.claude/settings.json` oder als ENV-Variable hinterlegen. Pay-as-you-go, keine Limits außer deinem Guthaben.
Für den Landingpage-Bau reicht das Pro-Abo. Realistischer Verbrauch für ein Projekt: 1 bis 3 Stunden Modellzeit.
Schritt 5 — Optional: Higgsfield für Bilder und Videos
Higgsfield ist ein KI-Tool für Bilder und Videos mit besonders starken Cinematic-Modellen. Für die meisten Landingpages reicht die Web-UI — du gibst Prompts ein, kriegst Bilder, lädst sie ins Projekt.
Wenn du Bilder direkt aus Claude Code generieren willst (Power-User), brauchst du den API-Key. Niemals committen — immer in eine `.env`-Datei:
Und `.env` in die `.gitignore`:
Schritt 6 — Projekt mit Claude Code starten
Neuen Ordner anlegen, Terminal hineinwechseln, Claude Code starten:
Claude Code öffnet seine Terminal-UI. Jetzt der Initial-Prompt:
Claude Code legt das Projekt an, installiert Dependencies, schreibt Komponenten. Das dauert 5 bis 15 Minuten beim ersten Mal.
Schritt 7 — Lokal anschauen
Claude Code startet üblicherweise selbst den Dev-Server. Falls nicht:
Im Browser öffnen:
Jetzt siehst du deine Landingpage live auf deinem Rechner. Falls Port 3000 belegt ist, nennt dir Next.js den nächsten freien Port.
Schritt 8 — Iterieren bis es sitzt
Ab hier wird Claude Code dein Designer. Sag konkret was anders soll.
Beispiel-Prompts, die in der Praxis liefern:
Die generierten Prompts kopierst du in die Higgsfield-UI, lädst die Bilder ins Projekt unter `public/images/`, sagst Claude Code wo sie liegen — der baut sie ein.
Schritt 9 — GitHub-Repo anlegen
GitHub-Account auf github.com erstellen, falls nicht vorhanden.
Claude Code direkt fragen:
Claude Code nutzt entweder die installierte GitHub CLI (`gh`) oder führt dich durch die manuellen `git init`, `git remote add`, `git push` Schritte. Beim ersten Mal musst du dich einmalig per Token authentifizieren.
Schritt 10 — Mit Vercel deployen
Vercel-Account auf vercel.com erstellen. Dann zwei Wege:
Weg A — Vercel for GitHub (empfohlen):
In Vercel auf Add New → Project, dein GitHub-Repo auswählen, Deploy. Ab jetzt deployt Vercel automatisch bei jedem `git push`.
Weg B — Vercel CLI:
Beim ersten Mal interaktive Konfiguration. Für Production-Deploys danach:
Nach 30 bis 60 Sekunden ist die Seite unter einer `*.vercel.app`-Domain live. Eigene Domain verbindest du in den Vercel-Projekt-Settings unter Domains.
Bonus — Codex als zweite Brille
Nach dem ersten Deploy ist es klug, einen unabhängigen Code-Review von einer zweiten KI laufen zu lassen. OpenAI Codex CLI macht genau das.
Installation:
Im Projektordner Codex starten und prüfen lassen:
Die [P1]-Findings fixt du sofort, die [P2] sammelst du für die nächste Iteration. Codex sieht typischerweise andere Sachen als Claude — gerade bei Sicherheit und Edge-Cases lohnt sich der Cross-Check.
Was kostet dich das wirklich?
| Tool | Kosten beim ersten Build | Laufend |
|---|---|---|
| Claude Code (Pro-Abo) | inkludiert | 20 $/Monat |
| Claude Code (API pay-as-you-go) | 5–20 $ | je nach Nutzung |
| Vercel Hobby | 0 € | 0 € (Solo) |
| GitHub | 0 € | 0 € (private Repos kostenlos) |
| Higgsfield Free-Tier | 0 € | bei intensiver Bildgenerierung Pro |
| Higgsfield Pro | — | ca. 15 $/Monat |
| OpenAI Codex (mit ChatGPT Plus) | inkludiert | 20 $/Monat |
| Domain (optional) | 10–20 € | 10–20 €/Jahr |
Realistische Gesamtinvestition für den ersten Live-Stand: 0 bis 30 Euro, plus die Zeit, die du sowieso reingesteckt hättest.
Welches KI-Coding-Tool für was?
| Tool | Stärke | Wann nehmen |
|---|---|---|
| Claude Code | Komplette Projekt-Builds, Multi-Datei-Edits, Agentic-Workflows | Du baust Apps, Websites, Tools komplett neu |
| Cursor | IDE mit KI-Inline-Completion | Du editierst bestehende Codebases lokal in einer IDE |
| OpenAI Codex CLI | Terminal-Coding, Reviews, kleine Iterationen | Cross-Check, Sicherheits-Reviews, alternative zweite Meinung |
| Lovable / v0 | Browser-First, kein lokales Setup | Du willst nichts installieren, Prototypen-Geschwindigkeit |
Für dieses Tutorial ist Claude Code das richtige Werkzeug, weil es ein komplettes Projekt in deinem lokalen Ordner baut, das du direkt nach GitHub und Vercel pushen kannst. Browser-Tools wie Lovable sind schneller im Einstieg, aber du gibst Kontrolle über den Code-Stand auf.
FAQ
Brauche ich Programmierkenntnisse für dieses Tutorial?
Nein. Du brauchst Terminal-Grundkenntnisse — also wissen, wie du `cd` in einen Ordner wechselst und einen Befehl ausführst. Den Code schreibt Claude Code. Du beschreibst, was du willst, in deutscher Sprache.
Wie lange dauert der erste Build wirklich?
60 bis 90 Minuten für eine ordentliche Landingpage mit Hero, Pricing, FAQ, CTA. Beim zweiten Mal eher 30 bis 45 Minuten, weil du dann weißt, wie du Claude Code briefst.
Was kostet Claude Code im Monat?
Mit Claude Pro: 20 $/Monat, das reicht für regelmäßiges Arbeiten an Solo-Projekten. Mit API-Key zahlst du pro Token, ein Landingpage-Build kostet typisch 5 bis 20 $ an API-Calls.
Darf ich eine Awwwards-Seite als Vorlage nehmen?
Als Inspiration ja. Layout-Konzepte, Abstände, Sektions-Folge, Farbsysteme sind nicht urheberrechtlich geschützt. Verboten ist: Texte, Bilder, Logos, Markennamen, Code 1:1 übernehmen. Wenn du dir unsicher bist, baue lieber zwei Schritte weiter weg von der Vorlage.
Was ist der Unterschied zwischen Claude Code und Cursor?
Claude Code läuft im Terminal und arbeitet agentisch: Du gibst eine Aufgabe, es plant Schritte, schreibt mehrere Dateien, führt Befehle aus. Cursor ist eine IDE mit KI-Autocomplete: Du editierst Code, KI schlägt Vervollständigungen vor. Für komplette Projekte ist Claude Code stärker, für tägliches Arbeiten an bestehendem Code ist Cursor angenehmer.
Kann ich auch ohne GitHub und Vercel deployen?
Ja. Vercel CLI funktioniert ohne GitHub (`vercel` lädt Files direkt hoch). Alternativen: Netlify, Cloudflare Pages, eigener Server. Für Solo-Landingpages bleibt der GitHub-Vercel-Workflow aber die schnellste und stabilste Variante.
Wie sicher ist es, meinen API-Key in einer .env-Datei zu speichern?
Sicher, solange `.env` in `.gitignore` steht und du den Key nicht teilst. Niemals committen, niemals in den Browser-Code legen. Für Production-Deploys auf Vercel die ENV-Variablen direkt im Vercel-Dashboard unter Settings → Environment Variables hinterlegen, nicht im Code.
Was tun, wenn der Code von Claude Code Fehler hat?
Fehler-Output kopieren, in Claude Code zurück-pasten, Fix anfordern. Bei hartnäckigen Bugs: Codex CLI parallel laufen lassen und um zweite Meinung bitten. Zwei Modelle finden andere Probleme — der Cross-Check ist Gold wert.
Du willst nicht nur eine Landingpage, sondern dein komplettes KI-Marketing-Setup?
Im KI Agent Cash & Traffic Mastery bauen wir dein komplettes Setup auf: Landingpages, Funnel, Brand Voice, Content-Pipeline, Tracking. Ab 990€, vollständige Eigenimplementierung.
Oder direkt: Done-for-You. Wir übernehmen Aufbau, Konfiguration und ersten Launch.
Willst du wissen wie das in deinem Business aussieht?
15 Minuten. Kostenlos. Wir schauen uns dein Setup an und geben dir konkrete nächste Schritte.
JETZT TERMIN SICHERN →WEITERE ARTIKEL