Сделать сайт с помощью Claude за вечер без кода

Я, Арина Михална, убеждена: сделать сайт с помощью Claude в 2026 — это реально за один вечер: описываешь структуру лендинга на русском, итерируешь в чате, получаешь рабочий HTML. Дизайнер не нужен, код писать не придётся.

Почему вайбкодинг работает для лендингов

Я, Арина Михална, делала этот эксперимент не из любопытства — у меня сгорел подрядчик за два дня до дедлайна. Нужна была страница под небольшой запуск, денег на срочного дизайнера не было, времени — тем более. Открыла Claude и пошла.

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

Конструкторы типа Tilda или Readymag дают шаблоны. Они быстрые, но ты всё время подгоняешь свою идею под чужой блок. Claude делает наоборот: ты описываешь, что хочешь, он собирает. Нестандартная структура, необычный анимированный заголовок, кастомная сетка — всё это реально.

Где конструктор выигрывает: повторяемость и скорость на типовых задачах. Где Claude выигрывает: когда задача нетиповая или ты не хочешь платить за подписку Tilda.

	Конструктор (Tilda и др.)	Claude + HTML
Скорость старта	Быстро, есть шаблоны	Медленнее, с нуля
Гибкость дизайна	Ограничена блоками	Любая структура
Результат	Файл на платформе	Твой HTML-файл
Цена	От 600 ₽/мес	Подписка Claude Pro ~20 $/мес
Публикация	Встроенная	GitHub Pages / Netlify (бесплатно)
Кастомный код	Частично	Полностью

Что нужно подготовить до первого промпта

Claude не прочитает твои мысли. Чем чётче ты объяснишь задачу, тем меньше итераций на правки. Перед тем, как открыть чат, я собрала три вещи:

1. Структура блоков. Записала список разделов сверху вниз: что идёт первым, что вторым, какой смысл у каждого. Не дизайн — просто логика. «Шапка с логотипом и кнопкой. Первый экран: заголовок + подзаголовок + кнопка. Второй блок: три преимущества в карточках. Третий блок: как это работает, 4 шага». Вот так.

2. Текст. Весь текст лендинга — заголовки, описания, кнопки — написала заранее. Claude может генерировать и текст, но это отдельная итерация, и он выдаст общие слова. Если ты знаешь аудиторию и продукт, пиши сам.

3. Референс по стилю. Не обязательно, но сильно ускоряет. Я кинула Claude ссылку на один лендинг, который мне нравился по цветам и типографике, и сказала: «Вот примерно такая палитра, только вместо синего — оранжевый акцент». Без референса он даёт стандартный фиолетово-белый SaaS-дизайн.

Без этих трёх вещей сессия превращается в бесконечное «нет, не так, давай ещё раз». С ними первый результат выходит рабочим.

Первый промпт: как объяснить задачу

Вот промпт, с которого я начала. Он длинный, но это того стоит — первый ответ был на 80% готов:

Ты фронтенд-разработчик. Сделай одностраничный HTML-лендинг.

Стек: чистый HTML, CSS, минимум JavaScript (только для
анимации появления блоков при скролле и мобильного меню).

Структура:
1. Шапка: логотип слева, меню из трёх пунктов справа, кнопка
«Записаться».
2. Первый экран: крупный заголовок {{твой заголовок}},
подзаголовок {{твой подзаголовок}}, кнопка.
3. Блок «Как это работает»: 4 карточки с иконками,
заголовками и описанием.
4. Блок отзывов: 3 карточки, фото + имя + текст.
5. Финальный блок с призывом и формой (имя, email, кнопка).

Цвета: тёмный фон #0F172A, текст #F8FAFC, акцент оранжевый
#F97316. Шрифты: Inter. Радиус карточек 12px. Анимация
появления блоков при скролле. Адаптив под мобильные.

Отдай готовый HTML одним файлом, чтобы можно было открыть в
браузере.

Claude выдал файл за одно сообщение. Я скопировала, сохранила как index.html, открыла в браузере. Работало. Не идеально, но работало.

Итерации: что пришлось править

Первая версия дала структуру, но детали были не те. Дальше я шла по списку и правила итерациями. Каждая правка — одно сообщение.

Итерация 1: карточки сливались. Между карточками не было отступов, они лежали плотно. Написала: «Добавь gap 24px между карточками в блоке “Как это работает”». Claude поправил за секунду.

Итерация 2: шрифт мелкий. Заголовки были читаемыми, но подзаголовки на мобильном выглядели бледно. «Подзаголовки сделай 18px на десктопе, 16px на мобильном». Готово.

Итерация 3: кнопки не работали. Claude сделал якорные ссылки, но прокрутка была резкой. «Сделай плавную прокрутку по клику на кнопку». Он добавил scroll-behavior: smooth; в CSS.

Итерация 4: форма не отправлялась. Понятно, что без бэкенда она не будет отправлять письма, но Claude сделал кнопку без атрибута action. Я попросила добавить заглушку с выводом alert «Отправлено» после клика — это хотя бы показывало, что форма реагирует.

Итерация 5: иконки. Claude вставил SVG-иконки прямо в HTML. Они были стандартные и скучные. Я дала ему ссылку на набор иконок с Heroicons и попросила заменить. Заменил.

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

Где Claude тормозит и как это обходить

Есть три места, где Claude начинает ошибаться или зацикливаться. Я на них наткнулась и нашла обходы.

1. Сложная вложенность. Если в промпте описать блок с тремя уровнями вложенности (контейнер → сетка → карточка → иконка + текст), Claude путается в классах и отступах. Решение: делить на этапы. Сначала попроси собрать блок с карточками, потом отдельным сообщением — добавить иконки.

2. Большие правки за раз. Если написать «поменяй цвета, увеличь шрифты, добавь тени, исправь отступы», Claude применит только часть. Он пропускает куски списка. Решение: одно сообщение — одна правка. Медленнее, но результат предсказуемый.

3. Адаптив. Claude делает адаптив, но часто забывает проверить крайние случаи. На iPhone SE у меня заголовок вылез за экран. Пришлось явно попросить: «Проверь, что на экране 320px всё влезает». Он поправил font-size и padding.

Как опубликовать готовый лендинг

Claude отдал HTML-файл. Теперь его надо положить туда, где люди смогут открыть ссылку. Хостинг для статического HTML — самая простая задача в вебе, и она бесплатная.

GitHub Pages. Самый быстрый способ для тех, кто хоть раз слышал про Git. Создаёшь репозиторий, закидываешь файл index.html, включаешь Pages в настройках. Через две минуты у тебя есть ссылка вида username.github.io/repo-name. Никаких серверов, никаких денег.

Netlify. Ещё проще, если Git пугает. Заходишь на Netlify, перетаскиваешь папку с HTML в окно браузера — всё, сайт живой. Ссылка будет random-name.netlify.app. Можно потом привязать свой домен, если есть.

Vercel. То же самое, что Netlify, только интерфейс другой. Работает так же: залил папку — получил ссылку.

Я использую Netlify, потому что там не нужно разбираться с командной строкой. Просто drag-and-drop — и готово.

Хостинг	Сложность	Цена	Свой домен
GitHub Pages	Нужен Git	Бесплатно	Да
Netlify	Drag-and-drop	Бесплатно	Да
Vercel	Drag-and-drop	Бесплатно	Да

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

Итоговая статистика по времени:

• 15 минут — собрала структуру и текст в блокноте.
• 10 минут — написала первый промпт и получила HTML.
• 1 час 40 минут — итерации: правки отступов, шрифтов, иконок, адаптива.
• 10 минут — залила на Netlify, проверила на телефоне.

Итого: 2 часа 15 минут от идеи до рабочей ссылки, которую можно отправить клиенту.

Что получилось: одностраничный лендинг с пятью блоками, адаптивом под мобильные, плавной прокруткой и формой обратной связи. Дизайн не дизайнерский, но чистый и рабочий. Конверсия — не измеряла, задача была просто запустить.

Что не получилось:

• Дизайн как у агентства за 200 тысяч. Claude даёт функциональность, но не визуальную магию.
• Идеальный код. HTML рабочий, но если показать его опытному фронтендеру, он найдёт, к чему придраться. Мне это не мешало.
• Уникальная айдентика. Результат выглядит «как сайт на Claude» — узнаваемо, если ты видел десяток таких. Для MVP это не проблема, для бренда — да.

Если бы я делала лендинг для крупного запуска с бюджетом, я бы наняла дизайнера. Для экспериментального запуска, теста гипотезы или страницы под небольшой продукт Claude закрывает задачу полностью.

Сколько стоит сделать лендинг через Claude

Подписка Claude Pro — около 20 долларов в месяц. На бесплатном тарифе лимиты кончаются быстро: одна сессия по сборке лендинга — это 15–25 сообщений, и ты упираешься в потолок. Для разовой задачи можно попробовать уложиться в бесплатный лимит, но это некомфортно.

