Первый проект с нуля

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

Хороший проект начинается не с длинного текста, а с плана. Сначала договариваешься о том, что будет сделано — потом Claude Code берётся за работу. Это меняет всё.

Выбор задачи

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

Хорошие варианты для старта: личный сайт-визитка, страница с контактами, простой калькулятор, форма для сбора заявок, автоматизация таблицы в Excel. Всё это маленькое, конкретное, и результат виден сразу.

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

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

Шаблон формулировки идеи

Когда выбрал задачу — собери её в одну фразу по шаблону. Это твой якорь, к нему будем возвращаться когда Claude начнёт уплывать в сторону.

Я создаю [ЧТО] для [КОГО], чтобы решить проблему [КАКУЮ].

Примеры:
- Я создаю одностраничный сайт-визитку для себя как фрилансера,
  чтобы клиенты могли посмотреть работы и связаться.
- Я создаю калькулятор стоимости доставки для своего магазина,
  чтобы покупатели сразу видели цену и не отваливались на оформлении.
- Я создаю бот для записи в кофейню, чтобы клиенты могли заранее
  выбрать напиток и забрать без очереди.

Если не получается уместить идею в одно предложение — задача ещё не проработана. Подумай ещё или возьми что-то проще.

Папка проекта — правила именования

Перед тем как начать, создай для проекта отдельную папку. Назови её правильно с самого начала — переименовать потом сложнее, чем сделать сразу как надо.

Кириллица в пути иногда вызывает странные ошибки в инструментах разработки. Пробелы и спецсимволы — то же самое. С латиницей и дефисами ничего не сломается никогда.

Исследование — узнай как делают другие

В статье 03 разбирали алгоритм старта: идея → исследование → критика → план → реализация. Тут — практика того же алгоритма с готовыми промптами для серьёзных проектов.

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

Проведи исследование для моего проекта — [твой проект в одной фразе].
Запусти 5 агентов параллельно с разными промптами:

1. КОНКУРЕНТЫ: найди 5 примеров в нише [твоя ниша].
   Для каждого: что делает, какие функции, что хорошо, что плохо.

2. ФУНКЦИИ: какие функции обычно есть в подобных проектах?
   Список 15-20 функций. Что обязательно для MVP, что можно потом.

3. UX И СЦЕНАРИИ: 3 типичных сценария использования.
   Что удобно, что бесит, типичные ошибки разработчиков.

4. ТЕХНОЛОГИИ: какие технологии используют для подобных проектов?
   Сравни 2-3 варианта для каждой задачи.

5. МОНЕТИЗАЦИЯ: как зарабатывают подобные проекты?
   Подписка, комиссия, реклама — какие модели работают.

Сохрани результат в файл research.md в корне проекта.

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

Где смотреть для насмотренности

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

• awwwards.com — лучшие сайты мира, премии за дизайн
• dribbble.com — работы дизайнеров, много референсов
• onepagelove.com — одностраничные сайты по категориям
• behance.net — портфолио креативщиков, целые проекты с описанием

Выпиши 3-5 примеров которые цепляют, и почему. Это ляжет в основу следующего шага.

Критика — три эксперта

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

Оцени мою идею с трёх точек зрения. Проект: [твой проект].

🎨 ЭКСПЕРТ 1: UX-дизайнер с 10-летним опытом
- Какие ошибки в структуре делают новички?
- Что обязательно должно быть на странице?
- Что раздражает пользователей и заставляет уйти?

📊 ЭКСПЕРТ 2: маркетолог, специалист по конверсии
- Какой оффер зацепит клиента?
- Какие триггеры доверия нужны?
- Путь посетителя от «зашёл» до «оставил заявку»?

👤 ЭКСПЕРТ 3: потенциальный клиент — [целевая аудитория]
- На что он смотрит в первые 5 секунд?
- Что заставит остаться? Что закрыть вкладку?

Дай общий список рекомендаций. Сохрани в research.md
раздел «Экспертная оценка».

Дальше эти рекомендации лягут в основу технического задания (brief.md) — туда соберёшь всё что нужно учесть до реализации.

Plan Mode — сначала чертёж, потом стройка

Перед тем как начать, нажми Shift+Tab. Это включает Plan Mode — режим, в котором Claude Code описывает что планирует сделать, но ничего не трогает. Ни одного файла.

Ты читаешь план, говоришь да или нет, просишь поменять — и только потом Claude Code начинает строить. Как архитектор, который показывает чертёж до того, как экскаватор выехал на участок.

Shift+Tab → режим планирования включён

"Хочу сделать одностраничный сайт для фотографа. Страница с именем,
описанием и контактами. Тёмный фон, современный дизайн."

