З Claude Design у WordPress: як перенести дизайн у тему

Який результат дав вам Claude Design?

Claude створює два види результату, і кожен іде своїм шляхом. Перевірте, який у вас, перш ніж почати, бо від цього залежить, скільки триватиме конвертація.

Що дав вам Claude	Що це	Шлях
HTML-артефакт	Самодостатній файл .html: код, стилі й скрипти всі в ньому.	Ця стаття. Це вже плаский HTML, якраз той вхід, який потрібен конвертеру.
React-артефакт	Компонент. Сторінка з’являється лише після виконання JavaScript, а HTML навколо є порожнім елементом, у який монтується застосунок.	Посібник для Lovable: такий самий вхід, такий самий додатковий крок.

Якщо не впевнені, відкрийте файл і зазирніть у <body>. Якщо бачите там свої заголовки й абзаци, у вас HTML-артефакт, і ви в правильному місці. Коли тіло складається з одного порожнього <div> і тегу скрипту, у вас другий вид.

Експорт із Claude Design у папку разом із зображеннями

На вході завжди папка на вашому диску. Адреса живого сайту не підтримується як вхідні дані, і це навмисно. Копія опублікованої сторінки зберігає лише відрендерений результат і втрачає те, що знає вихідний файл.

Тож експортуйте дизайн із Claude (завантажте артефакт), створіть папку й збережіть у ній файл як index.html. Якщо дизайн посилається на зображення, яких немає у файлі, покладіть їх поруч, у ті самі відносні місця, яких очікує код.

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

Одна сторінка чи більше?

Один артефакт є однією сторінкою, і односторінковий сайт конвертується без жодних проблем. Він стає головною сторінкою теми. Якщо хочете сайт зі сторінками «Про нас» і «Контакти», попросіть Claude і про них і збережіть кожну як окремий файл .html у тій самій папці. Назви файлів важливі: аналіз їх читає і розуміє файл blog.html чи about.html за назвою.

Якщо лишаєтеся в межах п’яти файлів, уся конвертація вкладається в безкоштовну версію.

Що потрібно комп’ютеру, щоб перенести Claude Design у WordPress

Коротший шлях теж працює на вашому комп’ютері, і вимоги від цього не зменшуються. Браузер і тимчасовий WordPress потрібні, щоб перевірити результат, а не щоб його створити:

• Node 20 або новіший і Python 3 з пакетами Playwright і Pillow.
• Docker із командою docker compose. Він запускає тимчасовий WordPress на вашому комп’ютері, і конвертер встановлює туди тему, перш ніж ви її побачите.
• php-cli, бо кожен PHP-файл проходить перевірку синтаксису, перш ніж потрапити в ZIP.
• jq, curl, bash і tar. Цільовий WordPress має бути версії 6.6 або новішої.

Перший крок перевіряє все це. Він відділяє те, що може встановити сам у ваших власних папках, від того, що вирішуєте ви. Docker він за вас не встановить, якщо ви не попросите.

Запустіть перенесення з Claude Design у 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

Потім, з будь-якого місця, введіть:

/html2wp:html2wp

convert ./my-site

Шлях до папки і є всією інструкцією. Ви не пишете конфігураційний файл і не вибираєте команду збірки. У Codex введіть convert ./my-site with html2wp. Якщо не хочете працювати в терміналі, ту саму папку можна відкрити в настільному застосунку html2wp (посібник зі скриншотами).

Flash триває близько 30 хвилин, а Full близько години, залежно від кількості сторінок і швидкості вашого комп’ютера. Односторінковий артефакт ближчий до коротшого краю, але перевірки завжди виконуються повністю, хоч би яким малим був вхід.

Що конвертер вирішує за вас і про що питає

Перш ніж щось генерувати, він вимірює ваші файли. Він перелічує сторінки й визначає, які частини коду спільні, а які унікальні. Він також знаходить дизайн-токени, усе, що схоже на блог, і сторінки, які стоять окремо. Потім він записує, що збирається робити, і конвертує за цим планом.

Згенерований дизайн часто натрапляє на дві речі:

• Кожен варіант дизайну зберігається. Якщо ваші сторінки не мають спільної шапки, він не вибирає переможця й не вирівнює решту. Натомість він створює частину шаблону для кожного варіанта й підключає кожну сторінку до того, який вона справді використовувала. Артефакти з різних чатів Claude часто відрізняються сильніше, ніж вам пам’ятається.
• Фігурні дужки у вашому тексті зберігаються. Проміжний крок використовує формат, схожий на JSX. Інакше приклад JSON чи CSS у вашому тексті зламав би збірку або з’явився б на сторінці як {. Конвертер їх обробляє, тож дужки на сторінці лишаються дужками.

Групи, що повторюються, наприклад картки, відгуки чи FAQ, зберігаються як колекції, а не як жорстко вписана розмітка. Завдяки цьому їх потім справді можна редагувати, а не лише здається, що можна.

Перегляд, який не можна пропустити

Конвертер ставить кожну сторінку на одне зображення поруч з оригіналом, і ви читаєте кожне згори донизу.

В одній конвертації нижче на сторінці бракувало розділу, а піксельне порівняння показало різницю лише 0,4%, тож перевірку вона пройшла. За своєю природою числові перевірки не бачать трьох видів дефектів. Перший: елемент керування, який виглядає ідеально, але нічого не робить. Другий: значення, жорстко вписане з тієї однієї сторінки, з якої походить шаблон. Третій: усе, що проявляється лише після прокручування, кліку чи надсилання форми.

Перевірте також, чи можна редагувати вміст. Сторінка може збігатися до пікселя, і все ж ніхто не зможе редагувати її FAQ чи сітку переваг із wp-admin. Таке траплялося, і зловив це саме цей перегляд, а не автоматична перевірка.

Редагування після перенесення з Claude Design у WordPress: тема, Visual Edit чи конструктор

У вашій папці з’являються два файли: ZIP із темою і поруч CONVERSION-REPORT.md. Звіт перелічує, що охопила конвертація, що знайшов перегляд і що ще відкрито. Встановлюється тема як будь-яка тема WordPress (Зовнішній вигляд → Теми → Додати нову → Завантажити тему).

Тема самостійна. Сторінки, блог, форми, меню, SEO і перенаправлення є її власним кодом. Для роботи їй не потрібен плагін, і вона ніколи не звертається до нашого сервера. Записи блогу ви пишете в блоковому редакторі, а текст сторінок лишається в HTML. Щоб редагувати сторінки без коду, є два варіанти: Visual Edit і конструктор сторінок.

Конструктор сторінок є добрим вибором, коли дизайн лише відправна точка. І поганим, коли дизайн і є тим, що ви здаєте. Якщо ви конвертуєте, щоб згенерований дизайн уцілів у WordPress, перебудова його у віджети скасовує саму причину, з якої ви почали. Але якщо хтось інший переробить макет наступного кварталу, його досвід з Elementor може важити більше, ніж точний дизайн.

Lite чи Pro, якщо ви вибрали Visual Edit

AI-чат працює на вашому власному API-ключі. Ми не продаємо вам токени, а їхню вартість ви розраховуєте зі своїм провайдером.

Ціна перенесення з Claude Design у WordPress і від чого відмовляється конвертація

Безкоштовно для всіх, без ключа й без реєстрації: три конвертації по п’ять сторінок і п’ять повторних запусків загалом. Обидва числа рахуються за IP-адресою, тож офіс з однією адресою отримує один ліміт. Безкоштовна версія призначена для знайомства з інструментом, особистих сайтів і некомерційної роботи.

Ліцензія Pro знімає ліміт сторінок і робить конвертації й повторні запуски необмеженими. Вона також відмикає крок, що перетворює магазин на WooCommerce. Цей крок ніколи не буває безкоштовним: безкоштовну конвертацію сайту з магазином застосунок одразу відхиляє, а не робить наполовину. Pro можна купити на місяць або на рік на сторінці з цінами, а під час бети перший платіж на 30% дешевший.

Одне застереження: це бета. Перевірки ловлять більшість відмінностей, хоч і не всі. Тому читання кожної сторінки поруч з оригіналом є частиною процесу, а не необов’язковим шліфуванням. І тому спершу сконвертуйте безкоштовно щось своє, а вже потім довіряйте.

Покроковий посібник з усього процесу є в документації до застосунку html2wp. Якщо ваш артефакт на React, цей шлях описує посібник про перенесення з Lovable у WordPress.