Z Claude Design do WordPressa: jak zamienić projekt w motyw

Jaki wynik dał ci Claude Design?

Claude tworzy dwa rodzaje wyników i każdy idzie inną drogą. Sprawdź, który masz, zanim zaczniesz, bo od tego zależy, jak długo potrwa konwersja.

Co dał ci Claude	Co to jest	Droga
Artefakt HTML	Samowystarczalny plik .html: kod, style i skrypty są w nim w całości.	Ten artykuł. To już płaski HTML, dokładnie to wejście, którego potrzebuje konwerter.
Artefakt React	Komponent. Strona pojawia się dopiero po uruchomieniu JavaScriptu, a HTML wokół niego to pusty element, w którym montuje się aplikacja.	Poradnik Lovable: ten sam rodzaj wejścia, ten sam dodatkowy krok.

Jeśli nie masz pewności, otwórz plik i zajrzyj do <body>. Jeśli widzisz tam swoje nagłówki i akapity, masz artefakt HTML i jesteś we właściwym miejscu. Gdy body to jeden pusty <div> i tag skryptu, masz ten drugi rodzaj.

Eksport z Claude Design do folderu, razem z obrazami

Wejściem zawsze jest folder na twoim dysku. Adres działającej strony nie jest obsługiwanym wejściem i jest tak celowo. Kopia opublikowanej strony zachowuje tylko wyrenderowany wynik i traci to, co wie plik źródłowy.

Wyeksportuj więc projekt z Claude (pobierz artefakt), utwórz folder i zapisz w nim plik jako index.html. Jeśli projekt odwołuje się do obrazów, których nie ma w pliku, umieść je obok, w tych samych względnych miejscach, których oczekuje kod.

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

Jedna strona czy więcej?

Jeden artefakt to jedna strona, a strona jednostronicowa konwertuje się bez kłopotu. Staje się stroną główną motywu. Jeśli chcesz stronę z podstronami O nas i Kontakt, poproś Claude także o nie i zapisz każdą jako osobny plik .html w tym samym folderze. Nazwy plików mają znaczenie: analiza je czyta i rozumie plik blog.html albo about.html po nazwie.

Jeśli zostaniesz przy pięciu plikach lub mniej, cała konwersja zmieści się w wersji darmowej.

Czego potrzebuje komputer do konwersji z Claude Design do WordPressa

Krótsza droga też działa na twoim komputerze, a wymagania się nie zmniejszają. Przeglądarka i tymczasowy WordPress służą do sprawdzenia wyniku, a nie do jego wytworzenia:

• Node 20 lub nowszy i Python 3 z pakietami Playwright i Pillow.
• Docker z poleceniem docker compose. Uruchamia tymczasowy WordPress na twoim komputerze, a konwerter instaluje w nim motyw, zanim go zobaczysz.
• php-cli, bo każdy plik PHP przechodzi sprawdzenie składni, zanim trafi do ZIP-a.
• jq, curl, bash i tar. Docelowy WordPress musi mieć wersję 6.6 lub nowszą.

Pierwszy krok sprawdza to wszystko. Oddziela to, co może zainstalować sam w twoich folderach, od tego, o czym musisz zdecydować. Nie zainstaluje za ciebie Dockera, chyba że o to poprosisz.

Uruchom konwersję z Claude Design do WordPressa

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

Potem, z dowolnego miejsca, wpisz:

/html2wp:html2wp

convert ./my-site

Ścieżka do folderu to cała instrukcja. Nie piszesz pliku konfiguracyjnego i nie wybierasz polecenia buildu. W Codex wpisz convert ./my-site with html2wp. Jeśli wolisz nie pracować w terminalu, ten sam folder otworzysz w aplikacji desktopowej html2wp (poradnik ze zrzutami ekranu).

Flash trwa około 30 minut, a Full około godziny, zależnie od liczby stron i szybkości twojego komputera. Jednostronicowy artefakt jest bliżej krótszego końca, ale kontrole zawsze działają w pełnym zakresie, niezależnie od tego, jak małe jest wejście.

Co decyduje za ciebie, a o co pyta

Zanim cokolwiek wygeneruje, mierzy twoje pliki. Wypisuje strony i ustala, które części kodu są wspólne, a które unikalne. Znajduje też tokeny projektu, wszystko, co wygląda na blog, i strony, które stoją osobno. Potem zapisuje, co zamierza zrobić, i konwertuje według tego planu.

Wygenerowany projekt często trafia na dwie rzeczy:

