Как сделать сайт с Claude Code за выходные: порядок шагов для непрограммиста

Сайт с Claude Code за выходные собрать реально, если вести его по шагам: идея, каркас, стек, правила для агента, микро-ТЗ, сборка, публикация. На каждом шаге у вас один небольшой файл с инструкцией. Claude читает его и делает одну понятную вещь. Так он не додумывает за вас и не разваливает проект на третьем часу.

Речь про простой сайт: лендинг эксперта, страница под консультацию, визитка с формой заявки. Интернет-магазин с оплатой и личными кабинетами в выходные не влезет, и это нормально. Для первого раза лендинг ровно то, что нужно.

Что реально получится за выходные

Рабочий сайт на своём адресе с текстами, формой и нормальным видом на телефоне. Живой: его можно показать клиентам, и он уже приносит заявки.

Чего ждать от первого раза:

• Часть времени уйдёт на то, чтобы разобраться, как всё устроено. Это не потеря, в следующий раз пойдёт быстрее.
• Claude где-то ошибётся. Это штатная ситуация, ниже разберём, где и как ловить.
• Главная работа — решения: для кого сайт, что человек должен сделать на странице, какие тексты. Агент этого за вас не решит.

Если в субботу утром у вас нет ответа на вопрос «зачем этот сайт», сборка не поможет. Поэтому первый шаг без кода.

В каком порядке делать сайт: семь шагов

Шаг	Что делаете	Что получаете на выходе
1. Идея и интервью	Отвечаете на вопросы про сайт: кто клиент, что предлагаете, какое одно действие нужно	Короткое описание проекта на страницу
2. Каркас	Решаете, какие блоки будут на странице и в каком порядке	Схема страницы текстом
3. Стек	Выбираете, на чём собирать	Список технологий и объяснение, зачем они
4. Правила для агента	Пишете CLAUDE.md	Файл, который Claude читает в начале каждой работы
5. Микро-ТЗ	Режете сайт на маленькие задачи	Список задач на один блок каждая
6. Сборка	Даёте Claude задачи по одной и проверяете результат	Работающий сайт у вас на компьютере
7. Публикация	Выкладываете сайт в интернет	Адрес, по которому его открывают другие

Теперь по каждому шагу.

Шаг 1. Идея и интервью

Откройте Claude Code и попросите сначала задать вам вопросы. Пример промпта:

Я хочу сделать сайт-лендинг под свою консультацию. Пока ничего не делай и код не пиши.
Задай мне вопросы по одному: кто мой клиент, с какой проблемой он приходит,
что я предлагаю, чем я отличаюсь от других, какое одно действие должен сделать
посетитель на странице. Когда ответов хватит, собери описание проекта на полстраницы.
…

Вопросы по одному важны. Когда Claude вываливает двадцать вопросов разом, отвечаете вы поверхностно. Сохраните итоговое описание в файл idea.md в папке проекта.

Шаг 2. Каркас

Каркас это не дизайн. Это список блоков сверху вниз: первый экран с обещанием, для кого это, с чем помогаю, как проходит работа, обо мне, отзывы, форма заявки. Попросите Claude предложить каркас по idea.md, потом вычеркните лишнее. Для лендинга эксперта хватает пяти-семи блоков. Каждый лишний блок это текст, который придётся писать, и место, где человек потеряет нить.

Шаг 3. Стек

Стек это набор технологий, на которых держится сайт. Новичку выбирать из десятка вариантов бессмысленно: вы не сможете оценить разницу. Скажите Claude прямо: «Я не программист, сайт простой, один лендинг с формой. Выбери самый простой стек, объясни выбор в трёх предложениях и скажи, что мне придётся делать руками». Чем проще набор, тем меньше мест, где что-то ломается.

Шаг 4. Правила для агента: CLAUDE.md

Это самый недооценённый шаг. Claude Code в начале работы читает файл CLAUDE.md в папке проекта. Если файла нет, каждый раз он начинает с нуля и угадывает, что вы имели в виду.

В файл попадает то, что должно держаться всегда:

• что за проект и для кого (две-три строки из idea.md);
• какой стек выбран, и не менять его без вопроса;
• как называть файлы и где что лежит;
• чего не делать: не добавлять блоки, которых нет в каркасе, не менять тексты без разрешения;
• правило после каждой задачи коротко писать, что сделано и как проверить.

Файл короткий, до страницы. Длинный Claude читает хуже, а вам его труднее поддерживать.

Шаг 5. Микро-ТЗ

ТЗ на весь сайт целиком это ошибка новичка. «Сделай сайт по каркасу» даёт кашу. Режьте на задачи размером с один блок: «первый экран: заголовок, подзаголовок, кнопка», «блок “Как проходит работа”: четыре шага в ряд, на телефоне друг под другом», «форма: имя, телефон, кнопка, отправка мне на почту».

Для каждой задачи фиксируйте три вещи: что должно быть на странице, как это должно выглядеть на телефоне, как вы поймёте, что готово. Такое ТЗ пишется минуты, а экономит часы.

Шаг 6. Сборка

Даёте задачи по одной. После каждой открываете сайт в браузере и смотрите глазами. Не нравится: пишете конкретно, что не так: «заголовок слишком мелкий, кнопка сливается с фоном». Устраивает: идёте к следующей задаче.

