Сайт на WordPress через AI без конструкторов - обзор кейса сайта производителя прожекторов

Описание

Заказать сайт или консультацию: https://t.me/artsarychev
Все промпты — https://t.me/artsarychevinfo_bot?start=verstkafigma

Показываю полный процесс разработки коммерческого сайта на WordPress через нейросеть — без Elementor и других конструкторов. Реальный кейс: сайт для производителя светодиодных прожекторов, B2B-ниша.

Что внутри: прототип в Claude, доработка в Figma, дизайн с помощью ChatGPT и референса с Behance, верстка чистого HTML/CSS/JS через Claude Code в VS Code, перенос верстки в блочную тему WordPress на Gutenberg и запуск на боевом хостинге. Все 12 шагов с промптами — по порядку и с объяснением, зачем каждый нужен.

Результат: сайт на 3 плагинах, 95% производительности в Google PageSpeed, заявки и каталог товаров работают на своем коде — без WooCommerce и без форм-плагинов. Клиент запустил рекламу, сайт приносит заявки от заводов и оптовых компаний.

Что вы узнаете:
• Как подготовить макет в Figma, чтобы нейросеть сверстала его пиксель в пиксель
• Почему секции нужно экспортировать в SVG, а не в JPEG или PNG (ключевой момент)
• Как собрать структуру проекта и папок, чтобы не жечь токены впустую
• Главный промпт: роли, pixel perfect, БЭМ, семантика, чистый код без дублей
• Почему нельзя просить нейросеть «сверстать весь сайт сразу» и как идти по секциям
• Как формулировать правки, чтобы верстка сходилась с макетом
• Как перенести готовую верстку в блочную тему WordPress
• Как заставить AI помнить проект между сессиями через git и файлы истории

Стек и инструменты: WordPress, Gutenberg, HTML, CSS, JS, Figma, Claude Code, VS Code, ChatGPT, Genspark, MAMP, Clearfy Pro, Yoast SEO, Google PageSpeed Insights.

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

Меня зовут Артем Сарычев, разрабатываю сайты более 10 лет, специализируюсь на коммерческих B2B-проектах для промышленности и производственных компаний.

Ставьте лайк и подписывайтесь, если было полезно — так выходит больше подобных разборов.

ТАЙМКОДЫ:
00:00 Вступление и задача проекта
01:00 Обзор готового сайта: лендинг, каталог, формы
04:09 5 этапов разработки — кратко весь путь
06:01 Стек: заявки и товары без лишних плагинов
08:15 Скорость: 95% в Google PageSpeed
08:57 Было/стало: старый сайт на Elementor
09:25 Прототип и дизайн: Claude, ChatGPT, Behance, Figma
12:10 Подготовка макета к верстке: дизайн-система и SVG
17:26 Настройка VS Code и Claude Code
19:03 Промпты по шагам: роли, анализ, архитектура
21:28 Верстка по секциям и точные правки
25:46 Перенос на WordPress и запуск сайта
26:52 Главный нюанс: память между сессиями
27:54 Итоги и ссылки

Хостинг:
BEGET - https://skillmoney.ru/beget

Присоединяйтесь:
Яндекс дзен: https://dzen.ru/artsarychev
Телеграм канал: https://t.me/pofrilansu
Вконтакте: https://vk.ru/sarychevblog
YouTube: https://www.youtube.com/@artsarychev
Блог: https://skillmoney.ru/


#wordpress #ai #разработкасайтов