Мы столкнулись с простой задачей: нужно было генерировать актуальные стильгайды для проекта на Next. js, но использование официального платного Design API оказалось дорого и избыточно. Вместо этого мы сделали ставку на независимое, бесплатное решение — извлекающее дизайн-токены из кода и собирающее красивую документацию автоматически, не завися от внешних сервисов.
Почему отказались от платного API и что выбрали взамен
Платные сервисы удобны, но добавляют зависимости и счета. Мы хотели портативную систему, которую можно запускать локально, в CI или на любом хостинге без дополнительных оплат. Решение простое: собрать дизайн-токены напрямую из исходников — CSS-переменных, SCSS-переменных, theme-файлов и компонентов на styled-components или Emotion.
Такой подход дает контроль над данными, позволяет работать офлайн и интегрировать генерацию в процесс сборки приложения.
Как устроен наш бесплатный генератор
Мы разработали пайплайн в несколько шагов. Сначала анализируем кодовую базу — парсим файлы стилей и компонентные модули, извлекая цвета, типографику, отступы и прочие токены. Для этого используем комбинацию PostCSS-парсера, простых регулярных выражений и AST-парсинга JavaScript/TypeScript, чтобы надёжно находить переменные и экспортируемые константы. Дальше данные приводятся к единой JSON-схеме: name, value, category, контекст использования. На её основе Next. js-страница генерируется статически (SSG) и рендерит превью-элементы, примеры кода и копируемые сниппеты для разработчиков.
Дополнительно поддержали экспорт в форматах JSON и CSS variables для удобного импорта в другие проекты. Результат — быстрый, прозрачный и бесплатный инструмент, который интегрируется в CI и обновляет документацию при каждом пуше. Плюсы: отсутствие внешних оплат, полная прозрачность данных, гибкость кастомизации.
Минусы: требуется поддержка парсеров при изменении структуры стилей и ограниченная автоматизация для динамических, runtime-генерируемых тем. В будущем планируем добавить визуальный редактор токенов и поддержку design-систем в форматах Figma/Token Studio через официальные экспорты, избегая прямого использования платных API.