Claude Designból WordPress: így lesz a dizájnból téma

Milyen kimenetet adott a Claude Design?

A Claude kétféle kimenetet készít, és mindkettő más úton megy. Mielőtt elkezded, nézd meg, melyik van nálad, mert ettől függ, mennyi ideig tart a konverzió.

Amit a Claude adott	Mi ez	Útvonal
HTML-artifact	Egy önálló .html fájl: a kód, a stílusok és a szkriptek mind benne vannak.	Ez a cikk. Ez már sima HTML, pontosan az a bemenet, amire a konverternek szüksége van.
React-artifact	Egy komponens. Az oldal csak a JavaScript lefutása után jelenik meg, a körülötte lévő HTML pedig egy üres elem, amelybe az alkalmazás beépül.	A Lovable-útmutató: ugyanolyan bemenet, ugyanaz a plusz lépés.

Ha nem vagy biztos benne, nyisd meg a fájlt, és nézz bele a <body> részbe. Ha ott látod a címsoraidat és a bekezdéseidet, HTML-artifactod van, és jó helyen jársz. Ha a törzs egyetlen üres <div> és egy szkriptcímke, akkor a másik fajta van nálad.

Exportálás a Claude Designból egy mappába, a képekkel együtt

A bemenet mindig egy mappa a lemezeden. Élő oldal címe nem támogatott bemenet, és ez szándékos. Egy közzétett oldal másolata csak a megjelenített eredményt őrzi meg, és elveszíti azt, amit a forrásfájl tud.

Ezért exportáld a dizájnt a Claude-ból (töltsd le az artifactot), hozz létre egy mappát, és mentsd bele a fájlt index.html néven. Ha a dizájn olyan képekre hivatkozik, amelyek nincsenek a fájlban, tedd őket mellé, ugyanazokra a relatív helyekre, ahol a kód keresi őket.

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

Egy oldal vagy több?

Egy artifact egy oldal, és az egyoldalas weboldal gond nélkül átalakítható. Ebből lesz a téma kezdőlapja. Ha Rólunk és Kapcsolat oldalt is szeretnél, kérd el ezeket is a Claude-tól, és mentsd mindegyiket külön .html fájlként ugyanabba a mappába. A fájlnevek számítanak: az elemzés elolvassa őket, és egy blog.html vagy about.html nevű fájlt a neve alapján ért meg.

Ha legfeljebb öt fájlnál maradsz, a teljes konverzió belefér az ingyenes csomagba.

Mi kell a gépedre, hogy a Claude Designból WordPress legyen

A rövidebb út is a gépeden fut, és a követelmények nem lesznek kevesebbek. A böngésző és az ideiglenes WordPress az eredmény ellenőrzésére való, nem az előállítására:

• Node 20 vagy újabb és Python 3 a Playwright és a Pillow csomaggal.
• Docker a docker compose paranccsal. Ideiglenes WordPresst indít a gépeden, és a konverter oda telepíti a témát, mielőtt te látnád.
• php-cli, mert minden PHP-fájl szintaktikai ellenőrzésen megy át, mielőtt a ZIP-be kerül.
• jq, curl, bash és tar. A cél-WordPress 6.6-os vagy újabb verziójú legyen.

Mindezt az első lépés ellenőrzi. Külön veszi, amit magától telepíteni tud a saját mappáidon belül, és azt, amiről neked kell döntened. A Dockert nem telepíti helyetted, hacsak nem kéred.

A Claude Design átalakítása WordPressre: a futtatás

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

Aztán bárhonnan írd be:

/html2wp:html2wp

convert ./my-site

A mappa elérési útja a teljes utasítás. Konfigurációs fájlt nem írsz, és build-parancsot sem választasz. A Codexben ezt írd: convert ./my-site with html2wp. Ha inkább nem dolgoznál terminálban, ugyanezt a mappát a html2wp asztali alkalmazásban is megnyithatod (útmutató képernyőképekkel).

A Flash körülbelül 30 percig, a Full nagyjából egy óráig tart, az oldalak számától és a géped sebességétől függően. Egy egyoldalas artifact a rövidebb végén van, de az ellenőrzések mindig teljes egészükben lefutnak, akármilyen kicsi a bemenet.

Miről dönt helyetted, és mit kérdez meg

Mielőtt bármit generálna, megméri a fájljaidat. Felsorolja az oldalakat, és kideríti, a kód mely részei közösek és melyek egyediek. Megkeresi a dizájntokeneket, mindent, ami blognak tűnik, és azt, hogy mely oldalak állnak önmagukban. Aztán leírja, mit tervez, és e terv szerint alakít át.

Egy generált dizájnnál gyakran két dolog jön elő:

