Дизайн-система, которую понимает ИИ

Кто и в какой ситуации

Здесь человек — небольшая дизайн-команда. После редизайна в продукте появилось много нового интерфейса, а дизайнеров мало.

Что было нужно

• Дизайн и код говорят на одном языке и не расходятся со временем.
• Светлая и тёмная темы без ручной перекраски каждого экрана.
• Небольшая команда успевает за продуктом, а мелкие визуальные правки не ждут разработку.

Один словарь для дизайна и кода

Между макетом и кодом обычно стоят очередь задач и «магические» цвета. Мы дали дизайну и коду один словарь.

Основа — shadcn/ui, перерисованная под Dolphin{Anty} с фирменным фиолетовым. Переменные в Figma лежат в пяти слоях, у каждого светлый и тёмный режим. Компонентный токен ссылается на семантический, тот на базовый, поэтому одно изменение расходится по всем компонентам и обеим темам.

Одно значение в foundation проходит через semantic и components до готовых кнопок и алертов.

Как мы работаем с Claude

Вместе с разработчиками развернули код продукта локально и открыли его в Claude Code. В репозитории README и CLAUDE.md с правилами проекта, а к Figma Claude подключён через MCP. Дизайнеры вносят визуальные правки во фронтенд, не трогая логику.

С каждым таким циклом система становится строже, а правок меньше.

Состояния компонента

У каждого компонента в библиотеке есть все состояния и размеры: кнопки, алерты, бейджи, поля форм, диалоги, пагинация и другие.

Перекраска в один клик

Макеты и интерфейс перекрашиваются в один клик, а расхождения с системой дизайнер исправляет сам.

• Светлая и тёмная темы поддерживаются без ручной работы.
• Небольшая дизайн-команда закрывает больше работы: рутину по приведению экранов к системе делает ИИ.

Раньше смена цвета подложки под модальными окнами была большой задачей: найти все места и поменять вручную. Теперь достаточно показать Claude макет — он сам находит нужный токен и меняет его везде.