Дизайн-система вперёд: как агент собрал витрину магазина по шести спекам

Что было на входе

Один файл: design/SexyGram-design-system.dc.html. Внутри холст с экранами по секциям: 2a и 2b (десктоп-витрина в двух темах), 3a (мобильная версия 390 px), 3b (админка), 3c, 4a, 4b, 4c (кабинет, письма, пустые состояния, кабинет на телефоне), 5a, 5b, 5c (хлебные крошки, блог, лендинг категории). Всё оформлено инлайн-стилями прямо в разметке.

Скажешь агенту «свёрстай по этому прототипу» — получишь ровно то, чего ждёшь. Он хватает визуальное впечатление и половину значений додумывает. Поэтому HTML я ему давать перестал.

Почему шесть документов

Прототип разрезан на шесть текстовых спек, по зонам ответственности:

• 01 — общие основы: шрифты, глобальные настройки, ссылки.
• 02 — десктоп-витрина, разделы 2a «Неон-поп» и 2b «Тёмная витрина».
• 03 — мобильные экраны 390 px: 3a и 4c.
• 04 — админ-панель, раздел 3b.
• 05 — письма, пустые состояния, личный кабинет: 4a, 4b, 3c.
• 06 — хлебные крошки, блог, лендинг категории: 5a, 5b, 5c.

Каждая спека ссылается на источник по номерам строк в исходном HTML. Скучная деталь, а времени экономит вагон: агент сомневается — открывает конкретный диапазон строк и читает оригинал. Фантазировать ему просто негде.

Размер тоже важен. Одна спека влезает в контекст целиком и оставляет место под код. Склей все шесть — формально они тоже влезут, но качество ответа поедет: агент начинает путать токены витрины с токенами админки.

Правило, которое всё вытянуло: «не задано в прототипе»

В таблицах спеки значения выписаны дословно из инлайн-стилей. Где параметра в HTML нет, стоит явная пометка не задано в прототипе.

Это главная находка. Пустую ячейку агент читает как приглашение придумать. Прямая пометка работает как факт: значения нет, возьми правило из README или спроси.

Живой пример. Hover в прототипе задан ровно один:

a { color: #E24C95; text-decoration: none; }
a:hover { color: #B32E6E; }

Больше никаких наведений. Без пометки агент честно нарисовал бы hover для кнопок, карточек товара и пунктов меню — каждый раз новый. С пометкой он отдал их общему правилу проекта, и вся витрина вышла однородной.

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

Второе, что спека обязана проговаривать вслух: где заканчивается дизайн и начинается способ его показать.

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

Туда же — фиксированные ширины. Контентная ширина всех десктопных экранов 1440 px, мобильных 390 px. Цифра написана прямо, и агент не изобретает свою сетку.

Как шла сборка

1. Сначала основы: Onest для body с -webkit-font-smoothing: antialiased, Unbounded для заголовков, цен и логотипа, box-sizing: border-box для всех элементов.
2. Дальше — по одной спеке за подход. Витрина, мобилка, админка, письма, блог.
3. Каждый экран сверялся со своим диапазоном строк в прототипе.

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

Что это дало

Переспрашивать агент стал заметно реже: раньше большая часть его вопросов сводилась к «какое значение взять». Диффы стали читаемыми — одна спека, один связный кусок работы. Тёмная тема 2b собралась после светлой 2a без переписывания общих компонентов: различия были выписаны как различия.

Чего подход не закрывает

Спека фиксирует состояние прототипа на момент извлечения. Правишь HTML — обновляй спеку, иначе агент уверенно соберёт вчерашний дизайн.

И ещё: сама нарезка на шесть документов — ручная работа. Я делал её сам, читая прототип секция за секцией. Несколько часов, которые окупаются к третьему экрану. Но потратить их придётся.

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