Первый сайт без строчки кода: 9 шагов от пустой папки до GitHub

Подпишись на Telegram-канал «Вайб-цех»: там я разбираю рабочие промпты и ошибки новичков, которые не попадают в статьи. https://t.me/vibeceh

Что такое Claude Code и зачем он нужен для сайта?

Если ты вводишь запрос в обычный чат, ответ обычно остаётся текстом. Можно получить пример HTML, список идей или объяснение ошибки. Но сам проект от этого не меняется.

Я запускаю Claude Code в папке проекта. Он сразу видит существующие файлы, понимает связи между ними, вносит изменения и запускает нужные команды. Для сайта это особенно удобно: HTML, CSS и JavaScript часто меняются вместе.

Anthropic описывает инструмент так:

Claude тоже не пишет идеальный код. Его отличие проявляется в рабочем контуре:

• Claude читает проект;
• предлагает изменения;
• получает разрешение на опасные действия;
• меняет несколько файлов;
• запускает команды;
• показывает результат проверки.

Поисковый запрос claude coding часто приводит к разговору о программировании с ИИ. Для первого сайта полезнее держать в голове другое: Claude Code не заменяет решение о том, что строить. Он помогает выполнить это решение.

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

Чем Claude Code отличается от Claude Desktop и Cursor?

Путаница появляется из-за одного имени Claude. Под ним скрываются разные сценарии.

Claude.ai и Claude Desktop удобны, когда нужно:

• обсудить идею;
• попросить объяснить ошибку;
• получить черновик текста;
• задать разовый вопрос;
• разобрать вставленный фрагмент кода.

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

В справке Anthropic различие сформулировано прямо:

Cursor находится ближе к редактору. Ты открываешь файлы в визуальном интерфейсе, видишь код рядом с запросом и пользуешься автодополнением. Claude Code начинается с терминала и папки проекта.

Для первого сайта выбор можно упростить:

• хочешь поговорить об идее - подойдёт Claude.ai или Claude Desktop;
• хочешь править код в визуальном редакторе - подойдёт Cursor (сравнение Claude Code и Cursor);
• хочешь дать агенту задачу по проекту и разрешить ему читать, менять и проверять файлы - подойдёт Claude Code.

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

Как Claude Code работает в терминале?

Тебе не надо изучать терминал целиком. Для первого сайта достаточно понимать одну связь: Claude Code запускается из папки. Эта папка задаёт рабочую область.

Основные варианты:

claude

Открывает интерактивную сессию.

claude "Изучи этот проект и опиши его структуру"

Запускает Claude Code сразу с запросом.

claude -p "Проверь, есть ли ошибки в проекте"

Передаёт запрос и получает ответ без обычного интерактивного сценария.

claude -c

Продолжает последний разговор.

claude -r

Помогает возобновить предыдущую сессию.

Можно передать содержимое файла через конвейер:

cat README.md | claude -p "Коротко объясни содержание этого файла"

Официальная документация описывает назначение этих команд так:

Для первого проекта я советую запомнить порядок работы:

1. Открой терминал.
2. Перейди в папку сайта.
3. Запусти claude.
4. Опиши задачу.
5. Проверяй изменения там же.

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

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

Поддерживаются:

• macOS 13 и новее;
• Windows 10 1809 и новее;
• Windows Server 2019 и новее;
• Ubuntu 20.04 и новее;
• Debian 10 и новее;
• Alpine Linux 3.19 и новее.

Также нужны интернет, 4 ГБ оперативной памяти и процессор x64 или ARM64.

С аккаунтом доступны разные способы входа:

• Claude Pro;
• Claude Max;
• Claude Team;
• Claude Enterprise;
• Claude Console с заранее оплаченными кредитами;
• Amazon Bedrock;
• Google Cloud's Agent Platform;
• Microsoft Foundry.

Документация предупреждает:

Минимальная подготовка выглядит так:

1. Установи Claude Code способом для своей системы.
2. Подготовь пустую папку для сайта.
3. Проверь интернет-соединение.
4. Войди в аккаунт при первом запуске.
5. Оставь в папке только файлы текущего проекта.