Для сравнения: дизайнер возьмёт за простой лендинг от 15 до 50 тысяч рублей. Конструктор Tilda — от 600 рублей в месяц за базовый тариф. Claude Pro — это 20 долларов (около 1800 рублей по курсу сентября 2026), и ты можешь делать сколько угодно лендингов, экспериментировать, ломать и пересобирать.

Если ты делаешь один лендинг в год — конструктор быстрее. Если тебе нужна гибкость и ты готов потратить вечер на итерации — Claude выигрывает по цене и контролю.

По материалам: документация Claude, тарифы Anthropic; пост канала про сайты на Claude и скиллы.

Я показала кейс: как сделать сайт с помощью Claude за один вечер, без кодинга и без дизайнера. Первая версия выходит за 1–3 часа, если ты подготовила структуру и текст. Результат не идеальный, но рабочий — этого достаточно для теста гипотезы или небольшого запуска. Дальше ты либо оставляешь как есть, либо отдаёшь дизайнеру на доводку, но база уже есть. В канале разбираю такие кейсы на живых примерах и раздаю скиллы для вайбкодинга — подписывайся, чтобы не пропустить.## Связь с остальными инструментами: Claude Code vs веб-чат

Я делала этот лендинг в веб-чате Claude, но есть ещё Claude Code — CLI-инструмент, который работает прямо в папке проекта. Разница принципиальная.

Веб-чат отдаёт код блоком — ты копируешь, сохраняешь в файл, открываешь в браузере, смотришь, возвращаешься в чат с правками. Это ручной цикл: чат → файл → браузер → чат. Для одностраничного лендинга это нормально, потому что файл один.

Claude Code работает иначе: он сам создаёт файлы, правит их, запускает в браузере и видит результат. Ты пишешь задачу в терминале, он применяет изменения к реальным файлам в папке. Это быстрее на больших проектах (десятки файлов, компоненты, сборка), но для одного HTML избыточно.

Когда выбирать что:

Задача	Веб-чат	Claude Code
Один HTML-файл, лендинг	✅ Удобно	Избыточно
Многостраничный сайт	Неудобно копировать	✅ Работает с папкой
Нужна сборка (Webpack, Vite)	Не умеет	✅ Запускает команды
Проект с компонентами (React)	Неудобно	✅ Видит структуру

Я начинаю в веб-чате, если задача помещается в один файл. Если проект разрастается до трёх файлов и больше — переношу в Claude Code.

Когда Claude не подходит

Три случая, когда я бы не пошла через Claude:

1. Лендинг для крупного бренда. Если это запуск продукта с бюджетом на маркетинг, где дизайн — часть позиционирования, Claude не заменит студию. Он даёт функциональность, но не создаёт визуальную айдентику. Результат будет работать, но не выделится.

2. Сложная логика на фронте. Калькуляторы с множеством условий, интерактивные конфигураторы, динамические формы с проверками — Claude начинает ошибаться в логике после третьей итерации. Для такого нужен или Claude Code с тестами, или человек.

3. Когда ты не понимаешь, что хочешь. Если структура лендинга не продумана, Claude не додумает её за тебя. Он делает то, что ты опишешь. Без внятного описания сессия превращается в блуждание.

Для всего остального — MVP, тестовые страницы, промо под небольшой запуск, личное портфолио — Claude закрывает задачу.

Что дальше: масштабирование и связка с другими агентами

Один лендинг — это точка входа. Дальше логика такая: если ты собрала один, ты соберёшь десять. Если десять — ты автоматизируешь процесс.

Следующий шаг после ручной сборки — скиллы. Это файлы-инструкции, которые говорят Claude, как ты хочешь видеть результат. Один раз описываешь структуру, цвета, стек — дальше Claude применяет это автоматически. Я собрала скилл для своих лендингов: там палитра, типографика, структура блоков. Теперь первый результат выходит не на 80%, а на 95% готовым.

Ещё уровень выше — связка агентов. Один агент пишет текст, второй генерирует структуру, третий собирает HTML. Это уже не вечер работы, а конвейер. Для тех, кто делает лендинги регулярно (агентства, фрилансеры), это экономит недели. Разбираю такие связки в статье про агентов.

Но начинать стоит с одного лендинга вручную. Автоматизация имеет смысл, когда ты понимаешь, что автоматизируешь.

Частые ошибки при работе с Claude над сайтом

