Гарантия дизайн-системы · Figma × React
В продукт уходит та дизайн-система, которую вы утвердили.
FISYCO читает ваш Figma и React-код, находит, где продукт разошёлся с утверждённой системой, и приносит пул-реквесты (PR), которые доказывают исправление.
Бесплатно на время публичной беты. Без карты. GitHub, GitLab и Bitbucket.
acme / web · main
PR #482
Разрыв
Клиенты не видят вашу дизайн-систему. Они видят то, что ушло в продакшен.
Две копии одной системы. Разница — ничья.
Дизайн решает в Figma. Разработка пересобирает это в коде. Цвет здесь, вариант там: копии расходятся, ничего громко не ломается, а счёт приходит позже.
Переделки
Команды заново собирают уже принятые решения.
Риск релиза
Мелкие расхождения копятся, пока исправление не станет проектом.
Бренд
Клиенты видят реализацию, а не утверждённый дизайн.
Как это работает
Из двух копий — одна система. Без миграции.
01
Подключите. Мигрировать нечего.
GitHub, GitLab.com и Bitbucket Cloud. FISYCO читает один коммит через API провайдера и пишет только пул-реквестами. Свой GitLab — по договорённости.
Репозитории
GitHub
GitLab.com
Bitbucket Cloud
Читаем коммит 4f2ab91 через API · исходники не хранятся
02
Соберите базовую линию.
С одной стороны библиотеки Figma: компоненты, токены, иконки и иллюстрации. С другой — ваша React-дизайн-система и приложения, которые её используют.
Дизайн-система · источники
Figma
Компоненты · 38
Токены · 412
Иконки · 819
Иллюстрации · 64
Код
ui-kit · Button.tsx
ui-kit · Card.tsx
web-app
admin
03
Ранжируйте по последствиям.
У каждого расхождения есть серьёзность и охват — сколько мест в вашем продукте оно на самом деле задевает. Очередь сортируется сама.
Расхождения · по охвату
- Низкая
Радиус Card изменён в макете
design-change · radius 8 → 12
9
- Высокая
#0F172A вместо brand.primary
token-bypass · #0F172A
146
- Средняя
Инлайн-SVG дублирует иконку Search
asset-duplicate · Search
34
- Высокая
Нет размера xs у Button в коде
structural-drift · size
88
Расхождение
Охват
04
Исправляйте с доказательством.
Библиотекарь готовит патч и доказывает его значениями. Ваш код не исполняется, и ничего не попадает в основную ветку без ревьюера.
fix(tokens): use color.brand.primary
fisyco-bot → main
Доказано значениями
Код не исполнялся.
Репозитории
GitHub
GitLab.com
Bitbucket Cloud
Читаем коммит 4f2ab91 через API · исходники не хранятся
Что находит
Расхождения, на которые никто не заводит задачу.
FISYCO индексирует React-код на каждый push в ветку дизайн-системы и сверяет его с макетом. Пять видов расхождений, у каждого своё доказательство.
Сырое значение там, где есть токен.
// Checkout.tsx · 37 places
color: "#0F172A"
color: "brand.primary"
Цвета, размеры и шкалы, написанные руками, но равные токену. Исправление заменяет литерал токеном во всех местах.
Иконка вставлена, а не импортирована.
// SearchBar.tsx
<svg viewBox="0 0 24 24">…</svg>
<Search />
Инлайн-SVG, совпадающий с иконкой вашей библиотеки, — находится по самому рисунку.
Копия рядом с системой.
<SaveButton />
<Button variant="solid" />
Самописные компоненты, которые повторяют уже существующий.
Варианты разошлись.
Figma: size = xs · sm · md
React: size = sm · md
xs
В Figma есть размер или состояние, которого нет у React-компонента, или наоборот.
Утверждено, но не доставлено.
Card · radius
8px
12px
Компонент изменился в Figma, а код ещё не догнал.
Доказанные патчи
Пул-реквесты, которые доказывают себя сами.
Каждый патч несёт значения, которые меняет: макет с одной стороны, код после правки — с другой. Недоказанный патч не выходит, даже черновиком.
Насколько самостоятельно
Патчи ждут в очереди одного вашего нажатия.
fix(ui): Button size xs from the design
fisyco-bot → main · Button.tsx
Доказано значениями
Код не исполнялся.
Здоровье дизайн-системы
Одно число, понятное всей команде.
Здоровье всей системы и каждого компонента — из частей, которые можно проверить: сопоставлено с кодом, совпадает, используется через систему, без обходов.
Здоровье дизайн-системы
acme / ui-kit · 4f2ab91
81
из 100
+5 с прошлой индексации
Дизайн сопоставлен с кодом
25%
91%
Сопоставлено и совпадает
25%
88%
Использование через дизайн-систему
25%
84%
Без обходов системы
15%
46%
Без дублей
5%
93%
Варианты, которыми пользуются
5%
77%
Пересчитывается на каждой индексации ветки дизайн-системы.
Расхождения сейчас
- Высокая
#0F172A вместо brand.primary
ждёт вас
146
- Высокая
Нет размера xs у Button в коде
открыт PR #491
88
- Средняя
Инлайн-SVG дублирует иконку Search
ждёт вас
34
- Средняя
SaveButton повторяет Button
ждёт вас
19
- Низкая
Радиус Card изменён в макете
открыт PR #488
9
Расхождение
Охват
Пример данных. Охват считается в вашем коде.
На каждом PR
Ревьюер, который знает вашу систему.
Один комментарий на PR, обновляется вместе с ним. Захардкоженные значения, устаревшие компоненты и самописные копии получают конкретную замену. Работает как совет или как блокирующая проверка.
fisyco-bot
оставил комментарий
3 замечания в этом изменении:
#64748B→semantic.text.tertiary· Pay.tsx:42<OldModal>→Dialog· Settings.tsx:18<PrimaryCta>→<Button variant="solid">
Для ИИ-агентов
Агенты берут вашу систему, а не догадку.
Удалённый MCP-сервер даёт агентам ваши компоненты, токены и правила команды и проверяет их UI-код до ревью. Ежемесячный отчёт показывает, как агенты пользовались системой.
› find_component("главная кнопка действия")
Button · variant="solid" · совпадение 96% · ui-kit/Button.tsx
› check_ui_code("src/Pay.tsx")
строка 42 #2563EB → accent.solid
строка 57 <PrimaryCta> → <Button variant="solid">
2 правки, внесены до ревью
Доставка
Опубликуйте в Figma. Получите пул-реквест.
Иконки
React-компонентами, спрайтом или пакетом.
Иллюстрации
В заданных форматах и масштабах.
Токены
Переменные и стили; плагин Figma, если тариф не открывает переменные.
Ваш код
Читаем, но не храним. Меняем только через ревью.
Исходники не хранятся
FISYCO хранит индекс фактов, а не ваши файлы. ИИ-разбор отправляет модели по одному файлу компонента и сохраняет только результат.
Один коммит, только чтение
Код читается через API провайдера на одном коммите.
Журнал доступа на виду
Каждое чтение вашего кода видно вам 90 дней.
Изменения только пул-реквестами
Ничто не попадает в ветку без вашего ревьюера.
Роли и токены с областью
Роли рабочего пространства и проекта. Личные токены — только с нужными правами.
Отключили — удалено
Отключение дизайн-системы удаляет всё, что построено по вашему коду.
Начать
Посмотрите, что ваша компания на самом деле отправляет в продакшен.
Подключите один продукт и получите первую индексацию дизайн-системы. Бесплатно на время публичной беты.