Claude Design-export till ett WordPress-tema i html2wp-appen
Du kan göra om en design från Claude Design till WordPress i html2wp-appen, utan terminal. För din Claude Design-export sparar du designen som HTML. Sedan lägger du till den i appen och väljer Flash eller Full. Till sist laddar du ner ett WordPress-tema som ser ut som din design.
Det här behöver du för att konvertera Claude Design till WordPress i appen
- En Mac med Apple silicon (M1 eller nyare) och macOS 12 eller senare.
- Ett ChatGPT-konto. AI:n i din egen prenumeration gör konverteringen, så du betalar inte oss för krediter.
- Din Claude Design-export: designen sparad som en HTML-fil. Har du flera sidor sparar du varje sida som en egen fil.
HTML från Claude är den kortaste vägen till ett tema, eftersom appen inte först behöver bygga den eller öppna den i en webbläsare. Gratisnivån konverterar tre webbplatser med upp till fem sidor var. För kunduppdrag behöver du en Pro-licens från prissidan.
Installation, miljö och inloggning
Ladda ner appen för Mac och flytta den till mappen Program. I Settings klickar du på Prepare environment, så laddar appen ner Docker och konverteringsmiljön. Logga sedan in med Connect with ChatGPT. Lovable-guiden för appen går igenom varje steg i detalj med skärmbilder, och för Claude är stegen desamma.
Din Claude Design-export i appen
För din Claude Design-export laddar du ner artefakten i Claude som en .html-fil. 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 i samma mapp, på de platser koden förväntar sig. Andra sidor, som Om oss eller Kontakt, hamnar bredvid som about.html och contact.html. Appen avgör utifrån filnamnet vilken sida som är vilken.
Klicka på New project (⌘N) i appen, behåll HTML WordPress theme som utdata och välj Choose a folder. Om du har zippat mappen använder du Import a ZIP i stället.
Flash eller Full för WordPress-temat
Flash är standardvalet: varje steg körs en gång, och det tar ungefär en halvtimme. Full kör alla kontroller och försöker rätta fel, så det tar ungefär en timme. En design på en enda sida brukar hamna i den kortare änden, men kontrollerna körs ändå fullt ut.
Under konverteringen visar fliken Overview vad appen gör. Vill du pausa klickar du på Stop conversion och fortsätter sedan med Continue.
Kontrollera designen i appen
Fliken Compare visar originalet och WordPress-versionen sida vid sida, i desktop- och mobilbredd. Gå igenom varje sida, för de automatiska kontrollerna fångar de flesta skillnader men inte alla. Om något inte stämmer skriver du det i chatten. Ändringen görs i förhandsvisningen, och sedan paketerar Make release en ny version av temat.
Exportera temat från din Claude Design-export till WordPress
I fliken Exports klickar du på Save bredvid WordPress-temat och sparar ZIP-filen. I WordPress laddar du upp den under Utseende → Teman → Lägg till nytt → Ladda upp tema. Temat klarar sig på egen hand: sidor, formulär, menyer och SEO fungerar utan plugin.
Med Visual Edit-redigeraren kan din kund klicka på texten och redigera den direkt. Arbetar du i terminalen går guiden med pluginet för Claude Code och Codex igenom samma konvertering.