Дизайн-система как ТЗ для нейросети: магазин SexyGram собран по одному документу

Витрину SexyGram мы собирали в таком порядке: сначала один HTML-файл с прототипом всех экранов, потом текстовые спеки к нему, и только после этого — код. Модель писала компоненты, глядя в этот пакет документов. Рассказываю, что получилось и почему дизайн-система работает как техзадание лучше, чем документ в свободной форме.

Почему привычное ТЗ буксует

Текстовое ТЗ описывает поведение и умалчивает о числах. «Карточка товара с картинкой и ценой» — это одно предложение и десяток свободных параметров: радиус, отступ, толщина обводки, оттенок акцента, кегль подписи. Модель заполнит их сама, каждый раз чуть по-своему. Через пять экранов вы получаете пять диалектов одного интерфейса.

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

Один файл как источник истины

Всё держится на design/SexyGram-design-system.dc.html — холсте, где лежат экраны со всеми инлайн-стилями. Спеки к нему ссылаются на диапазоны строк:

• десктоп-витрина — строки 1241–1700: раздел 2a «Неон-поп» (светлая тема, pill-формы, 1241–1470) и 2b «Тёмная витрина» (тёмная тема, золото как премиум-акцент, 1471–1687);
• мобильные экраны 390 px — раздел 3a, строки 641–885, плюс кабинет на телефоне 4c, строки 526–632;
• админка 3b — строки 886–1108;
• хлебные крошки, блог и лендинг категории — секции 5a, 5b, 5c, строки 30–395.

Агент открывает нужный диапазон и читает значения дословно. Unbounded 22/600 для заголовка раздела, #18161A для основного текста, подпись 15 px цветом #7A6469, box-sizing: border-box глобально — это уже решения, их достаточно просто перенести.

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

Что переносить, что оставить холсту

Экраны на холсте лежат карточками с радиусом 24 и тенью. Это оформление самого холста. В продукте перед нами обычные страницы, и радиус с тенью контейнера переносить не нужно — так прямо записано в спеке 02. Одна фраза убрала целый класс артефактов, где страница получает случайную рамку просто потому, что она была видна на макете.

Гейт: визуальная сверка структуры

После сборки идёт уровень 2 гейта из docs/plans/2026-08-02-sexygram-mvp.md — визуальная сверка структуры. Каждое расхождение между кодом и холстом получает одну из четырёх пометок:

• дефект вёрстки — код разошёлся с прототипом по ошибке, чиним код;
• осознанное отклонение — разошлись специально, рядом лежит причина;
• пробел в спеке — прототип молчит, значение придумано на месте, чиним спеку;
• достроено (эталона в холсте нет) — блока на холсте не существует вовсе.

Последняя категория оказалась самой полезной. Пример — футер в components/layout/Footer.tsx. На холсте его нет ни на одном экране, магазину он при этом нужен. Пометка честно фиксирует: это дорисовано, эталон отсутствует, при следующем обновлении дизайн-системы сюда стоит вернуться.

Как это выглядит в работе

1. Прототип со всеми экранами в одном HTML — с реальными числами внутри.
2. Разбор холста на спеки по разделам, каждая с номерами строк-источников.
3. Разделение зон между агентами. Фаза 4, агент A взял каркас витрины и главную: app/(shop)/layout.tsx, app/(shop)/page.tsx, components/layout/**, components/age-gate/**, components/home/**.
4. Отчёт о соответствии с четырьмя пометками.
5. Правки уходят в два места сразу: в код и в спеку.

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

Почему такой формат удобнее свободного ТЗ

Числа вместо прилагательных: «pill-формы» превращаются в конкретный border-radius, взятый из строки прототипа. Адресуемость: любое решение можно проверить по номеру строки, спор закрывается за минуту. Две темы в одном холсте — «Неон-поп» и «Тёмная витрина» — заставляют выносить токены сразу, потому что одинаковый компонент обязан жить в светлом и тёмном варианте. И проверяемость: сверка структуры — механическая работа, её делает агент по чек-листу.

Где всё равно нужен человек

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

Общий вывод простой: дизайн-система — это техзадание, где половина ответов уже записана числами. Остаётся аккуратно указать модели, где именно лежит каждое из них.