Website mit Claude erstellen

1. Die Fragestellung: Kann man mit Claude wirklich gute Websites bauen?

Kurze Antwort: Ja. Mit Claude Code und Claude Design kannst du Websites bauen, die richtig gut aussehen, technisch performant sind, in Google und in KI-Suchen (ChatGPT, Perplexity, Google AI Overviews) sichtbar werden — und vor allem: die Leads generieren. Und das ohne 10.000-Euro-Budget und ohne monatelange Agentur-Projekte.

Die lange Antwort ist dieser Artikel. Ich zeige dir hier meinen kompletten Prozess, mit dem ich aktuell selbst zwei Kundenwebsites baue: eine Unternehmenswebsite für einen Windenergie-Projektentwickler und eine SaaS-Website mit Content-Cluster-Strategie. Beide Projekte findest du weiter unten als Case Studies — sie sind gerade in der Umsetzung, die Live-Daten und Learnings folgen hier im Artikel.

Damit du direkt weißt, was dich erwartet: Wir gehen erst durch den Tech Stack, dann durch die 11 Prozessschritte von Fit-Check bis Launch, und am Ende bekommst du einen Claude Skill, mit dem du genau diesen Prozess selbst durchlaufen kannst. Wichtig vorab: Dieser Artikel richtet sich an Marketer mit Erfahrung, die ihre Strategie kontrolliert in die KI-Umsetzung einfließen lassen wollen — nicht an absolute Anfänger. Und er ist bewusst kompakt gehalten, denn die eigentliche Umsetzung passiert im Skill.

2. Tech Stack & Inputs: Was du brauchst

Hier die komplette Liste — jeweils markiert, ob verpflichtend oder optional für dieses Konzept:

Tools:

• Claude Code (verpflichtend): Das agentische Coding-Tool von Anthropic. Damit wird die Website tatsächlich gebaut — Code, Content, Struktur, alles in einem Workflow.
• Claude Design (verpflichtend): Damit erstellst du das Designsystem für die Website. Ausnahme: Wenn bereits ein fertiges Designsystem bzw. verbindliche CI-Richtlinien existieren, kannst du diese direkt als Input an Claude Code geben.
• Astro (verpflichtend): Das Web-Framework, auf dem die Website läuft. Astro erzeugt schnelle, statische Seiten — ideal für SEO und GEO, weil der Content direkt im HTML steht und für Crawler und KI-Systeme sichtbar ist.
• Cloudflare (verpflichtend): Hosting und Deployment. Schnell, günstig, mit Basis-Analytics direkt an Bord.
• GitHub-Repository (verpflichtend): Die Codebasis, auf der Claude Code arbeitet.
• Keyword-Tool (verpflichtend, Tool-Wahl flexibel): Semrush, Ahrefs, Ubersuggest oder der kostenlose Google Keyword Planner. Mehr dazu in Schritt 5 — wichtig ist, dass du eine Recherche machst, nicht mit welchem Tool.
• Google Analytics 4 & Google Search Console (verpflichtend): Ohne Tracking kein Nachweis, dass die Website ihre Ziele erreicht.
• Google Tag Manager (optional): Sinnvoll für die zentrale Tracking-Verwaltung.
• Meta Pixel (optional): Nur relevant, wenn Meta Ads jetzt oder später ein Kanal sind — dann aber Pflicht.
• Heatmap-Tool (optional): Für UX-Optimierung nach dem Launch.

Inputs:

• Transkripte aus Kundeninterviews (verpflichtend): Das strategische Stakeholder-Interview und das Interview mit Vertrieb/Kundenbetreuung (Schritte 2 und 3). Sie sind die Grundlage für authentischen Content statt generischem KI-Text.
• Authentische Bilder (verpflichtend): Echte Fotos vom Team, vom Unternehmen, von Projekten. Sie erzeugen Trust — gerade wenn der Content KI-gestützt entstanden ist.
• Keyword-Masterliste (Sheet 1) & Metatag-Tabelle (Sheet 2) (beide verpflichtend): Entstehen in Schritt 5 und steuern die Content-Strategie.
• Strategie-Briefing (verpflichtend): Entsteht aus den Schritten 1 bis 4.

3. Strategische Grundlagen (Schritte 1–3)

Schritt 1: Fit-Check — Passt Claude für diesen Case überhaupt?

Bevor du irgendetwas baust, stell dir die Gatekeeper-Frage: Ist diese Website ein guter Fit für den Claude-Ansatz? Claude ist nicht für jeden Case die Lösung — und das ehrlich zu prüfen, spart dir und deinem Kunden viel Zeit.

Guter Fit:

• Websites mit klarer Struktur: Branding-Site, Service-Website, Lead-Gen-Site
• Content-lastig, aber überschaubar — 15 bis 50 Seiten sind ideal, nicht 500+
• Standardisierte Seitentypen (Hero, About, Services, Referenzen, Kontakt), deren Muster sich wiederholen lassen
• Klar definierte Ziele: Leads generieren, Showcase, Kundengewinnung — nicht "alles auf einmal"
• Kleine bis mittlere Unternehmen, die eine professionelle Website brauchen, aber kein Agentur-Großbudget haben

Schlechter Fit:

• Große E-Commerce-Shops mit hunderten oder tausenden Produkten — da gehört eine echte E-Com-Plattform hin
• Extrem komplexe Unternehmensseiten mit Legacy-Strukturen und hunderten Seiten
• Websites, bei denen Kundendaten oder Sicherheit hochkritisch sind (Banking, Healthcare)
• Projekte mit einem starren, nicht flexiblen Design-System als harter Anforderung

Fällt der Fit-Check negativ aus, endet der Prozess hier. Alles andere wäre verschwendete Energie.

Schritt 2: Website-Strategie — Welche Rolle spielt die Website?

Die Marketingstrategie leitet sich aus den Unternehmens- und Vertriebszielen ab — und die Website-Strategie aus der Marketingstrategie. Deshalb klärst du das direkt mit den strategischen Entscheidern, nicht nur mit dem Website-Ansprechpartner.

Phase A — Deine Vorbereitung: Entwickle vorab eine eigene strategische Hypothese zur Rolle der Website und bau dir daraus eine Fragenstruktur.

Phase B — Das Stakeholder-Interview (45 Minuten, unbedingt transkribieren): Kläre mindestens diese Fragen:

• Wofür habt ihr eure Website bisher verwendet?
• Wofür soll die Website in Zukunft da sein — und welches Problem soll sie für euch lösen?
• Wie gewinnt ihr aktuell Kunden?
• Was erzählen euch eure Kunden über eure Außendarstellung und Onlinepräsenz?
• Was sind eure bisherigen Marketingziele?
• Inwiefern unterstützt euer Marketing aktuell euer Umsatzwachstum?
• Welche Hindernisse habt ihr in eurem Marketing bisher?

Daraus definierst du die Website-Rolle: Lead-Generation-Website, Showcase/Portfolio, Service-Website, Content-Hub — oder ein Hybrid. Das Transkript ist gleichzeitig wertvoller Content-Input für später.

Schritt 3: Research & Briefing

Jetzt sammelst du alles, was Claude später als Wissensgrundlage braucht:

• Competitor-Analyse: Wer rankt für die relevanten Themen, wie positionieren sich die Wettbewerber?
• Brand-Guidelines: Was existiert bereits an CI, Tonalität, Positionierung?
• Technische Anforderungen: Bestehende Systeme, Formular-Anbindungen, Domains, Redirects.
• Zielgruppen-Definition: Wer soll auf dieser Website konvertieren?
• Dokumentation der Leistungen und Produkte: Auch die bestehende Website ist hier eine Quelle.
• Interview mit Vertrieb oder Kundenbetreuung: Kurz, aber Gold wert. Die Menschen an der Front wissen, welche Fragen Kunden wirklich stellen und welche Einwände es gibt — oft besser als die strategischen Entscheider.

Der Output ist ein Research-Dossier, das später ins Briefing für Claude Code fließt.

4. Marketing- & SEO-Strategie (Schritte 4–5)

Schritt 4: Funnel-Konzept für die Lead-Generierung

Auch eine kompakte Website braucht ein durchdachtes Conversion-Konzept. Die Kernfrage: Welche Conversion-Arten ergeben auf dieser Website Sinn? Es geht hier nicht um beworbene Lead-Magneten und Ad-Landingpages — das ist ein eigenes Thema — sondern um die Conversion-Punkte der Website selbst.

Ein Kontaktformular allein ist zu wenig. Ideal sind zwei bis drei verschiedene Conversion-Arten, damit du Besucher an unterschiedlichen Punkten ihrer Customer Journey abholen kannst. Beispiele:

• Kontaktformular oder Anfrage einer individuellen Kalkulation (Bottom of Funnel)
• Calculator bzw. Rechner, z. B. ROI- oder Kostenrechner (Middle of Funnel)
• Quiz oder Self-Assessment (Top/Middle of Funnel)
• Newsletter-Signup, Demo-Request, Erstgespräch buchen