Пройти практикум - 2 000 ₽: на практикуме мы проходим путь от пустой папки до живого сайта за одну сессию. https://vibeceh.ru/#buy

Точные сценарии установки для каждой системы здесь не разбираю. В официальной документации есть требования и варианты установки, но отдельная инструкция по установке для macOS, Windows и Linux вынесена в другую тему.

Как создать первый сайт с нуля?

1. Открой терминал.

   Запусти терминал на компьютере. На Windows подойдут PowerShell или CMD, на macOS и Linux - Bash или Zsh.

   Тебе не нужен отдельный редактор для первого запуска. Важно открыть окно, где можно выполнить команду claude.

2. Перейди в папку проекта.

   Создай пустую папку и перейди в неё командой cd.

   bash

   Скопировать

   mkdir first-site
   cd first-site

   Если папка уже создана, используй путь к ней:

   bash

   Скопировать

   cd путь/к/папке

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

3. Запусти Claude Code.

   Выполни команду claude.

   bash

   Скопировать

   claude

   При первом запуске появится вход в аккаунт. Заверши авторизацию, затем вернись в терминал.

4. Попроси изучить задачу.

   Не начинай с команды «сделай сайт». Сначала попроси Claude Code изучить пустую папку, уточнить цель и составить план.

   Сначала исследование и планСкопировать промпт

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

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

5. Опиши простой результат.

   После плана задай конкретную задачу. Для первого проекта подойдёт статический сайт без базы данных и серверной части.

   Задача для первого сайтаСкопировать промпт

   Создай одностраничный статический сайт для портфолио фрилансера.
   
   Используй vanilla HTML, CSS и JavaScript.
   Не используй React, backend, базу данных и внешние API.
   На странице должны быть:
   - первый экран с коротким предложением;
   - блок с тремя услугами;
   - блок с примерами работ;
   - простая форма контакта без отправки данных на сервер;
   - адаптация под узкий экран.
   
   Сначала покажи, какие файлы создашь и что будет в каждом файле.
   После моего согласования создай файлы.

   Описание должно отвечать на вопрос «что должно получиться». Техническую часть можно оставить короткой. Для одностраничного сайта достаточно одного index.html, если задача не требует сложной логики.

6. Согласуй план.

   Посмотри, не добавил ли агент лишние технологии, сервер или внешние сервисы.

   Проверь три вещи:

   • совпадает ли структура страницы с целью;
   • нет ли базы данных и API в простой статической задаче;
   • понятно ли, каким способом будет запущена локальная проверка.

   Если план разросся, останови его до создания файлов. Напиши, что нужно упростить.

7. Создай файлы.

   После согласования попроси реализовать именно утверждённый план.

   Реализация согласованного планаСкопировать промпт

   Реализуй согласованный план.
   
   Создай только необходимые файлы для простого статического сайта.
   Не добавляй новые библиотеки, backend, базу данных или API без отдельного согласования.
   После создания файлов покажи список изменений.
   Затем запусти доступную локальную проверку и сообщи точную команду запуска.

   Claude Code умеет создавать функции, менять несколько файлов, писать тесты и работать с Git. Но это не означает, что каждое изменение надо принимать вслепую. Смотри на список файлов и останавливай лишнее.

8. Запусти локальную проверку.

   Попроси Claude Code запустить dev server и открыть сайт в браузере, если такая возможность доступна.

   Проверка сайтаСкопировать промпт

   Запусти dev server для этого проекта.
   Открой сайт в доступном браузере или preview.
   Проверь:
   - что главная страница открывается;
   - что на странице видны все запланированные блоки;
   - что узкий экран не ломает разметку;
   - что в логах нет ошибок.
   Если найдёшь проблему, сначала объясни причину, затем предложи минимальное исправление.

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

9. Исправь найденное.

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

   Исправь только найденную проблему.Скопировать промпт

   Симптом:
   [вставь точное описание проблемы или вывод ошибки]
   
   Сначала объясни причину.
   Затем измени только файлы, которые нужны для исправления.
   После изменения снова запусти проверку и покажи результат команды.
   Не переписывай проект целиком.

   Если агент предлагает переписать половину проекта из-за одной ошибки, останови его и попроси минимальную правку. Рабочее состояние дороже красивого объяснения.

Как объяснить Claude Code, какой дизайн нужен?

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

Опиши дизайн по шести направлениям:

• Тип страницы. Лендинг, портфолио, страница услуги или каталог.
• Аудитория. Для кого страница и что человек должен понять первым.
• Настроение. Спокойное, резкое, редакционное, технологичное или игривое.
• Цвета. Основной цвет, фон, контраст и цвета акцентов.
• Типографика. Крупный заголовок, плотный текст, строгая или выразительная подача.
• Движение. Появление блоков, hover-состояния, прокрутка или отсутствие анимации.

Пример запроса:

Создай выразительный лендинг для небольшой студии предметной фотографии.

Аудитория - владельцы брендов, которым нужны фотографии товаров для каталога.
Настроение - тактильное, уверенное, редакционное.
Используй тёплый светлый фон, один насыщенный акцентный цвет и крупную типографику.
Сделай первый экран с сильным заголовком и крупным визуальным блоком.
Добавь умеренные анимации появления при прокрутке и понятные hover-состояния для кнопок.
Не используй фиолетовый градиент, стандартный шаблон SaaS и перегруженную навигацию.
Сохрани адаптацию под мобильный экран.

frontend-design plugin предназначен для выразительных лендингов, дашбордов и интерфейсов. Claude Design Skill (сторонний навык сообщества) работает с лендингами, прототипами, анимациями и HTML-артефактами.

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

Как проверить, что сайт действительно работает?

Проверка должна отвечать на конкретные вопросы:

• открывается ли главная страница;
• загружаются ли стили;
• работают ли кнопки и переходы;
• нет ли ошибок в логах;
• проходит ли сборка;
• не ломается ли страница на узком экране;
• соответствует ли вид согласованному дизайну.

Anthropic формулирует правило коротко:

Для сайта я использую такой запрос:

Проведи проверку сайта как перед передачей другому человеку.

1. Запусти dev server.
2. Открой сайт в браузере или preview.
3. Проверь главную страницу, стили, кнопки и ссылки.
4. Проверь вид на узком экране.
5. Посмотри логи и сообщи об ошибках.
6. Запусти сборку или доступные тесты.
7. Сравни результат с согласованным планом.

Не пиши «всё работает» без результата проверки.
Покажи команды, которые запускались, и их вывод.

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

Почему localhost не становится публичным сайтом?

Симптом выглядит так: Claude Code собрал сайт, в терминале появился адрес вроде localhost, страница открылась, а с телефона или другого компьютера она недоступна.

Причина простая. localhost указывает на текущий компьютер. Другой человек не видит этот адрес, потому что сайт не размещён в интернете.

В обсуждении проблему сформулировали так:

Локальная разработка и публикация разделяются:

1. Создать сайт в папке.
2. Запустить локальный preview.
3. Проверить страницу.
4. Сохранить код в GitHub.
5. Подключить репозиторий к хостингу.
6. Настроить сборку и папку результата.
7. Выполнить deploy.
8. Открыть публичный URL на телефоне или в приватном окне браузера.

Официальные материалы Claude Code описывают создание файлов, dev server, preview, Git и ветки GitHub. Полного сценария деплоя в документации Anthropic нет. Поэтому я не буду придумывать точные действия для Netlify, Vercel или GitHub Pages, но три способа опубликовать статический сайт уже разобраны отдельно.

Как сохранить проект в GitHub перед публикацией?

GitHub помогает в двух ситуациях.

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

Вторая - передача проекта. Репозиторий становится источником, откуда хостинг забирает код для публикации.

Перед крупным изменением попроси Claude Code сохранить состояние:

Проверь текущие изменения.
Покажи список изменённых файлов.
Если рабочая версия сайта проходит локальную проверку, создай Git-коммит с понятным сообщением.
Не отправляй изменения в удалённый репозиторий без моего подтверждения.

После этого можно попросить подготовить GitHub:

Проверь состояние Git-репозитория.
Если удалённый репозиторий уже подключён, покажи его адрес.
Если репозиторий не подключён, опиши необходимые действия и дождись подтверждения.
Не удаляй существующую историю.
После согласования создай коммит и отправь код в GitHub.

