Первый проект в Claude Code: от пустой папки до работающего сайта

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

Что ты получишь в конце гайда

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

Сайт откроется только у тебя на компьютере — пока это не то же самое, что “сайт в интернете”. Чтобы поделиться им с другими (опубликовать, чтобы открывалось по ссылке) — нужен отдельный шаг, про это будет отдельный гайд.

Время. Около 30-45 минут, если всё идёт гладко. Первая установка может занять больше, если споткнёшься о какую-то ошибку.

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

Если застрянешь на любом шаге — напиши: /consult. Разберём на живом примере.

Зачем это нужно

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

Разница ощущается с первых минут. Ты говоришь: “Создай простой персональный сайт” — и Claude Code не пишет тебе длинное объяснение, а создаёт файлы в твоей папке. Ты смотришь, что получилось, и направляешь.

В этом гайде мы пройдём весь процесс — от пустой папки до первого запуска проекта в браузере.

Часть 1: Подготовка

Шаг 1: Убедись, что Claude Desktop установлен

Если у тебя ещё нет приложения Claude Desktop — скачай его с сайта claude.ai и установи. Это обычная программа, как любое другое приложение на компьютере. Для работы с вкладкой Code нужна платная подписка Claude Pro, Team или Enterprise.

Шаг 2: Открой вкладку Code

Запусти Claude Desktop и переключись на вкладку Code. Ты увидишь поле ввода — это значит, что Claude Code готов к работе.

Что-то пошло не так — напиши: /consult.

Часть 2: Создаём первый проект

Мы сделаем простую персональную страницу — одна HTML-страница, которую можно открыть в браузере. Это хороший первый проект: видишь результат сразу, всё понятно, никаких сложных наворотов.

Короткое пояснение по терминам. HTML — это структура страницы (что где расположено: заголовок, текст, кнопки). CSS — это внешний вид (цвета, размеры, шрифты, отступы). JavaScript — это интерактив (что происходит, когда ты кликаешь на кнопку). Всё вместе — три базовых “языка” любого сайта.

Шаг 1: Создай папку для проекта

Создай на рабочем столе новую папку my-first-site — обычным способом, через Finder (Mac) или Проводник (Windows).

Шаг 2: Открой эту папку во вкладке Code

Во вкладке Code в Claude Desktop открой папку my-first-site. Теперь Claude Code видит твою пустую папку и готов работать.

Шаг 3: Опиши, что хочешь получить

Напечатай в Claude Code (можно прямо копировать):

Создай простой персональный сайт. Одна страница. Включи: моё имя (напиши “Имя Фамилия” — я потом поменяю), краткое описание кто я (3-4 предложения-заглушки), список из 3-4 навыков, раздел “Связаться со мной” с email-ссылкой. Дизайн — минималистичный, современный, тёмная тема. Одна HTML-страница, без сложных надстроек, чтобы я мог просто открыть двойным кликом.

Что произойдёт. Claude Code создаст файлы прямо в твоей папке. Ты увидишь, как он пишет код — файл за файлом. Обычно занимает 30-60 секунд.

Шаг 4: Открой результат

Когда Claude Code закончит, в папке появится файл index.html. Найди его в Finder (Mac) или Проводнике (Windows) и двойным кликом открой в браузере. Или просто скажи Claude Code: «открой index.html в браузере» — он сделает это сам.

Ты должен увидеть готовый сайт. Это пока сайт “только для тебя” — он открывается у тебя на компьютере, в интернете его не видно. Чтобы его можно было показать кому-то по ссылке — нужен отдельный шаг (публикация), про это будет отдельный гайд.

Сайт не открылся или выглядит совсем не так — напиши: /consult.

Часть 3: Учимся работать с Claude Code

Несколько задач, которые покажут, как общаться с Claude Code в процессе работы.

Задача А: Изменить контент

Напечатай в Claude Code:

Замени заглушку имени на “Алексей Петров”. В описании напиши: “Менеджер проектов в IT-компании. Увлекаюсь автоматизацией рабочих процессов и изучаю возможности AI-инструментов. В свободное время читаю о продуктивности и цифровом минимализме.” Навыки: управление проектами, работа с данными, презентации, AI-инструменты.

Claude Code сам найдёт нужные места и заменит содержимое. Обнови страницу в браузере — увидишь изменения.

