Från Claude Design till WordPress: artefakt till tema

FörstVad du faktiskt har

Vad gav Claude Design dig?

Claude skapar två sorters resultat, och de tar olika vägar. Kontrollera vilket du har innan du börjar, eftersom det avgör hur lång tid konverteringen tar.

Vad Claude gav dig	Vad det är	Väg
HTML-artefakt	En fristående `.html`-fil: koden, stilarna och skripten finns alla i den.	Den här artikeln. Det är redan platt HTML, precis det underlag som konverteraren behöver.
React-artefakt	En komponent. Sidan dyker upp först när JavaScript körs, och HTML-koden runt den är ett tomt element som appen monteras i.	Genomgången för Lovable: samma sorts underlag, samma extra steg.

Om du är osäker, öppna filen och titta inuti <body>. Ser du dina rubriker och stycken där har du en HTML-artefakt, och då är du på rätt ställe. Om body består av en tom <div> och en script-tagg har du den andra sorten.

Därför är HTML det enklare fallet

Ett React-projekt måste först byggas och sedan öppnas i en riktig webbläsare innan det finns något att konvertera. En HTML-artefakt hoppar över det steget. Koden står redan utskriven i filen, och varje senare steg läser från den.

Exportera från Claude Design till en mapp, med bilderna

Indata är alltid en mapp på din disk. Adressen till en publicerad sajt är inte ett indata som stöds, och det är avsiktligt. En kopia av en publicerad sida behåller bara det renderade resultatet och förlorar det som källfilen vet.

Exportera därför designen från Claude (ladda ner artefakten), skapa en mapp och spara filen i den som index.html. Om designen länkar till bilder som inte finns i filen lägger du dem bredvid, på samma relativa platser som koden förväntar sig.

terminal

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

En sida eller flera?

En artefakt är en sida, och en sajt på en sida konverteras utan problem. Den blir temats startsida. Vill du ha en sajt med sidorna Om oss och Kontakt ber du Claude om dem också och sparar var och en som en egen .html-fil i samma mapp. Filnamnen spelar roll: analysen läser dem och förstår en fil som heter blog.html eller about.html utifrån namnet.

Om du håller dig till fem filer eller färre ryms hela konverteringen i gratisnivån.

Vad din dator behöver för att konvertera Claude Design till WordPress

Även den kortare vägen körs på din dator, och kraven blir inte mindre. Webbläsaren och det tillfälliga WordPress finns där för att kontrollera resultatet, inte för att ta fram det:

Node 20 eller nyare och Python 3 med paketen Playwright och Pillow.
Docker med kommandot docker compose. Det startar ett tillfälligt WordPress på din dator, och konverteraren installerar temat där innan du ser det.
php-cli, eftersom varje PHP-fil går igenom en syntaxkontroll innan den hamnar i ZIP-filen.
jq, curl, bash och tar. WordPress som temat ska till måste vara version 6.6 eller nyare.

Det första steget kontrollerar allt detta. Det skiljer på det som det kan installera själv i dina egna mappar och det som du måste bestämma. Docker installerar det inte åt dig om du inte ber om det.

Docker är inte valfritt, och det är det som överraskar flest

En konverterare i webbläsaren behöver det inte, eftersom den hoppar över det här steget. Här hamnar det genererade temat i ett riktigt WordPress, och konverteraren testar det där innan du ser det. Det är vad containern är till för. Om Docker inte körs stannar konverteringen redan i första steget och säger det direkt, inte i slutet.

KonverteringenFrån artefakt till tema

Kör konverteringen från Claude Design till WordPress

Claude Code

claude

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

terminal, en gång

python3 -m playwright install chromium

Codex

terminal

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Skriv sedan, var som helst:

claude

/html2wp:html2wp

convert ./my-site

Sökvägen till mappen är hela instruktionen. Du skriver ingen konfigurationsfil och väljer inget byggkommando. I Codex skriver du convert ./my-site with html2wp. Om du hellre inte arbetar i en terminal kan du öppna samma mapp i skrivbordsappen html2wp (en guide med skärmbilder).

Flash tar ungefär 30 minuter och Full ungefär en timme, beroende på antalet sidor och hur snabb din dator är. En artefakt på en sida hamnar i den kortare änden, men kontrollerna körs alltid fullt ut, hur litet underlaget än är.

Vad den bestämmer åt dig, och vad den frågar

Innan den genererar något mäter den dina filer. Den listar sidorna och räknar ut vilka delar av koden som är gemensamma och vilka som är unika. Den hittar också designtokens, allt som ser ut som en blogg och vilka sidor som står för sig själva. Sedan skriver den ner vad den planerar att göra och konverterar enligt den planen.

En genererad design stöter ofta på två saker:

