Как сделать сайт с помощью Claude Code за 30 минут

Коротко (TL;DR)

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

Что получите в итоге: живой сайт по своему адресу в интернете. Что понадобится: платный план Claude (Pro — $20/мес, или $17/мес при годовой оплате; бесплатный тариф Claude Code не включает), установленный Claude Code и около 30 минут.

Одна честная оговорка сразу, потому что она определяет всё остальное: 30 минут — это правда только для простого статического сайта (обычные HTML, CSS и немного JavaScript, без фреймворков). Тот же Claude Code на «взрослом» стеке (Next.js плюс система управления контентом) у реального нетехнического пользователя занял три дня (по его рассказу, ноябрь 2025). Для первого сайта берём простой путь — к сложному вернётесь, когда освоитесь.

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

Три вещи перед стартом:

1. Аккаунт с платным планом. Claude Code входит в подписку Claude Pro ($20/мес, или $17/мес при годовой оплате) или Max (от $100/мес) — цены на 10 июля 2026. Бесплатный Claude.ai доступ к Claude Code не даёт. Как устроены планы и как оплатить — тема отдельного гайда про подписку Claude Code.
2. Установленный Claude Code. Установка — одна команда в терминале: на macOS/Linux curl -fsSL https://claude.ai/install.sh | bash, на Windows в PowerShell irm https://claude.ai/install.ps1 | iex. Требования минимальны: macOS 13+, Windows 10 1809+ или актуальный Linux, 4 ГБ памяти.
3. Полчаса времени и идея сайта. Даже примерное представление — «лендинг для моей кофейни с меню и контактами» — уже достаточно, чтобы начать.

Терминал здесь — это текстовое окно, куда вводят команды (на Mac — «Терминал», на Windows — PowerShell). Дальше почти всё будет происходить внутри диалога с Claude Code обычными словами.

Как устроены лимиты Claude Code и как их растянуть

Как диктовать промпты и вставлять скриншоты в Claude Code

Сколько стоит Claude Code и как оплатить подписку

Как установить Claude Code: полный гайд по всем системам

Почему ИИ забывает и путается в длинном диалоге: контекстное окно простыми словами

Ставим проект: выбираем стек для новичка

«Стек» — это набор технологий, на которых собран сайт. И это главный рычаг, который решает, уложитесь вы в полчаса или застрянете на несколько дней.

Для первого раза выбор однозначный — статический сайт. Пропуск фреймворков и шага сборки как раз и переводит проект «из часов в 30 минут». Позже, когда захотите блог или каталог, добавите сложность — Claude Code поможет и с этим.

Создайте пустую папку под проект (например, my-site), откройте её в терминале и запустите:

claude

Полезный первый шаг внутри — команда /init: она создаёт файл CLAUDE.md, куда Claude Code записывает договорённости по проекту и читает их в начале каждой сессии. Официальный гайд называет это «самым ценным шагом настройки» — с ним агент лучше держит контекст вашего сайта.

Первый промпт: описываем сайт

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

«Сделай одностраничный сайт для кофейни Bean There. Разделы: шапка с названием и кнопкой Меню, блок О нас, меню из 6 позиций с ценами, галерея на 3 фото-заглушки, футер с адресом и картой. Стиль тёплый, кремово-коричневая палитра, крупный современный шрифт. Только HTML, CSS и ванильный JavaScript, без фреймворков.»

Claude Code создаст файл index.html (и, при необходимости, стили/скрипты), объяснит принятые решения и спросит уточнения, если чего-то не хватает. Дальше вы работаете итеративно — правите словами.

Совет: не пытайтесь описать всё идеально с первого раза. Лучше задать основу («одностраничник кофейни, тёплый стиль, меню и контакты»), получить черновик и дальше уточнять деталями. Claude Code хорошо работает короткими шагами: чем меньше правка за раз, тем точнее результат и тем проще откатить изменение, если оно не понравилось. Большой промпт «сделай мне идеальный сайт со всем сразу» почти всегда даёт более сырой результат, чем десяток маленьких уточнений.

Смотрим результат локально

Прежде чем публиковать, посмотрите сайт у себя. Два способа:

• Открыть созданный index.html двойным щелчком в браузере.
• Попросить Claude Code запустить локальный сервер: «Запусти локальный сервер, чтобы я посмотрел сайт». Обычно это npx serve . и адрес вроде http://localhost:3000.

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

Пример: как выглядит цикл работы

Чтобы было понятнее, вот как проходит типичная сборка лендинга кофейни по промпту выше.

Claude Code отвечает планом и создаёт файлы: index.html со структурой (шапка, меню, галерея, футер), style.css с тёплой палитрой и, если нужно, script.js для плавной прокрутки к разделам. Он поясняет решения — например, почему выбрал гибкую раскладку для меню — и спрашивает, если чего-то не хватает: «Добавить форму бронирования?»

Дальше правки идут словами, а Claude Code переводит их в код:

• «Меню в две колонки на широком экране и в одну — на телефоне» — агент добавит медиазапрос (правило, по которому вёрстка меняется под ширину экрана).
• «Сделай шапку липкой при прокрутке» — поправит CSS.
• «Замени текст в футере на Открыты с 8:00 до 22:00» — обновит содержимое.

Каждую правку вы видите, обновив страницу в браузере. Не нравится результат — так и говорите: «верни как было» или откатите изменение через Git. Именно петля «сказал — увидел — поправил» и делает сборку сайта делом получаса, а не недели.

Публикуем сайт в интернет

Локальный сайт видите только вы. Чтобы получить живую ссылку (деплой — публикация сайта в интернет), есть три пути:

Самый простой путь — прямо в диалоге написать: «Опубликуй этот сайт на Vercel». Claude Code создаст репозиторий на GitHub, загрузит файлы, подключит Vercel, соберёт проект и вернёт живой URL — деплой у него не отдельный «сложный этап», а одна фраза. Понадобится только бесплатный аккаунт Vercel, агент проведёт через подключение.

Если не хотите связываться с Git вообще — есть Vercel Drop (vercel.com/drop): перетаскиваете папку или zip прямо в окно браузера и получаете ссылку, без репозитория и без установки чего-либо. Идеальный вариант для совсем нетехнического старта.

Бесплатные альтернативы — Netlify (похожий бесплатный тариф) и GitHub Pages (хостинг прямо из GitHub-репозитория, версионирование в комплекте). GitHub Pages включается вручную: в репозитории откройте Settings → Pages и в разделе источника выберите «Deploy from a branch» — сайт станет доступен по адресу вида ваш-логин.github.io/имя-репозитория. Это удобно, если код всё равно лежит на GitHub и вам не нужны функции сборки Vercel.

Какой путь выбрать? Если хотите минимум действий — просите Claude Code задеплоить на Vercel. Если боитесь терминала и Git — Vercel Drop. Если уже держите проект на GitHub — Pages. Все три дают живую ссылку бесплатно; разница только в том, сколько шагов делаете руками.

Свой домен

Адрес вида my-site.vercel.app можно заменить на собственный домен. Подключение к Vercel зависит от типа адреса:

• Apex-домен (example.com) — прописываете у регистратора A-запись на адрес Vercel.
• Субдомен (www.example.com, blog.example.com) — прописываете CNAME на уникальный vercel-адрес проекта.

Если домен нужен сразу и не хочется настраивать записи вручную, часть бюджетных хостингов даёт домен в комплекте с тарифом (например, облачный тариф Hostinger — от ~$3.99/мес на май 2026, с бесплатным доменом в плане). Это альтернатива связке «Vercel + отдельно купленный домен».

Продвинутые приёмы

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

• Адаптивность под телефон. «Проверь, как сайт выглядит на мобильном, и почини, что ломается» — агент добавит медиазапросы и поправит отступы под маленький экран.
• SEO-разметка. «Добавь title, meta description и Open Graph-теги» — сайт станет аккуратно выглядеть при отправке ссылки в мессенджере и понятнее для поисковиков.
• Форма обратной связи без сервера. «Добавь форму через Formspree» — на статическом сайте появится рабочая форма, которой не нужен собственный бэкенд.
• Единый стиль через CLAUDE.md. Занесите в файл проекта палитру, шрифт и тон — и новые страницы Claude Code будет делать в том же стиле, не переспрашивая каждый раз.
• Аналитика. «Подключи счётчик посещений» — агент вставит нужный код в разметку, и вы будете видеть, сколько людей заходит.

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

