Реальный кейс от макета до запуска
Меня зовут Артём Сарычев, я больше десяти лет делаю сайты, в основном коммерческие — для производственных компаний и B2B-ниш. Не так давно закончил проект для производителя светодиодных прожекторов, и он хорошо показывает, как сейчас можно собирать сайты: дизайн частично через нейросеть, вёрстка через Claude Code, а на выходе — чистая блочная тема WordPress без единого конструктора. Рассказываю весь путь по шагам — без воды, с промптами и подводными камнями.
Что было на старте и что получилось
У клиента уже был сайт на Elementor, который я когда-то делал сам. Он работал и приносил две-три заявки в день через Яндекс Директ, но был тяжёлым, с одним товаром, и развивать его дальше было мучительно. Задача — сделать полноценный продающий сайт с каталогом, блогом и формами заявок.
Итог: лендинг с анимациями, каталог с фильтрацией по категориям, блог с рубриками, страница контактов с картой, форма с маской ввода телефона и согласием на обработку персональных данных. Всё это — всего на трёх плагинах. Десктопная версия показывает 95% в Google PageSpeed, мобильная уверенно сидит в зелёной зоне. Для WordPress это практически потолок.
Пять этапов разработки
Весь проект разложился на пять понятных стадий. Сначала я собрал прототип в Claude, перенёс его в Figma и доработал под реальную структуру: много товаров, блог, дополнительные страницы. Дизайн делал уже вручную в Figma, но с помощью ChatGPT — нашёл референс на Behance, скормил его нейросети вместе со своим первым экраном, получил четыре варианта и выбрал подходящий. Фон для первого экрана вытащил через Genspark в качестве 2K.
Дальше началось самое интересное — вёрстка через Claude Code в VS Code. Никаких MCP-серверов, всё через обычный чат с нейросетью. Готовый HTML/CSS/JS затем перенёс на WordPress через локальный сервер MAMP: Claude сам собрал блочную тему на Gutenberg, упаковал её в архив, и я просто установил эту тему на клиентский сайт вместо старой. Оставалось добавить товары, статьи, настроить SEO — и запускать рекламу.
Почему без WooCommerce и форм-плагинов
Заявки и каталог работают на собственном коде. WooCommerce я сознательно не ставил — он заметно съедает скорость, а для B2B-каталога без корзины он просто не нужен. Формы тоже написаны кодом: заявки падают в отдельный раздел в админке и дублируются на email. Из плагинов только три: Clearfy Pro для оптимизации и защиты, Yoast SEO для базовой поисковой оптимизации и виджет мессенджеров, который я, кстати, тоже разрабатывал через нейросеть.
Главный секрет: как подготовить макет в Figma
Вот здесь кроется ключевой момент всего процесса. Перед вёрсткой я собрал дизайн-систему: отдельные фреймы с цветами, размерами и жирностью шрифтов, кнопками в обычном состоянии и при наведении, всеми иконками и нестандартными переходами между секциями.
И самое важное — секции нужно экспортировать в SVG, а не в JPEG или PNG. SVG — это по сути код, и нейросеть его читает: она видит точные отступы, размеры кнопок, внутренние поля, расположение элементов. Растровую картинку она воспринимает куда хуже и начинает «придумывать». Отдельно я сделал фреймы с инструкциями — скрины настроек сетки, ширины макета, основных отступов — и сложил всё в одну папку вместе с изображениями и шрифтами.
Вёрстка по секциям: как не сжечь токены впустую
Структура проекта простая: папка с экспортами из Figma, папка assets с изображениями, иконками и шрифтами, index.html и файлы стилей. Дальше работа строится на последовательности промптов:
- Главный промпт — роль («работаешь как команда сеньор-специалистов»), требования: pixel perfect, БЭМ, семантика, чистый код без дублей.
- Анализ макета — нейросеть изучает все файлы, код писать пока запрещено.
- Архитектура проекта — на основе анализа, тоже без кода.
- Вёрстка первой секции с указанием точного пути к файлу.
- Точные правки и переход к следующей секции.
Главная ошибка новичков — попросить «сверстай весь сайт сразу». Так нейросеть сделает всё плохо. Идти нужно по секциям: после первой свёрстанной и выправленной секции каждая следующая получается заметно лучше, потому что модель отталкивается от уже согласованного кода. И ещё: правки формулируйте конкретно. Не «кнопка не нравится», а «опусти кнопку на 12 пикселей, текст сдвинь левее». Тогда вёрстка реально сходится с макетом пиксель в пиксель.
Перенос на WordPress и память между сессиями
Когда статика готова, ставим WordPress на локальный сервер, открываем папку в VS Code и даём Claude задачу: перенести вёрстку в блочную тему, всё кодом, без тяжёлых плагинов. На выходе получаем готовый архив темы, который устанавливается на боевой сайт как обычно.
И последний нюанс, о котором почти никто не говорит. Заставьте нейросеть записывать историю проекта — через git-коммиты и отдельные файлы с описанием изменений. Тогда, открыв новый чат, вы просто просите её пробежаться по этим файлам, и она продолжает с того места, где вы остановились, а не начинает с чистого листа.
Что в итоге
Клиент запустил рекламу, и сайт сразу начал приносить заявки — в основном от заводов и оптовых компаний, то есть именно та аудитория, ради которой всё затевалось. Быстрый, лёгкий, управляемый — и без конструкторов, которые годами душили старую версию.
Все промпты из этой статьи и ссылки на плагины — здесь. Если материал был полезен — подписывайтесь на мои ресурсы, там регулярно выходят такие же разборы рабочих процессов:
- Telegram-канал
- ВКонтакте
- YouTube
- Заказать сайт или получить консультацию
Смотреть на RuTube
Смотреть в ВК видео