Задача Б: Добавить секцию

Добавь раздел “Мои проекты” с тремя карточками. Каждая карточка: название проекта, краткое описание (2 предложения), ссылка (пока поставь ”#”). Заполни заглушками. Стиль — в той же тёмной теме.

Задача В: Починить проблему

Если что-то выглядит не так — просто скажи об этом:

Кнопка “Написать мне” слишком маленькая на мобильном. Сделай её больше и добавь отступ сверху.

“На мобильном” — это про то, чтобы сайт нормально выглядел и на телефоне, а не только на большом экране. Это свойство называется “адаптивность” — страница сама подстраивается под размер экрана.

Claude Code найдёт, где настроен внешний вид кнопки, и исправит.

Как правильно формулировать задачи

За несколько часов работы ты почувствуешь разницу между хорошими и плохими запросами.

Плохо: “Сделай красивее” Хорошо: “Увеличь шрифт заголовков, добавь больше пространства между секциями, сделай у кнопок закруглённые углы”

Плохо: “Что-то не работает” Хорошо: “При клике на кнопку ‘Связаться’ ничего не происходит — должен открываться почтовый клиент с моим адресом”

Плохо: “Сделай как у Apple” Хорошо: “Стиль минимализм: много белого пространства, тонкие линии, один акцентный цвет, крупный заголовок”

Claude Code видит весь твой проект. Но чем точнее запрос — тем точнее результат.

Что делать, если что-то пошло не так

Ошибка на экране. Скопируй текст ошибки целиком и вставь в Claude Code:

Получил вот такую ошибку: [вставь текст ошибки]. Что это значит и как исправить?

Claude Code объяснит, в чём дело, и поправит.

Сайт выглядит не так, как хотелось. Опиши конкретно, что не нравится:

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

Claude Code сделал не то, что ты имел в виду. Это нормально. Просто скорректируй:

Это не совсем то, что я хотел. Пусть карточки стоят в ряд по горизонтали, а не друг под другом.

Вообще ничего не понимаешь, что происходит — напиши: /consult. Разберём.

Итог

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

Что может быть дальше: сделать сайт “настоящим” — чтобы он открывался по ссылке в интернете (про это — отдельный гайд про публикацию). Или собрать следующий мини-проект — например, простой трекер привычек, каталог твоих клиентов, небольшой API (способ, которым программы общаются друг с другом — как меню в ресторане: ты выбираешь из списка, кухня готовит) для собственного приложения.

Следующий гайд — про ежедневные рабочие сценарии: отладка, ревью кода, тесты и изучение чужих проектов. Всё, что Claude Code закрывает в повседневной работе.

Для тех, кто хочет разобраться в технических деталях

Что вообще такое “открыть HTML-файл в браузере”? HTML-файл — это текстовый файл с разметкой, который браузер умеет читать и показывать как страницу. Когда ты открываешь его двойным кликом, браузер просто открывает файл с твоего диска — без интернета и без сервера. В адресной строке при этом будет не https://..., а file://... — это признак того, что страница лежит у тебя локально.

Почему браузерный файл ≠ “сайт в интернете”? Чтобы страницу открыли другие люди, нужно, чтобы её файлы лежали на каком-то компьютере, который всегда включён и имеет постоянный адрес в интернете. Такой компьютер называется “сервер”. Есть сервисы (GitHub Pages, Vercel, Netlify), которые бесплатно дают такой сервер для небольших сайтов — про них будет отдельный гайд про публикацию.

Вкладка Code и терминал — какая связь? Под капотом вкладка Code в Claude Desktop использует тот же движок, что и Claude Code в терминале (программа для ввода текстовых команд компьютеру). Опытные разработчики могут запускать Claude Code напрямую из терминала — но для этого нужно поставить дополнительные программы (Node.js и npm). Через вкладку Code в Claude Desktop всё это не нужно — приложение делает за тебя.

Что такое “зависимости” и почему Claude Code иногда их ставит? Зависимость — это готовый кусок чужого кода, который нужен твоему проекту, чтобы работать. Например, если проект использует библиотеку для работы с картинками, эта библиотека — зависимость. Когда Claude Code видит, что для задачи нужна какая-то зависимость, он сам её поставит и скажет об этом.