Экспорт из Claude Design: тема WordPress в приложении html2wp
Дизайн из Claude Design можно превратить в тему WordPress в приложении html2wp, без терминала. Для экспорта из Claude Design вы сохраняете дизайн как HTML. Затем добавляете его в приложение, выбираете Flash или Full, а в конце скачиваете тему WordPress, которая выглядит как ваш дизайн.
Что нужно, чтобы перенести Claude Design на WordPress в приложении
- Mac на Apple silicon (M1 или новее) и macOS 12 или новее.
- Аккаунт ChatGPT. Конвертацию выполняет ИИ из вашей собственной подписки, поэтому вы не платите нам за кредиты.
- Ваш экспорт из Claude Design: дизайн, сохранённый как HTML-файл. Если страниц несколько, сохраните каждую отдельным файлом.
HTML из Claude даёт самый короткий путь к теме, потому что приложению не нужно сначала собирать его или открывать в браузере. Бесплатный тариф конвертирует три сайта до пяти страниц каждый. Для работы на клиентов нужна лицензия Pro со страницы с ценами.
Установка, окружение и вход
Скачайте приложение для Mac и перенесите его в папку «Программы». В настройках нажмите Prepare environment, и приложение скачает Docker и окружение для конвертации. Затем войдите через Connect with ChatGPT. Каждый из этих шагов подробно и со скриншотами описан в руководстве по Lovable для приложения, и для Claude они такие же.
Экспорт из Claude Design в приложение
Для экспорта из Claude Design скачайте артефакт в Claude как файл .html. Создайте папку и сохраните в ней файл как index.html. Если дизайн ссылается на изображения, которых нет внутри файла, положите их в ту же папку, туда, где их ожидает код. Другие страницы, например «О нас» или «Контакты», кладутся рядом как about.html и contact.html. По имени файла приложение определяет, какая страница какая.
В приложении нажмите New project (⌘N), оставьте вывод HTML WordPress theme и выберите Choose a folder. Если вы упаковали папку в ZIP, используйте вместо этого Import a ZIP.
Flash или Full для темы WordPress
Flash выбран по умолчанию: каждый шаг выполняется один раз, это занимает около получаса. Full запускает все проверки и пытается исправить ошибки, поэтому занимает около часа. Одностраничный дизайн обычно ближе к короткому краю, но проверки всё равно выполняются полностью.
Во время конвертации вкладка Overview показывает, что делает приложение. Чтобы поставить на паузу, нажмите Stop conversion, а затем продолжите кнопкой Continue.
Проверка дизайна в приложении
Вкладка Compare показывает оригинал и версию на WordPress рядом, при ширине десктопа и мобильного. Просмотрите каждую страницу, потому что автоматические проверки ловят большую часть различий, но не все. Если что-то не совпадает, напишите об этом в чат. Изменение появится в предпросмотре, а затем Make release упакует новую версию темы.
Экспорт темы: из Claude Design в WordPress
На вкладке Exports нажмите Save рядом с темой WordPress и сохраните ZIP. В WordPress его загружают в разделе «Внешний вид → Темы → Добавить новую тему → Загрузить тему». Тема самостоятельная: страницы, формы, меню и SEO работают без плагина.
Редактор Visual Edit добавляет вашему клиенту правку кликом. Если вы работаете в терминале, ту же конвертацию описывает руководство с плагином для Claude Code и Codex.