Как ИИ ускорил документирование дизайн-системы в 8 раз: от 2 дней к 15 минутам на компонент
Команда автоматизировала создание компонентных токенов дизайн-системы с помощью ИИ-агента и JSON-экспорта из Pixso. Процесс сократился с дней до минут, а ошибки — за счёт чётких правил и проверки в Tokens Studio.
Столкнувшись с задачей описать десятки компонентов дизайн-системы — размеры, варианты, состояния, отступы, цвета — команда поняла, что ручная работа займёт недели. Первый компонент собирали два дня, а пятнадцатый занял всего пятнадцать минут. Ключ к ускорению стал в выстроенном процессе с ИИ-агентом.
В основе лежит трёхуровневая токен-система: базовые примитивы (цвета, размеры, отступы), семантические алиасы ("цвет ошибки", "акцентный контейнер") и компонентные токены, фиксирующие правила для конкретного компонента в конкретном состоянии. Компонентные токены закрывают разрыв между дизайном и кодом, делая решения явными и проверяемыми.
Процесс построен вокруг JSON-экспорта из Pixso. Плагин выгружает техническое описание компонента: имя, тип, размеры, состояния, цвета, обводки, вложенные элементы. Этот JSON вместе с базовыми и семантическими токенами, файлом правил token_rules.md и примером-шаблоном передаётся ИИ-агенту. Агент разбирает структуру и предлагает алиасы, а финальное решение остаётся за дизайнером.
Работа делится на семь шагов: формирование JSON-экспорта, передача агенту, получение черновика, проверка структуры/осей/алиасов/вложенности, передача итогового JSON разработчикам. Ключевая роль играют оси — размер, вариант, цветовая схема, состояние. Они формируют путь токена, и от их порядка зависит итоговое имя. Искусственные оси добавлять нельзя.
После определения осей ветки наполняются свойствами, которыми команда реально хочет управлять. Значения токенов ссылаются только на существующие алиасы, сохраняя цепочку: компонентный → семантический → базовый. Агент автоматически подставляет алиасы при однозначном совпадении, спорные случаи решаются вручную. Проверку удобно проводить в Tokens Studio — плагине для Figma, который валидирует ссылки и имена.
Минимальный набор для старта: компоненты в Pixso/Figma с правильными настройками, плагин для JSON-экспорта, готовый JSON базовых и семантических токенов, умение работать в Tokens Studio. В агентской среде создаётся проект с загруженными документами, на которые чат ссылается постоянно. Дополнительно можно прислать скрин панели настроек — агент сам разрешит спорные моменты.
