Продуктовый дизайнер, Claude Code и месяц соло-разработки: что пришлось построить вокруг AI, чтобы проект не

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

Сначала эйфория, потом лоскутное одеяло

Первые недели напоминали сказку: фичи появлялись быстрее, чем автор успевал их придумывать. Но вскоре проявились две болезни роста: интерфейс начал расползаться, а у пользователей стали пропадать данные. Каждое отдельное решение от AI выглядело разумно, а вместе получалось лоскутное одеяло — кнопка на одном экране чуть выше, инпут на другом чуть шире, и всё это «по гайду».

Причина оказалась до обидного прозаичной. Дизайн-системы в явном виде не было: CLAUDE.md разросся до 240 строк сплошной прозы, и в нём не нашлось ни слова про UI. На каждый запрос модель заново решала, как должна выглядеть кнопка. Это всё равно что ругать нового разработчика, которому никто не показал гайдлайны.

Что пришлось построить вокруг AI

Автор начал с диагностики — попросил Claude Code написать скрипт аудита, который прогоняет экраны в браузере, собирает вычисленные стили элементов и группирует их по ролям: заголовки, инпуты, кнопки, строки списков. В отчёт попадает разброс — сколько разных значений font-size, height и padding встречается у элементов, которые должны выглядеть одинаково. Первый прогон охватил 3089 элементов на 36 экранах, и результат оказался хуже ожиданий.

Дальше — довольно стандартный путь: шкала токенов в globals.css, три роли заголовков, ui-компоненты переведены на size и variant без изменения публичного API. Девяносто произвольных значений вроде h-[37px] и хардкодных hex-цветов уступили место токенам, остались только осознанные исключения вроде calc. На них стоит ESLint-правило в режиме error, чтобы случайно не вернулось обратно. Мобильные значения живут внутри самого токена через @media, чтобы компонентам не приходилось об этом думать.

У этой истории быстро нашлось второе дно. На iPhone при вводе суммы страница зумилась: iOS автоматически увеличивает масштаб, если у инпута font-size меньше 16px, а в финансовых формах text-sm перебивал мобильный размер примитива. Решение — единый токен text-field: 14px на десктопе, 16px на мобилке, через @media внутри самого токена. Применили к двенадцати финансовым инпутам, зум пропал.

А ещё табы начали «плавать» при корректном токене. Корень обнаружился в cn: внутри работает tailwind-merge, который не знает про кастомные классы text-* и молча выкидывает один из двух конфликтующих. С тех пор в правилах записано: новый токен размера текста обязан объявляться в cn, иначе его срежет. На это правило есть отдельный тест.

Чем больше правил, тем хуже

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

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

Если вы только входите в разработку и хотите начать с фундамента, есть смысл присмотреться к бесплатному обучению разработке от 1С, которое даёт структурированный вход в профессию и помогает собрать базу, прежде чем браться за собственные проекты с AI.