Und ganz wichtig — der Minimal-Funnel dahinter: Stell sicher, dass nach jeder Conversion ein sauberer Folgeprozess läuft. Das muss nichts Großes sein: eine Welcome-E-Mail, zwei bis drei Folge-E-Mails und eine interne Notification an die Person, die den Kontakt bearbeitet. Ohne diesen Folgeschritt verwandelst du Conversions deutlich schlechter in echte Kunden.

Du musst das übrigens nicht komplett allein konzipieren: Der Claude Skill (Kapitel 8) schlägt dir auf Basis deines Business und deiner Branche zwei bis drei passende Conversion-Arten vor, aus denen du auswählen und die du verfeinern kannst.

Schritt 5: Keyword-Recherche & Keyword-Strategie

Das ist der Schritt, der eine Claude-Website von einer beliebigen KI-Website unterscheidet. Ohne deine Keyword-Strategie erfindet die KI eine generische — und genau das willst du als erfahrener Marketer nicht. Du willst deine strategische Brille kontrolliert einfließen lassen.

So gehst du vor:

1. Keyword-Masterliste erstellen: Recherchiere die strategisch relevanten Keywords für das Business. Ob das am Ende 10 Keywords sind oder 300, ist zweitrangig — wichtig ist, dass es die strategisch richtigen sind.

2. Metatag-Tabelle bauen: Verteile die Keywords auf die geplanten Seiten. Pro Seite ein Fokus-Keyword plus passende Neben-Keywords, dazu Title und Meta Description.

Ein einfaches Beispiel, wie so eine Tabelle aussieht:

| Seite | URL | Fokus-Keyword | Title | Meta Description |

|---|---|---|---|---|

| Startseite | / | windenergie projektentwickler | Windenergie-Projektentwicklung … | … |

| Leistungen | /leistungen | windpark planung | Windpark-Planung von A bis Z … | … |

| Referenzen | /windparks | windpark referenzen | Unsere Windparks … | … |

Zum Thema Tools: Semrush und Ahrefs sind stark, wenn du ein bezahltes Abo hast. Ich selbst nutze Ubersuggest, weil es günstig ist und mir reicht. Wenn du gar kein bezahltes Tool hast, nimm das kostenlose Kontingent eines SEO-Tools oder den Google Keyword Planner aus Google Ads. Die Recherche darf nicht am Tool scheitern — keine Recherche ist die einzig falsche Option.

Die Metatag-Tabelle und die Keyword-Masterliste gehen später als Input direkt an Claude Code. So setzt Claude deine Content-Strategie um — nicht seine eigene.

5. Design & Entwicklung (Schritte 6–9)

Schritt 6: Content-Struktur

Hier darfst du Claude arbeiten lassen. Claude baut die Content-Struktur jeder Seite auf Basis des Seitenziels aus der Metatag-Tabelle — leicht verständlich, überzeugend und auf Conversions ausgerichtet, immer mit Blick auf deine Marketingstrategie. Dazu gehören auch SEO- und GEO-wirksame Content-Module, etwa FAQ-Abschnitte, wo sie inhaltlich Sinn ergeben. FAQ-Module sind für die KI-Sichtbarkeit besonders wertvoll, weil sie konkrete Fragen mit faktendichten Antworten verbinden — genau das, was generative Suchsysteme zitieren.

Schritt 7: Design-Konzept

In diesem Guide gehen wir davon aus, dass du das Design neu mit Claude Design erstellst — auf Basis eines Design-Briefings von dir: Markenwerte, Stilrichtung, Farbwelt, Tonalität. Das Ergebnis ist ein Designsystem, das später als Input in die Code-Generierung fließt.

Falls bereits ein fertiges Design oder verbindliche CI-Richtlinien existieren: Kein Problem — dann gibst du diese einfach direkt bei Claude Code mit und überspringst die Neuerstellung.

Schritt 8: Tracking & Analytics Setup

Das Tracking richtest du bewusst vor der Code-Generierung ein — dann kannst du Claude Code alle Tracking-IDs direkt mitgeben und die Tools werden beim Bau der Website gleich sauber integriert. Die Checkliste:

• Google Analytics 4
• Google Search Console (für SEO/GEO-Monitoring)
• Conversion-Tracking für die definierten Conversion-Arten
• Meta Pixel (optional — wenn Meta Ads ein Kanal sind oder werden sollen)
• Google Tag Manager (optional, aber sinnvoll für die Tracking-Verwaltung)
• Heatmap-Tool (optional)
• Cloudflare Analytics (Performance-Monitoring, kommt mit dem Hosting)

Das soll hier kein Tracking-Deep-Dive sein — der Punkt ist: Ohne Messbarkeit kannst du später nicht beweisen, dass die Website ihre Marketing-Ziele erreicht.

