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

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

Источник: https://vibeceh.ru/guides/claude-code-dlya-ne-kodera-pervyj-zhivoj-sajt
Автор: Сергей Мазур · опубликовано 2026-08-08

Claude Code - это ИИ-агент, который работает не только в чате. Он читает код и структуру проекта, меняет файлы, запускает команды, пишет тесты и помогает довести задачу до результата. В этой инструкции я покажу, как с нуля собрать простой сайт, проверить его локально, сохранить проект в GitHub и понять, почему `localhost` ещё не является публичной страницей.

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

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

Claude Code - ИИ-агент для работы с проектом, а не чат с ответом в одном сообщении. Он читает код, редактирует файлы, запускает команды, пишет и запускает тесты, работает с GitHub. Типичные claude code tasks для сайта: изучить проект, создать файлы, запустить проверку и исправить найденное.

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

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

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

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

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

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

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

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

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

Claude Code работает с репозиторием и командами, а Claude Desktop и claude.ai предназначены для разговоров и разовых вопросов. Cursor остаётся визуальным редактором кода с автодополнением. Инструменты используют одну модельную семью, но дают ей разную рабочую среду и разные способы взаимодействия с проектом.

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

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

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

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

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

Claude Code: терминальный агент, который читает репозиторий, редактирует файлы и запускает команды. Desktop и claude.ai: чат-интерфейсы для разговоров и разовых вопросов.

| Инструмент | Среда | Сценарий |
|---|---|---|
| Claude.ai / Claude Desktop | Чат-интерфейс | Разговоры, разовые вопросы, черновики, объяснение ошибок |
| Cursor | Визуальный редактор | Правка кода с автодополнением, просмотр файлов рядом с запросом |
| Claude Code | Терминал + папка проекта | Чтение репозитория, изменение файлов, запуск команд и проверок |

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

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

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

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

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

Терминал - это окно, в котором ты запускаешь команды текстом. Claude Code связывает текущую папку с проектом: после запуска из каталога он видит содержимое этого каталога и работает с ним. Команда `claude` открывает сессию, а дополнительные флаги передают запрос, продолжают разговор или обрабатывают содержимое файла.

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

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

```bash
claude
```

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

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

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

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

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

```bash
claude -c
```

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

```bash
claude -r
```

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

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

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

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

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

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

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

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

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

Перед первым запуском нужны поддерживаемая операционная система, интернет, минимум 4 ГБ оперативной памяти, процессор x64 или ARM64, аккаунт Anthropic или подходящая облачная учётная запись, установленный Claude Code и папка проекта. Claude Code требует аккаунт, поэтому одной установки программы недостаточно.

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

- 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.

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

Для использования Claude Code требуется аккаунт.

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

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

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

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

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

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

![Кот закрывает морду лапой рядом со схемой первых шагов создания сайта в Claude Code.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-dlya-ne-kodera-pervyj-zhivoj-sajt/kadr-1.webp)

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

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

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

   ```bash
   mkdir first-site
   cd first-site
   ```

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

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

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

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

   ```bash
   claude
   ```

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

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

   

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

Описывай результат через шесть параметров: тип страницы, аудиторию, настроение, цвета, типографику, движение и ограничения. Это не абстрактные пожелания, а конкретные указания, по которым Claude соберёт страницу. Шесть параметров закрывают главный риск: Claude не заполняет пробелы случайным шаблоном, а собирает страницу под задачу. Без них он подставит стандартную цветовую схему и усреднённую структуру, не связанные с твоим продуктом. Хорошие claude code prompts задают визуальное направление сразу, а frontend-design plugin или Claude Design Skill помогают довести его до выразительных лендингов, прототипов, анимаций и HTML-артефактов.

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

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

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

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

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

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

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

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

![Сиба-ину поднимает лапу у карточек проверки главной страницы, стилей и кнопок.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-dlya-ne-kodera-pervyj-zhivoj-sajt/kadr-2.webp)

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

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

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

Дай Claude способ проверить свою работу: тесты, сборку или скриншот для сравнения.

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

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

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

`localhost` - адрес локального preview, доступный только на компьютере, где запущен dev server. Claude Code не является хостингом. GitHub хранит проект и историю изменений, но сам по себе тоже не превращает сайт в публичную страницу. Для публикации нужен отдельный deployment-план и хостинг.

![Мужчина прикрывает лицо рядом со схемой localhost, GitHub и хостинга с красным крестом.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-dlya-ne-kodera-pervyj-zhivoj-sajt/kadr-3.webp)

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

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

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

Claude Code даёт тебе 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, но [три способа опубликовать статический сайт](/guides/kuda-vylozhit-sajt) уже разобраны отдельно.

Если страница открылась только на `localhost`, сайт ещё не опубликован. Сначала проверь проект локально, затем отдельно подключи хостинг и проверь публичный URL.

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

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

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

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

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

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

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

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

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

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

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

Внутри сессии команды Claude Code управляют памятью проекта, разрешениями, планированием, просмотром изменений, проверками и продолжением работы. Для сайта достаточно карты из `/init`, `/memory`, `/permissions`, `/plan`, `/diff`, `/code-review`, `/security-review`, `/clear`, `/resume`, `/usage` и `/doctor`. Команды вызываются по мере возникновения задач, а не заучиваются списком заранее.

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

| Команда | Для чего нужна |
|---|---|
| `/init` | Инициализировать рабочие инструкции проекта |
| `/memory` | Посмотреть загруженные инструкции и память |
| `/permissions` | Посмотреть и изменить правила разрешений |
| `/plan` | Перейти к чтению проекта и подготовке плана |
| `/diff` | Посмотреть изменения |
| `/code-review` | Проверить изменения с точки зрения кода |
| `/security-review` | Запустить проверку безопасности |
| `/clear` | Очистить текущий контекст |
| `/resume` | Продолжить предыдущую сессию |
| `/usage` | Проверить использование и достигнутые лимиты |
| `/doctor` | Проверить установку, настройки, MCP, контекст и причины зависания |

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

