Единый источник правды из любого продукта за 5 минут
Знаете, что бесит больше всего? Приходишь в новый проект, а документации нет. Точнее, она есть — где-то в Confluence, который никто не открывал с 2020 года. В Figma — 47 файлов с названиями «Final_v2_REAL_FINAL». В коде — компоненты, про которые никто не помнит, зачем они нужны.
Я столкнулся с этим на прошлой неделе. Создал продукт с помощью AI, но компоненты были разбросаны по коду без документации. Нужно было собрать их в единую библиотеку. Раньше я потратил бы день на инвентаризацию и ещё день на настройку Storybook. Теперь это занимает 5 минут.
Что такое Single Source of Truth
SSOT (Single Source of Truth — единый источник правды) это документ, где собрано всё важное о продукте: какие компоненты используются, какие цвета, какие технологии. Одна страница, на которую можно сослаться, когда кто-то спрашивает «а какие у нас кнопки?».
Проблема в том, что создавать такую документацию вручную — боль. Нужно открыть Figma, посмотреть цвета. Открыть код, найти компоненты. Открыть сайт, проверить структуру. На это уходит день, а то и больше.
Автоматизация через AI
Я написал скрипт, который делает это автоматически. Даёте ему URL сайта — получаете готовый документ.
python ssot_generator.py https://example.com
Через 30 секунд у вас есть:
- Мета-информацию (title, description, OG-теги)
- Список компонентов (кнопки, формы, навигация)
- Design tokens (цвета, шрифты)
- Определение tech stack (React, Vue, Tailwind, etc.)
Как это работает
Скрипт использует BeautifulSoup для парсинга HTML. Он ищет паттерны: кнопки, формы, цвета, технологии. Всё собирается в один Markdown-файл:
| Component | Count |
|---|---|
| Buttons | 7 |
| Forms | 2 |
| Nav Items | 5 |
| Token | Value |
|---|---|
| Primary | #00ff88 |
| Background | #0a0a0a |
От SSOT к Storybook
Получив SSOT, вы можете:
- Создать `component-catalog.md` — список всех компонентов с приоритетами
- Установить Storybook: `npx storybook init`
- Создать stories для каждого компонента
Главное преимущество — вы не гадаете, какие компоненты существуют. У вас есть список.
В Storybook каждый компонент задокументирован с вариантами, что упрощает разработку и тестирование.
Интеграция с AI-инструментами
SSOT отлично работает с Claude Code, Cursor и другими AI-ассистентами. AI не нужно гадать о дизайне — все токены уже задокументированы.
А что насчёт Figma?
Хороший вопрос. Можно сделать то же самое через Figma MCP (Model Context Protocol). Figma имеет API для извлечения design tokens, компонентов и структуры страниц.
Разница только в источнике данных: из сайта парсим HTML/CSS, из Figma парсим через API. Но есть нюанс — Figma требует токен авторизации. Для публичных сайтов скрипт работает без авторизации.
Что дальше
SSOT Generator — это не замена полноценной design system. Это инструмент для быстрого старта. Когда у вас есть документация, легче принимать решения о рефакторинге, миграции или создании новой дизайн-системы.
Код открытый, можете использовать как угодно.
Ссылки
- SSOT Generator на GitHub — исходный код и документация
- Storybook — инструмент для документирования компонентов
- Figma API — документация для интеграции с Figma