Varje designvariant behålls. Om dina sidor inte delar samma header väljer den inte en vinnare och plattar till resten. I stället skapar den en malldel för varje variant och kopplar varje sida till den variant som sidan faktiskt använde. Artefakter från olika chattar med Claude skiljer sig ofta mer än du minns.
Klammerparenteser i din text överlever. Mellansteget använder ett JSX-liknande format. Annars skulle ett JSON- eller CSS-exempel i din text förstöra bygget eller visas på sidan som {. Konverteraren hanterar dem, så klamrarna förblir klamrar på sidan.

Upprepade grupper, till exempel kort, omdömen eller en FAQ, sparas som samlingar i stället för hårdkodad markup. Därför kan du verkligen redigera dem senare, och de ser inte bara redigerbara ut.

Granskningen du inte kan hoppa över

Konverteraren lägger varje sida i en bild bredvid sitt original, och du läser var och en uppifrån och ner.

I en konvertering saknades en sektion längre ner på sidan, och pixeljämförelsen visade en skillnad på bara 0,4 %, så sidan klarade kontrollen. Numeriska kontroller kan till sin natur inte se tre sorters fel. Det första är en kontroll som ser perfekt ut men inte gör något. Ett annat fel är ett värde som är hårdkodat från den enda sida som en mall kom från. Det tredje är allt som visar sig först när du scrollar, klickar eller skickar ett formulär.

Kontrollera också om du kan redigera innehållet. En sida kan matcha på pixeln, och ändå kan ingen redigera dess FAQ eller rutnät med funktioner från wp-admin. Det har hänt, och det var den här granskningen som fångade det, inte någon automatisk kontroll.

EfteråtAtt leva med temat

Redigera efter konverteringen från Claude Design till WordPress: tema, Visual Edit eller sidbyggare

Två filer hamnar i din mapp: tema-ZIP:en och bredvid den CONVERSION-REPORT.md. Rapporten listar vad konverteringen omfattade, vad granskningen hittade och vad som fortfarande är öppet. Du installerar temat som vilket WordPress-tema som helst (Utseende → Teman → Lägg till nytt → Ladda upp tema).

Temat klarar sig på egen hand. Sidor, blogg, formulär, menyer, SEO och omdirigeringar är dess egen kod. Det behöver inget plugin för att köras och pratar aldrig med vår server. Blogginlägg skriver du i blockredigeraren, medan texten på sidorna ligger kvar i HTML. Vill du redigera sidor utan kod finns två alternativ: Visual Edit och en sidbyggare.

Väg	Vad du får	Vad det kostar dig
Bara temat	Din kod, oförändrad, utan något installerat ovanpå. Inget att förnya, inget som går sönder vid någon annans uppdatering.	Utan plugin ändrar du texten på sidorna i HTML. Vill kunden redigera den själv sköter Visual Edit det (Lite är gratis).
Visual Edit, vårt plugin	Klicka på en rubrik på sidan, skriv över den och spara. Du redigerar text, bilder, länkar, formulär och menyer där de är, och koden förblir som den var. Lite är gratis och kräver ingen licensnyckel.	Ännu ett installerat plugin. Lite sparar 10 steg i historiken och har ingen AI-chatt. Pro lägger till båda och kostar 59 € om året.
Elementor eller en annan sidbyggare	En välbekant arbetsyta för den som redan använder den, och en kund som kan bygga om en sida utan dig.	Koden byggs om som widgetar i byggaren. Det är inte längre designen som Claude gjorde. Sedan kan sajten inte visas utan Elementor, och du ärver dess struktur, CSS och uppdateringar.

En sidbyggare är ett bra val när designen bara är en utgångspunkt. Den är ett dåligt val när designen är det du levererar. Om du konverterar för att den genererade designen ska överleva i WordPress tar en ombyggnad till widgetar bort skälet till att du började. Men om någon annan ska göra om layouten nästa kvartal kan deras vana vid Elementor vara värd mer än en trogen design.

Lite eller Pro, om du väljer Visual Edit

	Lite (gratis)	Pro
Redigering av innehåll med klick	✓	✓
Formulär, menyer, SEO-fält	✓	✓
Redigering via AI-chatt	–	✓, med din egen API-nyckel
Temaexport	–	✓
Formulärskydd med Turnstile	–	✓
AI-bildredigering och animationer från bilder	–	✓
Redigeringshistorik	10 steg	300 steg

AI-chatten körs på din egen API-nyckel. Vi säljer inga tokens till dig, och vad de kostar gör du upp med din leverantör.

Pris, och vad konverteringen nekar

Gratis för alla, utan nyckel och utan registrering: tre konverteringar med fem sidor vardera och fem omkörningar totalt. Båda siffrorna räknas per IP-adress, så ett kontor med en adress får en gemensam kvot. Gratisnivån är till för att testa verktyget, för privata sajter och för icke-kommersiellt arbete.

En Pro-licens tar bort sidgränsen och gör konverteringar och omkörningar obegränsade. Den låser också upp steget som gör om en butik till WooCommerce. Det steget är aldrig gratis: appen nekar en gratis konvertering av en sajt med butik helt och hållet, i stället för att göra hälften av den. Du kan köpa Pro månadsvis eller årsvis på prissidan, och under betan är första betalningen 30 % billigare.

En reservation: det här är en beta. Kontrollerna fångar de flesta skillnader, inte alla. Därför är det en del av processen att läsa varje sida bredvid sitt original, inte en valfri finputsning. Det är också därför du först bör konvertera något eget gratis, och först sedan lita på det.

En steg-för-steg-guide till hela processen finns i dokumentationen för html2wp-appen. Om din artefakt är React beskriver guiden om Lovable till WordPress den vägen.