Сайт под клиента за вечер

Это связка, на которой я собираю клиентские сайты за вечер. Не за неделю, не за спринт, а реально за один заход. Stitch рисует структуру и экраны, Claude Code превращает их в Next.js, Vercel выкатывает живую ссылку. Три инструмента, один маршрут, никакого дизайнера в штате и никакой недели на вёрстку.

Главное тут не магия инструментов, а порядок. Большинство людей открывают редактор и начинают писать код с первого экрана. Через час у них половина лендинга, нет общей структуры, и каждое новое требование клиента ломает то, что уже сделано. Маршрут ниже убирает эту боль: сначала структура, потом код, потом деплой. Каждый шаг закрывает свой кусок, и ты не возвращаешься переделывать.

Ниже разберём маршрут от идеи до живой ссылки по шагам, дам мастер-промпт для сборки в Next.js и отдельный промпт для проверки перед релизом.

Что понадобится

Перед стартом собери три вещи, без них вечер растянется.

Доступ к Google Stitch. Это твой генератор структуры и экранов. Заходишь на https://stitch.withgoogle.com через любой Google-аккаунт, бесплатно. Здесь ты описываешь продукт и получаешь готовый поток вместо белого листа. На бесплатном тарифе дают до 350 генераций в месяц в Standard-режиме, для клиентского сайта этого с запасом.

Claude Code на машине. Это рабочая лошадь, которая превращает экраны в реальный Next.js проект, страница за страницей. Ставится одной командой в терминал:

# macOS / Linux
curl -fsSL https://claude.ai/install.sh | bash

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

Это нативный установщик, ему не нужны ни Node.js, ни npm, он сам обновляется. Дальше запускаешь командой claude в папке проекта и логинишься под своим аккаунтом Claude. Доки: https://code.claude.com/docs

Аккаунт Vercel для деплоя. Регистрируешься на https://vercel.com через GitHub, бесплатного тарифа Hobby хватает на клиентский сайт. Сюда подключаешь репозиторий и получаешь живую ссылку, которую можно сразу показать клиенту.

Как это сделать

1. Структура в Stitch

Начинаешь не с кода, а со структуры. Открываешь https://stitch.withgoogle.com, описываешь продукт клиента простыми словами: что это, для кого, какой результат должен получить посетитель. Дальше собираешь экраны и поток между ними. Готовые экраны Stitch отдаёт как HTML/CSS или экспортом в Figma, и эти экраны ты на следующем шаге скармливаешь Claude Code.

На выходе у тебя понятная структура, а не белый лист. Ты видишь, сколько страниц нужно, что на каждой из них, как человек движется от первого экрана к целевому действию. Это фундамент. Если он кривой, дальше всё поедет, поэтому не торопись и закрой этот шаг честно.

2. Код через Claude Code

Когда структура готова, заводишь проект. Создаёшь новый Next.js на App Router одной командой:

npx create-next-app@latest my-site

Команда задаст несколько вопросов, по умолчанию включены TypeScript, Tailwind, ESLint, App Router и Turbopack, можно просто соглашаться. Если хочешь без вопросов, добавь флаги:

npx create-next-app@latest my-site --app --yes

Дальше заходишь в папку и запускаешь Claude Code прямо в ней:

cd my-site
claude

Теперь отдаёшь экраны из Stitch и просишь собрать по ним страницы. Ключевой момент: не «сделай весь сайт сразу», а страница за страницей. Так ты контролируешь каждый кусок, ловишь ошибки рано и не получаешь свалку из которой потом не выберешься.

Сначала пусть покажет план файлов, и только потом начинает писать код. Ты смотришь план, понимаешь структуру проекта, даёшь ок, и дальше идёте по одной странице за раз. Готов экран, проверил, дал добро, поехали к следующему. Локально смотришь результат командой npm run dev и открываешь http://localhost:3000.

3. Деплой на Vercel

