Меня зовут Дени, я разработчик в Hated.Ru. Разобрал курс про сборку сайта с Claude Code и пересобрал его под реальную работу: макет в Figma, перенос в код, GitHub и Vercel, админка, база Supabase, управление из Telegram. С проверками, которые нужны до сдачи клиенту, и промптами, которые написал сам.
Привет, я Дени, разработчик в Hated.Ru. Пишу интерфейсы на React и Next.js, серверную часть на Python, работаю с PostgreSQL, Docker и деплоем. Учусь в РТУ МИРЭА, в Институте информационных технологий.
Всё чаще мне попадаются ролики в духе «сделай сайт за два часа через ИИ». Внутри обычно копия чужого лендинга: нет админки, нет базы, никто не думал, где лежат пароли. Клиенту такой сайт не передашь. Через неделю он попросит поменять цену в расписании, и менять её будет негде.
Недавно я разобрал курс «Claude Code: сайт от дизайна до CMS». Шестнадцать уроков, около трёх часов записи. Автор ведёт один учебный проект, сайт сообщества игроков в падел с расписанием игр, ценами на тренировки, блогом и галереей, и доводит его до состояния, когда владелец сам правит сайт через админку и из Telegram.
Мне понравилась сама последовательность. Порядок шагов такой, как его строит разработчик: сначала структура и согласование, потом дизайн, потом код, потом публикация, и только после этого админка и база. Остальное я пересобрал под реальную работу. Добавил проверки безопасности, расписал, где ИИ экономит часы и где ему нужен присмотр, и вынес в отдельные блоки то, что в курсе проходит мимоходом: ключи, права доступа к базе, тарифы, которые не подходят для коммерческих сайтов. Готовые промпты курса пересказывать не буду, они принадлежат автору. Все промпты в статье мои.
Читайте как маршрут. В каждом шаге три вещи: что делаем, какой запрос даём Claude Code и что я проверяю руками. Если сайт нужен вам для работы, в конце есть список проверок перед сдачей клиенту и раздел о том, что можно отдать студии.
Маршрут учебного проекта. Каждый этап клиент подтверждает до начала следующего.
- Кто за что отвечает
- Папка проекта: что лежит внутри
- Рабочее место и три привычки
- Шаг 1. Структура и тексты
- Шаг 2. Визуальное направление
- Шаг 3. Figma MCP
- Шаг 4. Макет, который понимает код
- Шаг 5. Стек и перенос в код
- Шаг 6. Правки
- Шаг 7. GitHub и Vercel
- Шаг 8. Админка
- Шаг 9. Supabase
- Шаг 10. Проверка после подключения базы
- Шаг 11. Telegram как вторая админка
- Проверки перед сдачей клиенту
- Сколько это стоит и занимает
- Что студия берёт на себя
- Что делать дальше
- Вопросы и ответы
- Источники и документация
Кто за что отвечает: VS Code, Claude, Claude Code и остальные
На уровне файлов сайт это папка. У папки есть название, внутри лежат страницы, стили, картинки и настройки. Один файл отвечает за главную, другой за меню, третий за подключение к базе. Когда в этом разобраться, остальное встаёт на места. Пока не разобрались, в голове получается одна «нейросеть, которая делает сайты», и каждая неудача выглядит необъяснимой.
Поэтому первым делом разведём инструменты по ролям. Выберите задачу, и увидите, кто за неё отвечает.
Теперь деньги. На старте почти всё можно попробовать бесплатно, но у бесплатных планов есть условия, о которые спотыкаются именно на коммерческих проектах.
| Инструмент | Что с оплатой | Условие, о котором стоит знать |
|---|---|---|
| Claude Code | Входит в подписки Claude Pro и Max | Вход через аккаунт Claude, API-ключ не нужен. Лимиты общие с чатом Claude |
| VS Code | Бесплатно | Ставится на Windows и Mac с официального сайта |
| Figma | Есть бесплатный план | Чтение макета через MCP на нём ограничено 20 вызовами в месяц, на тарифе Professional с местом Dev или Full лимит 200 вызовов в день |
| GitHub | Бесплатный аккаунт | Для клиентских проектов делайте приватный репозиторий |
| Vercel | План Hobby бесплатный | По правилам Vercel только для личных некоммерческих проектов. Для коммерческого сайта нужен Pro, место разработчика 20 долларов в месяц |
| Supabase | Есть бесплатный план | Бесплатный проект приостанавливают после недели низкой активности, платные проекты не засыпают |
| Telegram-бот | Создание и работа бесплатны | Платить придётся только за нейросеть, если научите бота понимать свободный текст |
Лимиты и цены меняются. Актуальные значения смотрите в документации сервисов, ссылки в конце статьи.
Папка проекта: что лежит внутри сайта на Next.js
Когда Claude Code собирает сайт на Next.js, в левой колонке VS Code появляется десяток папок и файлов. Выглядит пугающе. Читать код вам не придётся, но знать, что где лежит, полезно. Клиент попросит поменять картинку, или вы будете искать, куда делся пароль админки, и сразу поймёте, куда смотреть.
Нажимайте на элементы списка.
Она может весить сотни мегабайт, и это нормально для такого стека. Сайт из-за неё тяжелее не становится: при публикации библиотеки ставятся заново по списку из package.json. В Git эту папку не отправляют. Если потеряли, команда npm install вернёт всё на место.
Рабочее место и три привычки
Подписка и вход
Claude Code входит в подписки Pro и Max. Вход идёт через аккаунт Claude в браузере, API-ключ не нужен. Лимиты общие с обычным чатом Claude, поэтому на тяжёлой сборке можно упереться в потолок: сервис предупредит заранее, а дальше можно подождать сброса, включить дополнительное использование или перейти на оплату по API. Автор курса работает на Pro и считает его достаточным для сборки сайтов. Выше нужен тем, кто собирает много проектов подряд.
Расширение для VS Code
Ставить Claude Code можно разными способами, самый простой это официальное расширение. В VS Code откройте вкладку Extensions и введите в поиск Claude Code. Результатов будет много, и часть из них выпустили неизвестные авторы. Некоторые просят ваш логин и пароль и расходуют ваши лимиты, а вы об этом не узнаете. Ставьте то расширение, у которого указан издатель Anthropic. Пошаговые инструкции меняются почти каждый месяц, поэтому сверяйтесь с официальной документацией.
Одна папка, один проект
Claude Code работает внутри открытой папки. Откроете другую, и он начнёт работать с другим проектом. Автор курса честно рассказывает, как однажды случайно сменил папку горячими клавишами и не сразу это заметил. Перед каждой сессией смотрите на название папки в заголовке окна.
Сначала изучи, потом меняй
Прежде чем ставить задачу, дайте ему разобраться в проекте. Первый запрос всегда про анализ.
Одна тема, одна сессия
Figma обсуждаем в одной сессии, база данных идёт в другую. Контекст не мешается, ответы точнее.
План и остановка
Просим предложить план и дождаться подтверждения. Так вы видите решения до того, как они превратились в файлы.
Вот запрос для первого знакомства с любым проектом.
Отмечено: 0 из 7
- Оформлена подписка Claude с доступом к Claude Code, вход выполнен через браузер
- Установлен VS Code с официального сайта
- Расширение Claude Code поставлено, издателем указана Anthropic
- Для проекта создана отдельная папка с понятным названием
- Папка открыта в VS Code, название видно в заголовке окна
- Заведены аккаунты GitHub и Vercel
- Решено, где лежат пароли и ключи: менеджер паролей и файл .env.local, не заметки и не чат
Шаг 1. Структура и тексты до первой строки кода
Claude Code и VS Code пока закрываем. В ближайших шагах они не нужны: сначала структура, тексты, референсы и дизайн, и только потом код. Автор курса напоминает порядок, который стоит выучить наизусть. Написали тексты, согласовали с клиентом. Перевели в прототип, согласовали. Перевели в дизайн, согласовали. Каждое согласование закрывает этап. Вернуться назад уже нельзя, и любая следующая правка превращается в дополнительную работу.
Где писать тексты
Автор курса пробовал писать тексты в Claude и остался недоволен. По его опыту, ChatGPT справляется лучше, и он делал тексты там, а в Claude Code уже приносил готовый материал. Это личное наблюдение автора, у вас может получиться иначе. Практическое правило проще: структуру и тексты пишите в той нейросети, чьи ответы вам нравятся, а в Claude Code несите только утверждённый результат.
Что дать нейросети до структуры
Просьба «напиши текст для сайта» без вводных даёт общий текст. Работает цепочка: задача, структура, правки, тексты. Для начала нужны три блока данных.
О проекте
Что за бизнес, что продаёт, какие у него продукты, цены и правила. В учебном примере это три еженедельных турнира с разными форматами и уровнями, групповые и личные тренировки, пакеты из восьми тренировок дешевле поштучных, галерея и блог с категориями.
Целевое действие
Что должен сделать посетитель. Здесь два сценария: на тренировку записываются через личный контакт тренера, на турнир через ссылку регистрации, которую тренер меняет каждую неделю.
Конкуренты и референсы
Ссылки на сайты соседей по рынку. Если ссылок нет, попросите нейросеть найти их самой, но проверьте, что они существуют и подходят.
На выходе получаете портреты аудитории, сводку «когда я хочу, я хочу, чтобы», позиционирование и структуру главной страницы с заголовками. В учебном примере анализ привёл к выводу, который стоит запомнить: клуб продаёт возможность найти партнёров своего уровня и регулярно играть, а корты вторичны. Поэтому позиционирование строится вокруг сообщества, и собственные площадки клубу для этого не нужны.
Первый экран: где, что и что делать
Первый вариант текста для главной автор курса забраковал: слишком большой объём. Рабочий вариант собрался из трёх частей. Заголовок называет место и предложение, ниже короткая строка, ещё ниже две кнопки с конкретными действиями.
Падел в Аликанте. Посетитель сразу понимает, что это про его город.
Турниры, тренировки и сообщество игроков. Три вещи, которые клуб действительно даёт.
Две кнопки: «Выбрать турнир» и «Записаться на тренировку».
Вот запрос для структуры. Он остановит нейросеть на каждом шаге, чтобы вы успели поправить.
Автор курса рассказывает, что подписывал с клиентом акт после каждой итерации, иначе правки шли бесконечно. Я бы закрепил то же самое в договоре: после согласования макета новый блок считается отдельной работой. Клиенту проще услышать это в начале проекта, чем в конце.
Шаг 2. Визуальное направление: мудборд, референсы, концепция
Мудборд это подборка работ, которые нравятся вам и клиенту. На них опирается дизайн, и по ним потом правятся тексты первого экрана. Начинать автор курса советует с Pinterest: нашли подходящую работу, сделали скриншот, закинули в Figma. Дальше идут Dribbble и подборки первых экранов. Поиск не обязан совпадать с темой клиента. Запрос «веб-дизайн падел» сужает круг слишком сильно, «веб-дизайн» даёт больше вариантов.
Все работы в одной стилистике
Если рядом лежат разные миры, нейросеть смешает их, и получится каша. Выберите одно направление и держитесь его.
Референс подходит аудитории
Эффектная работа из другой вселенной не продаёт. Космический стиль для производителя удобрений бьёт мимо людей, которые будут покупать.
Работы нейросетей читаются сразу
Автор курса замечает, что дизайны, целиком сгенерированные нейросетью, узнаются по перегруженному экрану: десяток идей на одном кадре. Берите их как черновик.
Одна работа главная
В итоге выбираете один референс за основу. Автор перебрал несколько вариантов и вернулся к самому первому.
Как рисуется концепция
Референс скидывается в чат, и нейросети ставится задача: нужен сайт в таком же стиле, перепиши тексты первого экрана под эту картинку. Первые попытки автора вышли слабыми: тёмные, перегруженные, без характера. Работало другое. Сначала просим art direction: композицию, сетку, масштабы типографики, стили карточек. Потом рисуем блок за блоком, каждый раз делаем скриншот и кладём в Figma. Один блок, пакеты тренировок, автор переделывал заново, потому что исходный сильно раздражал.
Вот запрос, который собирает этот порядок в один.
Почему не просить дизайн у Claude Code
Автор проверил и это. Из любопытства он отдал референс и тексты прямо в Claude Code. Получился терпимый черновик, который подтягивается по ширине экрана одним запросом, но без картинок и без согласованного дизайна. Причину автор формулирует так: Claude Code мыслит технически, графика ему даётся хуже, и вместо иллюстраций у него в лучшем случае простые SVG. Для показа клиенту такого результата мало, а лимиты на переделки уходят быстро.
- Зафиксируйте в одном месте цвета, шрифты и размеры заголовков. Это пригодится на шаге 4 и при сборке.
- Проверьте лицензии на шрифты и картинки. Нейросеть может подставить то, что нельзя использовать в коммерческом проекте.
- Утвердите концепцию с клиентом в виде картинок до того, как открывать Figma для сборки.
Шаг 3. Figma MCP: Claude Code читает макет вместо картинки
Скриншот макета Claude увидит и многое поймёт. Но для него это остаётся картинкой: размеры, отступы и сетку он оценивает на глаз. Нужно, чтобы он читал макет на своём языке, где есть flex и grid, расстояния, ширины и внутренние отступы. Для этого существует MCP.
MCP за минуту
MCP, Model Context Protocol, это способ подключить ИИ к источнику данных. Он есть у Figma и у ряда других сервисов. Расшифровку запоминать не нужно, достаточно принципа: Claude Code получает в руки структуру макета, и фотография макета ему больше не нужна.
Расширение Figma for VS Code и MCP: две разные вещи
Тут легко запутаться, потому что обе вещи называются похоже. Они делают разное.
| Figma for VS Code | Figma MCP | |
|---|---|---|
| Что связывает | Figma и редактор VS Code | Claude Code и Figma |
| Кто читает макет | Вы, прямо в редакторе | Claude Code, сам |
| Что даёт | Просмотр кадров, инспекция элементов, возможности Dev Mode внутри VS Code | Чтение структуры макета, переменных и компонентов, скриншоты, а на удалённом сервере ещё и создание содержимого на холсте |
| Зачем нам | Удобно сверять вёрстку с макетом глазами | Основной способ передать макет в код |
Подключение по шагам
Figma рекомендует удалённый сервер: у него больше возможностей, чем у настольного варианта. Команды ниже взяты из документации Figma и проверены мной на актуальность.
Установите плагин Figma
Предпочтительный способ по документации Figma. Плагин приносит настройки MCP-сервера и готовые сценарии работы.
Или добавьте сервер вручную
Флаг --scope user делает подключение доступным во всех ваших проектах. Без него Figma подключится только к текущей папке, и завтра в новом проекте всё придётся повторять.
Разрешите доступ к аккаунту
Запустите новую сессию Claude Code и введите /mcp. Выберите figma, затем Authenticate и нажмите Allow Access в открывшемся окне браузера. В конце должно появиться сообщение «Authentication successful. Connected to figma».
Проверьте статус
Команда claude mcp list показывает подключённые серверы и их состояние. Внутри сессии то же самое покажет /mcp.
Проверьте доступ к своему файлу
Скопируйте ссылку на кадр в Figma, вставьте в запрос и спросите, видит ли Claude Code этот файл. Затем попросите создать на холсте тестовый кадр и залить его чёрным цветом. Если кадр появился, связка работает в обе стороны.
Если что-то не подключается, делайте скриншот ошибки и спрашивайте нейросеть, что она значит. Автор курса советует именно так. Можно даже попросить сам Claude Code установить MCP: он проведёт по шагам и попросит войти в Figma в браузере.
Лимиты на чтение макета
Каждое обращение Claude Code к макету считается вызовом инструмента, и у вызовов есть потолок. Он зависит от тарифа Figma и типа места.
| План и место | Лимит вызовов |
|---|---|
| Starter, место View или Collab | до 20 в месяц |
| Professional, Dev или Full | до 200 в день, 10 в минуту |
| Organization, Dev или Full | до 200 в день, 15 в минуту |
| Enterprise, Dev или Full | до 600 в день, 20 в минуту |
| Образовательные планы | как Professional Dev или Full |
По документации Figma. Инструменты записи вроде create_new_file и whoami в лимит не входят.
В курсе предлагают купить на стороннем сервисе пакет Figma Pro на полгода. По сути это чужой логин и пароль от аккаунта, который кто-то оформил на себя. Я бы так не делал. Макеты клиента окажутся в аккаунте, которым вы не управляете и который могут закрыть в любой момент вместе с файлами.
Рабочие варианты проще: платное место Dev или Full, образовательный план для студентов и преподавателей или бесплатный Starter, чтобы проверить связку на одном блоке в рамках лимита.
Шаг 4. Макет, который понимает код
Статичная картинка превращается в макет из блоков. Каждый блок это отдельный кадр, а элементы внутри лежат по правилам auto layout: направление, отступы, выравнивание. Для Claude Code такая структура читается почти как готовая вёрстка. Автор курса показывает, как Claude Code по ссылке сам собирает кадры из двух картинок. Я предлагаю такой порядок.
Подготовьте картинки блоков
Положите в Figma и переименуйте по смыслу: «Первый экран», «Карточки». Не оставляйте имена вроде «Image 5».
Задайте кадры и сетку
Ширину десктопного кадра выберите сами, например 1440 или 1600 px. Автор курса берёт сетку из 12 колонок с отступами по 20.
Передайте задачу Claude Code
Дайте ссылку на кадр и запрос из блока ниже. Просьба об auto layout должна прозвучать сразу, иначе потом блоки придётся пересобирать.
Проверьте результат в Figma
Откройте панель слоёв: должны быть понятные названия, у кадров включён auto layout, направление можно переключить с горизонтального на вертикальное и вёрстка не ломается.
Подставьте фотографии сами
Заполнять макет изображениями Claude Code не будет. Фото и иллюстрации добавляете вы.
Имена слоёв по методике БЭМ
БЭМ расшифровывается как блок, элемент, модификатор. Идея простая: блок называется по смыслу, его части тоже. Когда Claude Code верстает, из слоя получается понятный класс, и вам потом не нужно гадать, что такое Frame 1284.
Так выглядит панель слоёв по умолчанию
Frame 1284Group 33
Rectangle 12
Text
Frame 1291
По названию не понять, что это шапка, а что карточка. Любая правка превращается в поиск.
Так нужно
HeroSectionHeroHeading
HeroSubtext
HeroCards
HeroCard
Структура читается как оглавление. Claude Code получает готовые имена для классов и компонентов.
На записи автор курса увидел, что Claude Code взял в новый кадр содержимое из других кадров. В файле накопилось много мусора, и названия совпадали. Лечится двумя способами. Скопируйте нужные кадры в чистый документ Figma и работайте там. Либо дайте ссылку именно на тот кадр, который нужен, и добавьте в запрос слова «дизайн от себя не придумывай». Спорить с уже сделанным дольше, чем повторить в чистом файле.
Менять содержимое Figma через MCP, по словам автора, получится на платном аккаунте. Проверьте это на тестовом кадре из шага 3, прежде чем планировать на этом сборку макета.
Шаг 5. Стек и перенос в код
Теперь можно открывать VS Code и Claude Code. Первое решение: на чём будет сайт. Просьба «сделай сайт» без стека ничего не решает. Вариантов миллион, и Claude Code выберет сам, а вам потом с этим жить.
Три базовых стека простыми словами
HTML, CSS, JavaScript
HTML задаёт содержание, CSS внешний вид, JavaScript поведение: меню, формы, переходы. Подходит для сайта, который собрали один раз и больше не трогают.
React
Интерфейс собирается из компонентов. Карточку игры описали один раз, дальше она повторяется с разными данными. Удобно, когда сайт динамический.
Next.js
Надстройка над React. Даёт отдельные страницы, страницы новостей по адресам, работу с базой, API, авторизацию и инструменты для SEO. Нужен, когда есть админка.
Выберите, какой сайт нужен вам, и увидите, куда я бы смотрел в первую очередь.
Сначала вопросы, потом код
Перед сборкой попросите Claude Code изучить макет и задать вам вопросы по стеку. Тогда решения принимаете вы, а Claude Code только предлагает варианты. Автор курса оставляет ему выбор из нескольких вариантов и просит объяснить разницу простыми словами, если не знает, что выбрать.
Один момент из курса стоит запомнить. Автор вовремя остановил Claude Code, потому что не передал макет, и тот уже готовился что-то генерировать по собственной фантазии. Если вы задаёте стек и админку, скажите прямо, чего пока не делаем. В учебном проекте админка и база идут на шагах 8 и 9, а на шаге 5 собирается только внешний вид.
Адаптив: правила пишем сразу
Адаптивный сайт подстраивается под ширину экрана. Для этого размеры задают в относительных единицах и функциях вроде clamp, а жёсткие пиксели оставляют там, где они нужны. Важный момент: сайт должен нормально выглядеть на любой ширине, в том числе на промежуточных. Ломается обычно посередине, на 800-1000 пикселях.
Автор курса не соглашается на адаптив по принципу гармошки, когда блок просто сжимается, пока в ряд влезают две карточки, потом одна. Решение для каждой ширины принимается по смыслу блока: перестроить, перенести на другую строку или сделать вертикальную композицию. Горизонтальная прокрутка допустима для второстепенного: галерей, статей, дополнительных карточек. Главное так не листают.
Схема условная: показывает логику решений, настоящий сайт выглядит иначе.
Автор отдал Claude Code три блока в виде картинок, причём один из них не нужен. Генерация заняла около 50 минут ожидания, а результат пришлось почти полностью переделывать: язык не тот, заголовки капсом, галерея на телефоне не листается. Причина одна. Claude Code получил картинки вместо макета на auto layout. Шаг 4 пропускать нельзя.
Шаг 6. Правки: как не сжечь лимиты
Первая сборка это черновик. Откройте сайт на своём компьютере. Claude Code сам подскажет адрес, для Next.js обычно это http://localhost:3000. Слово localhost означает «этот компьютер». Если порт занят, Next.js возьмёт следующий, например 3001. Пройдите по сайту сверху вниз сначала на десктопе, потом на телефоне.
Что нашёл автор курса после первой сборки
Список знаком каждому, кто принимал вёрстку. Ниже типичные дефекты и то, как я бы сформулировал правку.
| Что видно | Как сформулировать правку |
|---|---|
| Интерфейс на другом языке, заголовки капсом | Весь текст интерфейса на русском. Капс убрать из заголовков, оставить только на кнопках |
| Бургер-меню есть на широком экране или не включается на планшете | Показывай бургер, когда пункты меню перестают помещаться, в том числе на планшете. На широком экране его быть не должно |
| Галерея на телефоне не листается | В блоке «Галерея» на ширине до 768 px сделай горизонтальную прокрутку со стрелками влево и вправо, шаг прокрутки одна карточка |
| Клик по логотипу ничего не делает | Логотип везде ведёт на главную страницу |
| Кнопка «Связаться» никуда не ведёт | Ссылка у этой кнопки такая же, как у «Записаться на тренировку» |
| Пункты подвала не совпадают с меню | Навигацию в шапке, в бургере и в подвале привести к одному списку |
| Блок собран по старой версии макета | Сверь блок с кадром Figma по ссылке [ссылка] и переверстай точно по нему |
| Кнопка «Все фотографии» не работает | Убери кнопку, раз страницы под неё нет |
Заметьте, что в последних строках правка касается логики сайта: кнопки без цели, ссылки без страниц. Часть ссылок до админки может оставаться пустой, потому что ссылки на события клиент будет назначать через неё. Для таких мест договоритесь, что это пока заглушки, иначе их отметят как ошибки.
Как собирать список правок
Пройдите по сайту и нумеруйте
Каждый дефект получает номер. Когда правки идут одной кучей, часть теряется.
К каждому пункту скриншот
Если дефект про дизайн, добавьте скриншот нужного кадра Figma. Автор курса так и делает: сначала скриншот сайта, потом кадр, который должен получиться.
Одна сессия на весь список
Откройте новую сессию, дайте ссылку на макет и отправьте все пункты одним сообщением.
Попросите проверить ссылки
Пусть Claude Code сам пройдёт по кнопкам и ссылкам и перечислит те, что ведут в пустоту.
Не бойтесь, что он переверстает всё заново. При точной формулировке изменение идёт по нужным местам, и лимиты расходуются заметно меньше, чем при первой сборке. Ориентиры из курса: три блока из картинок ушли на около 50 минут, список из семи-восьми правок закрывается минут за 15.
Отмечено: 0 из 12
- Открыл каждую страницу на десктопе и на телефоне
- Проверил ширины 1440, 1024, 768 и 390 px
- Логотип везде ведёт на главную
- Все кнопки ведут куда нужно, мёртвых нет
- Меню в шапке, бургере и подвале совпадают
- Бургер включается там, где пункты перестают помещаться
- Горизонтальная прокрутка есть только у второстепенных блоков и не ломает страницу
- Заголовки не режутся, кнопки не выходят за край экрана
- Язык интерфейса единый, капс только там, где задумано
- Изображения подставлены, у каждого есть подпись
- Каждый блок сверен с кадром в Figma
- Заглушки без ссылок помечены и согласованы с клиентом
Шаг 7. GitHub и Vercel: сайт в интернете
Пока сайт живёт на вашем компьютере. Заказчик его не увидит, и с компьютером бывает всякое. Нужны два сервиса. GitHub хранит проект и историю изменений, Vercel публикует его в интернете. Цепочка выглядит так: вы и Claude Code отправляете изменения в GitHub, GitHub передаёт их Vercel, и посетитель видит новую версию.
GitHub: история, к которой можно вернуться
Если вы поменяли двадцать файлов и поняли, что вчера всё работало лучше, история версий вернёт вас назад. Это больше, чем облачный диск: GitHub помнит каждое изменение. Репозиторий для клиентского проекта делайте приватным. Автор курса делает публичным только тот, у которого нет причин скрывать исходный код.
Сначала проверка секретов
Сейчас проект маленький и безопасный. Дальше в нём появятся пароль админки, ключи базы и токен Telegram-бота. Всё это должно лежать в .env.local, отдельно от общего кода. Поэтому первым запросом идёт проверка, и только потом отправка.
Если пароль или ключ уже попал в коммит, после удаления файла он остаётся в истории. Считайте такой секрет скомпрометированным и выпустите новый. Это правило без исключений, даже если репозиторий приватный.
Если push не проходит и Claude Code пишет про права доступа, обычно аккаунт залогинен, но у токена нет разрешения на запись в репозиторий. Проще всего авторизоваться через браузер по коду, который подскажет Claude Code. Автор курса идёт этим путём: права, выданные так, подхватываются автоматически. Загрузить проект вручную тоже можно: нужны все файлы, кроме node_modules, .env и .env.local. На Mac скрытые файлы показывает сочетание Command, Shift и точка.
Vercel: публикация на каждый push
Подключите GitHub
Зарегистрируйтесь в Vercel и разрешите доступ к репозиториям. Добавьте новый проект и выберите свой репозиторий.
Оставьте настройки по умолчанию
Для сайта на Next.js Vercel подберёт сборку сам. Нажмите Deploy, то есть опубликовать. Если репозиторий ещё пустой, публиковать будет нечего.
Дождитесь первой сборки
Первый деплой идёт дольше остальных: Vercel забирает проект, ставит библиотеки, собирает сайт и проверяет, запускается ли он. Долгое ожидание не значит поломку.
Не нажимайте Deploy по кругу
Если кнопка не сработала, повторные нажатия могут создавать новые проекты на тот же репозиторий. В курсе так появились два одинаковых проекта. Выйдите на главную панель и посмотрите, что уже создано.
Что даёт связка GitHub и Vercel, по документации Vercel. Каждый push по умолчанию публикуется: ветки и pull request получают свой адрес для просмотра, а push в основную ветку, обычно main, выходит на домен сайта. Если свежая версия оказалась неудачной, предыдущую можно вернуть на домен сразу. Отдельно в проекте ничего связывать не нужно, связка настраивается в самом Vercel.
Автор курса мимоходом замечает, что Vercel может предложить перейти на Pro, когда поймёт, что сайт коммерческий. Это записано в правилах: план Hobby разрешён только для личных некоммерческих проектов. Для клиентского сайта закладывайте Pro, место разработчика стоит 20 долларов в месяц. Если проекту нужны российские серверы или своя инфраструктура, тот же код разворачивается на VPS или в облаке Яндекса или VK. Мы настраиваем такие схемы в рамках DevOps и CI/CD.
Если на сайте будет форма с персональными данными российских граждан, помните про часть 5 статьи 18 закона 152-ФЗ: запись, хранение и извлечение таких данных должны идти в базах на территории России. В учебном проекте регион Supabase выбран «Европа», и это учебный выбор. Для боевого сайта место хранения согласуйте до разработки. Я не юрист, поэтому формулировки проверяйте у специалиста.
Отмечено: 0 из 7
- В .gitignore есть .env* и node_modules
- В коде нет паролей, ключей и токенов, они вынесены в .env.local
- Файл .env.local существует и Git его не отслеживает
- Claude Code проверил историю коммитов на секреты
- Репозиторий приватный, если проект клиентский
- Основная ветка называется main
- Вход в GitHub выполнен через браузер, право записи подтверждено
Шаг 8. Админка на тестовых данных
Сайт опубликован, но поменять в нём что-либо без разработчика пока нельзя. Клиент хочет сам править цены, выкладывать новости и менять фото на карточках. Для этого нужна админка: закрытая страница по адресу вроде /admin, куда входят по паролю.
Строить её сразу вместе с базой я бы не стал. Сначала делаем интерфейс на тестовых данных, то есть на примерах, которые лежат внутри проекта. Клиент смотрит, как это выглядит, что можно менять и каких полей не хватает. Правки на этом этапе стоят дёшево. Когда структура согласована, под неё подключают базу, и интерфейс остаётся прежним.
Что должна уметь админка небольшого сайта
Автор курса заказывает админку только для того, что клиент меняет регулярно. Универсальную систему для правки каждого слова он не строит. Я согласен: чем меньше разделов, тем меньше ломается и тем быстрее клиент в них разберётся. Ниже разделы учебной админки. Переключайте вкладки.
- Стартовая страница со списком разделов и счётчиками: сколько карточек, новостей и категорий
- Боковое меню на русском с четырьмя пунктами
- Кнопка выхода
Откройте админку на телефоне. Боковое меню должно превратиться в бургер. В курсе этого не было сразу, автор попросил отдельной правкой.
- Список карточек первого экрана. В учебном проекте их пять: турниры, тренировки, ближайшая игра, поиск партнёра и ещё одна
- Поля: название, короткий текст, фото, ссылка кнопки
- Фото прикрепляется файлом с компьютера, ссылку вставлять не нужно
Замените фото и обновите главную: новая картинка должна встать на место без поломки сетки.
Добавления и удаления карточек. Клиенты любят просить «ещё одну для особого мероприятия», и если этого нет в админке, карточка превращается в заказ на доработку.
- Список новостей, создание и редактирование
- Поля: заголовок, категория, дата, короткое описание, текст, обложка файлом
- Для каждой новости задаются title и description, чтобы ссылка красиво выглядела в поиске и в мессенджерах
- Каждая новость живёт на отдельной странице со своим адресом
Создайте новость с обложкой, откройте её страницу и сверьте адрес, заголовок и описание вкладки.
Статус «черновик» или «опубликовано». В курсе этого поля не оказалось, и всплыло оно только на шаге с Telegram. Проще заложить его с первого дня.
- Создание, переименование и удаление категорий блога
- В учебном проекте их пять, например советы, тренировки и турниры
- Категория выбирается в новости из списка
Что случится с новостями, если удалить их категорию. Договоритесь заранее: либо удаление запрещено, пока в категории есть новости, либо новости переходят в «Без категории».
- Title и description главной страницы
- Фавикон: загрузка значка вкладки прямо из админки
Смените title, обновите сайт и посмотрите на название вкладки браузера. Затем загрузите новый фавикон и убедитесь, что он подхватился.
Запрос на админку: план и остановка
Админка это новая задача, поэтому открываем новую сессию. Запрос строим по знакомой схеме: сначала изучи, потом предложи структуру, потом остановись. Список разделов и полей вы пишете сами. В нём вся суть, ведь нейросеть не знает, что клиент меняет каждую неделю.
Клиент попросил четвёртую карточку на главной. Если написать Claude Code «добавь карточку» и ничего больше, он нарисует её в вёрстке, а админка о ней не узнает. Правильная формулировка: «добавь четвёртую карточку, вот текст, и учти её в админке: добавление, редактирование, удаление». Любая правка, которая касается данных, называет и сайт, и админку.
Пароль админки и секрет сессии
Вход в админку защищён паролем. Он лежит в файле .env.local, в коде его быть не должно. Просим Claude Code создать файл, сгенерировать значения и не показывать их в чате. Пароль вы потом возьмёте из файла на своём компьютере.
Эти строки можно дописать к запросу 11 или отправить отдельным сообщением:
- Ограничение попыток входа: после нескольких неверных паролей вход блокируется на время
- Сессия хранится в cookie с флагами httpOnly и secure и подписывается секретом из ADMIN_SESSION_SECRET
- Страницы админки закрыты от поисковиков: метка noindex и запрет в robots.txt
- Для клиента заводится отдельный пароль, а после сдачи пароль разработчика меняется
Что вы увидите в первый раз
Сборка админки в курсе заняла около получаса. Откройте /admin на локальном адресе, введите пароль из .env.local и пройдитесь по всем разделам. Автор проверяет карточки, новости с загрузкой фото, категории и настройки, а потом просит мелкие правки: закрепить боковое меню при прокрутке и вынести его в бургер на телефоне.
Про одну особенность стоит предупредить клиента заранее. Тестовые данные лежат внутри проекта. На опубликованном сайте правки между перезапусками не сохраняются, и сессия иногда просит войти заново. Для показа этого достаточно. Если не объяснить, клиент решит, что админка сломана, и начнёт переживать.
Отмечено: 0 из 10
- Вход закрыт паролем, пароль взят из .env.local и в чат не попадал
- Файл .env.local Git не отслеживает
- В обзоре видны все разделы и счётчики
- Фото карточки заменяется загрузкой файла и сразу видно на главной
- Новость создаётся с категорией, обложкой, title и description
- У новости есть статус «черновик» или «опубликовано»
- Категорию можно создать, переименовать и удалить без потери новостей
- В настройках меняются title, description и фавикон
- На телефоне боковое меню превращается в бургер
- Клиент предупреждён, что на тестовых данных правки не сохраняются
Шаг 9. Supabase: данные, которые не пропадают
Админка работает на примерах, и сохранить в ней ничего нельзя. Нужно место, где данные живут постоянно: новости, категории, карточки, настройки и фотографии. Для этого подключаем Supabase. Это отдельный сервис, в котором хранятся база данных и файлы. Код остаётся в GitHub и на Vercel, данные переезжают в Supabase, а интерфейс админки не меняется. Меняется только место, куда она пишет.
| Где | Что там хранится | Кто туда ходит |
|---|---|---|
| GitHub | Код сайта и история изменений | Разработчик и Claude Code |
| Vercel | Работающий сайт и переменные окружения | Разработчик |
| Supabase, таблицы | Новости, категории, карточки, настройки | Сайт читает, админка пишет |
| Supabase, Storage | Фотографии и обложки | Сайт показывает, админка загружает |
| Файл .env.local | Ключи и пароли на вашем компьютере | Только вы |
Клиент в Supabase не заходит. Он работает через /admin и ничего про базу не знает. Панель Supabase нужна вам. В ней есть SQL Editor, окно для команд базе данных. SQL это язык, на котором с базой разговаривают. Писать его вам не придётся: команды подготовит Claude Code, вы вставите их в окно и нажмёте Run.
Создаём проект по шагам
Заведите проект
Войдите через GitHub, создайте проект, дайте ему понятное название и выберите регион. Пароль базы поручите сгенерировать сервису и сразу сохраните в менеджере паролей. Про регион для боевых сайтов с персональными данными я писал в разделе 10.
Возьмите два значения
Нажмите Connect, выберите фреймворк Next.js и скопируйте адрес проекта и публичный ключ.
Положите их в .env.local руками
Сами откройте файл и вставьте значения. В чат с Claude Code ключи не отправляем: всё, что вы туда написали, остаётся в истории переписки.
Попросите план миграции
В новой сессии отправьте запрос 12 и дождитесь плана. Пока вы его не прочитали и не подтвердили, ничего не создаётся.
Выполните SQL в SQL Editor
Claude Code подготовит файлы с командами, обычно их два или три. Откройте SQL Editor, создайте новый запрос, вставьте текст файла и нажмите Run. Результат сообщите в чат. Иногда нужно сделать несколько заходов: следуйте его инструкциям по порядку.
Выдайте серверный ключ
Для записи Claude Code попросит ещё одно значение. Его берут в настройках проекта, в разделе с ключами API. Положите значение в .env.local в том формате, который он назовёт. Ни в чат, ни в код.
Запустите перенос и проверьте
Тестовые данные и картинки переезжают в базу и в хранилище. Откройте админку, добавьте запись, загрузите фото и посмотрите, что записи видны на сайте.
Почему не написать коротко «подключи Supabase»? Автор курса объясняет: тогда Claude Code начнёт принимать десятки архитектурных решений сам. Какие создать таблицы, как хранить изображения, как устроить доступ, какие файлы переписать. Запрос с планом оставляет эти решения вам. Понимать каждое поле не нужно. Достаточно проверить четыре вещи.
Кто пишет в базу
Запись, изменение и удаление идут только с сервера, с серверным ключом. Посетитель сайта писать в таблицы не может.
Что видит публичный сайт
Только опубликованные записи. Черновики и служебные поля остаются закрытыми.
Где лежат ключи
Все значения в .env.local и в переменных Vercel, в коде их нет.
Что поменяется в коде
Список файлов в плане совпадает с тем, что вы ожидаете. Незнакомые правки в публичных страницах повод задать вопрос.
Защита строк: правила прямо в базе
В Supabase публичный ключ лежит в браузере посетителя, это штатная схема. Безопасной она становится только вместе с Row Level Security, защитой на уровне строк. Это правила внутри базы: кто и что может читать и менять в каждой таблице. Без них любой, кто знает адрес проекта и публичный ключ, обращается к таблицам напрямую. Серверный ключ эти правила обходит, поэтому он живёт только на сервере.
В учебном проекте автор при создании проекта отключает автоматические настройки доступа и задаёт права SQL-скриптами, которые написал Claude Code. Мой минимум для клиентского сайта такой: защита включена на всех таблицах, публичный сайт читает только опубликованное, запись и удаление идут только через сервер.
Светофор секретов
С ключами в этом проекте больше всего ошибок, и в курсе эта тема проходит быстро. Выберите значение и посмотрите, куда его можно класть.
Фото: Storage и настройки изображений
Фотографии лежат в хранилище Supabase, в папке, которая называется бакетом. Бакет для новостей и карточек открыт на чтение, иначе посетитель не увидит картинки. Загружать в него может только сервер. Задайте допустимые типы файлов и предельный размер: иначе клиент однажды загрузит фото на сорок мегабайт, и страница будет открываться минуту.
Есть и ещё одна мелочь. Next.js не покажет картинку с чужого адреса, пока адрес не разрешён в его настройках. Claude Code напомнит об этом сам, вам достаточно убедиться, что адрес вашего проекта Supabase в списке разрешённых.
На бесплатном плане проект приостанавливается после недели низкой активности. Для рабочего сайта клиента закладывайте платный план, он начинается от 25 долларов в месяц. До сдачи сделайте выгрузку данных и посмотрите в документации, какие резервные копии входят в ваш тариф. Актуальные условия лежат на странице тарифов Supabase, цифры там меняются.
Файл: claude-code-9-supabase-tablicy-i-storage.jpg, 1200×675
Отмечено: 0 из 9
- Пароль базы лежит в менеджере паролей, в чате и коде его нет
- Адрес, публичный и серверный ключи лежат в .env.local
- Серверный ключ без префикса NEXT_PUBLIC_ и в браузер не попадает
- План миграции прочитан и подтверждён до создания таблиц
- SQL выполнен в SQL Editor без ошибок, результат сообщён в чат
- Защита строк включена на всех таблицах
- Публичный сайт читает только опубликованные записи
- Для бакета заданы типы файлов и предельный размер, адрес Supabase разрешён в настройках изображений Next.js
- Решено, какой тариф нужен клиенту и где хранятся его персональные данные
Шаг 10. Проверка на опубликованном сайте
Клиент увидит ту версию, что работает на Vercel. Ваш localhost ему недоступен. Поэтому после подключения базы проверка идёт на опубликованном адресе. Автор курса показывает ровно ту ситуацию, с которой сталкивается каждый второй проект.
Он открывает опубликованный сайт, идёт на /admin, вводит пароль и получает отказ. На локальном адресе тот же пароль работает. Автор отправляет Claude Code скриншот и спрашивает, не связана ли ошибка с деплоем. Claude Code находит причину: опубликованный сайт не видит переменные окружения.
Почему локально работает, а на сайте нет
Файл остался на вашем компьютере
.env.local мы специально не отправляли в Git. Значит, Vercel про пароль админки и ключи Supabase ничего не знает.
Переменные добавляют в Vercel
Раздел Settings, Environment Variables. Файл можно импортировать целиком, а можно добавлять значения по одному.
Нужен новый деплой
Изменения применяются к новым сборкам. Сборка, которая уже работает, живёт со старыми значениями. Публичные ключи с префиксом NEXT_PUBLIC_ Next.js вшивает в код в момент сборки.
Как добавить переменные правильно
Откройте переменные проекта
Проект в Vercel, Settings, Environment Variables. Проверьте, что вы в нужном проекте: если вы нажимали Deploy по кругу, их может быть несколько.
Импортируйте .env.local
Перетащите файл в форму или вставьте его текст. Так вручную переписывать не придётся. Значения на этом экране видны открыто, поэтому скриншот здесь не делайте.
Отметьте Production и Preview
Автор курса проверяет каждую переменную вручную именно ради этого пункта: ошибка исчезла, когда у каждой были отмечены оба окружения.
Серверные значения пометьте Sensitive
У таких переменных значение после сохранения нельзя прочитать, его можно только заменить. Режим доступен для окружений Production и Preview. Серверный ключ Supabase, пароль админки, секрет сессии и токен бота стоит помечать.
Запустите деплой заново
Без этого шага сайт продолжит работать на старой сборке. В курсе автор тоже один раз сохранил значения и забыл нажать Deploy.
Скриншот ошибки и лог деплоя Claude Code полезны, их правильно отправлять. Перед отправкой посмотрите на кадр: нет ли там значений переменных, адресов с токенами и паролей. Один неосторожный скриншот сводит на нет всю аккуратность с .env.local.
Что ломается чаще всего
| Что видно | Вероятная причина | Что делать |
|---|---|---|
| Админка не пускает на опубликованном сайте, локально вход работает | Переменные не добавлены в Vercel или добавлены не во все окружения | Добавить, отметить Production и Preview, задеплоить заново |
| Значение поменяли, а сайт ведёт себя по-старому | Изменения переменных действуют на новые сборки | Запустить новый деплой |
| Картинки из хранилища не показываются | Адрес Supabase не разрешён в настройках изображений Next.js или бакет закрыт на чтение | Разрешить адрес, проверить права бакета |
| Вход есть, а сохранение даёт ошибку | Не добавлен серверный ключ или в таблицах нет нужной политики записи | Проверить переменные, посмотреть логи проекта в Vercel, сверить политики |
| На сайте старые данные после правки в админке | Страница закэширована и не знает, что данные поменялись | Попросить Claude Code сбрасывать кэш страниц при записи из админки |
Если причина неясна, отправьте Claude Code запрос с описанием, где ошибка и что уже работает. Правило прежнее: сначала диагноз, потом исправления.
Что проверить руками после правки
Автор не верит словам «готово» и проходит по сайту сам. Я делаю так же. Метод простой: в конец названия карточки дописываем цифры, открываем главную и ищем их. Если цифры на месте, цепочка «админка, база, сайт» работает. После проверки возвращаем название и удаляем тестовые записи.
Отмечено: 0 из 10
- Все переменные добавлены в Vercel для Production и Preview, серверные помечены Sensitive
- После изменений запущен новый деплой
- Главная открывается, картинки подгружаются из хранилища
- Вход в /admin на опубликованном адресе работает
- Изменение карточки в админке видно на сайте
- Новость с фото создаётся, открывается по своему адресу и удаляется
- Загрузка изображений работает, лишние типы файлов и огромные файлы отклоняются
- Админка проверена с телефона
- Тестовые записи удалены, названия возвращены как были
- Скриншоты и логи, которые вы отправляли Claude Code, не содержали секретов
Шаг 11. Telegram как вторая админка
Веб-админка работает, но клиенту удобнее поменять цену с телефона, пока он стоит в очереди. Решение из курса: Telegram-бот, который умеет всё то же самое и пишет в те же таблицы Supabase. Ничего не дублируется. Что поменяли в боте, видно на сайте и в веб-админке, и наоборот.
В учебном проекте после команды /start бот предлагает разделы: новости, цены, галерея, игры, SEO и администраторы. В ценах можно открыть любую тренировку и поправить название, цену, примечание и ссылку на регистрацию, а ещё добавить новую категорию. В галерее выбираются категории, добавляются и показываются фото. В разделе администраторов клиент вносит Telegram ID коллег. Автор называет это админкой, в которой разберётся любой, и я с ним согласен.
Как это устроено внутри
Telegram сам присылает сообщения
Вы указываете адрес обработчика на вашем сайте, и каждое сообщение боту Telegram отправляет туда. Такая схема называется webhook. Отдельный постоянно работающий процесс не нужен: всё идёт по запросу, как и остальной сайт на Vercel.
Пускаем только по ID
У каждого пользователя Telegram есть числовой ID. Бот отвечает людям из списка, остальным молчит. Администраторов может быть несколько: вы и клиент.
Память диалога лежит в базе
Между запросами сервер ничего не помнит. Где вы остановились, например «выбрал цены и жду новое значение», записывается в таблицу Supabase. Claude Code создаёт её сам, вы выполняете SQL.
Попробуйте диалог
Ниже учебный бот. Нажимайте кнопки и смотрите справа, какие проверки проходит каждое сообщение. Особенно интересны две нижние кнопки: так выглядит попытка чужого получить доступ.
Диалог учебный: цены и названия придуманы для примера.
Три переменные для бота
| Переменная | Что это | Где взять | Статус |
|---|---|---|---|
TELEGRAM_BOT_TOKEN | Ключ управления ботом | Выдаёт BotFather при создании бота | секрет |
TELEGRAM_ADMIN_IDS | Список Telegram ID тех, кому разрешено управлять сайтом, через запятую | Каждый узнаёт свой ID и присылает вам число | не публиковать |
TELEGRAM_WEBHOOK_SECRET | Строка, по которой обработчик узнаёт запросы от Telegram | Вы генерируете сами | секрет |
Как работает секрет. Когда вы устанавливаете webhook, вы передаёте Telegram эту строку в параметре secret_token. Дальше Telegram добавляет её в заголовок X-Telegram-Bot-Api-Secret-Token к каждому запросу. Обработчик сравнивает заголовок со своей копией. Совпало, значит запрос пришёл от Telegram. Не совпало, запрос отклоняется. Без этой проверки любой, кто узнал адрес обработчика, может отправить ему поддельное сообщение.
Подключаем бота по шагам
Создайте бота у BotFather
Найдите BotFather в Telegram и проверьте синюю галочку рядом с названием: поддельных ботов с похожими именами хватает. Команда /newbot, имя, затем имя пользователя бота, которое обязательно заканчивается на bot. Если оно занято, придумайте другое. Токен, который выдаст BotFather, сразу положите в .env.local. В чат с Claude Code его не отправляем.
Узнайте Telegram ID администраторов
В курсе для этого используют справочного бота: нажимаешь Start и получаешь числовой ID. Сам ID паролем не является, но токен вашего бота справочным ботам не давайте никогда. Клиент делает то же и присылает вам число. Для нескольких человек ID перечисляются через запятую.
Придумайте секрет webhook
Длинная случайная строка из латинских букв, цифр, подчёркивания и дефиса, до 256 символов. На Mac и Linux подойдёт команда openssl rand -hex 32. На другой системе попросите Claude Code сгенерировать строку и записать в файл.
Положите три значения в .env.local и в Vercel
В Vercel отметьте Production и Preview и помните про новый деплой. Claude Code может добавить переменные в Vercel сам, если выдать ему доступ. В курсе автор так и делает. Выдавайте такой доступ на время и только к одному проекту.
Отправьте запрос 15 и подтвердите план
Claude Code ответит планом и вопросами. Прочитайте их внимательно: именно здесь решается, нужна ли загрузка фото, кто получит доступ и нужны ли уведомления от бота.
Выполните SQL для таблиц диалога
Тот же порядок, что с Supabase: файл с командами, SQL Editor, Run, результат в чат.
Задеплойте и установите webhook
Claude Code спросит финальный домен. Назовите адрес, который останется у сайта, иначе после переезда бот перестанет отвечать. После деплоя он вызовет метод setWebhook и проверит результат.
Проверьте разделы с телефона
Сначала каждый раздел бота, потом сверьте результат с веб-админкой и с сайтом.
Что пошло не так у автора и как это чинили
Эти четыре сбоя я считаю самой ценной частью урока. Они типичны, и каждый можно предупредить заранее.
| Что случилось | Причина | Как исправили |
|---|---|---|
| Кнопка Start не отвечает | Telegram не знал адрес, куда присылать сообщения: webhook ещё не был установлен | Указали домен сайта, Claude Code установил webhook |
| Бот не работает на опубликованном сайте | Три переменные Telegram не были добавлены в Vercel | Добавили переменные и задеплоили заново |
| Новость из бота сохранилась, а в веб-админке нет галочки «публиковать» | В веб-админке не было поля статуса | Поле добавили. Автор отмечает, что правка занимает около 15 минут |
| Замена фото через бота с первого раза запутала автора | Шаги диалога шли не в том порядке | Повторили сценарий с начала. Фото обновилось на сайте |
- Если обработчик ответил Telegram ошибкой, тот повторит доставку. Поручите хранить номера уже обработанных обновлений (
update_id) и пропускать повторы, иначе одна новость опубликуется дважды. - Сайт кэширует страницы. Попросите Claude Code сбрасывать кэш при записи из бота и из веб-админки, чтобы цена обновлялась сразу.
- Боты скачивают файлы у Telegram до 20 мегабайт. Фото через обычную отправку сжимаются: для обложек новостей хватает, для крупных баннеров присылайте картинку файлом.
- Не пересылайте через бота персональные данные посетителей сайта: переписка с ботом хранится на серверах Telegram.
- Когда сотрудник уходит, его ID убирают из списка в TELEGRAM_ADMIN_IDS и деплоят заново. Запишите это в регламент для клиента.
Автор упоминает вариант, где бот понимает фразы вроде «поменяй цифры во втором блоке» с помощью нейросети. Это возможно, но платно: расход считается в токенах, и цена зависит от числа правок. Если хотите такой режим, добавляйте его после обычного меню и с тремя условиями: бот пересказывает изменение и просит подтверждения, ведёт журнал изменений и умеет откатить последнюю правку. Нейросеть, которая правит сайт без подтверждения, рано или поздно поменяет что-нибудь лишнее.
Отмечено: 0 из 10
- Бот создан у проверенного BotFather, токен лежит в .env.local и в Vercel
- Секрет webhook длинный и случайный
- В списке ID только нужные люди, клиент прислал свой ID сам
- Запрос без секретного заголовка отклоняется
- Чужой ID не получает ответа
- Webhook установлен, getWebhookInfo не показывает ошибок доставки
- Каждый раздел бота проверен с телефона и сверен с веб-админкой
- Фото из Telegram попадает в Storage и видно на сайте
- Повторная доставка не создаёт дубль
- Клиенту показали, как пользоваться ботом, и записали порядок отзыва доступа
Проверки перед сдачей клиенту
Сайт открывается, админка пускает, бот отвечает. До сдачи остаётся ещё четыре группы проверок. Курс заканчивается на работающем сайте, а вот что случится через месяц, когда клиент добавит сотрудника или уйдёт в отпуск, в нём почти не обсуждается. Я прохожу эти группы с каждым проектом.
Секреты и права
- Файлов .env нет в Git и в истории коммитов
- Серверные ключи не попадают в браузер
- Защита строк включена на каждой таблице
- Серверные переменные в Vercel помечены Sensitive
- Пароль админки заменён на пароль клиента
Аккаунты и доступы
- GitHub, Vercel, Supabase и домен оформлены на клиента, вы приглашены участником
- Решено, на чей аккаунт оформлен бот в Telegram
- Список Telegram ID актуален
- Платные тарифы подключены с карты клиента
Страницы и поиск
- На каждой странице есть title и description
- Есть страница 404, файлы sitemap.xml и robots.txt, фавикон
- У значимых изображений заполнен alt
- Тестовые записи удалены
Что будет через месяц
- Тяжёлые картинки сжаты
- Данные выгружены, резервные копии настроены
- Есть уведомление, если сайт перестал открываться
- В репозитории лежит инструкция: как запустить проект и какие нужны переменные
Большую часть этого списка Claude Code проверит сам, если попросить. Подтвердить найденное и проверить аккаунты придётся вам.
Что вы передаёте клиенту
| Что | Что внутри |
|---|---|
| Доступы | Владелец GitHub, Vercel, Supabase и домена. Вы остаётесь приглашённым участником на время поддержки |
| Список переменных | Названия переменных окружения и где каждая используется. Значения передаются через менеджер паролей, письма и мессенджеры для этого не годятся |
| Инструкция по админке | Как войти, что где менять, что делать с черновиками и категориями. Лучше в виде короткого видео с экрана |
| Инструкция по боту | Какие команды есть, как добавить и убрать администратора |
| Регламент на случай утечки | Что менять в первую очередь: пароль админки, ключи Supabase, токен бота |
| Договорённости о поддержке | Кто следит за тарифами, обновлениями библиотек и резервными копиями |
Отмечено: 0 из 12
- Запрос 17 выполнен, критичные пункты отчёта закрыты
- В Git и его истории нет секретов
- Серверные ключи не попадают в браузер, защита строк включена
- Пароль админки заменён на пароль клиента
- GitHub, Vercel, Supabase и домен оформлены на клиента
- Платные тарифы нужного уровня подключены на клиента
- Telegram ID администраторов собраны и проверены
- Тестовые записи удалены, страницы проверены на десктопе и телефоне
- Есть страница 404, sitemap.xml и robots.txt
- Данные выгружены, резервные копии настроены
- Инструкции по админке и боту переданы
- Описан порядок действий при утечке ключа
Сколько это стоит и занимает времени
Расходы на сервисы
Попробовать маршрут можно почти бесплатно. Для коммерческого сайта картина другая, и лучше заложить деньги заранее, чем объяснять клиенту, почему сайт заснул.
| Сервис | Для знакомства | Для сайта клиента |
|---|---|---|
| Claude Code | Нужна подписка Pro или Max | Лимиты общие с чатом. При тяжёлой работе подписку подбирают по нагрузке |
| Figma | Бесплатный план, чтение макета через MCP ограничено 20 вызовами в месяц | Тариф Professional с местом Dev или Full: 200 вызовов в день |
| GitHub | Бесплатный аккаунт | Приватный репозиторий на аккаунте клиента |
| Vercel | Hobby, только личные некоммерческие проекты | Pro, 20 долларов в месяц за место |
| Supabase | Бесплатный проект, засыпает после недели низкой активности. По данным автора курса: 5 ГБ исходящего трафика и 1 ГБ файлов | Pro, от 25 долларов в месяц |
| Домен | Нужен собственный адрес | По словам автора курса, 10-20 долларов в год для международных зон |
| Telegram-бот | Бесплатно | Платить придётся только за нейросеть, если добавите режим свободного текста |
Цены и лимиты взяты из документации сервисов на момент написания статьи и меняются. Сверяйте перед сметой.
Сколько времени уходит
Цифры автора курса честные, поэтому я привожу их без округления в красивую сторону.
| Что | Сколько заняло у автора |
|---|---|
| Первая сборка трёх блоков из картинок | около 50 минут |
| Исправление списка из нескольких правок | около 15 минут |
| Админка на тестовых данных | около 30 минут |
| Записанный курс целиком | 2 часа 51 минута |
| Освоение маршрута самим автором | около двух недель с тестами, ошибками и расходом лимитов |
Последняя строка важнее остальных. Видеоуроки показывают маршрут без тупиков, а настоящая работа состоит из тупиков. Реальный сайт больше учебного, макет сложнее, правок у клиента больше. Сроки таких работ в студии вы найдёте в следующем разделе.
Что студия берёт на себя
Маршрут из этой статьи можно пройти самому. В студии мы делаем так же, только с готовой практикой по безопасности и публикации и с человеком, который отвечает за результат. Ниже то, что чаще всего отдают нам. Цены взяты со страниц услуг, точную смету даём после разбора макета.
Вёрстка и интерфейс
от 30 000 ₽, срок от 5 дней
Перенос макета из Figma в адаптивный сайт. Интерфейс с логикой на React от 90 000 ₽, срок от 3 недель.
Frontend-разработкаСерверная часть и интеграции
от 60 000 ₽, срок от 2 недель
База, API, права доступа, загрузка файлов, админка. Бизнес-системы и кабинеты от 150 000 ₽.
Backend-разработкаTelegram-бот
от 30 000 ₽
Бот, через который клиент правит цены и публикует новости, с проверкой доступа и журналом изменений.
Чат-боты для TelegramОблако в России
от 30 000 ₽
Размещение в Яндекс Облаке или VK Cloud, если по 152-ФЗ данные должны лежать в России.
Настройка облакаCI/CD и выкладка
от 40 000 ₽, срок от 1 недели
Сборка, проверки и публикация на каждый push без ручных действий.
Внедрение CI/CDБитрикс или Tilda
по задаче
Каталог с обменом 1С, привычная админка для контент-менеджеров или быстрый лендинг. Платформу выбираем под задачу.
Сайты на 1С-Битрикс · TildaКак мы работаем
Разбор задачи и макета
Смотрим структуру, динамические блоки, нужные интеграции и ограничения по данным. Говорим, какая платформа подойдёт.
Смета и ТЗ
Объём работ и риски даём письменно до начала разработки.
Разработка этапами
Сначала внешний вид, потом админка, потом база и бот. Каждый этап показываем заказчику до начала следующего.
Проверка и передача
Проходим чек-листы из этой статьи, оформляем доступы на клиента, передаём инструкции.
Поддержка
Следим за тарифами, обновлениями и резервными копиями, вносим правки.
Что делать дальше
Последний урок курса посвящён тому, что делать после финала. Я с ним во многом согласен, и вот что оттуда стоит унести.
Сделайте второй проект без подсказок
Другая тема, другая структура, другие данные. Вместо десятка новых видеоуроков лучше один самостоятельный сайт. Застряли, сначала спросите нейросеть, а потом уже листайте курс.
Разбирайте незнакомые задачи
Следующий клиент попросит платёжную систему, кабинет или CRM. Прежде чем отказаться, попросите нейросеть исследовать варианты, объяснить архитектуру и составить план. Решение примете вы.
Не привязывайтесь к одному инструменту
В одних проектах быстрее собрать сайт в конструкторе, в других можно обойтись без Figma, в третьих нужна привычная система управления. Профессия в том, чтобы выбрать связку под задачу.
Держите решения у себя
Нейросеть реализует, а вы проектируете: структуру, права доступа, место хранения данных. Чем больше она умеет, тем важнее понимать, что именно вы ей поручаете.
Инструменты поменяются. Навык, который остаётся: взять идею, превратить её в структуру, спроектировать решение и довести до рабочего продукта.
Если хотите начать прямо сейчас, откройте раздел 15 и пройдите чек-лист на своём проекте. Чаще всего первое, что выясняется: секреты лежат не там, где должны.
Вопросы и ответы
Простую страницу можно, и по маршруту из статьи дойти до опубликованного сайта тоже. Но решения всё равно принимаете вы: какой стек, где хранить данные, кто получит доступ. Для клиентского проекта нужен человек, который прочитает план Claude Code до сборки и проверит результат по чек-листам.
Claude Code входит в подписки Claude Pro и Max. Вход идёт через аккаунт Claude, API-ключ не нужен. Лимиты общие с обычным чатом, поэтому при тяжёлой сборке можно упереться в потолок и дождаться сброса или перейти на оплату по API.
MCP позволяет Claude Code читать структуру макета: блоки, размеры, тексты, слои. Без него он получает картинку и угадывает. Обойтись без Figma можно, но тогда дизайн задаётся словами или референсом, и результат труднее предсказать. Для клиента лучше согласованный макет.
По правилам Vercel план Hobby предназначен для личных некоммерческих проектов. Для клиентского сайта закладывайте Pro. Если нужны российские серверы, тот же код можно развернуть в Яндекс Облаке или VK Cloud.
Чаще всего Vercel не знает про переменные из .env.local. Добавьте их в настройках проекта для окружений Production и Preview и запустите новый деплой. Если картинки не показываются, проверьте, разрешён ли адрес Supabase в настройках изображений Next.js.
В файле .env.local на вашем компьютере, в переменных Vercel и в менеджере паролей. Не в чате с нейросетью, не в коде, не на скриншотах и не в письмах. Серверные значения в Vercel отмечайте как Sensitive.
Считать его скомпрометированным и заменить. Серверный ключ Supabase выпускается заново в панели проекта, токен Telegram-бота отзывается у BotFather, пароль админки меняется. Удаление файла из репозитория не помогает, секрет остаётся в истории коммитов.
Создаёте бота у BotFather, складываете токен, список Telegram ID и секрет webhook в переменные окружения, а Claude Code строит обработчик на вашем сайте. Telegram присылает сообщения на его адрес, обработчик проверяет секрет и ID и пишет изменения в ту же базу, с которой работает веб-админка.
В схеме с webhook нет. Обработчик живёт на сайте и срабатывает по запросу, постоянно работающий процесс не нужен. Нужен адрес с HTTPS и место для хранения состояния диалога, в нашем маршруте это таблица в Supabase.
Для граждан России действует часть 5 статьи 18 закона 152-ФЗ: запись, хранение и извлечение их персональных данных должны идти в базах на территории России. Регион проекта согласуйте до разработки. Если нужна российская площадка, мы размещаем проект в Яндекс Облаке или VK Cloud. Формулировки закона проверяйте у юриста.
Битрикс подходит, когда нужен каталог с обменом данными с 1С, готовые модули и привычная админка для контент-менеджеров. Tilda хорошо закрывает лендинг, который нужно запустить быстро. Next.js выигрывает, когда нужны свои кабинеты, интеграции и нестандартная логика, а команда готова сопровождать код.
Он забирает рутину: вёрстку по макету, шаблонные экраны, SQL-скрипты. Проектирование, безопасность и ответственность остаются у человека. В этом маршруте на каждом шаге есть момент, где человек читает план, проверяет результат и принимает решение.
Источники и документация
Лимиты, цены и названия настроек меняются, поэтому перед работой сверяйтесь с первоисточниками.
- Документация Claude Code: расширение для VS Code
- Справка Claude: использование Claude Code с подпиской Pro или Max
- Документация Figma MCP server
- Figma MCP server: лимиты вызовов и доступ
- Документация Vercel: интеграция с GitHub
- Документация Vercel: план Hobby
- Документация Vercel: Sensitive-переменные окружения
- Документация Next.js: переменные окружения
- Документация Supabase: ключи API
- Документация Supabase: Row Level Security
- Документация Supabase: приостановка бесплатных проектов
- Тарифы Supabase
- Telegram Bot API: setWebhook, getFile
- Федеральный закон от 27.07.2006 № 152-ФЗ «О персональных данных»
Пришлите макет или ссылку на проект. Посмотрим, что уже собрано, проверим секреты, права доступа и публикацию, назовём сроки и стоимость.
Дени Булатов
Разработчик Hated.Ru. Учится в РТУ МИРЭА, Институт информационных технологий, направление «Прикладная информатика». Пишет интерфейсы на React и Next.js, серверную часть на Python, работает с PostgreSQL, Docker и Linux.