Schritt 9: Code-Generierung

Jetzt kommt alles zusammen. Claude Code bekommt:

• Zugang zum GitHub-Repository, zu Astro und zu Cloudflare
• Das Strategie-Briefing (Marketing- und Website-Strategie)
• Die Keyword-Masterliste
• Die Metatag-Tabelle
• Das Designsystem bzw. Design-Briefing aus Claude Design
• Die Tracking-IDs aus Schritt 8

Und dann wird losgecodet. Der Vorteil dieses Setups: Claude arbeitet nicht ins Blaue, sondern setzt eine vollständig durchdachte Strategie um — deine.

6. Launch & Optimierung (Schritte 10–11)

Schritt 10: Testing & Optimierung

Bevor die Website live geht, einmal systematisch durchtesten:

• Performance: Ladezeiten, Mobile-Responsiveness, Core Web Vitals
• Conversions: Funktionieren alle Formulare, CTAs und Conversion-Punkte — inklusive der Folge-E-Mails und internen Notifications?
• SEO: Metatags korrekt, Sitemap vorhanden, strukturierte Daten, Canonical Tags
• User Experience: Navigation logisch, Content verständlich, Funnels nachvollziehbar
• Kompatibilität: Verschiedene Browser und Geräte
• Links: Alle Links funktionieren, keine 404-Fehler

Schritt 11: Launch

Der Launch selbst ist unspektakulär — aber drei Dinge solltest du direkt danach erledigen:

1. Indexierung anstoßen: Fordere die Indexierung in der Google Search Console an, damit die Seite so schnell wie möglich im Index ist.

2. Social-Media-Profile aktualisieren: Trage überall den aktuellen Website-Link ein — das sind deine ersten Backlinks.

3. Launch-Content posten: Mach auf deinen Kanälen ein paar Posts, die zur neuen Website einladen — inklusive einer ehrlichen Feedback-Bitte: Wie verständlich ist die Seite, wie wird sie wahrgenommen? Man steckt oft im eigenen Saft, und diese Einladung wird erfahrungsgemäß gerne angenommen.

7. Case Studies

Beide Projekte befinden sich aktuell in der Umsetzung — die Live-Daten und Erfahrungen von der Front folgen hier im Artikel.

7.1 Case Study: Windenergie Janssen

Eine Unternehmenswebsite für einen Projektentwickler in der Windenergie: acht Hauptseiten plus rund zehn Unterseiten für die einzelnen Windparks — insgesamt 18 bis 20 Seiten.

Challenge: (folgt — Projekt in Umsetzung)

Lösung: (folgt — Projekt in Umsetzung)

Ergebnis: (folgt — Live-Daten nach Launch)

7.2 Case Study: ProGee

Eine Website für ein SaaS-Produkt zur Lead-Generierung in der Projektentwicklung: 15 bis 20 Seiten, plus ein Schritt für Schritt wachsender Cluster aus SEO- und GEO-wirksamen Ratgeberartikeln.

Challenge: (folgt — Projekt in Umsetzung)

Lösung: (folgt — Projekt in Umsetzung)

Ergebnis: (folgt — Live-Daten nach Launch)

8. Der Claude Skill: Diesen Prozess selbst durchlaufen

Du musst dir diesen ganzen Prozess nicht merken — dafür gibt es den Skill. Ein Claude Skill ist eine wiederverwendbare Anleitung, die Claude Schritt für Schritt durch einen Workflow führt. Dieser Skill hier bildet genau den Prozess aus diesem Artikel ab und funktioniert in drei Phasen:

Phase 1 — Interaktive Fragen: Der Skill führt dich durch alle Prozessschritte — vom Fit-Check über die Website-Strategie bis zum Tracking — und fragt gezielt die Informationen ab, die er braucht. Er arbeitet dabei adaptiv: Beim Funnel-Konzept schlägt er dir zum Beispiel zwei bis drei Conversion-Arten vor, die zu deinem Business passen.

Phase 2 — Briefing-Erstellung: Aus deinen Antworten, deiner Keyword-Masterliste, der Metatag-Tabelle, dem Designsystem und den Tracking-IDs kompiliert der Skill ein vollständiges, strukturiertes Briefing für Claude Code.

Phase 3 — Übergabe an Claude Code: Das Briefing gibst du an Claude Code — und die Umsetzung startet.

(Download-Link zum Skill folgt hier in Kürze.)

Der Skill wächst übrigens mit: Mit jeder Website, die ich selbst mit diesem Prozess baue, fließen neue Learnings in den Artikel und in den Skill ein. Es lohnt sich also, hier gelegentlich wieder vorbeizuschauen.