Если что-то сломалось, не пытайтесь чинить вручную. Скопируйте текст ошибки целиком и отдайте Claude с вопросом «что случилось и как исправить». В большинстве случаев этого достаточно.

Шаг 7. Публикация

Сайт, который лежит только у вас на компьютере, никому не нужен. Попросите Claude пошагово объяснить, как выложить проект на простой хостинг, и делайте по его списку, сверяя каждое действие с тем, что видите на экране. Домен подключайте последним: сначала убедитесь, что сайт открывается по временному адресу.

Почему лучше один файл на шаг

Сейчас в сети полно советов подключить к Claude десятки скиллов, плагинов и субагентов. Новичку это вредит. Вы не понимаете, что из этого что делает, а когда результат плохой, не видите, где причина.

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

Сложные настройки имеют смысл потом, когда вы уже собрали пару проектов и знаете, чего вам не хватает. Я сам работаю с Claude Code и Cursor, подключаю к Claude Code свои MCP-серверы — Planius, Trendys, Метриус — и собираю продукты с ИИ: Метриус, Planius, Trendys, игру Generalz. Принцип везде один: понятная задача, понятные правила, проверка результата.

Пример: лендинг эксперта под консультацию

Допустим, вы маркетолог и хотите принимать заявки на консультации. Как это выглядит по шагам.

1. Идея. Claude задаёт вопросы, вы отвечаете: клиент — владелец небольшого бизнеса без маркетолога в штате; проблема — реклама есть, заявок нет; предложение — разбор за час и план на месяц; действие на странице — оставить телефон.
2. Каркас. Первый экран с обещанием, «Узнаёте себя?» с тремя ситуациями клиента, как проходит консультация, обо мне, форма. Пять блоков.
3. Стек. Claude предлагает простую статичную страницу без базы данных. Форма отправляет заявки на почту.
4. CLAUDE.md. Фиксируете: пять блоков и ни одного лишнего, тексты не менять без вас, на телефоне должно читаться без увеличения.
5. Микро-ТЗ. Пять задач по блокам плюс одна на мобильную версию.
6. Сборка. Блок за блоком, с проверкой в браузере. Тексты вы пишете или правите сами: агент пишет гладко, но не знает ваших клиентов.
7. Публикация. Выкладываете на хостинг, отправляете тестовую заявку себе.

Всё это кажется длинным, пока не попробуешь. Каждый шаг по сути один разговор с Claude и один сохранённый файл.

Где Claude ошибается при сборке сайта и как это ловить

Придумывает то, чего не просили. Добавляет блок «Отзывы» с выдуманными именами и цитатами. Лечение: правило в CLAUDE.md «не добавлять блоки и тексты, которых нет в каркасе», и просмотр каждого блока глазами. Выдуманный отзыв на вашем сайте это прямой вред репутации.

Делает всем одно и то же. Без вводных получается типовая страница, которую легко принять за сотню других. Лечение: дайте референсы (два-три сайта, которые нравятся, со скриншотами) и опишите, чем вы отличаетесь от рынка.

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

Говорит «готово», когда не готово. Форма на вид есть, а письма не приходят. Лечение: проверять по факту. Отправьте тестовую заявку и убедитесь, что она дошла.

Забывает договорённости в длинном разговоре. К пятому часу в одной сессии он уже не помнит начало. Лечение: правила вынесены в CLAUDE.md, и новую сессию вы начинаете со словами «прочитай CLAUDE.md и скажи, что понял».

Что проверить перед публикацией

• Тексты. Прочитайте всё вслух. Всё, что звучит как реклама из каталога, переписывайте своими словами. Проверьте, что нет чужих цифр и выдуманных фактов о вас.
• Ссылки и кнопки. Нажмите каждую. Кнопка, которая никуда не ведёт, хуже, чем отсутствие кнопки.
• Форма. Отправьте заявку с телефона и с компьютера. Проверьте, что она пришла, и что человек после отправки видит понятное сообщение.
• Мобильная версия. Откройте сайт на телефоне, не в уменьшенном окне браузера. Проверьте шрифт, отступы, что кнопка достаётся пальцем.
• Заголовок и описание страницы. То, что видно во вкладке и в поиске. Часто остаётся заглушка.
• Контакты и документы. Если собираете телефоны, нужна политика обработки данных. Это то, что агент сам не добавит.

Рядом по теме: Лендинг по брифу и референсам, который агент сам проверит, Сайт услуги с заявкой: от смысла до формы, Claude Code для маркетолога и статья «Что такое вайбкодинг».

Что дальше

Если после этой статьи хочется взять готовый порядок шагов, в VIBERZ есть два варианта. Набор Сайт за выходные: 7 файлов для Claude Code (990 ₽) даёт готовые файлы под эти шаги. Система Первый экран за 990 ₽ проводит от идеи до первого работающего экрана по тем же шагам, с файлами-инструкциями на каждый.

А пока можно начать с шага 1 прямо сегодня: открыть Claude Code, вставить промпт с интервью и ответить на первые вопросы. Через час у вас будет файл с описанием проекта, и это уже половина дела.