В ИТ-экосистеме «Лукоморье» продуктовый дизайнер Екатерина автоматизировала создание компонентных токенов для дизайн-системы «Сова». Первый компонент команда собирала два дня, пятнадцатый занял 15 минут. Разница — в файле DESIGN.md, наборе правил и понимании, где нейросеть сочиняет алиасы, которых в системе не было.
Компонентные токены — третий уровень в иерархии дизайн-системы. Базовые токены хранят исходные значения: цвета, размеры, отступы. Семантические токены (алиасы) добавляют смысл: например, error.default означает ошибку. Компонентные токены связывают их с конкретным компонентом: в кнопке в состоянии ошибки фон использует error.default. Это закрывает разрыв между семантическими токенами и реальным компонентом, фиксируя правила для размеров, состояний и вложенных элементов.
Процесс включает семь шагов: выбрать компонент в Pixso, сформировать JSON-экспорт через плагин, передать в ИИ JSON-экспорт, базовые и семантические токены, token_rules.md и пример-шаблон, получить черновик, проверить структуру, доработать вручную и передать итоговый JSON разработчикам. ИИ берёт на себя механическую часть, но финальное решение остаётся за дизайнером.
Главная сложность — нейросеть может сочинять алиасы, которых нет в системе. Поэтому команда разработала правила и шаблоны, которые передаются агенту вместе с JSON-экспортом. Это позволяет избежать ошибок и ускоряет процесс: с каждым новым компонентом база паттернов растёт, и ИИ работает точнее.
Для тех, кто впервые сталкивается с темой: JSON-экспорт компонента — техническое описание из Pixso, которое подаётся на вход ИИ. Итоговый JSON компонентных токенов — структура, которую передают разработчикам. Разница важна, чтобы не перепутать вход и выход.
Опыт «Лукоморья» показывает: даже в дизайн-системах с устоявшимися процессами ИИ может взять на себя рутину, если задать чёткие правила. Это не замена дизайнеру, а инструмент, который освобождает время для проверки архитектуры и смысла алиасов.
