Claude Design на WordPress: как превратить дизайн в тему

Что вам выдал Claude Design?

Claude создаёт результат двух видов, и у каждого свой путь. Проверьте, какой у вас, до начала работы, потому что от этого зависит длительность конвертации.

Что выдал Claude	Что это такое	Путь
HTML-артефакт	Самодостаточный файл .html: код, стили и скрипты находятся внутри него.	Эта статья. Это уже плоский HTML, ровно тот вход, который нужен конвертеру.
React-артефакт	Компонент. Страница появляется только после выполнения JavaScript, а HTML вокруг неё является пустым элементом, в который монтируется приложение.	Руководство по Lovable: тот же вид входа, тот же дополнительный шаг.

Если не уверены, откройте файл и загляните внутрь <body>. Если там видны ваши заголовки и абзацы, у вас HTML-артефакт, и вы в нужном месте. А когда body состоит из одного пустого <div> и тега script, у вас артефакт другого вида.

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

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

Поэтому экспортируйте дизайн из Claude (скачайте артефакт), создайте папку и сохраните в ней файл как index.html. Если дизайн ссылается на изображения, которых нет внутри файла, положите их рядом, по тем относительным путям, которые ожидает код.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p 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

ИИ-чат работает на вашем собственном API-ключе. Мы не продаём вам токены, и их стоимость вы оплачиваете своему провайдеру.

Цена и от чего конвертация отказывается

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

Лицензия Pro снимает лимит страниц и делает конвертации и повторные запуски неограниченными. Она также открывает шаг, который превращает магазин в WooCommerce. Этот шаг никогда не бывает бесплатным: приложение сразу отказывается бесплатно конвертировать сайт с магазином, а не делает его наполовину. Pro можно купить помесячно или на год на странице с ценами, и во время беты первый платёж на 30 % дешевле.

Одна оговорка: это бета. Проверки ловят большую часть различий, но не все. Поэтому чтение каждой страницы рядом с оригиналом входит в процесс, а не служит необязательной полировкой. И поэтому сначала стоит бесплатно сконвертировать что-то своё и только потом доверять результату.

Пошаговое руководство по всему процессу есть в документации к приложению html2wp. Если ваш артефакт на React, этот путь описывает руководство по переносу Lovable на WordPress.