• Minden dizájnváltozat megmarad. Ha az oldalaidnak nem ugyanaz a fejléce, nem választ győztest, és nem simítja el a többit. Minden változathoz külön sablonrészt készít, és minden oldalt ahhoz köt, amelyiket ténylegesen használta. A különböző Claude-csevegésekből származó artifactok gyakran jobban eltérnek, mint ahogy emlékszel.
• A kapcsos zárójelek a szövegben megmaradnak. A köztes lépés JSX-szerű formátumot használ. Emiatt egy JSON- vagy CSS-minta a szövegedben elronthatná az építést, vagy { alakban jelenne meg az oldalon. A konverter kezeli őket, így a zárójelek zárójelek maradnak az oldalon.

Az ismétlődő csoportokat, például kártyákat, ajánlásokat vagy egy GYIK-et, gyűjteményként menti, nem beégetett jelölésként. Ezért később tényleg szerkesztheted őket, és nem csak szerkeszthetőnek látszanak.

Az átnézés, amelyet nem hagyhatsz ki

A konverter minden oldalt egy képbe teszi az eredetije mellé, és te mindegyiket végigolvasod fentről lefelé.

Az egyik konverzióban hiányzott egy szekció az oldal lejjebb eső részéről, a pixeles összevetés mégis csak 0,4% különbséget mutatott, így átment az ellenőrzésen. A számszerű ellenőrzések természetüknél fogva háromféle hibát nem látnak. Az első egy vezérlő, amely tökéletesen néz ki, de semmit sem csinál. A második egy érték, amelyet abból az egy oldalból égettek be, amelyből a sablon készült. A harmadik minden, ami csak görgetés, kattintás vagy egy űrlap elküldése után jelenik meg.

Azt is ellenőrizd, hogy szerkesztheted-e a tartalmat. Egy oldal pixelre egyezhet, és mégsem tudja senki szerkeszteni a GYIK-jét vagy a funkciórácsát a wp-adminból. Ez megtörtént, és ez az átnézés vette észre, nem valamelyik automatikus ellenőrzés.

Szerkesztés, miután a Claude Designból WordPress lett: téma, Visual Edit vagy page builder

Két fájl kerül a mappádba: a téma ZIP-je, és mellette a CONVERSION-REPORT.md. A jelentés felsorolja, mit fedett le a konverzió, mit talált az átnézés, és mi van még nyitva. A témát úgy telepíted, mint bármelyik WordPress-témát (Megjelenés → Témák → Új hozzáadása → Téma feltöltése).

A téma önállóan megáll. Az oldalak, a blog, az űrlapok, a menük, a SEO és az átirányítások mind a saját kódjában vannak. A futáshoz nem kell bővítmény, és soha nem kommunikál a szerverünkkel. A blogbejegyzéseket a blokkszerkesztőben írod, az oldalak szövege a HTML-ben marad. Az oldalak kód nélküli szerkesztésére két lehetőség van: a Visual Edit és egy page builder.

A page builder jó választás, ha a dizájn csak kiindulópont. Rossz választás, ha a dizájn maga az, amit átadsz. Ha azért alakítasz át, hogy a generált dizájn megmaradjon a WordPressben, a widgetekként való újraépítés pont azt az okot szünteti meg, amiért belekezdtél. Ha viszont valaki más a következő negyedévben újracsinálja az elrendezést, az Elementorban szerzett tapasztalata többet érhet, mint egy hű dizájn.

Lite vagy Pro, ha a Visual Editet választod

Az AI-csevegés a saját API-kulcsodon fut. Tokent nem adunk el neked, a költségét közvetlenül a szolgáltatóddal rendezed.

Mennyibe kerül a Claude Design átalakítása WordPressre, és mit utasít el

Mindenkinek ingyenes, kulcs és regisztráció nélkül: három konverzió, egyenként öt oldallal, és összesen öt újrafuttatás. Mindkét szám IP-címenként számít, így egy iroda egyetlen címmel egyetlen keretet kap. Az ingyenes csomag az eszköz kipróbálására, személyes oldalakra és nem kereskedelmi munkára való.

A Pro licenc megszünteti az oldalkorlátot, a konverziók és újrafuttatások száma pedig korlátlan lesz. Feloldja azt a lépést is, amely a boltot WooCommerce-re alakítja. Ez a lépés soha nem ingyenes: egy bolttal rendelkező oldal ingyenes konverzióját az alkalmazás teljesen elutasítja, ahelyett hogy félig elvégezné. A Pro-t havi vagy éves fizetéssel az árak oldalán veheted meg, és a béta alatt az első fizetés 30%-kal olcsóbb.

Egy fenntartás: ez béta. Az ellenőrzések a különbségek többségét elkapják, de nem mindet. Ezért része a folyamatnak, hogy minden oldalt az eredetije mellett olvasol végig, és ez nem opcionális csinosítás. Ezért érdemes először valami sajátot ingyen átalakítani, és csak utána megbízni benne.

A teljes folyamat lépésről lépésre a html2wp alkalmazás dokumentációjában van. Ha az artifactod React, ezt az utat a Lovable-útmutató írja le.