Eksport fra Claude Design: et WordPress-tema i html2wp-appen
Du kan gøre et design fra Claude Design til WordPress i html2wp-appen, uden terminal. Til eksporten fra Claude Design gemmer du designet som HTML. Derefter tilføjer du det i appen, vælger Flash eller Full, og til sidst downloader du et WordPress-tema, der ligner dit design.
Det skal du bruge til en eksport fra Claude Design
- En Mac med Apple silicon (M1 eller nyere) og macOS 12 eller nyere.
- En ChatGPT-konto. AI'en på dit eget abonnement laver konverteringen, så du betaler ikke os for kreditter.
- Din eksport fra Claude Design: designet gemt som en HTML-fil. Har du flere sider, så gem hver som en separat fil.
HTML fra Claude er den korteste vej til et tema, fordi appen ikke først skal bygge det eller åbne det i en browser. Gratisniveauet konverterer tre sites på op til fem sider hver. Til arbejde for kunder skal du have en Pro-licens fra prissiden.
Installation, miljø og login
Download appen til Mac, og flyt den til mappen Programmer. Klik på Prepare environment (klargør miljøet) i Settings, så downloader appen Docker og konverteringsmiljøet. Log derefter ind med Connect with ChatGPT. Guiden til Lovable i appen gennemgår hvert af disse trin i detaljer med skærmbilleder, og for Claude er de de samme.
Eksporten fra Claude Design ind i appen
Til eksporten fra Claude Design downloader du artefaktet i Claude som en .html-fil. Opret en mappe, og gem filen i den som index.html. Linker designet til billeder, der ikke ligger i filen, så læg dem i samme mappe, på de pladser, koden forventer. Andre sider, som Om os eller Kontakt, lægges ved siden af som about.html og contact.html. Appen finder ud fra filnavnet ud af, hvilken side der er hvilken.
Klik på New project (⌘N) i appen, behold HTML WordPress theme som output, og vælg Choose a folder. Har du pakket mappen som ZIP, så brug Import a ZIP i stedet.
Flash eller Full til WordPress-temaet
Flash er standard: hvert trin kører én gang, og det tager omkring en halv time. Full kører alle kontroller og forsøger at rette fejl, så det tager omkring en time. Et design på én side ligger som regel i den korte ende, men kontrollerne kører stadig fuldt ud.
Under konverteringen viser fanen Overview, hvad appen laver. Vil du holde pause, så klik på Stop conversion, og fortsæt senere med Continue.
Kontrol af designet i appen
Fanen Compare (sammenlign) viser originalen og WordPress-versionen side om side, i desktop- og mobilbredde. Gennemse hver side, fordi automatiske kontroller fanger de fleste forskelle, men ikke alle. Passer noget ikke, så skriv det i chatten. Ændringen sker i forhåndsvisningen, og derefter pakker Make release en ny version af temaet.
Eksport af WordPress-temaet bygget af dit Claude Design
Klik på Save ved siden af WordPress-temaet i fanen Exports, og gem ZIP-filen. I WordPress uploader du den under Appearance → Themes → Add New → Upload Theme (Udseende → Temaer → Tilføj nyt → Upload tema). Temaet står på egne ben: sider, formularer, menuer og SEO virker uden plugin.
Editoren Visual Edit giver din kunde redigering med et klik. Arbejder du i terminalen, dækker guiden med pluginnet til Claude Code og Codex den samme konvertering.