Как я собрал этот сайт с ИИ — процесс как есть

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

Сначала документы, потом код

Соблазн вайбкодинга — сразу генерировать страницы. Я сделал наоборот: сначала договорился с агентом о правилах. Появились семь документов — идея, спецификация, архитектура, контракты API, устройство репозитория, безопасность и пошаговый чек-лист. Отдельный файл с правилами стал «законом»: домен, запрет заглушек, дизайн строго по UI Kit, обязательные тесты.

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

Один промпт вместо длинного разговора

Вместо десяти уточнений я задаю рамку сразу. Вот форма, которую использую для новой функции:

Роль: аккуратный fullstack-инженер.
Контекст: правила проекта в CLAUDE.md, стиль — только токены UI Kit.
Задача: собери страницу каталога блога.
Ограничения: SSR, читается без JS; фильтр по рубрикам — прогрессивное улучшение;
один h1; доступность WCAG AA; никаких заглушек — нет статей, показать честный
пустой экран.
Проверка: e2e-сценарий + axe должны быть зелёными до коммита.

Ключевое здесь — «Проверка». Пока критерий готовности не назван, агент считает работу законченной слишком рано.

Три ошибки, на которых я спотыкался

1. Сборка при живом dev-сервере. Я запускал продакшн-сборку, пока крутился сервер разработки. Общая папка сборки затиралась, страница ломалась «без причины». Урок: не смешивать режимы — либо разработка, либо сборка.
2. Проверял результат слишком рано. Обновление состояния в интерфейсе происходит не мгновенно. Я читал DOM сразу после клика и видел «старое» значение — думал, что кнопка сломана. На деле сломан был мой способ проверки.
3. Контраст, который я бы не заметил глазом. Автотест доступности поймал бледно-серые подписи и белый текст на акцентном фоне: формально читаемо, но ниже нормы. Пришлось затемнить палитру. Машина оказалась строже меня.

Что я вынес

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

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