Команды управляют Claude Code изнутри сессии.

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

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

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

Тема [claude code команды](https://code.claude.com/docs/en/commands) становится важной после первого сбоя, а не после первой красивой страницы. Поэтому сохрани эту таблицу рядом с проектом.

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

Разрешения зависят от команды и области проекта. Одноразовое подтверждение разрешает конкретное действие, а правило сохраняет решение для повторяющихся команд. Для постоянных настроек используются `Always allow`, `.claude/settings.json`, `.claude/settings.local.json` и команда `/permissions`. Не отключай контроль вслепую: постоянное разрешение действует шире одного клика.

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

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

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

```text
.claude/settings.json
```

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

```text
.claude/settings.local.json
```

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

```text
/permissions
```

Я делаю так:

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

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

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

Plan Mode предназначен для чтения проекта и подготовки плана без изменения исходных файлов. Если Claude отказывается редактировать сайт, сначала проверь текущий режим. После согласования плана выйди из Plan Mode через `ExitPlanMode` или переключи режим, затем повтори задачу на реализацию.

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

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

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

После плана:

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

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

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

Сначала останови лишние изменения и сохрани последнюю рабочую версию через Git-коммит или копию проекта. Затем попроси объяснить причину, проверь `/usage`, при длинном контексте начни короткую сессию и повтори проверку. Правдоподобный код тоже нужно запускать: с редкими библиотеками и свежими API он может не работать.

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

Длинный контекст заполняется (подробнее: [почему Claude Code теряет контекст на третьем часу](/guides/kontekst-v-claude-code-zabyvaet-proekt)). Когда разговор разрастается, качество работы снижается. Claude может забывать ранние инструкции, путать версии файлов и возвращаться к уже отвергнутым решениям.

Контекст Claude быстро заполняется, и качество работы снижается по мере его заполнения.

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

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

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

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

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

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

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

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

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

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

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

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

Начни с одной папки и простой задачи. Открой терминал, перейди в каталог проекта, запусти `claude` и попроси сначала изучить задачу и составить план. После согласования попроси создать файлы, запустить локальную проверку и исправить конкретные ошибки. Не начинай с большой системы с базой данных и API.

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

Сначала ты описываешь цель и ожидаемый результат. Затем Claude Code изучает папку и составляет план. После согласования он создаёт или меняет файлы. Дальше он запускает dev server, открывает preview, проверяет логи, сборку или тесты. Рабочее состояние фиксируется в Git, а публикация выполняется отдельно через хостинг.

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

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

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

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

Да, он может собрать интерфейс по описанию типа страницы, аудитории, настроения, цветов, типографики, движения и ограничений. Для выразительных лендингов, дашбордов и интерфейсов можно использовать frontend-design plugin. Готовый результат всё равно нужно смотреть в браузере, потому что текстовая проверка не оценивает композицию полностью.

`CLAUDE.md` хранит инструкции проекта. В нём можно зафиксировать правила работы, ограничения и важные сведения, которые Claude Code должен учитывать. Файл должен находиться в правильной директории. Команда `/memory` показывает загруженные инструкции и память.

Он читает код, редактирует файлы, создаёт функции, исправляет ошибки, запускает команды, пишет и запускает тесты, работает с Git и GitHub. Агент решает, как выполнить задачу, но не определяет за человека, какой сайт строить и подходит ли результат.

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

Claude code prompts разделяй по этапам: отдельные промпты для исследования, плана, дизайна, реализации, проверки и исправления. В каждом запросе задавай результат и ограничения. Полезная формула: «сначала объясни план, дождись согласования, измени только необходимые файлы, покажи команду проверки и её вывод».

Список claude code tasks для сайта: изучить папку, составить план, создать HTML, CSS и JavaScript, изменить блоки, исправить ошибки, запустить dev server, посмотреть логи, проверить сборку, написать тесты и подготовить Git-коммит. Публикацию в интернете нужно рассматривать как отдельную задачу хостинга.

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

Можно начать с пустой папки и попросить Claude Code создать простой статический сайт. Для первого примера достаточно одного `index.html`, без React, базы данных и API. После локальной проверки проект можно сохранить в GitHub, но публичная публикация потребует отдельного хостинга.

- [Claude Code overview](https://code.claude.com/docs/en)
- [Claude Code User FAQ](https://support.claude.com/en/articles/14554922/claude-code-user-faq)
- [CLI reference](https://code.claude.com/docs/en/cli-usage)
- [Installation](https://code.claude.com/docs/en/installation)
- [Quickstart](https://code.claude.com/docs/en/quickstart)
- [Commands](https://code.claude.com/docs/en/commands)
- [Claude Code Best Practices](https://www.anthropic.com/engineering/claude-code-best-practices)
- [Anthropic announces Claude 3.7 Sonnet and Claude Code](https://www.anthropic.com/news/claude-3-7-sonnet)
- [Anthropic Frontend Design Plugin](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design)
- [Claude Design Skill](https://github.com/jiji262/claude-design-skill)
- [Replit gives public URL in 2 clicks. Claude Code gives you localhost](https://www.reddit.com/r/ClaudeCode/comments/1rxn59o/replit_gives_public_url_in_2_clicks_claude_code_gives_you_localhost/)
- [Configure permissions](https://code.claude.com/docs/en/permissions)
- [Choose a permission mode](https://code.claude.com/docs/en/permission-modes)
- [Error reference](https://code.claude.com/docs/en/errors)
- [Troubleshooting](https://code.claude.com/docs/en/troubleshooting)