Как собрать сайт на Claude Code, если ты не программист

Пошагово: установка, первый промпт, локальный просмотр, правки, публикация и домен.

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

1. Установи терминал и Claude Code

На Mac открой приложение «Терминал» — оно уже стоит в системе. На Windows поставь WSL или используй нативную версию для Windows, Claude Code работает в обеих. Есть и Desktop-приложение без терминала для macOS, Windows и Linux, но команды ниже — для терминала, там проще следить за процессом.

Команда установки: npm install -g @anthropic-ai/claude-code. Флаг -g ставит Claude Code глобально, и команда claude становится доступна из любой папки. Если npm не установлен, сначала поставь Node.js с официального сайта nodejs.org.

Создай папку под будущий сайт и зайди в неё в терминале. Команда mkdir moy-sayt && cd moy-sayt создаст папку и переместит тебя внутрь. Запусти claude — при первом запуске он попросит войти в аккаунт Anthropic через браузер.

2.1. Разберись, где ты находишься

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

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

3. Первый промпт: опиши сайт, а не код

Не пиши «создай index.html с флексбоксом». Опиши, что должно получиться и для кого: «Сделай одностраничный сайт для консультаций по AI-автоматизации. Заголовок, три блока услуг, форма записи, контакты внизу. Минималистичный дизайн, чёрный текст на белом фоне, один акцентный цвет». Claude Code сам решит, какие файлы создать и на чём собрать страницу.

Чем конкретнее бриф — тем меньше правок потом. Укажи аудиторию, тон, обязательные блоки, что точно нельзя использовать — например, «без фиолетовых градиентов и эмодзи».

4. Структура проекта появится сама

После первого промпта Claude Code создаст файлы: обычно index.html, папку со стилями, иногда package.json, если решит собрать сайт на фреймворке вроде Next.js. Не нужно создавать структуру заранее — модель делает это по ходу работы, ориентируясь на задачу.

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

5. Посмотри результат локально

Для простого HTML-сайта достаточно попросить: «открой index.html в браузере» — или сделать это самому двойным кликом по файлу. Для сайта на фреймворке попроси Claude Code запустить локальный сервер: «запусти dev-сервер и покажи, на каком порту». Обычно это npm run dev, а адрес — что-то вроде http://localhost:3000.

Открой этот адрес в браузере и смотри на живой результат. Меняешь промпт — Claude Code правит файлы — обновляешь страницу в браузере.

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

5.1. Сравни с макетом, если он есть

Если у тебя уже готов референс — скриншот сайта конкурента, макет из Figma, фото рукописного наброска на бумаге — приложи изображение прямо к сообщению в Claude Code. Модель понимает картинки и может ориентироваться на композицию, а не только на текстовое описание. Это сильно точнее, чем пытаться словами передать, где на странице должен быть отступ, а где — граница блока.

6. Правь итерациями

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

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

Ошибку из консоли браузера смотреть не обязательно вручную. Открой инструменты разработчика клавишей F12, вкладку Console, скопируй текст красной строки целиком и вставь в сообщение Claude Code. Без точного текста ошибки модель гадает, с точным — чинит за один проход в большинстве случаев.

Заведи привычку сохранять рабочую версию перед крупной правкой. Если в проекте уже настроен git, попроси Claude Code сделать коммит: «сохрани текущее состояние как коммит перед тем, как менять структуру страницы». Тогда неудачный эксперимент всегда можно откатить одной командой, а не пересобирать вручную.

7. Опубликуй сайт

Для простого HTML-сайта без сервера подойдёт GitHub Pages или Netlify — залил папку, получил ссылку. Для сайта на Next.js есть свой встроенный командный деплой на Vercel.

Здесь для российского пользователя есть нюанс. Доступность GitHub из России ухудшилась в мае 2026 года: по измерениям OONI, доля неудачных подключений к GitHub из РФ выросла с обычных 4% до 16% 6-7 мая — Роскомнадзор при этом заявил, что сервис не блокирует. Vercel в России заблокирован частично, Netlify — по данным разборов и сообщениям пользователей — не открывается почти полностью на уровне провайдеров. Итог — ни один из трёх вариантов нельзя назвать стабильным по умолчанию.

Рабочая альтернатива — российский VPS с ручным деплоем: rsync файлов на сервер плюс pm2 для процесса, если сайт не статический. Из PaaS-сервисов первым делом стоит смотреть на Timeweb Cloud: сервис Apps деплоит сайт прямо из GitHub или GitLab, откатывает билд при ошибке. Цену смотри на timeweb.cloud/services/apps перед запуском. Второй вариант — Amvera: деплой через git push, рублёвые платежи, тарифы от 170 ₽ в месяц с почасовым списанием. Перед публикацией клиентского сайта проверь доступность выбранного хостинга из России и с мобильного интернета отдельно — блокировки у операторов и у провайдеров различаются.

8. Подключи домен

Домен покупается отдельно от хостинга — у регистратора. Для .ru и .рф подойдут российские регистраторы: REG.ru регистрирует новый домен от 199 ₽ за первый год, nic.ru — от 219 ₽ по акции, дальше продление дороже. Для .com у международных регистраторов карта РФ часто не проходит: Porkbun блокирует российские карты на уровне платёжного процессора, у Namecheap и Cloudflare Registrar платежи с карт РФ тоже регулярно отклоняются — проверяй свой конкретный случай заранее, до того как выбрал продавца. После покупки домена нужно направить его DNS-записи на хостинг — эту инструкцию даёт сам хостинг-провайдер в личном кабинете, шаги отличаются от сервиса к сервису.

Где это ломается

Промпт без ограничений — просишь «сделай красиво», получаешь то самое AI slop: фиолетовые градиенты, глянцевые карточки, иконки-подсказки. Сразу пиши, чего не должно быть на странице.

Правки без просмотра результата — три-четыре команды подряд без проверки в браузере, и найти, какая из них всё сломала, становится дольше, чем сделать заново.

Забытый CLAUDE.md — в новой сессии Claude Code не помнит договорённостей из вчерашней, и дизайн начинает расползаться в разные стороны.

Хостинг выбран без проверки доступности из России — сайт готов, ссылка не открывается у половины посетителей с мобильного интернета.

Домен куплен без проверки DNS — страница «сайт не найден» висит сутками, потому что запись не долетела до нужного сервера.

Один гигантский промпт на весь сайт — Claude Code генерирует много файлов разом, а найти, что именно не понравилось в результате, труднее, чем в маленьких итерациях.

Частые вопросы

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

Сколько стоит Claude Code? Это часть подписки Claude — Pro, Max или через API по токенам. Отдельной платы за сам инструмент нет.

Что делать, если Claude Code застрял в цикле правок? Останови и опиши проблему заново, с конкретным фактом: что видно на экране, какая ошибка в консоли браузера. Абстрактное «не работает» модель не чинит эффективно.

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

Сегодня

Установи Claude Code командой npm install -g @anthropic-ai/claude-code и опиши первым промптом один блок будущего сайта — не весь сайт целиком.

Источники: