Разработка под WordPress часто упирается в рутину: дизайнер рисует макет в Figma, а фронтенд-разработчик вручную переносит его в Gutenberg-блок. Это занимает часы, особенно если блок динамический — с выбором постов, кастомными полями и адаптивностью. Но современные нейросети способны взять на себя львиную долю работы. В этой статье я покажу, как с помощью ИИ сгенерировать готовый код динамического блока Gutenberg прямо из макета Figma, экономя 70% времени.
Каждый новый блок требует написания трех файлов: PHP для регистрации, JSX для редактора и CSS для стилей. Даже опытный разработчик тратит 2-4 часа на простой блок. При частых правках дизайна время умножается. Нейросеть решает эту проблему, генерируя код по текстовому описанию или скриншоту макета. Она не просто копирует стили, но и создает логику для атрибутов, панелей настроек и динамического вывода.
Процесс состоит из трех шагов. Первый: экспорт макета из Figma в JSON или описание структуры (например, «блок с заголовком, тремя колонками и кнопкой»). Второй: передача этого описания нейросети (ChatGPT, Claude или Copilot) с промптом, содержащим требования к динамике (какие данные подгружать, как настраивать). Третий: получение готового кода, который остается скопировать в файлы темы. Лучшие результаты дает детальный промпт с указанием имен классов, цветовой схемы и поведения на разных экранах.
Допустим, в Figma есть макет блока с фото, именем, должностью и ссылкой на соцсети. Динамический блок должен выводить сотрудников из произвольного типа записи «team». Промпт для нейросети: «Создай динамический блок Gutenberg для вывода постов типа "team". Макет: каждая карточка содержит изображение (300x300), имя (H3), должность (p), иконки соцсетей. В редакторе должны быть поля для выбора количества колонок и цвета фона. Используй атрибуты columns (2/3/4) и backgroundColor. Вывод через WP_Query с пагинацией». Нейросеть возвращает готовый PHP и JSX, которые после минимальной правки работают в WordPress.
| Критерий | Ручная разработка | ИИ-генерация |
|---|---|---|
| Время на блок | 2-4 часа | 15-30 минут |
| Ошибки | Редко, но требуют отладки | Могут быть логические ошибки в запросах |
| Гибкость | Полный контроль | Зависит от качества промпта |
| Повторяемость | Низкая | Высокая (шаблон промпта) |
Нейросеть не заменяет разработчика, но становится мощным инструментом для ускорения рутинных задач. Генерация динамических блоков Gutenberg из Figma с помощью ИИ сокращает время разработки в 5-10 раз, позволяя сосредоточиться на уникальной логике и оптимизации. Главное — правильно составить промпт и проверять код на безопасность. Начните с простого блока, и вы увидите, как быстро окупится этот подход.
