Kurz gesagt: Du kannst mit Claude ein funktionierendes, individuelles WordPress Theme erstellen – ohne Programmierkenntnisse und in einem Bruchteil der Zeit, die klassische Entwicklung benötigen würde. Dieser Artikel zeigt dir genau wie, inklusive einem fertigen Prompt zum Rauskopieren.
Vor ein paar Tagen habe ich mir selbst die Webseite walk-to-business.de gebaut – eine saubere, schnelle WordPress-Seite für mein eigenes Coaching-Angebot in Osnabrück. Kein gekauftes Premium-Theme, kein Page Builder. Stattdessen: ein strukturiertes Mockup, die Claude-Erweiterung in VS Code und Claude als Entwicklungspartner der direkt auf meiner Festplatte gebaut hat.
Das Ergebnis ist eine Seite, die schnell lädt, gut aussieht und vollständig anpassbar ist. Genau diesen Prozess zeige ich dir hier – transparent, ehrlich und mit allen Stolperfallen die ich auf dem Weg mitgenommen habe.
Was bedeutet „WordPress Theme mit KI bauen“ überhaupt?
Ein WordPress Theme steuert, wie deine Webseite aussieht. Farben, Schriften, Layout, Abstände – all das steckt im Theme. Normalerweise kauft man ein fertiges Theme (wie Astra oder GeneratePress), passt es über Einstellungen an oder engagiert einen Entwickler für ein Custom Theme.
Der KI-Ansatz ist ein dritter Weg: Du beschreibst Claude, wie deine Seite aussehen soll, und Claude schreibt den PHP-, CSS- und JavaScript-Code dafür. Du bist der Architekt, Claude ist der Handwerker.
Was dabei entsteht, ist ein vollständig eigenständiges Custom Theme – keine Abhängigkeit von einem fertigen Basis-Theme, kein Page Builder, kein fremder Code im Hintergrund. Nur das, was deine Seite wirklich braucht.
Wann macht das Sinn – und wann nicht?
| Situation | KI-Theme sinnvoll? |
|---|---|
| Kleines Budget, klares Design | ✅ Ja |
| Onepager oder kleine Seite (bis 6 Unterseiten) | ✅ Ja |
| Kein PHP-/CSS-Vorwissen vorhanden | ✅ Ja (mit Risiken, siehe unten) |
| Webshop mit WooCommerce, komplexen Funktionen | ⚠️ Bedingt |
| Großes Projekt mit vielen Nutzern und Rollen | ❌ Eher nicht |
| Langfristige Wartung ohne technische Begleitung | ❌ Kritisch prüfen |
Schritt 1 – Erst das Mockup, dann der Code
Der häufigste Fehler beim KI-gestützten Bauen: direkt mit Code anfangen. Das Ergebnis ist meistens ein Durcheinander aus Ideen, das mehrfach umgebaut werden muss.
Der bessere Weg: Zuerst ein Mockup.
Ein Mockup ist eine visuelle Skizze deiner Seite – ohne Code, ohne Funktionen. Nur das Aussehen. Ich erstelle Mockups direkt in Claude als HTML/CSS-Datei. So siehst du vor der ersten Zeile WordPress-Code, ob die Struktur, die Farben und das Layout wirklich passen.
Prompt für dein Mockup
Kopiere diesen Prompt und passe die Angaben in den eckigen Klammern an:
Erstelle mir ein vollständiges HTML/CSS-Mockup für eine Webseite mit folgenden Eigenschaften:
Branche / Angebot: [z.B. Business Coaching in Osnabrück]
Zielgruppe: [z.B. Selbstständige und Gründer]
Stil: [z.B. minimalistisch, viel Weißraum, moderne Serif-Schrift]
Primärfarbe: [z.B. #1A1A1A]
Akzentfarbe: [z.B. #4A7C59]
Schriften: [z.B. Google Fonts: Playfair Display für Überschriften, Inter für Fließtext]
Seitenstruktur:
- Header mit Logo links und Navigation rechts
- Hero-Bereich mit großem Headline, Unterzeile und einem CTA-Button
- Abschnitt "Für wen ist das" mit 3 kurzen Punkten
- Ablauf-Bereich mit 4 nummerierten Schritten
- Über-mich-Bereich mit Foto-Platzhalter und Text
- Kontakt / Buchungs-CTA
- Footer mit Links
Das Mockup soll:
- Als einzelne HTML-Datei funktionieren (CSS inline oder im <style>-Tag)
- Responsiv sein (Mobile First)
- Echte Platzhaltertexte verwenden (kein "Lorem Ipsum")
- Keine JavaScript-Abhängigkeiten haben
- Sauber kommentiert sein
Das Ergebnis ist eine HTML-Datei, die du im Browser öffnen und direkt beurteilen kannst. Gefällt dir etwas nicht? Sag Claude konkret was – „die Schrift im Hero ist zu groß“, „der CTA-Button wirkt zu schwach“, „ich will die Abschnitte in umgekehrter Reihenfolge“ – und lass es anpassen, bis es stimmt.
Erst wenn das Mockup passt, geht es zum nächsten Schritt.
Schritt 2 – Das WordPress Theme mit VS Code und Claude bauen
Wenn das Mockup steht, wechselst du in VS Code. Die Claude-Erweiterung für VS Code (Claude Code) ermöglicht es, direkt aus dem Editor heraus mit Claude zu arbeiten – Claude liest deinen Projektordner, schreibt Dateien und passt Code an, ohne dass du etwas kopieren oder manuell einfügen musst.
Setup: VS Code mit Claude-Erweiterung
Bevor du anfängst brauchst du:
- VS Code installiert (code.visualstudio.com)
- Claude Code Erweiterung im VS Code Extension Marketplace installieren
- Einen leeren Theme-Ordner anlegen, z. B.
mein-custom-theme/ - Diesen Ordner in VS Code öffnen:
Datei → Ordner öffnen - Das Mockup als
mockup.htmlin den Ordner legen
Dann öffnest du den Claude-Chat in VS Code (Seitenleiste) und gibst ihm den Startprompt. Claude sieht deinen Ordner, liest das Mockup und legt alle Theme-Dateien direkt auf deiner Festplatte an.
Der vollständige Theme-Prompt
Du bist ein erfahrener WordPress-Entwickler. Ich arbeite in VS Code. In diesem Ordner liegt die Datei mockup.html – das ist das fertige HTML/CSS-Mockup meiner Webseite. Erstelle daraus ein vollständiges eigenständiges WordPress Custom Theme direkt in diesem Projektordner. Kein Child Theme, keine Abhängigkeit von einem Parent Theme.
Lege alle Dateien direkt an – fang mit style.css und functions.php an, dann die Template-Dateien. Zeige mir nach jeder Datei kurz was du erstellt hast.
---
Anforderungen an das Theme:
GRUNDSTRUKTUR:
- Vollständig eigenständiges Custom Theme (kein Parent Theme, keine externe Abhängigkeit)
- Alle Dateien sauber strukturiert und kommentiert
- Vollständige style.css mit Theme-Header
- functions.php mit allen Theme-Funktionen (kein Parent-Enqueue nötig)
- Eigene page-templates/ für Seitenvorlagen
DESIGN & CSS:
- Alle Farben als CSS-Custom-Properties (Variablen) definieren, z.B.:
--color-primary: #1A1A1A;
--color-accent: #4A7C59;
--color-bg: #FFFFFF;
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
- Responsives Layout (Mobile First, Breakpoints: 768px, 1024px, 1280px)
- Google Fonts via functions.php einbinden (nicht via @import in CSS)
- Kein !important außer in absoluten Ausnahmefällen
- Sauberes Box-Model (box-sizing: border-box überall)
SEITENVORLAGEN:
- front-page.php: Startseite mit allen Abschnitten aus dem Mockup
- page.php: Standardseite
- single.php: Einzelner Blogbeitrag
- header.php: Navigation mit Logo und Menü
- footer.php: Footer mit Widget-Bereiche und Copyright
- functions.php: Custom Post Types, Menus, Widgets registrieren
SEO-OPTIMIERUNG (technisch):
- Alle Bilder bekommen alt-Attribute (als Platzhalter: the_title())
- Schema.org Markup für LocalBusiness im Header einbauen
- Open Graph Meta Tags in functions.php
- Kanonische URLs via wp_head
- Keine render-blocking Skripte (defer/async)
- Saubere semantische HTML5-Struktur: <header>, <main>, <article>, <section>, <footer>
- H1 nur einmal pro Seite
- title-Tag dynamisch: Seitenname | Website-Name
PERFORMANCE:
- Lazy Loading für Bilder (loading="lazy")
- Minimalistische JavaScript-Nutzung (kein jQuery wenn möglich)
- Kritisches CSS inline, Rest asynchron laden
- SVG für Icons statt Icon-Fonts
WORDPRESS-FEATURES:
- Custom Logo über das WordPress Customizer-System (add_theme_support('custom-logo'))
- Navigationsmenüs registrieren: Hauptmenü + Footer-Menü
- Widget-Bereiche: Footer-Widget-Bereich
- Featured Images aktivieren
- Kommentare deaktivieren (für Service-Seiten nicht nötig)
EDITIERBARKEIT (wichtig!):
- Alle wichtigen Texte auf der Startseite als WordPress Customizer-Felder anlegen, sodass sie ohne Code-Kenntnisse geändert werden können. Mindestens:
- Hero-Headline
- Hero-Unterzeile
- CTA-Button-Text und -Link
- Über-mich-Text
- Kontakt-E-Mail
- Abschnitte als eigene Sektionen im Customizer gruppieren
VORGEHEN:
1. Lege alle Dateien direkt im aktuellen Projektordner an
2. Beginne mit style.css und functions.php
3. Dann alle Template-Dateien (front-page.php, page.php, header.php, footer.php etc.)
4. Zuletzt assets/ mit CSS und JS
5. Bestätige kurz welche Datei du gerade erstellt hast
6. Erstelle am Ende eine README.md mit einer Liste aller Customizer-Felder und ihrer Erklärung
Schreibe sauberen, kommentierten Code. Vermeide Abkürzungen die spätere Änderungen erschweren.
Was Claude direkt auf deiner Festplatte anlegt
Claude legt alle Dateien ohne Copy-Paste direkt in deinem VS Code Projektordner an:
mein-theme/
├── style.css
├── functions.php
├── front-page.php
├── page.php
├── single.php
├── header.php
├── footer.php
├── sidebar.php
├── 404.php
├── assets/
│ ├── css/
│ │ └── main.css
│ └── js/
│ └── main.js
└── page-templates/
└── template-landing.php
Wenn Claude alle Dateien angelegt hat, ist dein Theme-Ordner fertig. Für die Installation auf WordPress gibt es zwei Wege:
Weg 1 – Lokale Entwicklungsumgebung (empfohlen): Du arbeitest direkt in deinem lokalen WordPress-Ordner unter wp-content/themes/mein-custom-theme/. Dann ist das Theme sofort aktiv.
Weg 2 – Upload: Du packst den Ordner als .zip und lädst ihn in WordPress unter Design → Themes → Theme hochladen hoch. Dann aktivierst du das Custom Theme.
Schritt 3 – SEO direkt im Theme einbauen
Viele bauen zuerst die Seite und denken dann über SEO nach. Besser: SEO-Grundlagen direkt im Theme anlegen.
Der obige Prompt enthält bereits technische SEO-Anforderungen. Hier die wichtigsten nochmal erklärt:
Schema.org Markup
Schema.org ist ein Standard, mit dem du Google sagst, was auf deiner Seite steht. Für lokale Dienstleister in Osnabrück besonders wichtig: LocalBusiness-Markup.
Claude fügt auf Anfrage diesen Code in den <head> ein:
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Dein Name",
"url": "https://deineseite.de",
"address": {
"@type": "PostalAddress",
"addressLocality": "Osnabrück",
"addressCountry": "DE"
}
}
Saubere H-Tag-Struktur
Claude weiß, dass jede Seite nur eine H1 haben darf. Stelle sicher, dass dein Theme das umsetzt – nicht das Plugin, sondern das Theme selbst.
Open Graph für Social Media
Wenn du einen Link auf LinkedIn oder Facebook teilst, bestimmt Open Graph, welches Bild und welcher Text angezeigt wird. Claude baut das auf Anfrage direkt in die functions.php.
Schritt 4 – Anpassungen und Feintuning
Das Theme läuft, sieht gut aus – aber irgendetwas stimmt noch nicht. Das ist normal. Hier hilft Claude als geduldiger Sparringspartner.
So gibst du Feedback, das zu guten Ergebnissen führt:
- ✅ Konkret: „Der Hero-Bereich hat zu viel Abstand nach unten. Reduziere padding-bottom von 120px auf 60px.“
- ✅ Mit Screenshot: Wenn etwas visuell falsch ist, beschreibe exakt was du siehst.
- ✅ Die betroffene Datei in VS Code geöffnet haben wenn du Feedback gibst – Claude sieht den aktuellen Stand direkt
- ✅ Immer den Dateinamen nennen: „In der front-page.php, im Abschnitt mit der Klasse .about-section…“
- ❌ Zu vage: „Es sieht irgendwie nicht gut aus.“ ❌ Zu viel auf einmal: Maximal 2–3 Änderungen pro Prompt.
Die Risiken – ehrlich aufgelistet
KI-gestützte WordPress-Entwicklung hat echte Vorteile. Aber es gibt Risiken, die du kennen solltest.
⚠️ Code-Qualität ist nicht garantiert
Claude schreibt meistens sauberen Code – aber nicht immer. Es gibt Fälle, wo Code funktioniert aber schlecht strukturiert ist, veraltete WordPress-Funktionen nutzt oder Sicherheitslücken enthält. Ein Entwickler würde das erkennen. Du als Laie vielleicht nicht.
Was hilft: Den Code-Review-Prompt (siehe unten) nutzen.
⚠️ Fehlende Validierung
Claude kann Code nicht live testen. Was syntaktisch korrekt aussieht, kann im Browser trotzdem kaputt sein. Du musst selbst testen – auf verschiedenen Geräten und Browsern.
⚠️ Updates und Wartung
Ein Custom Theme wird nicht automatisch aktualisiert. Wenn WordPress neue Versionen bringt, kann es zu Inkompatibilitäten kommen. Da es kein Parent Theme gibt, bist du unabhängig von fremden Update-Zyklen – musst aber selbst auf WordPress-Core-Kompatibilität achten.
Was hilft: Regelmäßige Backups (z. B. mit UpdraftPlus) und nach jedem größeren WordPress-Update kurz testen.
⚠️ Kein Undo für schlechte Entscheidungen
Wenn du im Nachhinein feststellst, dass die Grundstruktur falsch ist, musst du viel neu bauen. KI ist kein Architekt – sie baut, was du beschreibst.
Was hilft: Mit einem Mockup anfangen (Schritt 1).
⚠️ Sicherheit
Schlecht geschriebener PHP-Code kann Sicherheitslücken enthalten. Besonders bei Formularen, Datenbankabfragen oder Nutzer-Eingaben ist Vorsicht geboten.
Was hilft: Für Kontaktformulare immer ein geprüftes Plugin nutzen (z. B. Contact Form 7 oder Fluent Forms) statt eigenen PHP-Code.
Bonus-Prompt: Code-Review durch Claude
Bevor du dein Theme live stellst, lass Claude den Code selbst prüfen:
Führe einen Code-Review meines WordPress Custom Themes durch.
Prüfe auf folgende Punkte:
1. SICHERHEIT: SQL-Injections, XSS-Schwachstellen, fehlende Nonces bei Formularen
2. PERFORMANCE: Unnötige Datenbankabfragen, render-blocking Ressourcen, fehlende Caching-Hinweise
3. SEO: Fehlende alt-Attribute, fehlerhafte H-Tag-Hierarchie, fehlende kanonische URLs
4. WORDPRESS-BEST-PRACTICES: Veraltete Funktionen, fehlende Escaping-Funktionen (esc_html, esc_url etc.)
5. RESPONSIVENESS: Fehlende Breakpoints, nicht skalierbare Einheiten (px statt rem/em)
Gib für jeden Punkt eine konkrete Einschätzung (OK / Achtung / Kritisch)
und einen Vorschlag zur Behebung.
Das Ergebnis: walk-to-business.de
Das beste Argument für diese Methode ist ein echtes Beispiel. walk-to-business.de ist meine eigene Seite, die ich mit genau diesem Prozess selbst gebaut habe:
- Zuerst ein HTML-Mockup direkt in Claude erstellt und im Browser geprüft
- Dann VS Code geöffnet, Claude Code Erweiterung gestartet
- Claude hat das vollständige Custom Theme Datei für Datei direkt auf der Festplatte angelegt
- Customizer-Felder für alle wichtigen Texte
- Schema.org und Open Graph direkt im Theme
- Keine Premium-Plugins, kein Page Builder, kein manuelles Copy-Paste
Die Seite lädt schnell, sieht auf dem Handy gut aus und kann vom Kunden selbst aktualisiert werden. Genau das war das Ziel.
Wer sehen möchte wie ein solches Ergebnis aussieht – schau es dir direkt an.
Wann solltest du das selbst machen – und wann nicht?
Selbst machen macht Sinn wenn:
- Du Spaß an technischen Themen hast und experimentierfreudig bist
- Dein Projekt überschaubar ist (Onepager, kleines Business-Site)
- Du Geld sparen möchtest und Zeit investieren kannst
- Du die Seite selbst pflegen und verstehen willst
Lass es machen wenn:
- Du keine Zeit hast, dich einzuarbeiten
- Die Seite verkaufsrelevant ist und von Anfang an performen muss
- Du keinen Spaß an technischen Themen hast
- Du ein größeres Projekt planst (Shop, Mitgliederbereich, mehrstufige Formulare)
Wenn du dir unsicher bist welcher Fall auf dich zutrifft, ist ein kurzes Gespräch oft die schnellste Entscheidungshilfe. Ich biete dafür ein kostenloses Erstgespräch an – ohne Verkaufsdruck, ohne Verpflichtung. → Zum Erstgespräch
Alternativ: Wenn du ein konkretes KI-Projekt angehen möchtest und lieber gemeinsam in einer 1:1-Session arbeitest, findest du das unter KI-Projekte umsetzen lassen.
Häufige Fragen (FAQ)
Brauche ich Programmierkenntnisse für diese Methode?
Grundkenntnisse helfen – aber sie sind kein Muss. Wenn du weißt, was PHP, CSS und HTML grob bedeuten, kannst du Fehler einordnen. Ohne jedes Vorwissen bist du stark auf Claude angewiesen und merkst Probleme im Code möglicherweise nicht. Für Einsteiger empfehle ich, mit einem einfachen Onepager anzufangen.
Ist das Theme mit zukünftigen WordPress-Versionen kompatibel?
Ein eigenständiges Custom Theme hat keine Abhängigkeit zu einem Parent Theme – das ist ein Vorteil. Kritisch wird es, wenn WordPress-Core-Funktionen sich ändern, die dein Theme direkt nutzt. Regelmäßige Backups und Tests nach WordPress-Updates sind Pflicht.
Kann ich das Theme später weiter anpassen?
Ja – und das ist einer der größten Vorteile. Da der Code sauber strukturiert und kommentiert ist, kann Claude spätere Änderungen direkt in VS Code einpflegen. Du öffnest die betroffene Datei, beschreibst im Claude-Chat was geändert werden soll – und Claude schreibt die Änderung direkt hinein.
Was kostet Claude?
Für die VS Code Methode aus diesem Artikel brauchst du Claude Code – die offizielle Erweiterung von Anthropic für VS Code. Sie ist im VS Code Extension Marketplace verfügbar. Für die Nutzung benötigst du einen Anthropic-Account. Es gibt ein kostenloses Kontingent, für längere Theme-Projekte empfehle ich den Pro-Plan (aktuell 20 USD pro Monat) um Limits mitten in der Arbeit zu vermeiden.
Alternativ funktioniert die Methode auch über claude.ai im Browser – dann kopierst du den Code manuell in Dateien. Das ist möglich, aber langsamer.
Funktioniert das auch mit anderen KI-Tools wie ChatGPT?
Prinzipiell ja. Die Prompt-Struktur aus diesem Artikel funktioniert auch mit GPT-4 oder Gemini. Claude hat aus meiner Erfahrung Vorteile bei längeren Code-Projekten, da es größere Kontextfenster hat und konsistenter über mehrere Dateien hinweg arbeitet.
Was wenn der generierte Code einen Fehler hat?
Den Fehler (am besten die genaue Fehlermeldung aus WordPress oder dem Browser) direkt an Claude schicken. „Ich bekomme diesen Fehler: [Fehlermeldung]. Hier ist der betroffene Code: [Code]. Was ist falsch?“ – Claude findet und behebt die meisten Fehler zuverlässig.
Kann ich damit auch einen Webshop bauen?
Für einfache WooCommerce-Shops ist es möglich, aber deutlich komplexer. Der Aufwand steigt stark, sobald Bestellprozesse, Zahlungsanbieter, Lagerbestand und E-Mails ins Spiel kommen. Das ist ein eigenständiges Projekt – nicht mehr ein Thema-Wochenende.
Fazit: KI als Entwicklungspartner – nicht als Ersatz für Nachdenken
Claude baut, was du beschreibst. Das klingt einfacher als es ist. Die Qualität des Ergebnisses hängt direkt von der Qualität deiner Beschreibung ab.
Wer mit einem sauberen Mockup startet, strukturierte Prompts verwendet und bereit ist zu testen und zu iterieren, kann damit eine professionelle WordPress-Seite bauen – schneller und günstiger als auf dem klassischen Weg.
Wer hofft, mit einem vagen Prompt in zehn Minuten eine fertige Webseite zu bekommen, wird enttäuscht sein.
Die Methode ist kein Shortcut. Sie ist ein anderer Weg – mit anderen Anforderungen und anderen Stolperfallen. Wenn du den Weg kennst, kommst du schneller ans Ziel.
Bildempfehlung für diesen Beitrag: Screenshot von VS Code mit geöffnetem Theme-Ordner und Claude-Chat in der Seitenleiste – daneben das fertige Ergebnis walk-to-business.de. Zeigt den Prozess ohne Stockfoto-Charakter.