html2wp / Blog / Claude Design naar WordPress
Claude Design naar WordPress: zo zet je een ontwerp uit Claude om
Claude Design naar WordPress omzetten is de kortste route van alle gegenereerde ontwerpen. Gaf Claude je het ontwerp als HTML, dan is dat precies de invoer die de converter wil: geen build, geen extra browserstap en geen framework. Je hoeft alleen te controleren of één artifact genoeg is voor je website. De conversie draait nog steeds op je eigen computer, dus ze heeft Docker, Node en Python nodig. De lijst staat hieronder, en hij is kort.
Gepubliceerd op · bijgewerkt op · korter dan de Lovable-route, zonder buildstapWelke uitvoer gaf Claude Design je?
Claude maakt twee soorten uitvoer, en elk neemt een andere route. Controleer welke je hebt voordat je begint, want dat bepaalt hoe lang de conversie duurt.
| Wat Claude je gaf | Wat het is | Route |
|---|---|---|
| HTML-artifact |
Een zelfstandig .html-bestand: de code, stijlen en scripts zitten er allemaal in. |
Dit artikel. Het is al platte HTML, precies de invoer die de converter nodig heeft. |
| React-artifact |
Een component. De pagina verschijnt pas als JavaScript draait, en de HTML eromheen is een leeg element waarin de app wordt geladen. | De Lovable-handleiding: hetzelfde soort invoer, dezelfde extra stap. |
Weet je het niet zeker, open dan het bestand en kijk in de <body>. Zie je daar je koppen en alinea's, dan heb je een HTML-artifact en zit je hier goed. Is de body één lege <div> met een scripttag, dan heb je de andere soort.
Waarom HTML het makkelijkere geval is
Een React-project moet eerst worden gebouwd en in een echte browser geopend voordat er iets om te zetten is. Een HTML-artifact slaat die stap over. De code staat al uitgeschreven in het bestand, en elke volgende stap leest daaruit.
Exporteer uit Claude Design naar een map, met afbeeldingen
De invoer is altijd een map op je schijf. Het adres van een live site is geen ondersteunde invoer, en dat is met opzet. Een kopie van een gepubliceerde pagina bewaart alleen het weergegeven resultaat en verliest wat het bronbestand weet.
Exporteer het ontwerp dus uit Claude (download het artifact), 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 er dan naast, op dezelfde relatieve plekken die de code verwacht.
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images # if the design uses any images
Eén pagina of meer?
Eén artifact is één pagina, en een site van één pagina zet je zonder problemen om. Ze wordt de voorpagina van het thema. Wil je een site met pagina's als Over ons en Contact, vraag Claude die dan ook en sla elk op als eigen .html-bestand in dezelfde map. Bestandsnamen doen ertoe: de analyse leest ze en begrijpt een bestand met de naam blog.html of about.html aan zijn naam.
Blijf je op vijf bestanden of minder, dan past de hele conversie in de gratis versie.
Wat je computer nodig heeft om Claude Design naar WordPress om te zetten
Ook de kortere route draait op je machine, en de vereisten worden niet kleiner. De browser en de tijdelijke WordPress zijn er om het resultaat te controleren, niet om het te maken:
- Node 20 of nieuwer en Python 3 met de pakketten Playwright en Pillow.
- Docker met het commando
docker compose. Het start een tijdelijke WordPress op je computer, en de converter installeert het thema daar voordat jij het ziet. - php-cli, omdat elk PHP-bestand een syntaxcontrole krijgt voordat het in de ZIP gaat.
jq,curl,bashentar. De WordPress waar het thema op komt, moet versie 6.6 of nieuwer zijn.
De eerste stap controleert dit allemaal. Hij scheidt wat hij zelf in je eigen mappen kan installeren van waar jij over moet beslissen. Docker installeert hij niet voor je, tenzij je erom vraagt.
Docker is niet optioneel, en het verrast mensen het meest
Een converter in de browser heeft het niet nodig, omdat die deze stap overslaat. Hier gaat het gegenereerde thema in een echte WordPress, en de converter test het daar voordat jij het ziet. Daarvoor dient de container. Draait Docker niet, dan stopt de conversie bij de allereerste stap en meldt ze dat meteen, niet pas aan het einde.
De conversie van Claude Design naar WordPress draaien
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
Typ daarna, vanaf elke plek:
/html2wp:html2wp
convert ./my-site
Het pad naar de map is de hele instructie. Je schrijft geen configuratiebestand en je kiest geen buildcommando. Typ in Codex convert ./my-site with html2wp. Werk je liever niet in een terminal, dan kun je dezelfde map openen in de html2wp-desktop-app (een handleiding met screenshots).
Flash duurt ongeveer 30 minuten en Full ongeveer een uur, afhankelijk van het aantal pagina's en de snelheid van je computer. Een artifact van één pagina zit aan de korte kant, maar de controles draaien altijd volledig, hoe klein de invoer ook is.
Wat de converter voor je beslist, en wat hij vraagt
Voordat hij iets genereert, meet hij je bestanden. Hij somt de pagina's op en bepaalt welke delen van de code gedeeld zijn en welke uniek. Hij vindt ook de design tokens, alles wat op een blog lijkt en welke pagina's op zichzelf staan. Daarna schrijft hij op wat hij van plan is en zet hij om volgens dat plan.
Een gegenereerd ontwerp loopt vaak tegen twee dingen aan:
- Elke variant van het ontwerp blijft bewaard. Delen je pagina's niet dezelfde header, dan kiest hij geen winnaar om de rest plat te slaan. Hij maakt een sjabloondeel voor elke variant en koppelt elke pagina aan de variant die ze echt gebruikte. Artifacts uit verschillende Claude-chats verschillen vaak meer dan je je herinnert.
- Accolades in je tekst blijven bestaan. De tussenstap gebruikt een formaat dat op JSX lijkt. Anders zou een voorbeeld van JSON of CSS in je tekst de build breken of op de pagina verschijnen als
{. De converter vangt ze op, dus de accolades blijven accolades op de pagina.
Herhalende groepen, zoals kaarten, testimonials of een FAQ, worden opgeslagen als collecties in plaats van vastgezette opmaakcode. Daardoor kun je ze later echt bewerken en lijken ze niet alleen bewerkbaar.
De controle die je niet kunt overslaan
De converter zet elke pagina in één afbeelding naast het origineel, en jij leest ze allemaal van boven tot onder.
Bij één conversie ontbrak een sectie lager op de pagina, en de pixelvergelijking gaf maar 0,4% verschil, dus ze kwam door de controle. Numerieke controles kunnen van nature drie soorten fouten niet zien. De eerste is een bedieningselement dat perfect lijkt maar niets doet. Een tweede is een waarde die is vastgezet vanuit de ene pagina waar een sjabloon vandaan kwam. Ten derde is er alles wat pas na scrollen, klikken of het versturen van een formulier zichtbaar wordt.
Controleer ook of je de inhoud kunt bewerken. Een pagina kan tot op de pixel kloppen terwijl niemand de FAQ of het raster met functies vanuit wp-admin kan bewerken. Het is gebeurd, en deze controle ving het op, geen enkele automatische.
Bewerken na de omzetting van Claude Design naar WordPress: thema, Visual Edit of page builder
Er komen twee bestanden in je map: de ZIP met het thema en daarnaast CONVERSION-REPORT.md. Het rapport noemt wat de conversie omvatte, wat de controle vond en wat er nog openstaat. Je installeert het thema zoals elk WordPress-thema (Weergave → Thema's → Nieuw thema toevoegen → Thema uploaden).
Het thema staat op zichzelf. Pagina's, blog, formulieren, menu's, SEO en redirects zijn allemaal eigen code. Het heeft geen plugin nodig om te draaien en maakt nooit contact met onze server. Blogberichten schrijf je in de blokeditor, de tekst van de pagina's blijft in de HTML. Om pagina's zonder code te bewerken, zijn er twee opties: Visual Edit en een page builder.
| Route | Wat je krijgt | Wat het je kost |
|---|---|---|
| Alleen het thema | Je code, onveranderd, zonder iets erbovenop. Niets te verlengen, niets dat breekt bij de update van iemand anders. | Zonder plugin verander je de tekst van pagina's in de HTML. Wil de klant die zelf bewerken, dan doet Visual Edit dat (Lite is gratis). |
| Visual Edit, onze plugin | Klik op de pagina op een kop, typ eroverheen en sla op. Je bewerkt tekst, afbeeldingen, links, formulieren en menu's waar ze staan, en de code blijft zoals ze was. Lite is gratis en heeft geen licentiesleutel nodig. | Eén plugin extra. Lite bewaart 10 stappen geschiedenis en heeft geen AI-chat. Pro voegt beide toe en kost € 59 per jaar. |
| Elementor of een andere page builder |
Een vertrouwde werkomgeving voor wie het al gebruikt, en een klant die een pagina zonder jou kan ombouwen. | De code wordt nagebouwd als widgets van de builder. Het is niet meer het ontwerp dat Claude maakte. Daarna kan de site niet meer zonder Elementor worden weergegeven, en je erft de structuur, de CSS en de updates ervan. |
Een page builder is een goede keuze als het ontwerp alleen een vertrekpunt is. Hij is een slechte keuze als het ontwerp is wat je oplevert. Zet je om zodat het gegenereerde ontwerp in WordPress overeind blijft, dan maakt nabouwen als widgets de reden waarom je begon ongedaan. Gaat iemand anders de lay-out volgend kwartaal toch overdoen, dan is zijn ervaring met Elementor misschien meer waard dan een getrouw ontwerp.
Lite of Pro, als je voor Visual Edit kiest
| Lite (gratis) | Pro | |
|---|---|---|
| Inhoud bewerken met een klik | ✓ | ✓ |
| Formulieren, menu's, SEO-velden | ✓ | ✓ |
| Bewerken via AI-chat | – | ✓, met je eigen API-sleutel |
| Thema-export | – | ✓ |
| Formulierbeveiliging met Turnstile | – | ✓ |
| Afbeeldingen bewerken met AI en animaties uit afbeeldingen | – | ✓ |
| Bewerkgeschiedenis | 10 stappen | 300 stappen |
De AI-chat draait op je eigen API-sleutel. We verkopen je geen tokens, en wat ze kosten, reken je af met je provider.
Wat Claude Design naar WordPress kost, en wat de conversie weigert
Gratis voor iedereen, zonder sleutel en zonder registratie: drie conversies van elk vijf pagina's en in totaal vijf herhaalde runs. Beide aantallen tellen per IP-adres, dus een kantoor met één adres krijgt één tegoed. De gratis versie is om de tool te proberen, voor persoonlijke sites en voor niet-commercieel werk.
Een Pro-licentie haalt de paginalimiet weg en maakt conversies en herhaalde runs onbeperkt. Ze ontgrendelt ook de stap die een shop omzet naar WooCommerce. Die stap is nooit gratis: de app weigert een gratis conversie van een site met een shop volledig, in plaats van de helft te doen. Je koopt Pro per maand of per jaar op de prijspagina, en tijdens de bèta krijg je 30% korting op de eerste betaling.
Eén kanttekening: dit is een bèta. De controles vangen de meeste verschillen op, niet allemaal. Daarom hoort het lezen van elke pagina naast het origineel bij het proces en is het geen optionele afwerking. Daarom zet je ook het best eerst gratis iets van jezelf om, en vertrouw je het pas daarna.
Een handleiding stap voor stap voor het hele proces staat in de documentatie van de html2wp-app. Is je artifact React, dan beschrijft de handleiding voor Lovable naar WordPress die route.