Claude Code: как собрать настоящее приложение от плана до работающего сайта. Пошагово

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

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

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

Что получится в итоге

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

Приложение собирается на Next.js с Tailwind. За вход и базу данных отвечает Supabase, за хранение и плеер видео медиасервис ImageKit. Этот набор выбран в примере, вы можете взять свой.

Что понадобится

• Claude Code в терминале. В терминальной версии больше возможностей, чем в приложении для компьютера.
• Пустая папка проекта. Откройте в ней терминал и запустите claude.
• Аккаунты сервисов. В примере это Supabase и ImageKit, оба можно завести бесплатно.

Шаг 1. Сначала план, а не код

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

Переключите Claude Code в режим планирования: нажмите Shift+Tab. В нём агент думает над задачей и ничего не строит. Внизу экрана видна надпись о включённом режиме.

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

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

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

Шаг 2. Выбираем минимальную версию и стек

Нужно понять две вещи: какой минимальный продукт уже решает задачу пользователя и на чём он будет сделан (веб, программа для компьютера, мобильное приложение). Агент выберет стек сам, если его не остановить. Поэтому всё важное прописывайте заранее: базу данных, готовые сервисы, библиотеки. В примере это Next.js, Supabase и ImageKit.

В примере план подготовили заранее и вставили одним промтом. Вот его смысл:

Хочу сделать закрытую видеоплатформу из двух частей. Для зрителей: лента карточек, страница просмотра с плеером и мини-плеером, плейлисты, тёмная тема. Для автора (вход обязателен): загрузка видео перетаскиванием, название, описание и кадр превью, публикация в один клик, пометка «только для участников». Стек без обсуждения: Next.js с Tailwind, Supabase для входа и базы, ImageKit для всей работы с видео. Дай план по вехам, которые можно собирать и проверять по одной. Держись ровно этого списка: поиск и подписки пока не добавляй.

Обратите внимание на последнюю фразу: границы задачи прописаны прямо в промте.

Шаг 3. Читаем план и работаем по вехам

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

В примере восемь вех: каркас с тёмной оболочкой, схема базы и вход, загрузка видео, управление видео, лента, страница просмотра, плейлисты и доводка. У каждой вехи в плане есть строка «Проверка»: что именно должно заработать. Например, для каркаса это запуск npm run dev и тёмная оболочка на экране. Так вы принимаете работу по частям.

В конце плана есть заметка, на которую стоит обратить внимание. Адреса файлов в ImageKit публичные, поэтому ограничение «только для участников» работает на уровне приложения, а не хранилища. Для настоящей защиты позже понадобятся закрытая папка и подписанные адреса. Такие вещи полезно замечать заранее.

После плана нажмите Esc: план остаётся в контексте агента.

Шаг 4. Ставим навыки

Навыки (skills) учат агента делать конкретную работу лучше. Список доступных смотрите командой /skills.

Для примера нужны два навыка про дизайн: навык Anthropic про дизайн интерфейсов и навык UI UX Pro Max. Они нужны, чтобы сайт не выглядел как типичный сайт «от нейросети». Ставятся просто: скопируйте адрес репозитория на GitHub, вставьте агенту и попросите установить:

Прежде чем двигаться дальше, установи, пожалуйста, два навыка. Дам адреса репозиториев GitHub: изучи их и установи подходящий файл навыка для этого проекта.

Затем снова откройте /skills: новые навыки должны появиться в списке.

Шаг 5. Подключаем MCP-сервер Supabase

MCP-сервер даёт агенту доступ к внешнему сервису: через него агент сам создаст таблицы и применит миграции. Подключённые серверы видно по команде /mcp.

Команду берут из документации сервиса. У Supabase в разделе про инструменты ИИ есть страница MCP-сервера, а на ней команда, которая начинается с claude mcp add --scope project. Её запускают в отдельном окне терминала, не внутри Claude Code.

После команды снова запустите claude и согласитесь использовать новый сервер. Вверху появится предупреждение, что нужна авторизация. Введите /mcp, выберите сервер, нажмите Enter и Authenticate. Откроется браузер, где нужно войти в аккаунт Supabase и выбрать проект.

Шаг 6. Плагины сервиса и документация

Для видео нужен ещё ImageKit: хранение, доставка, миниатюры и плеер. В его документации есть раздел о работе с ИИ: готовые навыки, MCP-серверы и документация одним текстовым файлом. Плагин ставится двумя командами внутри Claude Code:

/plugin marketplace add imagekit-developer/skills

/plugin install imagekit-plugin@imagekit-tools

Выберите область «только для этого проекта». Общее правило: если сервис предлагает навык, плагин или MCP-сервер для агентов, ставьте его до начала сборки. По документации ImageKit, модели обучены на старых версиях сервиса и без таких инструментов могут выдумывать параметры.

Дальше расскажите агенту про новый плеер. В документации есть кнопка «Copy for LLM»: нажмите её, вставьте текст агенту и добавьте:

Вставляю справку из документации. Хочу, чтобы в этом проекте использовался их новый видеоплеер. Учти это и обнови план.

Агент создаёт файл PLAN.md: стек, схема базы, порядок работ и нужные переменные окружения. Теперь план живёт в проекте, а не только в чате.

Шаг 7. Автоматический режим и первая сборка

Когда подготовка закончена, снова нажмите Shift+Tab и включите автоматический режим: агент пойдёт по плану без вопросов на каждое действие. В примере основа приложения собиралась несколько минут.

После каркаса агент сообщает, что значения ImageKit пока заглушки, и просит прописать четыре значения: идентификатор, адрес, публичный и приватный ключи. Их находят в панели сервиса, в разделе для разработчиков. Для просмотра может понадобиться ввести пароль.

В примере значения вставили прямо в чат. Это не лучшая практика: агент их видит. Приватный ключ лучше держать в файле .env.local и никому не показывать.

Шаг 8. Запускаем и чиним

Попросите агента запустить сервер и откройте адрес в браузере. При регистрации в примере возникла ошибка: сайт сообщал об успехе и обещал письмо, но письмо не приходило, а вход отвечал «неверные данные». Не паникуйте, а опишите ошибку подробно:

Когда я регистрируюсь, пишет, что всё получилось и сейчас придёт письмо. Но письмо не приходит. А при входе с теми же данными пишет, что данные неверные. Помоги, пожалуйста, это починить.

После исправления вход заработал.

Шаг 9. Дизайн-система до страниц

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

Сделай дизайн-систему с помощью навыка про дизайн интерфейсов. Только тёмная тема, почти чёрный фон, один сдержанный акцентный цвет, высокая контрастность. Покажи страницу по адресу /design, чтобы я оценил её до того, как мы будем делать настоящие страницы.

На странице /design появляются палитра из восьми значений (семь серых и один янтарный), типографика, кнопки и карточки. Если всё устраивает, попросите применить дизайн-систему ко всему приложению. Если нет, правьте элементы по одному.

Шаг 10. Проверяем по функциям и дорабатываем

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

Автоматические субтитры с первого раза не появились: по предположению, при первом запуске их генерация занимает несколько минут. Затем попросили добавить минимальный кабинет автора с аналитикой из плеера и несколько тестовых каналов с вымышленными данными. В итоге в кабинете появились просмотры, время просмотра, подписчики и лайки по каждому видео, заработали поиск и история.

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

Если вы работаете из России

Подход не привязан к одному инструменту. План в файле, навыки, MCP-серверы, дизайн-система и проверка по вехам работают с любым кодинг-агентом, который это поддерживает. Документация ImageKit в примере перечисляет Cursor, VS Code, Windsurf, Claude Code и Codex.

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

Next.js и Tailwind открытые. Supabase по документации проекта можно развернуть у себя, но в примере используется облачная версия. Доступность ImageKit из России проверьте до старта.

Что важно знать до старта

• Агент добавляет лишнее. Поэтому в промте нужны границы: «поиск и подписки пока не добавляй».
• Ключи в чате. Всё, что вы вставили в диалог, видит агент. Приватные ключи держите в файле окружения.
• План нужно читать. Без этого можно уйти в совершенно неверном направлении.
• Не всё работает с первого раза. В примере были проблемы со входом, размером видео, счётчиком просмотров и субтитрами. Их нужно описывать агенту подробно.
• Закрытый доступ только на уровне приложения. Файлы в хранилище публичные.
• Автоматический режим. Агент идёт по плану без вопросов, поэтому проверьте план до его включения.

Мы в Агентехе учим сотрудников собирать с ИИ-агентами рабочие инструменты для своих задач: от плана и ограничений до проверки результата. Как устроено обучение.