Claude-Design-Export als WordPress-Theme in der html2wp-App
Ein Design aus Claude Design wird in der html2wp-App zu WordPress, ohne Terminal. Für den Claude-Design-Export speicherst du das Design als HTML. Dann fügst du es der App hinzu, wählst Flash oder Full und lädst am Ende ein WordPress-Theme herunter, das aussieht wie dein Design.
Was du für den Claude-Design-Export in der App brauchst
- Einen Mac mit Apple Silicon (M1 oder neuer) und macOS 12 oder neuer.
- Ein ChatGPT-Konto. Die Konvertierung macht die KI aus deinem eigenen Abo, du zahlst uns also nichts für Credits.
- Deine Exportdatei aus Claude Design: das Design, als HTML-Datei gespeichert. Hast du mehrere Seiten, speichere jede als eigene Datei.
HTML aus Claude ist der kürzeste Weg zu einem Theme, weil die App es nicht erst bauen oder in einem Browser öffnen muss. Die Gratis-Version konvertiert drei Websites mit je bis zu fünf Seiten. Für Arbeit für Kunden brauchst du eine Pro-Lizenz von der Preisseite.
Installation, Umgebung und Anmeldung
Lade die App für Mac herunter und verschiebe sie in den Ordner Programme. Klicke in den Einstellungen auf Prepare environment (Umgebung vorbereiten), dann lädt die App Docker und die Konvertierungsumgebung herunter. Melde dich danach mit Connect with ChatGPT an. Die Lovable-Anleitung für die App zeigt jeden dieser Schritte ausführlich mit Screenshots, und für Claude sind sie dieselben.
Den Claude-Design-Export in die App bringen
Dazu lädst du das Artifact in Claude als .html-Datei 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 in denselben Ordner, an die Stellen, die der Code erwartet. Weitere Seiten wie Über uns oder Kontakt kommen daneben, als about.html und contact.html. Welche Seite welche ist, erkennt die App am Dateinamen.
Klicke in der App auf New project (⌘N), lass „HTML WordPress theme“ als Ausgabe stehen und wähle „Choose a folder“. Hast du den Ordner gezippt, nimm stattdessen „Import a ZIP“.
Flash oder Full für das WordPress-Theme
Flash ist voreingestellt: Jeder Schritt läuft einmal, und es dauert etwa eine halbe Stunde. Full führt jede Prüfung aus und versucht, Fehler zu beheben, deshalb dauert es etwa eine Stunde. Ein Design mit einer Seite liegt meist am kürzeren Ende, aber die Prüfungen laufen trotzdem vollständig.
Während der Konvertierung zeigt der Tab „Overview“ (Übersicht), was die App gerade macht. Zum Pausieren klickst du auf Stop conversion und machst später mit „Continue“ weiter.
Das Design in der App prüfen
Der Tab Compare (Vergleich) zeigt Original und WordPress-Version nebeneinander, in Desktop- und Mobil-Breite. Sieh dir jede Seite an, denn automatische Prüfungen finden die meisten Abweichungen, aber nicht alle. Passt etwas nicht, schreib es in den Chat. Die Änderung passiert in der Vorschau, und dann packt „Make release“ eine neue Version des Themes.
Das Theme aus dem Claude-Design-Export speichern
Klicke im Tab Exports neben dem WordPress-Theme auf „Save“ und speichere die ZIP. In WordPress lädst du sie unter Design → Themes → Theme hinzufügen → Theme hochladen hoch. Das Theme steht für sich: Seiten, Formulare, Menüs und SEO funktionieren ohne Plugin.
Der Editor Visual Edit ergänzt für deinen Kunden das Bearbeiten per Klick. Arbeitest du im Terminal, beschreibt die Anleitung mit dem Plugin für Claude Code und Codex dieselbe Konvertierung.