Website mit Claude erstellen

Kann man mit Claude wirklich gute Websites bauen?

Artikel aktualisiert: 10.08.2026

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 ink. Claude-Skill, der dir entlang des Prozesses aus diesem Ratgeber hilft, eine Website mit Claude zu bauen. 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.

Aktualität: Noch eine Randnotiz zur Aktualität und meinen Aktualisierungen an diesem Artikel, am Prozess sowie an dem Claude Skill: Da sich LLMs insgesamt und Claude im speziellen schnell weiterentwickelt und ich ebenso stetig neues aus meinen Projekten lerne, ist dieser Artikel gerade nicht in einem finalen Status. Vermutlich wird er nie abschließend final sein und ich werde ihn stetig verbessern und feinschleifen. Komme also gerne mit einer Frage auf mich zu, wenn das letzte Aktualisierungsdatum hier schon etwas her ist. Ich habe sicher schon einiges Neues zu berichten.

Tech Stack & Inputs: Was du brauchst

Hier die komplette Liste der Tools, die du brauchst, um eine Website mit Claude zu bauen. Ich habe jeweils markiert, was verpflichtend oder optional für dieses Konzept ist.

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. Astro als Wahl für die Rolle des Web-Frameworks ist streng genommen nicht verpflichtend. Du kannst auch ein anderes wählen. Die Rolle von Astro musst du in diesem Tech-Stack aber besetzen.
• Cloudflare (verpflichtend): Hosting und Deployment. Schnell, günstig, mit Basis-Analytics direkt an Bord. Auch hier: Cloudflare als ausgewählter Service ist nicht unbedingt verpflichtend. Hosting und Deployment kannst du auch auf einem anderen Service laufen lassen. Nur wie bei Astro muss diese Rolle grundsätzlich im Tech Stack gegeben sein.
• GitHub-Repository (verpflichtend): Die Codebasis, auf der Claude Code arbeitet.
• CRM-Anbindung für generierte Leads (verpflichtend): Irgendwo müssen Leads, die auf der Website konvertieren landen, ohne zu versanden. Nur wenn du Leads sauber erfasst und nach der Conversion strukturiert angehst, kannst du aus den Anfragen auch wirklich Pipeline und Umsatz generieren.
• 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.

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.

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.

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.

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.

Case Studies für Claude Websites

Beide Projekte befinden sich aktuell (August 2026) in der Umsetzung. Die Live-Daten und Erfahrungen von der Front folgen hier im Artikel.

7.1 Case Study: Projektentwicklung in Windenergie

Aktuell ist die Website im Aufbau und ich werde nach dem Go Live der Website mit dem Projektentwickler aus der Windenergie mehr über das Projekt sowie die Websiteerstellung berichten. Der Scope für das Projekt: Eine Unternehmenswebsite für einen Projektentwickler in der Windenergie: ca. acht Hauptseiten plus rund zehn Unterseiten für die einzelnen Windparks, also 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: SaaS-Lösung für Projektentwickler in Erneuerbaren Energien

Auch diese Website ist aktuell im Aufbau und ich werde nach dem Go Live der Website mit der Marke mehr über das Projekt sowie die Websiteerstellung berichten. Der Kontext des Projektes ist eine Website für ein SaaS-Produkt zur B2B Leadgenerierung: 15 bis 20 Seiten plus ein Ratgeber-Bereich mit SEO- und GEO-wirksamen Blog-Artikeln.

Challenge: (folgt — Projekt in Umsetzung)

Lösung: (folgt — Projekt in Umsetzung)

Ergebnis: (folgt — Live-Daten nach Launch)

Der Claude Skill: Selber eine Website mit Claude bauen

Du musst dir diesen ganzen Prozess nicht merken. Dafür habe ich aus dem Prozess hier einen Claude-Skill für das Websiteerstellen mit Claude gebaut. Ein Claude Skill ist eine wiederverwendbare Anleitung, die Claude und dich 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.

Über diesen Download-Link kannst du den Claude-Skill herunterladen (keine E-Mail-Adresse o.ä. notwendig).

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

Schreibe mir gerne eine E-Mail an tobias.schmitz@goodparagon.com, wenn du diesen Prozess oder sogar den Skill für den Bau einer Website mit Claude ausprobierst.

Wenn du dir dabei Unterstützung wünscht, kannst du dir einfach über meine Kontaktseite ein kostenloses Erstgespräch mit mir buchen und wir lernen uns unverbindlich kennen.