Fra Claude Design til WordPress: sådan konverterer du dit design

Hvilket resultat gav Claude Design dig?

Claude laver to slags resultater, og hver tager sin egen vej. Tjek, hvilken du har, før du starter, for det afgør, hvor lang tid konverteringen tager.

Hvad Claude gav dig	Hvad det er	Vej
HTML-artefakt	En selvstændig .html-fil: koden, styles og scripts ligger alle inde i den.	Denne artikel. Det er allerede flad HTML, præcis det input, konverteren har brug for.
React-artefakt	En komponent. Siden opstår først, når JavaScript kører, og HTML'en omkring den er et tomt element, som appen monteres i.	Gennemgangen for Lovable: samme slags input, samme ekstra trin.

Er du i tvivl, så åbn filen og kig ind i <body>. Ser du dine overskrifter og afsnit der, har du et HTML-artefakt og er det rigtige sted. Er body et enkelt tomt <div> og et script-tag, har du den anden slags.

Eksportér fra Claude Design til en mappe, med billeder

Input er altid en mappe på din disk. Adressen på et live site er ikke et understøttet input, og det er med vilje. En kopi af en udgivet side beholder kun det renderede resultat og mister det, kildefilen ved.

Eksportér derfor designet fra Claude (download artefaktet), opret en mappe, og gem filen i den som index.html. Linker designet til billeder, der ikke ligger i filen, så læg dem ved siden af, på de samme relative pladser, som koden forventer.

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

Én side eller flere?

Ét artefakt er én side, og et site på én side konverteres uden problemer. Det bliver temaets forside. Vil du have et site med sider som Om os og Kontakt, så bed Claude om dem også, og gem hver som sin egen .html-fil i samme mappe. Filnavnene betyder noget: analysen læser dem og forstår en fil med navnet blog.html eller about.html ud fra navnet.

Holder du dig til fem filer eller færre, passer hele konverteringen inden for gratisniveauet.

Hvad din computer skal have for at konvertere Claude Design til WordPress

Den kortere vej kører også på din computer, og kravene bliver ikke mindre. Browseren og det midlertidige WordPress er der for at kontrollere resultatet, ikke for at lave det:

• Node 20 eller nyere og Python 3 med pakkerne Playwright og Pillow.
• Docker med kommandoen docker compose. Den starter et midlertidigt WordPress på din computer, og konverteren installerer temaet der, før du ser det.
• php-cli, fordi hver PHP-fil får et syntakstjek, før den kommer i ZIP-filen.
• jq, curl, bash og tar. Det WordPress, du installerer på, skal være version 6.6 eller nyere.

Det første trin tjekker alt dette. Det skelner mellem det, det kan installere selv i dine egne mapper, og det, du selv skal tage stilling til. Det installerer ikke Docker for dig, medmindre du beder om det.

Kør konverteringen fra Claude Design til WordPress

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

Skriv derefter, hvor som helst fra:

/html2wp:html2wp

convert ./my-site

Stien til mappen er hele instruksen. Du skriver ingen konfigurationsfil og vælger ingen byggekommando. I Codex skriver du convert ./my-site with html2wp. Vil du helst ikke arbejde i en terminal, kan du åbne den samme mappe i desktopappen html2wp (en guide med skærmbilleder).

Flash tager omkring 30 minutter og Full omkring en time, afhængigt af antallet af sider og hvor hurtig din computer er. Et artefakt på én side ligger i den korte ende, men kontrollerne kører altid fuldt ud, uanset hvor lille input er.

Hvad den afgør for dig, og hvad den spørger om

Før den genererer noget, måler den dine filer. Den oplister siderne og finder ud af, hvilke dele af koden der er fælles, og hvilke der er unikke. Den finder også design-tokens, alt, der ligner en blog, og hvilke sider der står alene. Derefter skriver den ned, hvad den har tænkt sig at gøre, og konverterer efter den plan.

Et genereret design løber ofte ind i to ting:

