Claude Design-export: van ontwerp naar WordPress-thema in de html2wp-app
Een ontwerp uit Claude Design zet je in de html2wp-app om naar WordPress, zonder terminal. Voor de Claude Design-export sla je het ontwerp op als HTML. Daarna voeg je het toe aan de app, kies je Flash of Full, en aan het einde download je een WordPress-thema dat eruitziet als je ontwerp.
Wat je nodig hebt: de app en je Claude Design-export
- Een Mac met Apple silicon (M1 of nieuwer) en macOS 12 of nieuwer.
- Een ChatGPT-account. De AI uit je eigen abonnement doet de conversie, dus je betaalt ons niets voor credits.
- Je export uit Claude Design: het ontwerp opgeslagen als HTML-bestand. Heb je meerdere pagina's, sla dan elke pagina op als apart bestand.
HTML uit Claude is de kortste route naar een thema, want de app hoeft het niet eerst te bouwen of in een browser te openen. De gratis versie zet drie sites van elk tot vijf pagina's om. Voor klantwerk heb je een Pro-licentie nodig van de prijspagina.
Installatie, omgeving en inloggen
Download de app voor Mac en zet hem in de map Apps. Klik in de instellingen op Prepare environment, en de app downloadt Docker en de conversieomgeving. Log daarna in met Connect with ChatGPT. De Lovable-handleiding voor de app behandelt elk van deze stappen uitgebreid met screenshots, en voor Claude zijn ze hetzelfde.
De Claude Design-export in de app
Voor de Claude Design-export download je het artifact in Claude als .html-bestand. Maak een map en sla het bestand daarin op als index.html. Linkt het ontwerp naar afbeeldingen die niet in het bestand zitten, zet ze dan in dezelfde map, op de plekken die de code verwacht. Andere pagina's, zoals Over ons of Contact, komen ernaast als about.html en contact.html. De app leidt uit de bestandsnaam af welke pagina wat is.
Klik in de app op New project (⌘N), laat HTML WordPress theme als uitvoer staan en kies Choose a folder. Heb je de map gezipt, gebruik dan Import a ZIP.
Flash of Full voor het WordPress-thema
Flash is de standaard: elke stap draait één keer, en het duurt ongeveer een half uur. Full draait elke controle en probeert fouten op te lossen, dus het duurt ongeveer een uur. Een ontwerp van één pagina zit meestal aan de korte kant, maar de controles draaien toch volledig.
Tijdens de conversie toont het tabblad Overview wat de app doet. Om te pauzeren klik je op Stop conversion, en daarna ga je verder met Continue.
Het ontwerp controleren in de app
Het tabblad Compare toont het origineel en de WordPress-versie naast elkaar, op desktop- en mobiele breedte. Loop elke pagina door, want automatische controles vangen de meeste verschillen op, maar niet alle. Klopt er iets niet, schrijf het dan in de chat. De wijziging gebeurt in het voorbeeld, en daarna verpakt Make release een nieuwe versie van het thema.
Van Claude Design-export naar WordPress: het thema exporteren
Klik in het tabblad Exports naast het WordPress-thema op Save en bewaar de ZIP. In WordPress upload je hem onder Weergave → Thema's → Nieuw thema toevoegen → Thema uploaden. Het thema staat op zichzelf: pagina's, formulieren, menu's en SEO werken zonder plugin.
De editor Visual Edit laat je klant bewerken met een klik. Werk je in de terminal, dan behandelt de handleiding met de plugin voor Claude Code en Codex dezelfde conversie.