За время экспериментов я наступила на все грабли. Держи список того, что не работает, чтобы не повторять:

Ошибка 1: просить «сделай красиво». Claude не знает, что такое «красиво». Он выдаст стандартный фиолетово-белый SaaS-дизайн. Если хочешь другое — дай референс, назови палитру, укажи шрифты.

Ошибка 2: не проверять код в браузере после каждой итерации. Я один раз сделала пять правок подряд, не глядя на результат. В итоге Claude накрутил стили так, что кнопка уехала за экран. Пришлось откатывать. Одна правка — одна проверка.

Ошибка 3: просить добавить «все современные фичи». Claude добавит анимации, параллакс, плавные переходы — и сайт станет тормозить на слабых устройствах. Лучше просить конкретные фичи: «анимация появления блоков при скролле», «бургер-меню на мобильном».

Ошибка 4: пытаться сделать адаптив за один промпт. Адаптив — это проверка на разных экранах. Claude сделает breakpoints, но не увидит, что на iPad заголовок сломался. Проси его явно проверять конкретные разрешения: 320px, 768px, 1024px.

Ошибка 5: не сохранять промежуточные версии. Если Claude на пятой итерации сломал то, что работало, откатиться сложно. Я начала сохранять каждую версию с номером: index-v1.html, index-v2.html. Это спасло меня дважды.

Реальные цифры: что изменилось после запуска

Лендинг был не учебным — я его использовала для реального запуска. Держи цифры, чтобы понять масштаб.

До: подрядчик сгорел, сроки поджимали, бюджета на срочного дизайнера не было. Альтернатива — отложить запуск на две недели и потерять momentum.

После: лендинг ушёл в работу через два дня. Конверсия в подписку на тестовом трафике (100 человек) — 8%. Для холодной аудитории это нормально. Дизайн не айс, но задачу закрыл.

Во что вылилось по деньгам:

• Claude Pro — 20 $ (уже была подписка, использовала её).
• Хостинг Netlify — 0 ₽ (бесплатный тариф).
• Своё время — 2 часа 15 минут.

Для сравнения: срочный дизайнер взял бы от 30 тысяч за два дня работы. Конструктор Tilda — быстрее, но результат был бы шаблонным, и я бы всё равно потратила час на настройку блоков.

Я не говорю, что Claude заменяет дизайнера. Но когда дедлайн горит, а задача — просто запустить, он закрывает вопрос.

Как улучшить результат, если есть время

Лендинг за вечер — это MVP. Если у тебя есть ещё день или два, можно довести его до уровня, который не стыдно показать клиенту с запросами.

1. Отдай на ревью фронтендеру. Даже час его времени улучшит код: он уберёт дублирование стилей, поправит семантику, добавит метатеги. Это не обязательно, но результат будет чище.

2. Протестируй на реальных устройствах. Не только в DevTools Chrome — возьми реальный iPhone и Android. Я поймала баг с кнопкой, которая на Safari работала не так, как на Chrome. В DevTools этого не было видно.

3. Добавь аналитику. Яндекс.Метрика или Google Analytics — пять минут на подключение. Без этого ты не узнаешь, работает ли лендинг. Хотя бы базовые события: клик на кнопку, отправка формы.

4. Подключи реальную форму. Форма с alert — это заглушка. Если лендинг идёт в продакшн, подключи Tally, Formspree или Google Forms. Это бесплатно и делается за десять минут.

5. Оптимизируй картинки. Если на лендинге есть фото, прогони их через TinyPNG или Squoosh. Claude не оптимизирует изображения — он просто вставляет <img>. Тяжёлые картинки убивают скорость загрузки.

Если времени нет — запускай как есть. MVP работает, даже если он не идеален.

Читайте также

• Как я сделала сайты с Claude Code вместо агентства: кейсы, сроки и методология
• Claude Code для непрограммистов: 5 задач без кода
• Как я переделала нейросетевой сайт на клиенте: путь от слопа до продукта
• На портале «Мастерская нейросетей»: Как сделать конверсионный сайт с Claude без команды разработчиков

Сделать лендинг с помощью Claude реально за один вечер — я показала это на своём кейсе. Структура + текст + промпт → итерации → публикация. Подписка Claude Pro стоит около 20 $/мес, хостинг бесплатный. Результат не дизайнерский, но рабочий — этого хватает для теста или небольшого запуска. В канале я делюсь такими экспериментами на практике и раздаю готовые скиллы для вайбкодинга — подписывайся, там много живых примеров.