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