Claude Code умеет коммитить и отправлять код в GitHub. Коммит фиксирует состояние проекта. Push отправляет изменения в удалённый репозиторий. Хостинг размещает сайт в интернете. Это три разных действия.

Я бы делал коммит перед каждым крупным этапом:

• после первой рабочей версии;
• перед сменой дизайна;
• перед подключением новой библиотеки;
• перед исправлением большой группы ошибок;
• перед настройкой публикации.

Какие команды Claude Code нужны для работы над сайтом?

Команды вызываются прямо внутри запущенной сессии.

В документации назначение команд описано так:

Для первого сайта я бы использовал их в таком порядке:

1. /init - когда проект уже получил устойчивую структуру.
2. /plan - перед крупной задачей.
3. /diff - после изменений.
4. /code-review - перед фиксацией рабочей версии.
5. /clear - между несвязанными задачами.
6. /usage - если сессия внезапно остановилась.
7. /doctor - если установка или работа ведут себя странно.

Запускай команду тогда, когда она закрывает конкретную проблему. Полный список сразу не понадобится.

Тема claude code команды становится важной после первого сбоя, а не после первой красивой страницы. Поэтому сохрани эту таблицу рядом с проектом.

Что делать, если Claude постоянно просит разрешение?

Claude Code может спрашивать разрешение на чтение, изменение файлов или запуск команд. Это не обязательно поломка. Инструмент разделяет действия по шаблонам команд и областям проекта.

Если действие безопасно и будет повторяться, выбери Always allow, когда такой вариант доступен. Если действие разовое или непонятное, оставь одноразовое подтверждение.

Настройки проекта хранятся в:

.claude/settings.json

Локальные настройки для текущего компьютера:

.claude/settings.local.json

Посмотреть и изменить правила внутри сессии можно командой:

/permissions

Я делаю так:

1. Посмотри, какую команду Claude хочет выполнить.
2. Проверь, относится ли она к текущей задаче.
3. Разреши действие один раз, если оно разовое.
4. Создай постоянное правило, если команда повторяется и понятна.
5. Не разрешай всё подряд ради тишины в терминале.

Почему Claude не меняет файлы в Plan Mode?

Типичная ситуация: ты просишь создать страницу, Claude описывает изменения, но файлы остаются прежними. Потом он сообщает, что сначала надо выйти из Plan Mode.

Я сталкивался с этим не раз: это ожидаемое поведение режима. Он нужен, чтобы:

• прочитать проект;
• найти связанные файлы;
• разобраться в задаче;
• предложить порядок изменений;
• дождаться согласования.

После плана:

1. Используй ExitPlanMode или переключи режим.
2. Проверь индикатор режима.
3. Повтори просьбу «создай», «измени» или «запусти».
4. Посмотри список изменённых файлов.

Не пытайся заставить Plan Mode редактировать файлы. Это режим планирования.

Что делать, если Claude ломает сайт или упирается в лимит?

У проблем несколько разных причин.

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

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

При внезапной остановке:

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

2. Сохрани рабочее состояние. Сделай Git-коммит или копию проекта до новых экспериментов.

3. Попроси объяснить причину. Не отправляй сразу новый общий запрос «почини всё». Попроси назвать ошибку, затронутые файлы и минимальную правку.

4. Начни короткую сессию. Очисти контекст командой /clear или открой новый разговор для одной задачи.

5. Проверь лимит. Выполни /usage. Он помогает отличить достигнутый лимит от ошибки установки или сервиса.

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

Сессия может завершиться после нескольких запросов из-за лимита. Лимит зависит от подписки, модели, размера проекта, контекста, параллельных задач и длительности сессии. Точные цены и лимиты Pro и Max зависят от тарифа и региона, поэтому я не буду приводить случайные цифры.

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

Если агент зависает надолго, используй /doctor. Команда проверяет установку, настройки, MCP, контекст и другие возможные причины. Не списывай каждый зависший ответ на плохой промпт: причиной может быть сервисный сбой или конфликт плагина.

Вопросы и ответы