Дизайн-система за 60 секунд

Разработчик лежал с температурой. Питч – через 10 часов. Денег на фрилансера не было.

Дима влетел на кухню с телефоном в руке и выражением лица человека, который только что выиграл в лотерею и одновременно потерял билет:

Нас было трое и мы начинали работать над нашим ПРОЕКТОМ. Дима – визионер, который умел объяснять сложное так, что хотелось немедленно инвестировать. Лёша – бэк-разработчик, который уже деплоил железобетонный код, пока другие только спорили о стеке. И я – продуктовый дизайнер и «мамкин программист».

В редких перерывах между макетами и основной работой я жадно читал всё что касалось разработки и нейросетей. И усиленно тренировал свой вайбкодинг в VSCode с AI-агентом Kilo Code и нейросеткой DeepSeek.

Первым действующим и полезным проектом оказался Component Lab – одностраничное React-приложение с 12 ui-китами и дизайн системами. Возможность посмотреть как выглядят и действуют инпуты, кнопки и селекты оказалась неожиданной востребованной в повседневной работе.

Была собрана небольшая база данных в NotebookLM по дизайн-системам, токенизации, Kilo code. В общем, мы готовились.

Я решил сделать всё по стандартам свое компании, где я работал. Собрал ui-кит в Figma, настроил два уровня переменных: примитивные и семантические цвета, и добавил стандартные стили текста. Загнать в переменные можно было ещё многое, но времени не оставалось. Плагин Tokens Studio for Figma дал мне enterprise-ready JSON.

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

Всё крутится вокруг единого пайплайна дизайн-токенов – это означает, что все цвета, размеры, типографика и темы сначала задаются в Figma, а затем автоматически попадают в код без ручного копирования. Источником истины выступает tokens.json, который экспортируется из Figma Tokens – инструмента для хранения дизайн-токенов прямо в дизайн-системе. Все токены делятся на два уровня: примитивы (например, конкретные цвета или размеры) и семантические токены (text, surface, border), которые описывают уже не цвет, а его назначение в интерфейсе. Благодаря этому можно быстро менять темы, редизайнить интерфейс или поддерживать светлую и тёмную темы без переписывания компонентов.

Далее специальный скрипт автоматически обрабатывает токены через Style Dictionary – инструмент, который превращает дизайн-данные в готовые CSS-переменные и TypeScript-типы. В итоге дизайн и разработка работают через единую систему, где изменения в Figma могут автоматически отражаться в интерфейсе.

Сами компоненты собраны на React – популярной библиотеке для создания интерфейсов из независимых переиспользуемых блоков. Для стилей используются CSS Modules, которые помогают изолировать стили компонентов друг от друга и избегать конфликтов в больших проектах. Все компоненты используют CSS-переменные (--ds-*), поэтому темы переключаются буквально через смену одного data-theme атрибута. Разработка и документация компонентов происходят в Storybook – это отдельная среда, где можно просматривать компоненты, их состояния и сценарии использования без запуска основного приложения. Для удобства разработки используется Vite – быстрый сборщик, который мгновенно обновляет интерфейс при изменениях в коде. Отдельное внимание уделено accessibility (a11y): компоненты поддерживают aria-* атрибуты, корректно работают с ошибками, фокусом и экранными считывателями, а Storybook-addon-a11y помогает автоматически находить проблемы доступности ещё во время разработки. Качество интерфейса контролируется через Vitest и Playwright для тестирования поведения компонентов, а Chromatic автоматически проверяет визуальные изменения и помогает избежать случайных UI-регрессий при обновлениях дизайн-системы.

Кто деплоил свой вайбкод – тот подружился с Ктулху.

Монитор дышал тусклым синим светом, будто в глубине матрицы медленно открывался чей-то огромный глаз. Лёша давно уснул прямо на полу среди кабелей и пустых банок из-под энергетиков. Дима ходил кругами по комнате и повторял одно и то же:

– Главное, чтобы токены пересобрались. Главное, чтобы темы не поехали.

А я смотрел в tokens.json.

Сначала казалось, что это обычная ошибка. Один из семантических токенов ссылался сам на себя. Потом – на родительский namespace. Потом ещё глубже. Style Dictionary продолжал сборку, словно ничего не происходило. CPU выл. Vite перегружал компоненты десятки раз в секунду. И где-то между --ds-surface-brand-color-hover и --ds-text-inversed-static-color структура начала расти сама.

В generated CSS появились переменные, которых не было в Figma. Не было в git. Не было придумано человеком.

Они компилировались без ошибок.

Когда я открыл Storybook, новые токены уже использовались компонентами. Кнопки слегка пульсировали, будто под CSS скрывалось что-то живое. Hover-состояния менялись каждый раз при обновлении страницы. Input в dark theme внезапно показывал focus ring ещё до наведения курсора. А в панели accessibility addon появилась новая запись:

Потом мы заметили главное.

Chromatic больше не сравнивал скриншоты. Он принимал все изменения автоматически. Любые. Даже те, которых не было в коммите. Git history начал содержать хэши несуществующих файлов. А в tokens.d.ts появился тип, который TypeScript не мог распарсить, но и удалить его было невозможно:

И самое страшное – приложение работало идеально. Ровно до того момента, пока Дима не сказал:

– Слушайте… а почему Storybook открыт на моем ноутбуке?

Мы молча посмотрели друг на друга. Ноутбук Димы ещё даже не включали.

А потом, конечно, оказалось, что никакой мистики не было – просто в три ночи продуктовый дизайнер, который «немного знает React», одновременно правил токены руками прямо в JSON, просил AI «только не ломать архитектуру», гонял build:tokens в watch-режиме, держал открытыми два Storybook-инстанса, случайно закоммитил generated-файлы, а Chromatic вообще был настроен с autoAcceptChanges: true, так что половина необъяснимого ужаса оказалась циклическими ссылками в токенах, HMR-глюками Vite, рассинхроном тем, кешем Storybook и тем особым состоянием мозга в четыре утра, когда тебе начинает казаться, что aria-* атрибуты смотрят на тебя в ответ; хотя тип 'observer' в tokens.d.ts мы потом всё-таки нашли – и вот его действительно никто не добавлял.

Можно ещё долго писать про тонкости настройки Kilo code. Ведь Kilo Code – это как маленькая IT-империя в VS Code: Agent – мозг и характер вайбкод-шамана, Rules – суровый уголовный кодекс проекта («никаких raw colors, смертная казнь через refactor»), Skills – спецприёмы и свитки заклинаний для конкретных задач, AGENTS.md – древняя летопись с лором, архитектурой и травмами прошлых рефакторов, а kilo.jsonc — вся проводка этого киберпанк-зоопарка, где решается кто кого вызывает, что подключено и почему всё это пока ещё не взорвалось. И ещё много всего.

Но пора закругляться.

Встреча с инвестором прошла успешно – правда, не для всей команды (привет, Дима (◣_◢)). Проект остался на GitHub, зато наш лидер благодаря скорости, качеству работы и нашему умению не спать ночами получил от инвестора и новый проект, и должность. А мы? Мы получили кое-что не менее ценное – мощный опыт, новые знания и очередную IT-байку о том, как всё начиналось.

Дисклеймер: все персонажи вымышлены, совпадения случайны, лица изменены, названия скрыты, события не произошли, а вот всё остальное – чистая правда.