Лендинг за день через Claude Code: пошаговый разбор от ТЗ до деплоя

В апреле 2026 я делал лендинг для одного из клиентских проектов по такой формуле: бриф в Notion (15 минут) → Claude Code scaffolding (40 минут) → копи в моём voice (60 минут) → дизайн-доводка через v0 (30 минут) → деплой Vercel + DNS (15 минут). Всего — 2 часа 40 минут. Стартовая ставка подрядчика по этому же ТЗ — 180 000 ₽ и 4 недели срока.

Это не пост про «AI заменяет разработчиков». Это про конкретную модель работы маркетолога в 2026, в которой лендинг под кампанию делается им же — потому что владение лендингом часть владения воронкой. И статья ниже — пошаговый разбор того workflow, по полочкам, без «секретных промптов».

Лендинг за день — это не «скорость печатания». Это разница между «я думаю про конверсию» и «я объясняю про конверсию подрядчику, который думает про брейкпоинты».

Что такое Claude Code и зачем он маркетологу

Claude Code — это CLI-инструмент от Anthropic для разработки в терминале с AI-агентом. Он умеет читать репозиторий, писать код, запускать тесты, делать git-коммиты, ходить по документации. Это не v0 (который генерит компонент) и не Cursor (который автозаполняет). Это автономный агент, которому можно сказать «сделай лендинг с разделом hero, формой контактов и тремя кейсами» — и он сделает, спрашивая уточнения только по архитектурным решениям.

Зачем маркетологу — три причины:

• Скорость A/B-тестов: правка копи / структуры / CTA на лендинге — 5 минут вместо двух дней через подрядчика
• Контроль над контекстом: маркетолог понимает воронку, разработчик — нет. Лендинг под брендом «Х» с поясняющим UX делает только тот, кто живёт в этой воронке
• Стоимость: $20 в месяц подписка Claude Code Max + $0 на разработчика = ~70K ₽ экономии на одном лендинге

Стек, который у меня на этом лендинге

• Next.js 16 — фреймворк (тот же, на котором сделан и сайт dipustovalov.ru)
• Tailwind CSS v4 — стилизация через utility-классы, без отдельных CSS-файлов
• shadcn/ui — готовые компоненты для типичных UI-блоков (формы, карточки, tabs)
• Vercel — деплой через CLI, автодомен, free tier хватает на 95% задач
• Reg.ru / Cloudflare — для DNS

Этот стек — не «золотой стандарт». Это набор, на котором я перестал думать о технических вопросах и могу сосредоточиться на конверсии. Альтернативы (Astro, Remix, Svelte) тоже работают, но требуют большей настройки.

Шаг 1. Бриф в Notion (15 минут)

Бриф — половина дела. Перед открытием Claude Code я заполняю шаблон в Notion с такими полями:

• Цель лендинга. Одно предложение: «зарегистрировать на бесплатный пробный урок» или «оставить заявку на 30-минутный созвон»
• ICP. Кто этот лендинг увидит. Возраст, контекст, уровень осведомлённости о продукте
• 3 главные выгоды. С точки зрения покупателя, не продавца
• 3 главных возражения. Что мешает сказать «да»
• Структура секций. Hero → Social proof → Benefits → How it works → Testimonials → CTA → FAQ
• CTA-кнопка. Точная формулировка действия

Этот бриф я отдаю Claude как первый промпт — целиком, без редактуры. Время на заполнение — 15 минут, если ICP уже понятен по предыдущим discovery-коллам.

Шаг 2. Scaffolding через Claude Code (40 минут)

Открываю терминал в пустой папке и пишу:

claude

> Сделай новый Next.js 16 проект с Tailwind v4 и shadcn/ui. Структура страницы — лендинг для [продукт]. Бриф ниже:
[вставляю весь бриф из Notion]

Используй:
- Next.js App Router (не Pages)
- Tailwind v4 с @theme конфигом, не tailwind.config.js
- shadcn/ui для форм и кнопок
- Inter font через next/font
- TypeScript strict
- Mobile-first responsive

Структура: один файл app/page.tsx, секции через компоненты в components/. Никаких backend-routes пока.

Claude Code в течение 30–40 минут пишет код, ставит зависимости, запускает npm run dev, проверяет что собирается. Я в это время — открываю превью на localhost:3000 и смотрю, как растёт лендинг.

Где Claude обычно тупит на этом этапе: версии пакетов (выбирает старые), и иногда хочет создать ненужные API-routes. Решение: я в брифе явно говорю «без backend» и «использовать только последние версии».

Шаг 3. Копи в свой voice (60 минут)

