Дизайн-система как контекст для ИИ: восемь документов, по которым собрался магазин

У меня был HTML-прототип магазина: один файл, холст с экранами, всё на инлайн-стилях. Красиво. Отдаёшь модели, просишь «сделай карточку товара как в прототипе» — получаешь что-то похожее. Радиус 20 вместо 24, свой оттенок акцента, отступы на глаз. И так каждый раз.

Формулировка запроса тут ни при чём. Прототип — это картинка, зашитая в разметку. Правило из неё нужно вывести, а выводит модель слишком свободно.

Что я сделал вместо промптов

Разобрал прототип на документы. Каждый — про свой кусок системы, каждый со ссылкой на строки исходника, откуда взято значение. design/SexyGram-design-system.dc.html, строки 1701–2183 — раздел «Ход 1 · три направления». Дальше таблицы: токены, размеры, радиусы, шрифты. Дословно из инлайн-стилей.

Восемь документов получились такие:

1. Базовая система (Foundation) — цвета, типографика, радиусы, тени. Здесь же выяснилось, что визуальных направлений три: 1a «Неон-поп» (светлая, основная), 1b «Тёмная витрина», 1c «Тёплый минимал». В README было два.
2. Десктоп-витрина — разделы 2a и 2b, контентная ширина 1440 px.
3. Мобильные экраны — 390 px, витрина и кабинет.
4. Админ-панель — раздел 3b, отдельная сетка и своя плотность интерфейса.
5. Коммерческий путь — каталог, товар, корзина, оформление.
6. Кабинет клиента — статусы заказов, таймлайн.
7. Контентные страницы — блог и лендинг категории.
8. Письма — единственное место, где вся система живёт в табличной вёрстке.

Девятым лежит план реализации: монолит на Next.js 15 App Router, SSR/SSG для публичных страниц, Prisma для данных. Он ссылается на первые восемь как на источник истины.

Три правила, из-за которых это работает

Дословность. В документе стоит border-radius: 24px, потому что так в прототипе. Никаких «примерно 24», никаких округлений до кратности восьми. Модель воспроизводит то, что видит текстом, и ничего не реконструирует.

Пометка «не задано в прототипе». Половина параметров в холсте просто отсутствует: hover-состояния, поведение при переполнении, судьба длинного названия товара. Раньше модель молча придумывала. Теперь она видит явную дыру — и либо спрашивает, либо помечает решение как своё. Самая полезная строчка во всех восьми файлах.

Расхождения — отдельным разделом. Направление 1c есть в прототипе и отсутствует в README. Документ пишет обе версии и называет конфликт конфликтом. Выбирает человек.

Как меняется формулировка задачи

Было: «сделай карточку товара в стиле прототипа».

Стало: «собери карточку товара по документу 02, раздел 2a; состояния наведения возьми из 01, они там помечены как незаданные — предложи вариант и вынеси его отдельно».

Вторая формулировка длиннее по буквам и короче по смыслу. Она даёт адрес. Модель идёт по адресу и читает значения.

Побочный эффект: документы читает и человек. Через две недели забываешь, откуда взялась ширина 1440 — ответ лежит в файле, со ссылкой на строку холста.

Чего это не решает

Модель всё равно ошибается. Особенно на стыках: экран из документа 02 встречается с компонентом из 04, и общего правила для их сочетания нигде нет. Лечится одним способом: находишь дыру и дописываешь в документ. Система контекста живая, чинить её приходится по ходу.

Проверку глазами она тоже не отменяет. «Пиксель-в-пиксель» проверяется сравнением. Верить, что цифры переехали правильно, — плохая идея.

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

Что забрать себе

Если у вас есть прототип и вы собираетесь генерировать по нему код:

• Режьте на документы по зонам ответственности. Деление по страницам не работает. Основа отдельно, экраны отдельно, админка отдельно.
• В каждом документе укажите источник с точностью до строки или до слоя в макете.
• Значения переносите буквально.
• Отсутствующее помечайте явно — это ценнее присутствующего.
• Конфликты между источниками выписывайте, вместо того чтобы разрешать втихую.

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