Claude Code опишет план: какие файлы создаст, что в каждом,
структуру CSS — всё до того как что-то сделает.

Если план не нравится — скажи что поменять прямо в чате. «Добавь отдельный раздел с портфолио» или «убери форму обратной связи, мне она не нужна». Только после согласования жмёшь Enter и начинается стройка.

Как давать задачи

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

Плохо:  "Сделай красиво"

Хорошо: "Добавь кнопку 'Написать мне' внизу страницы.
         При клике — открывается письмо на myemail@gmail.com.
         Кнопка оранжевого цвета, как акцент на странице."

Ещё один приём — добавлять критерий проверки в конец каждой задачи. Тогда Claude Code сам проверит результат до того как доложит о готовности.

В конце каждой задачи добавляй:
"Проверь: кнопка видна, клик открывает почту, на мобильном тоже работает."

Тогда Claude Code сам проверит результат до того как доложит о готовности.

Одна задача = один диалог

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

Правило простое: одна чёткая задача на один разговор. Закончил задачу — написал /clear — начал новую задачу в чистом чате.

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

Итерации и правки

Первый результат редко бывает идеальным — это нормально и ожидаемо. Не потому что Claude Code плохо работает, а потому что словами сложно передать всё с первого раза. Итерации — часть процесса.

Когда просишь правки — говори конкретно, что именно поменять. И всегда добавляй «остальное не трогай» — иначе Claude Code может начать улучшать то, что ты не просил.

"Кнопка есть, но она слишком большая на мобильном.
 Уменьши padding до 12px 24px. Остальное не трогай."

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

Вау-эффекты и интерактивность

Скелет сайта готов — текст, секции, навигация. Дальше начинается то, что отличает обычный сайт от «вау, выглядит как у больших». Анимации появления, плавные переходы, hover-эффекты, мобильное меню. Всё это — отдельной задачей, после того как основа собрана.

Посмотри на index.html и добавь вау-эффекты:

1. Анимации появления — каждый блок плавно появляется при прокрутке
   (fade-in снизу вверх).
2. Hover-эффекты — карточки приподнимаются при наведении,
   кнопки меняют цвет с плавным переходом.
3. Плавная прокрутка — клик по меню скроллит к секции.
4. Градиентный фон заголовка — анимированный, медленно меняет цвета.

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

Добавь в index.html интерактивные элементы:

1. Кнопка «наверх» — появляется при прокрутке,
   плавно возвращает к началу.
2. Форма обратной связи — имя, email, сообщение.
   При отправке — красивая анимация успеха
   (реальная отправка не нужна, только визуал).
3. Счётчики — числа плавно «накручиваются» при появлении на экране.
4. Мобильное меню — гамбургер-иконка раскрывает меню на телефоне.

Проверь работу на мобильном и десктопе.
После проверки выдай отчёт что добавил.

Не делай это всё одним промптом — анимации одной задачей, интерактив другой. Так Claude меньше путается, и легче откатить если что-то пошло не так.

Скриншоты как контекст

Иногда словами объяснить тяжело — проще показать. Claude умеет читать картинки: ошибку из браузера, макет из Figma, скриншот «получилось не так». Скриншот плюс короткое описание — самый быстрый способ объяснить что не нравится.

Три ситуации где скриншот незаменим:

Вот что показывает браузер. Почему не работает?
[прикреплён скриншот]

Вот макет из Figma. Сделай похожую страницу.
Главное — попасть в общее ощущение, а не пиксель в пиксель.
[прикреплён скриншот]

Получилось вот так, но мне нужно по-другому.
Кнопка должна быть справа, а не слева. Текст крупнее.
[прикреплён скриншот]

Поиск по проекту

Когда проект разрастается — десятки файлов и тысячи строк — найти что-то глазами становится тяжело. Claude видит все файлы сразу и может найти быстрее. Несколько готовых промптов на каждый день.

Покажи структуру проекта — какие папки и файлы есть в корне,
что в подпапках. Только список, без содержимого файлов.

В каком файле находится секция «Цены»?

или

Найди где определена функция calculateTotal.

Покажи все места где упоминается слово «диагностика».

или

Найди все места где вызывается API /users.

Прочитай файл styles.css и объясни простыми словами
что там происходит. Какие секции, что они делают.

Эти промпты — не «команды», а обычные предложения. Можешь говорить любыми словами, Claude поймёт.

Когда что-то пошло не так

Бывает: попросил одно, получил другое, и файлы уже изменены. Без паники — есть два инструмента.

Быстрый откат: дважды нажми Escape или напиши /rewind. Claude Code откатит и файлы, и разговор к тому моменту, с которого всё пошло не так.

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