Частые ошибки и риски безопасности

Самая опасная ошибка новичка в AI-кодинге — не сломанная вёрстка, а утёкший секрет. Разберём главные грабли:

• API-ключи и пароли в публичном репозитории. Если случайно закоммитить файл .env с ключом в открытый GitHub, простое удаление файла новым коммитом не спасёт: секрет остаётся в истории Git (она устроена как «только добавление»). Правильный порядок — сначала отозвать/сменить ключ у провайдера, потом добавить .env в .gitignore. Масштаб проблемы серьёзный: по отчёту GitGuardian за 2026 год, в публичных коммитах за 2025-й нашли около 28,65 млн новых захардкоженных секретов, а утечки ключей ИИ-сервисов выросли на 81% за год.
• Секреты во frontend-коде. Ключ, вставленный в клиентский JavaScript «на минутку для теста», фактически публичный — его видно через инструменты разработчика, сетевые запросы и сборку. Секретам место только на бэкенде, в переменных окружения.
• Слишком расплывчатый промпт — теряете время на переделки; конкретика экономит минуты.
• Забыли про откат. Пока правка не закоммичена, Git History нетронута, и неудачное изменение отменяется командой git checkout — это ваша «кнопка отмены», а не повод чинить всё руками.

Хороший инструмент для сравнения возможностей — Claude Design, отдельный продукт Anthropic для дизайна и прототипов сайтов; для кода же остаётся Claude Code. Claude умеет и другое — например, работать как ИИ-коллега в Slack.

Что дальше

Когда первый сайт в интернете, логичные следующие шаги: подключить свой домен с почтой, настроить автоматический деплой на каждое изменение (CI/CD), добавить блог или каталог на фреймворке. Всё это — тоже через Claude Code, но уже отдельными темами. Для первого захода достаточно того, что у вас есть живая ссылка, которую не стыдно показать. Главный навык вы уже получили: описывать результат словами и доводить его правками до нужного вида — дальше это работает и для куда более сложных проектов.

FAQ

Нужно ли уметь программировать, чтобы сделать сайт на Claude Code? Нет. Вы описываете сайт словами, а код пишет агент. Полезно понимать базовые понятия (файл, папка, деплой) — но программировать самому не требуется.

Хватит ли бесплатного Claude? Нет. Claude Code не входит в бесплатный тариф Claude.ai — нужен Pro ($20/мес, или $17/мес при годовой оплате) или Max. Для одного простого сайта хватает Pro.

Что если Claude Code выдал ошибку при деплое? Опишите ошибку прямо в диалоге — агент чаще всего сам предложит исправление. Если правка ухудшила результат, откатитесь через git checkout до последнего рабочего состояния.

Можно ли потом усложнить сайт? Да. Начните со статики, а когда захотите блог, каталог или динамику — попросите Claude Code перевести проект на фреймворк. Это уже займёт больше времени, чем полчаса.

Безопасно ли давать Claude Code доступ к терминалу? По умолчанию агент спрашивает подтверждение перед действиями. Главное правило безопасности — не хранить ключи и пароли в коде и не публиковать их в открытый репозиторий.

За сколько реально собрать первый сайт? Около 30 минут для простого статического сайта, включая публикацию. Сложный стек с фреймворком и CMS — это уже дни работы, не для первого раза.

Нужен ли мне сразу свой домен? Нет. Vercel, Netlify и GitHub Pages сразу дают бесплатный адрес (например, my-site.vercel.app), на котором сайт полноценно работает. Свой домен подключают позже, когда сайт устоялся и хочется красивую ссылку.

Что делать, если сайт получился не таким, как я представлял? Опишите словами, что не так: «шапка слишком большая», «цвета блёклые», «убери галерею». Claude Code переделает конкретный кусок, не ломая остальное. Это нормальная часть процесса — редко когда первый вариант идеален, и переделка правками занимает минуты.