Это шаг, где отличается «ок-лендинг» от «лендинга, который конвертит». Claude по умолчанию пишет копи скучно — общими словами, с штампами «инновационные решения» и «эффективный подход». Чтобы получить копи в голосе бренда, я загружаю в контекст всю папку /content/voice/, где хранятся 11 файлов с координатами voice, риторическими пилларами и списком AI-tells.

Промпт второго раунда:

Контекст: [подгружаю всю /content/voice/]

Сейчас перепиши все texts на лендинге согласно этому voice. Запреты:
- Никаких "является", "представляет собой", "обладает"
- Никаких "в современном мире", "не секрет, что", "стоит отметить"
- Никаких "эффективный", "комплексный", "инновационный"
- Никаких "AI меняет правила игры"

Обязательно:
- Минимум одна антитеза в hero ("не X, а Y")
- Минимум 2 цифры на 100 слов
- Минимум один scare-quote на штамп индустрии
- Минимум одно уравнение или time/cost contrast
- Insider-термины — без перевода

Каждый раздел — переписать. Покажи изменения diff'ом.

Один проход обычно недостаточен — Claude всё равно протаскивает 2–3 tells. Делаю второй проход с конкретными указаниями: «вот тут «является» — замени на тире». На этом этапе я часто полностью переписываю hero руками, потому что hero — лицо лендинга, на нём не бывает «нормально».

Шаг 4. Дизайн-доводка через v0 или Figma AI (30 минут)

Claude Code хорошо строит структуру, но плохо чувствует «вайб». Если стандартного shadcn/ui-стиля недостаточно — я открываю v0.dev, прошу пересобрать одну-две секции в более авангардном дизайне, копирую сгенерированный код обратно в проект.

Что я обычно прошу v0 переделать:

• Hero с более сложной анимацией (parallax, gradient mesh, animated text)
• Pricing cards с премиум-эффектом
• Testimonials с асимметричной сеткой вместо обычной 3-колонной

v0 при копировании в проект иногда ломает layout, потому что использует свои Tailwind-конвенции. Claude Code чинит за минуту: «исправь конфликты в этом файле, сохранив дизайн v0 и интегрировав в общий стиль остальных секций».

Шаг 5. Деплой на Vercel + DNS (15 минут)

Финальный шаг — самый быстрый, если стек уже стандартный.

# В терминале:
npx vercel
# (отвечаю на вопросы один раз — link to project, framework, etc)

npx vercel --prod
# (получаю production URL за 60 секунд)

# В Reg.ru / Cloudflare:
# Добавляю CNAME запись на cname.vercel-dns.com
# В Vercel дашборде — Settings → Domains → Add custom domain

Через 5–10 минут после CNAME-настройки лендинг доступен на собственном домене с автоматическим HTTPS. Никаких отдельных серверов, отдельных подрядчиков, отдельных счетов на хостинг.

Что я перестал делать после перехода на эту модель

• Заказывать лендинг у студии. На 90% задач — overkill. Студия нужна, когда требуется сложная back-end интеграция или CRM-связка, а не для one-pager под кампанию.
• Использовать Tilda и аналоги. Tilda хороша для быстрого MVP, но костыли с кастомным кодом + дороже хостинг + меньше control над SEO.
• Согласовывать каждую правку с разработчиком. Сейчас правка hero-копи на проде — 10 минут. Раньше через подрядчика — 2 дня минимум.
• Бояться технических деталей. SEO, schema.org, sitemap, IndexNow — Claude Code разруливает. Маркетолог должен знать, что эти вещи существуют, но не должен сам их писать вручную.

Что нужно знать как маркетологу, чтобы это работало

Минимальный технический набор, без которого Claude Code превращается в чёрный ящик:

• Базовое HTML/CSS. Понимать, что такое div, class, padding, flex, grid. Без этого не сможешь править генерированный код.
• Концепции React. Что такое компонент, props, state. Не нужно их писать, нужно их распознавать.
• Git basics. Commit, push, branch. Чтобы не потерять работу и иметь возможность откатиться.
• Терминал. Базовые команды: cd, ls, npm, vercel.

Это объём, который освоит любой маркетолог за 2 недели вечеров. Не требует курсов «JavaScript для начинающих», требует одной книжки по Tailwind и одного weekend'а с туториалом по Next.js.

Подробнее в смежных статьях

Если интересно, как это всё встроено в общий workflow маркетолога — читай статью про маркетинговую суверенность. Если интересно, как Claude Code сочетается с другими AI-инструментами в стеке — там же сравнение AI-инструментов 2026. И если надо разобраться, как промпт-шаблонировать всю эту работу — у меня есть 7 готовых промптов для маркетолога.

Если ты сейчас платишь подрядчику 100K+ ₽ за лендинг и ждёшь его 3+ недели — ты можешь делать это сам быстрее и дешевле. Бесплатное 30-минутное discovery — покажу, как стартовать на твоей задаче в первой же неделе.