html2wp / Blog / Von Claude Design nach WordPress
Von Claude Design nach WordPress: ein Design aus Claude umwandeln
Von Claude Design nach WordPress führt der kürzeste Weg aller generierten Designs. Hat dir Claude das Design als HTML gegeben, ist es genau der Input, den der Konverter will: kein Build, kein zusätzlicher Schritt im Browser und kein Framework. Prüfen musst du nur, ob ein Artifact für deine Website reicht. Die Konvertierung läuft trotzdem auf deinem eigenen Computer, sie braucht also Docker, Node und Python. Die Liste steht weiter unten, und sie ist kurz.
Veröffentlicht am · aktualisiert am · kürzer als der Weg über Lovable, ohne Build-SchrittWelche Ausgabe hat dir Claude Design gegeben?
Claude erzeugt zwei Arten von Ausgabe, und jede nimmt einen anderen Weg. Prüfe vor dem Start, welche du hast, denn davon hängt ab, wie lange die Konvertierung dauert.
| Was dir Claude gegeben hat | Was es ist | Weg |
|---|---|---|
| HTML-Artifact |
Eine eigenständige .html-Datei: Code, Styles und Skripte stecken alle darin. |
Dieser Artikel. Es ist schon flaches HTML, genau der Input, den der Konverter braucht. |
| React-Artifact |
Eine Komponente. Die Seite erscheint erst, wenn JavaScript läuft, und das HTML darum ist ein leeres Element, in das sich die App einhängt. | Die Anleitung für Lovable: dieselbe Art von Input, derselbe zusätzliche Schritt. |
Bist du nicht sicher, öffne die Datei und schau in den <body>. Siehst du dort deine Überschriften und Absätze, hast du ein HTML-Artifact und bist hier richtig. Besteht der Body aus einem leeren <div> und einem Script-Tag, hast du die andere Art.
Warum HTML der einfachere Fall ist
Ein React-Projekt muss zuerst gebaut und dann in einem echten Browser geöffnet werden, bevor es etwas zu konvertieren gibt. Ein HTML-Artifact überspringt diesen Schritt. Der Code steht schon ausgeschrieben in der Datei, und jeder spätere Schritt liest daraus.
Aus Claude Design in einen Ordner exportieren, mit Bildern
Der Input ist immer ein Ordner auf deiner Festplatte. Die Adresse einer Live-Website ist kein unterstützter Input, und das ist Absicht. Eine Kopie einer veröffentlichten Seite behält nur das gerenderte Ergebnis und verliert, was die Quelldatei weiß.
Exportiere das Design also aus Claude (lade das Artifact herunter), lege einen Ordner an und speichere die Datei darin als index.html. Verlinkt das Design Bilder, die nicht in der Datei stecken, leg sie daneben, an dieselben relativen Orte, die der Code erwartet.
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images # if the design uses any images
Eine Seite oder mehrere?
Ein Artifact ist eine Seite, und eine Website mit einer Seite lässt sich problemlos konvertieren. Sie wird zur Startseite des Themes. Willst du eine Website mit den Seiten Über uns und Kontakt, bitte Claude auch um diese und speichere jede als eigene .html-Datei im selben Ordner. Die Dateinamen zählen: Die Analyse liest sie und versteht eine Datei namens blog.html oder about.html an ihrem Namen.
Bleibst du bei fünf Dateien oder weniger, passt die ganze Konvertierung in die Gratis-Version.
Was dein Computer braucht, um Claude Design in WordPress umzuwandeln
Auch der kürzere Weg läuft auf deinem Rechner, und die Voraussetzungen werden nicht weniger. Der Browser und das temporäre WordPress sind da, um das Ergebnis zu prüfen, nicht um es zu erzeugen:
- Node 20 oder neuer und Python 3 mit den Paketen Playwright und Pillow.
- Docker mit dem Befehl
docker compose. Er startet ein temporäres WordPress auf deinem Computer, und der Konverter installiert das Theme dort, bevor du es siehst. - php-cli, weil jede PHP-Datei eine Syntaxprüfung durchläuft, bevor sie in die ZIP kommt.
jq,curl,bashundtar. Das Ziel-WordPress muss Version 6.6 oder neuer sein.
Der erste Schritt prüft all das. Er trennt, was er selbst in deinen eigenen Ordnern installieren kann, von dem, worüber du entscheiden musst. Docker installiert er dir nicht, es sei denn, du bittest darum.
Docker ist nicht optional und überrascht die meisten
Ein Konverter im Browser braucht es nicht, weil er diesen Schritt auslässt. Hier kommt das erzeugte Theme in ein echtes WordPress, und der Konverter testet es dort, bevor du es siehst. Dafür ist der Container da. Läuft Docker nicht, hält die Konvertierung gleich beim ersten Schritt an und sagt es dir sofort, nicht erst am Ende.
Die Konvertierung von Claude Design nach WordPress starten
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Dann tippe, egal wo:
/html2wp:html2wp
convert ./my-site
Der Pfad zum Ordner ist die ganze Anweisung. Du schreibst keine Konfigurationsdatei und wählst keinen Build-Befehl. In Codex tippst du convert ./my-site with html2wp. Arbeitest du lieber nicht im Terminal, kannst du denselben Ordner in der Desktop-App von html2wp öffnen (eine Anleitung mit Screenshots).
Flash dauert etwa 30 Minuten und Full etwa eine Stunde, je nach Anzahl der Seiten und Tempo deines Computers. Ein Artifact mit einer Seite liegt am kürzeren Ende, aber die Prüfungen laufen immer vollständig, egal wie klein der Input ist.
Was es für dich entscheidet und was es fragt
Bevor es etwas erzeugt, vermisst es deine Dateien. Es listet die Seiten auf und ermittelt, welche Teile des Codes geteilt und welche einzigartig sind. Es findet auch die Design-Tokens, alles, was nach einem Blog aussieht, und welche Seiten für sich stehen. Dann schreibt es auf, was es vorhat, und konvertiert nach diesem Plan.
Bei einem generierten Design kommen oft zwei Dinge vor:
- Jede Variante des Designs bleibt erhalten. Haben deine Seiten nicht denselben Header, wählt es keinen Sieger aus und plättet den Rest. Stattdessen legt es für jede Variante einen Template-Teil an und verbindet jede Seite mit dem, den sie wirklich genutzt hat. Artifacts aus verschiedenen Chats mit Claude unterscheiden sich oft stärker, als du dich erinnerst.
- Geschweifte Klammern in deinem Text bleiben erhalten. Der Zwischenschritt nutzt ein JSX-ähnliches Format. Sonst würde ein JSON- oder CSS-Beispiel in deinem Text den Build kaputt machen oder als
{auf der Seite erscheinen. Der Konverter behandelt sie, also bleiben die Klammern auf der Seite Klammern.
Wiederkehrende Gruppen, zum Beispiel Karten, Kundenstimmen oder eine FAQ, werden als Sammlungen gespeichert statt als fest verdrahtetes Markup. Deshalb kannst du sie später wirklich bearbeiten, und sie sehen nicht nur bearbeitbar aus.
Die Durchsicht, die du nicht auslassen darfst
Der Konverter setzt jede Seite in einem Bild neben ihr Original, und du liest jedes davon von oben bis unten.
In einer Konvertierung fehlte ein Abschnitt weiter unten auf der Seite, und der Pixelvergleich zeigte nur 0,4 % Abweichung. Die Seite bestand also die Prüfung. Drei Arten von Fehlern können numerische Prüfungen ihrer Natur nach nicht sehen. Die erste ist ein Bedienelement, das perfekt aussieht, aber nichts tut. Die zweite ist ein Wert, der von der einen Seite fest übernommen wurde, aus der ein Template entstand. Die dritte ist alles, was erst nach Scrollen, Klicken oder dem Absenden eines Formulars sichtbar wird.
Prüfe außerdem, ob du die Inhalte bearbeiten kannst. Eine Seite kann auf den Pixel stimmen, und trotzdem kann niemand ihre FAQ oder ihr Raster mit Funktionen aus wp-admin bearbeiten. Das ist passiert, und diese Durchsicht hat es gefunden, keine automatische Prüfung.
Nach dem Wechsel von Claude Design nach WordPress bearbeiten: Theme, Visual Edit oder Page Builder
In deinem Ordner landen zwei Dateien: die Theme-ZIP und daneben CONVERSION-REPORT.md. Der Bericht listet, was die Konvertierung abgedeckt hat, was die Durchsicht gefunden hat und was noch offen ist. Du installierst das Theme wie jedes WordPress-Theme (Design → Themes → Theme hinzufügen → Theme hochladen).
Das Theme steht für sich. Seiten, Blog, Formulare, Menüs, SEO und Weiterleitungen sind alle sein eigener Code. Es braucht kein Plugin zum Laufen und spricht nie mit unserem Server. Blogbeiträge schreibst du im Block-Editor, der Text der Seiten bleibt im HTML. Um Seiten ohne Code zu bearbeiten, gibt es zwei Optionen: Visual Edit und einen Page Builder.
| Weg | Was du bekommst | Was es dich kostet |
|---|---|---|
| Nur das Theme | Dein Code, unverändert, ohne etwas darüber installiert. Nichts zu verlängern, nichts, was beim Update eines anderen kaputtgeht. | Ohne Plugin änderst du den Text der Seiten im HTML. Will der Kunde ihn selbst bearbeiten, erledigt das Visual Edit (Lite ist kostenlos). |
| Visual Edit, unser Plugin | Klicke auf der Seite auf eine Überschrift, tippe darüber und speichere. Texte, Bilder, Links, Formulare und Menüs bearbeitest du dort, wo sie sind, und der Code bleibt, wie er war. Lite ist kostenlos und braucht keinen Lizenzschlüssel. | Ein weiteres installiertes Plugin. Lite speichert 10 Schritte Verlauf und hat keinen KI-Chat. Pro ergänzt beides und kostet 59 € im Jahr. |
| Elementor oder ein anderer Page Builder |
Eine vertraute Arbeitsumgebung für alle, die es schon nutzen, und ein Kunde, der eine Seite ohne dich umbauen kann. | Der Code wird als Builder-Widgets nachgebaut. Er ist nicht mehr das Design, das Claude gemacht hat. Dann kann die Website ohne Elementor nicht angezeigt werden, und du erbst seine Struktur, sein CSS und seine Updates. |
Ein Page Builder ist eine gute Wahl, wenn das Design nur ein Ausgangspunkt ist. Er ist eine schlechte, wenn das Design das ist, was du lieferst. Konvertierst du, damit das generierte Design in WordPress überlebt, hebt der Nachbau als Widgets den Grund auf, aus dem du angefangen hast. Baut aber jemand anderes das Layout nächstes Quartal ohnehin neu, ist seine Erfahrung mit Elementor vielleicht mehr wert als ein originalgetreues Design.
Lite oder Pro, wenn du Visual Edit nimmst
| Lite (kostenlos) | Pro | |
|---|---|---|
| Inhalte per Klick bearbeiten | ✓ | ✓ |
| Formulare, Menüs, SEO-Felder | ✓ | ✓ |
| Bearbeiten per KI-Chat | – | ✓, mit deinem eigenen API-Schlüssel |
| Theme-Export | – | ✓ |
| Formularschutz mit Turnstile | – | ✓ |
| Bildbearbeitung mit KI und Animationen aus Bildern | – | ✓ |
| Bearbeitungsverlauf | 10 Schritte | 300 Schritte |
Der KI-Chat läuft mit deinem eigenen API-Schlüssel. Wir verkaufen dir keine Tokens, und was sie kosten, rechnest du mit deinem Anbieter ab.
Von Claude Design nach WordPress: Preis und was abgelehnt wird
Kostenlos für alle, ohne Schlüssel und ohne Registrierung: drei Konvertierungen mit je fünf Seiten und insgesamt fünf erneute Läufe. Beide Zahlen gelten pro IP-Adresse, ein Büro mit einer Adresse bekommt also ein Kontingent. Die Gratis-Version ist zum Ausprobieren, für private Websites und für nicht kommerzielle Arbeit.
Eine Pro-Lizenz hebt das Seitenlimit auf und macht Konvertierungen und erneute Läufe unbegrenzt. Sie schaltet auch den Schritt frei, der einen Shop zu WooCommerce macht. Dieser Schritt ist nie kostenlos: Die App lehnt eine kostenlose Konvertierung einer Website mit Shop komplett ab, statt sie zur Hälfte auszuführen. Pro kaufst du monatlich oder jährlich auf der Preisseite, und während der Beta gibt es 30 % Rabatt auf die erste Zahlung.
Ein Vorbehalt: Das ist eine Beta. Die Prüfungen finden die meisten Abweichungen, nicht alle. Deshalb gehört es zum Ablauf, jede Seite neben ihrem Original zu lesen, und ist kein optionaler Feinschliff. Deshalb solltest du auch zuerst etwas Eigenes kostenlos konvertieren und dem Ergebnis erst dann vertrauen.
Eine Schritt-für-Schritt-Anleitung für den ganzen Ablauf steht in der Dokumentation zur html2wp-App. Ist dein Artifact React, beschreibt die Anleitung Lovable in WordPress diesen Weg.