• Alle varianter af designet bevares. Har dine sider ikke den samme header, vælger den ikke en vinder og udjævner resten. I stedet laver den en template part for hver variant og forbinder hver side med den, siden faktisk brugte. Artefakter fra forskellige chats med Claude adskiller sig ofte mere, end du husker.
• Krøllede parenteser i din tekst overlever. Mellemtrinnet bruger et format, der ligner JSX. Ellers ville et eksempel på JSON eller CSS i din tekst ødelægge bygningen eller dukke op på siden som {. Konverteren håndterer dem, så parenteserne forbliver parenteser på siden.

Gentagne grupper, for eksempel kort, udtalelser eller en FAQ, gemmes som samlinger i stedet for hårdkodet markup. Derfor kan du senere redigere dem rigtigt, og de ser ikke bare redigerbare ud.

Gennemgangen, du ikke kan springe over

Konverteren lægger hver side ind i ét billede ved siden af originalen, og du læser hvert eneste fra top til bund.

I én konvertering manglede en sektion længere nede på siden, og pixelsammenligningen viste en forskel på kun 0,4 %, så den bestod kontrollen. Talbaserede kontroller kan i sagens natur ikke se tre slags fejl. Den første er et element, der ser perfekt ud, men intet gør. Den anden er en værdi, der er hårdkodet fra den ene side, en skabelon kom fra. Den tredje er alt, der først viser sig, når du scroller, klikker eller sender en formular.

Tjek også, om du kan redigere indholdet. En side kan passe ned til pixlen, og alligevel kan ingen redigere dens FAQ eller gitter med funktioner fra wp-admin. Det er sket, og det var denne gennemgang, der fangede det, ikke en automatisk kontrol.

Redigering efter konverteringen fra Claude Design til WordPress: tema, Visual Edit eller sidebygger

To filer lander i din mappe: ZIP-filen med temaet og ved siden af den CONVERSION-REPORT.md. Rapporten oplister, hvad konverteringen dækkede, hvad gennemgangen fandt, og hvad der stadig er åbent. Du installerer temaet som ethvert andet WordPress-tema (Appearance → Themes → Add New → Upload Theme).

Temaet står på egne ben. Sider, blog, formularer, menuer, SEO og omdirigeringer er alt sammen dets egen kode. Det kræver intet plugin for at køre og taler aldrig med vores server. Blogindlæg skriver du i blokeditoren, mens teksten på siderne bliver i HTML. Vil du redigere sider uden kode, er der to muligheder: Visual Edit og en sidebygger.

En sidebygger er et godt valg, når designet kun er et udgangspunkt. Det er et dårligt valg, når designet er det, du leverer. Konverterer du, for at det genererede design skal overleve i WordPress, ophæver en genopbygning som widgets selve grunden til, at du startede. Men skal en anden lave layoutet om næste kvartal, kan deres erfaring med Elementor være mere værd end et tro design.

Lite eller Pro, hvis du vælger Visual Edit

AI-chatten kører på din egen API-nøgle. Vi sælger dig ikke tokens, og du afregner, hvad de koster, med din udbyder.

Pris, og hvad konverteringen afviser

Gratis for alle, uden nøgle og uden tilmelding: tre konverteringer på fem sider hver og fem nye kørsler i alt. Begge tal gælder pr. IP-adresse, så et kontor med én adresse får én kvote. Gratisniveauet er til at prøve værktøjet, personlige sites og ikke-kommercielt arbejde.

En Pro-licens fjerner sidegrænsen og gør konverteringer og nye kørsler ubegrænsede. Den låser også det trin op, der gør en webshop til WooCommerce. Det trin er aldrig gratis: appen afviser helt en gratis konvertering af et site med en webshop i stedet for at lave halvdelen af den. Du kan købe Pro månedligt eller årligt på prissiden, og under betaen er der 30 % rabat på den første betaling.

Ét forbehold: dette er en beta. Kontrollerne fanger de fleste forskelle, ikke dem alle. Derfor er det at læse hver side ved siden af originalen en del af processen og ikke en valgfri finpudsning. Det er også derfor, du først bør konvertere noget af dit eget gratis og først derefter stole på det.

En guide til hele processen trin for trin står i dokumentationen til html2wp-appen. Er dit artefakt React, beskriver guiden fra Lovable til WordPress den vej.