• Każdy wariant projektu zostaje zachowany. Jeśli twoje strony nie mają wspólnego nagłówka, konwerter nie wybiera zwycięzcy i nie spłaszcza reszty. Zamiast tego tworzy część szablonu dla każdego wariantu i podłącza każdą stronę do tego, którego naprawdę używała. Artefakty z różnych czatów z Claude często różnią się bardziej, niż pamiętasz.
• Nawiasy klamrowe w twoim tekście przetrwają. Krok pośredni używa formatu podobnego do JSX. Inaczej przykład JSON albo CSS w twoim tekście zepsułby build albo pojawił się na stronie jako {. Konwerter je obsługuje, więc na stronie klamry zostają klamrami.

Powtarzające się grupy, na przykład karty, opinie albo FAQ, są zapisywane jako kolekcje, a nie jako znaczniki wpisane na sztywno. Dzięki temu później naprawdę da się je edytować, a nie tylko wyglądają na edytowalne.

Przegląd, którego nie pominiesz

Konwerter umieszcza każdą stronę na jednym obrazie obok oryginału, a ty czytasz każdy od góry do dołu.

W jednej konwersji brakowało sekcji niżej na stronie, a porównanie pikseli pokazało różnicę tylko 0,4%, więc strona przeszła kontrolę. Z samej swojej natury kontrole liczbowe nie widzą trzech rodzajów błędów. Pierwszy to kontrolka, która wygląda idealnie, ale nic nie robi. Drugi to wartość wpisana na sztywno z jednej strony, z której powstał szablon. Trzeci to wszystko, co pojawia się dopiero po przewinięciu, kliknięciu albo wysłaniu formularza.

Sprawdź też, czy da się edytować treść. Strona może zgadzać się co do piksela, a mimo to nikt nie zedytuje jej FAQ ani siatki funkcji z wp-admin. Tak się zdarzyło i wyłapał to ten przegląd, a nie żadna automatyczna kontrola.

Edycja po konwersji z Claude Design do WordPressa: motyw, Visual Edit albo page builder

W twoim folderze pojawiają się dwa pliki: ZIP z motywem, a obok niego CONVERSION-REPORT.md. Raport wymienia, co objęła konwersja, co znalazł przegląd i co jeszcze jest otwarte. Instalujesz go jak każdy motyw WordPress (Wygląd → Motywy → Dodaj nowy → Wyślij motyw na serwer).

Motyw jest samodzielny. Strony, blog, formularze, menu, SEO i przekierowania to jego własny kod. Do działania nie potrzebuje żadnej wtyczki i nigdy nie łączy się z naszym serwerem. Wpisy na blogu piszesz w edytorze blokowym, a tekst stron zostaje w HTML. Do edycji stron bez kodu są dwie opcje: Visual Edit i page builder.

Page builder to dobry wybór, gdy projekt jest tylko punktem wyjścia. Zły, gdy projekt jest tym, co dostarczasz. Jeśli konwertujesz po to, żeby wygenerowany projekt przetrwał w WordPressie, przebudowa na widżety przekreśla powód, dla którego zaczynasz. Ale jeśli ktoś inny przerobi układ w następnym kwartale, jego doświadczenie z Elementorem może być warte więcej niż wierny projekt.

Lite czy Pro, jeśli wybierasz Visual Edit

Czat AI działa na twoim własnym kluczu API. Nie sprzedajemy ci tokenów, a ich koszt rozliczasz ze swoim dostawcą.

Cena i czego konwersja odmawia

Za darmo dla każdego, bez klucza i bez rejestracji: trzy konwersje po pięć stron i łącznie pięć ponownych uruchomień. Obie liczby liczą się na adres IP, więc biuro z jednym adresem dostaje jeden przydział. Wersja darmowa służy do wypróbowania narzędzia, stron prywatnych i pracy niekomercyjnej.

Licencja Pro znosi limit stron, a konwersje i ponowne uruchomienia są bez limitu. Odblokowuje też krok, który zamienia sklep w WooCommerce. Ten krok nigdy nie jest darmowy: aplikacja od razu odmawia darmowej konwersji strony ze sklepem, zamiast zrobić ją w połowie. Pro kupisz miesięcznie albo rocznie na stronie z cennikiem, a w czasie bety pierwsza płatność jest o 30% tańsza.

Jedno zastrzeżenie: to jest beta. Kontrole wyłapują większość różnic, nie wszystkie. Dlatego czytanie każdej strony obok oryginału jest częścią procesu, a nie opcjonalnym szlifem. Dlatego też najpierw przekonwertuj za darmo coś własnego, a dopiero potem temu zaufaj.

Poradnik krok po kroku dla całego procesu jest w dokumentacji aplikacji html2wp. Jeśli twój artefakt to React, tę drogę opisuje poradnik o konwersji z Lovable do WordPressa.