Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое практическое руководство по созданию коммерческого веб-сайта с нуля при помощи Claude Code (от Anthropic) без навыков классического программирования и работы в графических редакторах. Разбирается полный цикл: проведение AI-интервью для сбора брифа, генерация дизайн-системы и 3D-ассетов, поблочная вёрстка адаптивного лендинга, интеграция анимаций с прелоадером, глубокий аудит безопасности и legal-соответствия, а также автоматический деплой через коннектор Netlify.
👤 Кому будет полезно: Вайбкодерам, начинающим веб-разработчикам, дизайнерам, маркетологам и фаундерам, которые хотят быстро прототипировать или собирать полноценные сайты под ключ с помощью связки Claude Code + ChatGPT + Netlify.
✨ Что получите: Готовый алгоритм и набор системных промптов для развертывания проекта, генерации чистого копирайтинга (без AI-галлюцинаций и штампов), сборки интерфейса по референсам и деплоя готового продакшен-сайта в публичный интернет за несколько часов.
1. Подготовка окружения и запуск проекта в Claude Code
Контекст: Перед началом работы необходимо правильно инициализировать рабочее пространство Claude Code и подготовить файловую структуру. Модель Claude Code лучше всего справляется с масштабными задачами, когда проект изолирован в отдельной директории, а агент получает доступ к локальному воркспейсу. В качестве базовой модели рекомендуется использовать Claude 3.5 Sonnet или новейшие версии линейки Opus в режиме с максимальной мощностью вычислений.
Тайминг: , ,
Выгода: Быстрый старт за 5 минут без необходимости ручной настройки сборщиков, node_modules или серверов.
Как применить:
Шаг 1: Создание файловой структуры проекта — Создайте на локальном диске базовую папку проекта (например, Claude/stoma). Внутри подготовьте подпапку references для хранения графических материалов, шрифтов и палитр.
Шаг 2: Инициализация рабочего пространства — Откройте Claude Code, перейдите в интерфейс работы с кодом и откройте созданную директорию через опцию Open folder. Подтвердите привязку рабочей области (Connect Workspace).
Шаг 3: Конфигурация модели — Выберите самую актуальную и мощную модель (Claude 3.5 / Opus) и выставьте расширенный режим рассуждений (Extra mode) для минимизации галлюцинаций в структуре файлов.
Результат: Инициализированный локальный проект в Claude Code, готовый к чтению локальных файлов и генерации кода.
2. Автоматический AI-брифинг и сбор данных о бизнесе
Контекст: Качественный редизайн или разработка сайта невозможны без детального клиентского брифа. Если реальный клиент недоступен (например, при разработке портфолио или инициативном редизайне действующего бизнеса), Claude Code может сыграть роль заказчика. Нейросеть сканирует существующий домен, извлекает актуальные факты (услуги, прайс-лист, адреса, юридические реквизиты) и заполняет структуру брифа, строго отсекая галлюцинации.
Тайминг: , ,
Выгода: Экономия от 3 до 5 часов на ручном анализе контента сайта и составлении ТЗ.
Как применить:
Шаг 1: Подготовка исходных данных — Скопируйте ссылку на целевой сайт и прикрепите шаблон профессионального брифа в проект.
Шаг 2: Запуск роли заказчика — Запустите диалог с Claude Code, скормив ссылку и регламент заполнения брифа.
Представь, что ты клиент — владелец бизнеса/клиники, который пришел ко мне на редизайн этого сайта: [ВСТАВИТЬ_URL_САЙТА].Заполни прикрепленный бриф так, будто я провожу с тобой глубинное интервью.Все данные должны быть строго валидными и основанными на содержимом сайта.Если какой-то информации на сайте нет — не выдумывай ее. В таких случаях либо укажи, что информация отсутствует и мы не будем ее использовать, либо сошлись на стандартную практику прямых конкурентов.Сохрани результат в файл brief.md в корне проекта.
Шаг 3: Фиксация артефакта — Убедитесь, что сгенерированный файл brief.md содержит источники каждого ответа, и перенесите его в проектную папку как единственный источник правды (Single Source of Truth).
Результат: Исчерпывающий бриф с реальными бизнес-показателями, структурой услуг и контактами, зафиксированный в markdown-файле проекта.
3. Сбор мудборда и узкоспециализированных референсов
Контекст: Частая ошибка при вайбкодинге — отправка нейросети общего скриншота красивого сайта с просьбой «сделай так же». AI не способен абстрактно синтезировать весь стиль сразу. Для предсказуемого и эстетичного результата необходимо декомпозировать визуальный язык и подбирать отдельные референсы под каждую микро-задачу: отдельно палитру, отдельно типографику, отдельно компоновку первого экрана, структуру карточек и поведение меню.
Тайминг: , , ,
Выгода: 100% совпадение визуальных ожиданий с результатом в коде, отсутствие типового «шаблонного» Bootstrap-вида.
Как применить:
Шаг 1: Поиск в Pinterest / Dribbble — Соберите 10–15 скриншотов сайтов вашей тематики и разложите их по категориям:
Референс цветовой палитры (например, светлые бирюзовые и акцентные оранжевые тона)
Референс композиции Hero-секции
Референс таблицы прайс-листа
Референс блока команды / карточек врачей
Референс аккордеона FAQ и стилистики футера
Шаг 2: Структурирование в папке references/ — Сохраните скриншоты в папку проекта с понятными названиями (hero-ref.png, table-ref.png, faq-ref.png).
Шаг 3: Изолированная подача — При генерации каждого отдельного блока прикрепляйте ТОЛЬКО тот скриншот, который относится к текущей задаче, явно указывая, какие именно элементы из него заимствовать (только сетку, только скругления или только отступы).
Результат: Папка references/ с точечными визуальными ориентирами, готовыми для скорма мультимодальному агенту.
4. Определение структуры лендинга и маркетинговый анализ конкурентов
Контекст: Эффективный конвертер должен содержать оптимальное количество смысловых блоков (обычно 5–8) и базироваться на уникальных торговых предложениях (УТП), выгодно отличающихся от конкурентов. Для этого в отдельных изолированных чатах формируется скелет лендинга и выжимка сильных сторон конкурентов.
Тайминг: , ,
Выгода: Логически выверенная маркетинговая воронка страницы без смысловых дублей и перегруза.
Как применить:
Шаг 1: Разработка структуры страницы — Создайте новый чат и передайте команду на формирование структуры лендинга на основе брифа.
На основе файла brief.md в папке проекта разработай структуру одностраничного сайта (лендинга) на 5–7 (максимум 8) блоков.Обязательно включи: Hero-секцию, услуги с ценами, блок специфики (например, лечение по ОМС/ДМС), врачей/команду, этапы приема (roadmap), FAQ, контакты и футер.Выдай только структуру и порядок секций без финального текста, сохрани в файл structure.md.
Шаг 2: Анализ конкурентов и формирование УТП — Во втором чате запустите параллельный анализ прямых конкурентов.
Проанализируй список конкурентов из brief.md.Проведи экспресс-маркетинговый анализ их позиционирования и сформируй список из 3–5 ключевых УТП, которые выгодно выделят наш проект.Сохрани результат в файл usp_analysis.md.
Результат: Файлы structure.md и usp_analysis.md, готовые для передачи копирайтеру.
5. Генерация естественного копирайтинга без «AI-стиля» (Удаление AI-штампов)
Контекст: Тексты, сгенерированные стандартными моделями, перенасыщены канцеляризмами, абстракциями («мы динамично развивающаяся клиника», «инновационный подход к каждому») и неестественными оборотами. Пользователи мгновенно считывают шаблонный AI-текст, что резко снижает доверие к бизнесу и конверсию. Для генерации конвертящего текста необходимо активировать специализированные навыки копирайтинга (Human-like Copywriting / Главред) и подавить характерные стоп-слова.
Тайминг: ,
Выгода: Человечный, живой текст без «воды», повышающий конверсию сайта в заявку на 20–40%.
Интегрируй в проект правила и скиллы написания текстов без "птичьего языка", AI-клише и шаблонных штампов (запрещены фразы: "погрузитесь в мир", "является ключевым фактором", "широкий спектр услуг", "динамично развивающийся", "инновационный подход").Пиши в информационном стиле (по принципам Ильяхова): факты, цифры, польза для клиента, короткие предложения, активные глаголы.
Шаг 2: Написание текстов под структуру — Запустите чат генерации контента для всех блоков сразу.
Открой файлы structure.md, usp_analysis.md и brief.md.Напиши полный продающий текст для каждого блока нашего лендинга, строго соблюдая заданные правила копирайтинга без AI-штампов.Для каждого блока пропиши: Заголовок H2, подзаголовок, основной текст, подписи к кнопкам (CTA) и текст дисклеймеров.Сохрани финальный контент в landing_copy.md.
Результат: Готовый смысловой контент лендинга в файле landing_copy.md, проверенный на фактологию и очищенный от клише.
6. Формирование дизайн-системы: UI Kit, шрифтовые пары и цветовая карта
Контекст: Сайт выглядит профессионально только при соблюдении строгой консистентности: фиксированная палитра (основной, фоновый, акцентный цвета, нейтральные оттенки), проверенная шрифтовая пара с полной поддержкой кириллицы и единые радиусы скруглений.
Тайминг: ,
Выгода: Единый визуальный стиль сайта; исключение багов с «слетающими» кириллическими символами.
На основе прикрепленного изображения-референса сформируй цветовую карту для сайта:- Primary Color (основной акцент)- Secondary Color (дополнительный)- Background Dark / Light- Surface / Card Background- Text Primary / Secondary- Accent (для кнопок и бейджей)Оформи палитру в виде CSS-переменных (:root).
Шаг 2: Подбор шрифтовых пар с поддержкой кириллицы — Запросите 5 вариантов высокотехнологичных гротесков из Google Fonts.
Подбери 5 шрифтовых пар (Heading + Body) в стилистике современного Hi-Tech гротеска (Sans-Serif).Критически важно: оба шрифта должны иметь 100% поддержку кириллицы и быть доступны в Google Fonts или FontsPro.Укажи готовые строки подключения <link href="https://fonts.googleapis.com/...">.
Шаг 3: Фиксация в design_system.md — Выберите финальную пару (например, Manrope для заголовков + Inter для текста) и зафиксируйте в проекте.
Результат: Файл со спецификацией дизайн-системы, готовый для сквозного внедрения в вёрстку.
7. Генерация 3D-ассетов и графики в ChatGPT / Midjourney
Контекст: Для премиального внешнего вида медицинского или коммерческого лендинга требуются авторские 3D-иллюстрации в единой стилистике (полупрозрачное голубое стекло, градиенты, чистый белый/прозрачный фон). Стоковые фото часто выглядят дёшево и разношёрстно.
Тайминг: , ,
Выгода: Бесплатное получение уникальных кастомных 3D-иллюстраций под размер блоков без привлечения 3D-моделлера.
Как применить:
Шаг 1: Подготовка визуального промпта по референсам — Загрузите в ChatGPT / Midjourney 1-2 картинки-референса стиля и опишите задачу голосом или текстом.
3D render of a stylized tooth made of iridescent glowing frosted cyan and blue glass, smooth glossy highlights, floating in zero gravity, minimalist modern medical aesthetic, isolated on a pure clean white background, studio soft lighting, 8k resolution, octane render style --no dark background, text, realistic gums
Шаг 2: Генерация вспомогательных иконок в том же стиле — Сгенерируйте сопутствующие значки (например, медицинскую чашу со змеей или щит) в абсолютно идентичной стилистике «blue glass».
Шаг 3: Сохранение ассетов — Поместите изображения в assets/ или images/ проекта, оптимизировав их в PNG/WebP без фона.
Результат: Набор стилеобразующих 3D-рендеров высокого разрешения, готовых к интеграции в Hero и промо-секции.
8. Модульная сборка лендинга в landing.html (Screen-by-Screen)
Контекст: Попытка сгенерировать весь многостраничный сайт или 8-блочный лендинг одним промптом всегда приводит к каше в вёрстке, потере стилей и багам адаптивности. Самая надежная методология — модульная поэтапная сборка. Все секции пишутся в один файл landing.html по очереди. Каждый блок собирается в отдельной сессии чата со своим референсом.
Тайминг: , , , ,
Выгода: Полный контроль над архитектурой DOM-дерева, чистота CSS-кода и отсутствие контекстных сбоев у нейросети.
Как применить:
Шаг 1: Сборка первого экрана (Hero Section + Header) — Загрузите референс композиции, логотип, 3D-зуб и отправьте промпт.
Создай файл landing.html. Сверстай первый экран (Header + Hero Section).Используй:- Текст из landing_copy.md (блок Hero)- Цветовую палитру и шрифты из design_system.md- Изображение assets/tooth_3d.png слеваВ шапке размести: компактный логотип, адрес, часы работы, выпадающий список телефонов и кнопку "Записаться на прием".Разметку делай семантичной, используй адаптивный Flexbox/Grid и чистый CSS прямо в теге <style> (или подключи style.css).
Шаг 2: Добавление таблицы услуг и цен — Откройте чат для второго блока и прикрепите референс таблицы.
В существующий файл landing.html добавь блок №2: "Услуги и цены".Оформи его в виде интерактивной таблицы с крупными табами категорий (как квадратные кнопки в хедере).Строки таблицы должны подсвечиваться при наведении (hover-эффект).Цены и формулировки возьми из landing_copy.md. Не создавай новый файл, аккуратно интегрируй секцию в landing.html.
Шаг 3: Секция ОМС и анимированные карточки — Добавьте блок условий страхования с круговой анимацией и 3D-иконкой чаши со змеей.
Шаг 4: Карточки врачей — Сверстайте секцию «Наши врачи» на плотных карточках с монохромным/однотонным фоном без лишних громоздких слайдеров.
Шаг 5: Дорожная карта приема (Roadmap) — Сверстайте пошаговый процесс (1. Запись → 2. Осмотр → 3. План лечения → 4. Оплата) с центральным визуальным элементом.
Шаг 6: Интерактивный FAQ со Scroll-Lock эффектом — Сверстайте блок вопросов-ответов: слева фиксированное фото кабинета (position: sticky), справа скроллящийся аккордеон, где открывается строго один пункт одновременно.
Шаг 7: Форма заявки и футер — Сверстайте блок контактов с формой ввода телефона и футер со стеклянным размытием (glassmorphism), документами и реквизитами.
Результат: Цельный, адаптивный, полностью свёрстанный файл landing.html со всеми 8 блоками.
9. Полировка интерфейса, микро-анимации и Preloader
Контекст: Сайт оживает благодаря микро-взаимодействиям и плавной загрузке. Прелоадер необходим не только для красоты, но и для предотвращения layout shift (дергания верстки) при медленном соединении: страница скрыта, пока не загрузятся тяжелые 3D-ассеты и шрифты.
Тайминг: ,
Выгода: Профессиональный вид веб-приложения уровня Awwwards; бесшовный UX для пользователей с медленным интернетом.
Как применить:
Шаг 1: Создание технического прелоадера — Запросите добавление прелоадера с реальным слушателем загрузки страницы (window.addEventListener('load', ...)).
Разработай и внедри в landing.html стильный прелоадер в медицинской/hi-tech стилистике нашего сайта.Прелоадер не должен исчезать по таймеру — он обязан оставаться видимым ровно до тех пор, пока полностью не загрузятся все DOM-элементы, шрифты и изображения (событие window.onload).После загрузки сделай плавное исчезновение (fade-out transition: opacity 0.5s ease).
Шаг 2: Добавление анимации заголовков и hover-эффектов — Добавьте плавное появление блоков при скролле (Intersection Observer API) и микро-анимацию набора текста/градиентного перелива для главного заголовка H1.
Результат: Плавный сайт с интерактивным прелоадером и микро-анимациями без внешних тяжелых библиотек.
10. Комплексная SEO-оптимизация и мета-разметка
Контекст: Даже если сайт изначально верстается для портфолио, реальный клиентский проект требует правильного поискового фундамента. Необходимо прописать Open Graph теги для красивого превью в соцсетях/мессенджерах, семантические теги h1-h6, фавикон, robots.txt и sitemap.xml.
Тайминг: ,
Выгода: Сайт корректно индексируется Яндексом и Google и привлекательно отображается при пересылке в Telegram/WhatsApp.
Как применить:
Шаг 1: Мета-оптимизация <head> — Запустите отдельную команду для внедрения SEO-тегов.
Проведи полную внутреннюю SEO-оптимизацию страницы landing.html:1. Пропиши уникальный Title, Description и Keywords с ключевыми словами клиники.2. Добавь Open Graph теги (og:title, og:description, og:image, og:url, og:type="website").3. Добавь Twitter Card теги.4. Пропиши путь к favicon (.ico и .svg) и apple-touch-icon.5. Проверь иерархию заголовков: строго один <h1>, секции в <h2>, подпункты в <h3>.6. Добавь alt-атрибуты ко всем тегам <img>.
Шаг 2: Генерация сервисных файлов — Создайте файлы robots.txt и sitemap.xml в корне проекта.
Результат: Полностью подготовленный к поисковой индексации и шарингу сайт.
11. Безопасность и юридическая чистота (Cookie, 152-ФЗ, Оферта)
Контекст: Сбор заявок и хранение данных пользователей жестко регулируются законодательством (в РФ — ФЗ-152 «О персональных данных»). Отсутствие чекбокса согласия на обработку данных, политики конфиденциальности, публичной оферты (при наличии цен) или баннера Cookie влечет штрафы от сотен тысяч до миллионов рублей. Разработчик обязан предусмотреть юридический слой прямо в коде.
Тайминг: , ,
Выгода: Защита от штрафов Роскомнадзора и претензий юристов клиента (экономия от 50 000 руб. на аудите).
Как применить:
Шаг 1: Добавление согласий под формами — Под каждой формой ввода (телефон/имя) добавьте активный/обязательный чекбокс и дисклеймер со ссылкой на политику конфиденциальности.
Шаг 2: Внедрение Cookie-баннера — Запросите генерацию всплывающего уведомления об использовании файлов Cookie с кнопкой «Принять» и сохранением состояния в localStorage.
Добавь в landing.html фиксированный Cookie-баннер внизу экрана.Текст: "Мы используем файлы cookie для улучшения работы сайта. Продолжая использовать сайт, вы соглашаетесь с Политикой конфиденциальности."Кнопка: "Согласен".При клике на кнопку баннер плавно скрывается, а в localStorage записывается флаг cookie_accepted = true, чтобы баннер больше не всплывал при повторных визитах.
Шаг 3: Страницы Политики и Оферты — Добавьте в футер ссылки на privacy.html и offer.html (публичная оферта обязательна при наличии прайс-листа на сайте).
Результат: Юридически защищенный сайт, соответствующий требованиям закона о персональных данных.
12. Автоматический деплой на Netlify через встроенный MCP-коннектор
Контекст: Для публикации сайта в интернет не требуется вручную настраивать FTP, SSH или арендовать сложные VDS. В Claude Code встроен механизм Connectors (MCP), позволяющий авторизоваться в хостинг-провайдере (Netlify) через OAuth и выкатывать билд одной командой прямо из терминала/чата.
⚠️ Юридическое примечание по хостингу: Netlify использует зарубежные серверы (США). Это отлично подходит для студенческих проектов, демо и портфолио без сбора ПДн. Если вы делаете боевой сайт для клиента в РФ, собирающий персональные данные граждан РФ через формы, разворачивайте его на аккредитованном российском хостинге (Reg.ru, Beget, TimeWeb) для соблюдения закона о локализации баз данных.
Тайминг: , ,
Выгода: Мгновенный деплой сайта в сеть с бесплатным SSL-сертификатом (HTTPS) за 30 секунд.
Как применить:
Шаг 1: Подключение коннектора Netlify — В настройках Claude Code перейдите во вкладку Connectors → Discover → найдите Netlify → нажмите Connect и пройдите стандартную OAuth-авторизацию (через Google или GitHub).
Шаг 2: Сжатие ассетов — Перед выкаткой оптимизируйте картинки в проекте (конвертируйте в WebP/сжатый PNG) для быстрой загрузки.
Шаг 3: Запуск деплоя промптом — Напишите агенту команду на выкатку.
Сделай деплой текущего проекта на хостинг Netlify через подключенный коннектор.Загрузи все файлы проекта (landing.html, assets, robots.txt, sitemap.xml).После успешной публикации пришли мне прямую публичную ссылку на развернутый сайт.
Шаг 4: Проверка продакшена — Перейдите по полученному URL, протестируйте адаптивность с мобильного телефона и работу всех интерактивных элементов.
Результат: Работающий веб-сайт с публичным URL и HTTPS, готовый к демонстрации клиенту и добавлению в портфолио.
FAQ
В: Можно ли собрать такой сайт в Claude Code без платной подписки? О: Для полноценной работы с воркспейсом, контекстом файлов и коннекторами требуется платная подписка (Claude Pro/Plus). На бесплатном тарифе лимиты контекста быстро исчерпаются уже на этапе составления детального брифа (который может занять до 18-20% контекстного окна).
В: Почему нельзя сгенерировать весь HTML/CSS лендинга за один запрос? О: При генерации всей страницы разом нейросеть начинает обобщать стили, «галлюцинировать» верстку, терять адаптивность и выдавать примитивный шаблонный дизайн. Пошаговая сборка (Screen-by-Screen) с отдельным референсом под каждый блок гарантирует контроль качества каждого пикселя.
В: Зачем нужны специализированные навыки копирайтинга в Claude? О: Без явных ограничений LLM пишет неестественным языком с обилием клише («инновационный сервис», «индивидуальный подход к каждому»). Это отталкивает пользователей. Системный промпт в стиле Главреда заставляет модель выдавать конкретные факты, сроки, цифры и понятные выгоды.
В: Безопасно ли использовать Netlify для клиентских проектов в РФ? О: Для учебных проектов и портфолио — абсолютно безопасно. Однако для коммерческих сайтов российских компаний, собирающих личные данные (имена, телефоны) через формы заявки, закон РФ требует хранить базы данных на серверах внутри страны. В таком случае файлы сайта нужно выгружать на российский хостинг (например, Reg.ru, TimeWeb или Beget).
В: Как заставить Claude Code использовать конкретный шрифт? О: Необходимо явно предоставить ему ссылку подключения шрифта из Google Fonts с поддержкой кириллицы (Cyrillic subset) и прописать в CSS-переменных :root { --font-heading: 'ВашШрифт', sans-serif; }.
В: Что делать, если фото сгенерировались с темным или грязным фоном? О: Добавьте в промпт для генератора изображений жесткие отрицательные подсказки: --no dark background, complex background и укажите isolated on clean white background. Если фон остался, используйте AI-инструменты для удаления фона перед добавлением в папку assets/.
В: Как редактировать отдельные блоки после того, как весь лендинг собран? О: Сделайте скриншот проблемного блока, вернитесь в чат Claude Code, прикрепите изображение и голосом или текстом опишите точечные правки (например: «Убери третий абзац, сделай фон плашки серым, уменьши высоту блока на 20px»). Агент точечно обновит нужный фрагмент в landing.html.
Ресурсы и ссылки
Claude Code (Anthropic) — AI-агент и среда для генерации и редактирования кода — claude.ai
ChatGPT / DALL-E — Нейросеть для генерации 3D-иллюстраций и ассетов — chatgpt.com
Pinterest — Платформа для поиска дизайн-референсов, сеток и мудбордов — pinterest.com
Google Fonts — Бесплатная библиотека веб-шрифтов с поддержкой кириллицы — fonts.google.com
FontsPro — Каталог шрифтов для подбора веб-гарнитур — fontspro.su
Reg.ru — Российский хостинг-провайдер для локального размещения коммерческих сайтов — reg.ru
Конспект создан на основе видео «Claude Code: Полный курс по созданию сайтов с нуля» канала автора. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=D3UuP7CyOMg
