Цвет, зашитый в сотни файлов
После редизайна в продукте появилось много нового интерфейса, а дизайнеров мало. Значительная часть цветов, размеров и скруглений была задана в коде числами напрямую. Любое изменение превращалось в поиск по всему проекту.
Как это выглядело на практике: чтобы уменьшить кегль с 16 до 14, пришлось править 191 файл, а чтобы поменять скругление с 4 до 8 — 109 файлов.
Что было нужно
- Дизайн и код говорят на одном языке и не расходятся со временем
- Светлая и тёмная темы без ручной перекраски каждого экрана
- Небольшая команда успевает за продуктом, а мелкие визуальные правки не ждут разработку
Один словарь для дизайна и кода
- 1ОсноваВзяли shadcn/ui и перерисовали под Dolphin{Anty} с фирменным фиолетовым
- 2Пять слоёв переменных в FigmaFoundation (311), semantic (44), components (230), size (7), typography (80), у каждого светлый и тёмный режим. Компонентный токен ссылается на семантический, тот на базовый, поэтому одно изменение расходится по всем компонентам и обеим темам
- 3Сверка с кодомПалитру в коде привели к значениям переменных Figma, чтобы у каждого цвета в макете был двойник в коде с тем же смыслом
- 4Claude в репозиторииВместе с разработчиками развернули код продукта и открыли его в Claude Code. В репозитории лежат README и CLAUDE.md с правилами проекта, а к Figma Claude подключён через MCP
- 5ДокументацияСейчас переносим компоненты в Storybook, чтобы у разработки и дизайна была одна живая витрина
foundation 311
accent/500 · #8b5cf6accent/600semantic 44
bg/brandtext/linkcomponents 230
button/primary/bgalert/info/borderинтерфейс
Создать профильШаблон сохранёнОдно значение в foundation проходит через semantic и components до готовых кнопок и алертов
Как это работает каждый день
С каждым таким циклом система становится строже, а правок меньше. Мы проверили 215 правок редизайна: в среднем каждая сходилась с макетом за 2 итерации.
Состояния компонента
У каждого компонента в библиотеке есть все состояния и размеры: кнопки, алерты, бейджи, поля форм, диалоги, пагинация и другие.
Чтобы уменьшить кегль с 16 до 14, пришлось вручную править 191 файл. На следующий день понадобилось уменьшить его ещё раз, с 14 до 12. Это уже было одной строкой в токене.
Одна правка вместо сотен
Было / стало
| Метрика | До редизайна | В редизайне |
|---|---|---|
| Цветов, заданных числом (HEX) | 302 | 114 |
| Компонентов, где все цвета на токенах | 79% | 89% |
| font-size в px | 1130 | 191 |
| Цветов числом на 1000 новых строк стилей | 44,9 (до токенов) | 2,2 |
Что это даёт команде
Макеты перекрашиваются в один клик, обе темы поддерживаются без ручной работы. Расхождения с системой дизайнер исправляет сам за минуты, а не ставит задачу в бэклог
Вместо поиска по сотням файлов достаточно поменять значение токена. Ревью визуальных правок сводится к паре строк
Визуальные изменения больше не съедают спринты. Небольшая дизайн-команда закрывает больше работы, потому что рутину по приведению экранов к системе делает ИИ
Как посчитана оценка. Без токенов каждое из 1211 мест пришлось бы найти, поправить и проверить вручную. При 1,5 минуты на место это около 30 часов работы фронтенд-разработчика, почти 4 рабочих дня. С токенами те же изменения уложились в правку нескольких файлов. Оценка не учитывает время дизайнеров и повторные перекраски в будущем. Каждая новая смена палитры или темы снова экономит столько же.
Раньше смена цвета подложки под модальными окнами была большой задачей: найти все места и поменять вручную. Теперь достаточно показать Claude макет, и он сам находит нужный токен и меняет его везде.
Следующий шаг — скругления: они пока без токенов, и это ближайший кандидат на перевод в систему.