Сначала кладёшь проект в репозиторий на GitHub. Потом заходишь на https://vercel.com/new, жмёшь Import, выбираешь свой репозиторий. Vercel сам распознаёт Next.js и подставляет правильные настройки сборки, ничего трогать не надо, жмёшь Deploy и через минуту получаешь живую ссылку вида https://my-site.vercel.app.

Дальше итерируешь прямо на проде: каждый твой git push в репозиторий Vercel пересобирает автоматически, правки видны сразу, клиент смотрит на реальный сайт, а не на скриншоты. Это сильно ускоряет круг согласований, потому что обсуждать живую ссылку проще, чем описывать словами.

Перед тем как отдать ссылку клиенту, прогони проверку из бонусного промпта ниже. Деплой без проверки адаптива и мета-тегов это классический способ получить неловкий вопрос «а почему на телефоне всё разъехалось».

Промпт сборки в Next.js

Это мастер-промпт для второго шага. Он задаёт Claude Code рамки: App Router, аккуратная структура, адаптив, и главное, сборка страница за страницей с остановкой после каждой. Вставь сюда ссылки на экраны из Stitch или их описание и отправь.

Собери сайт на Next.js по этим экранам: <ссылки или описание>.

Требования:
1. App Router, аккуратная структура папок.
2. Адаптив, mobile-first.
3. Семантическая вёрстка, без лишних зависимостей.
4. Собирай страница за страницей, после каждой жди ок.

Сначала покажи план файлов, потом начинай.

Бонус: Чек перед деплоем

Этот промпт прогоняешь перед тем, как выкатить ссылку клиенту. Он проходит по проекту и собирает короткий список того, что чинить до релиза, по приоритету. Не идеальный сайт, а готовый к показу, без явных косяков на мобиле и битых ссылок.

Пройди по проекту перед деплоем.
Проверь адаптив, мета-теги, битые ссылки, скорость и доступность.
Выдай короткий список того, что чинить до релиза, по приоритету.

Где заходит, где осторожнее

Заходит:

Лендинги и сайты-визитки под клиента, когда нужно быстро. Это родная задача для связки: понятная структура, несколько страниц, чистый деплой.

MVP, чтобы проверить идею на живой ссылке. Когда важна скорость и сама гипотеза, а не вылизанный продакшн, этот маршрут даёт результат за вечер.

Осторожнее:

Сложную логику и интеграции всё равно дорабатывать руками. Автопилот хорош на вёрстке и структуре, но платёжки, сложные формы, нестандартные интеграции лучше доводить самому, иначе словишь баги, которые дороже ручной работы.

Контент готовь заранее. Генерация структуры это не контент. Если у тебя нет текстов, оффера, фото под страницы, ты упрёшься в пустые блоки и весь выигрыш по скорости съест возня с наполнением.

Чеклист перед стартом

Прогони эти четыре пункта, прежде чем считать сайт готовым к показу.

Структура собрана в Stitch. Ты видишь все страницы и поток между ними, а не отдельные куски.

План файлов показан до кода. Claude Code сначала показал структуру проекта, ты её принял, и только потом пошёл код.

Собираешь страница за страницей. Никакого «сделай всё сразу», каждый экран закрыт и проверен по отдельности.

Прогнал чек перед деплоем. Адаптив, мета-теги, битые ссылки, скорость, доступность проверены бонусным промптом.

Частые ошибки

Пишешь код раньше структуры. Самая дорогая ошибка. Без структуры из Stitch ты собираешь сайт вслепую, и любое новое требование клиента ломает уже сделанное. Сначала структура, всегда.

Нет готового контента под страницы. Ты быстро сгенерил каркас, а текстов и оффера нет. В итоге сидишь и придумываешь наполнение там, где должен был уже деплоить. Контент готовь до старта.

Деплой без проверки адаптива. Выкатил ссылку, клиент открыл на телефоне, всё разъехалось. Прогон чек-промпта закрывает этот риск за пару минут.

Сложную логику отдаёшь на автопилот. Платёжки, нестандартные интеграции, тяжёлые формы на полном автопилоте дают баги, которые потом дольше чинить, чем сделать руками сразу. Отделяй простое от сложного.