Создание дизайн-системы часто начинается с таблицы цветов и нескольких компонентов, но быстро превращается в большой объём механической работы. Необходимо создать переменные, связать примитивные и семантические токены, настроить типографику, размеры, состояния, Auto Layout и десятки вариантов компонентов.
Часть этих операций можно автоматизировать с помощью Claude Code, подключённого к Figma через MCP. ИИ получает доступ к рабочему Figma-файлу, создаёт переменные, компоненты и экраны непосредственно на канвасе. Однако качественный результат зависит не столько от модели, сколько от правильно спроектированной архитектуры дизайн-системы.
Как работает связка Claude Code и Figma
MCP, или Model Context Protocol, позволяет Claude взаимодействовать с внешними инструментами. После подключения Figma Claude может анализировать содержимое файла и выполнять в нём последовательные действия.
Рабочий процесс выглядит так:
требования к бренду → дизайн-токены → компоненты → шаблоны экранов → ручная проверка
Мы рекомендуем не поручать ИИ создание всей дизайн-системы одним запросом. Надёжнее разделить работу на этапы: сначала сформировать переменные, затем проверить их структуру, после этого создавать компоненты и только потом собирать интерфейсы.
Так снижается риск того, что Claude начнёт использовать случайные цвета, захардкоженные отступы или новые элементы вместо уже созданных компонентов.
С чего начинается дизайн-система в Figma
Основа масштабируемой дизайн-системы — не кнопки и карточки, а токены.
Примитивные токены
Это исходные значения:
- цветовые шкалы;
- размеры отступов;
- радиусы;
- размеры шрифтов;
- межстрочные интервалы;
- начертания.
Например, вместо одного синего цвета создаётся последовательная шкала оттенков от светлого к тёмному.
Семантические токены
Семантический уровень описывает назначение значения:
- основной фон;
- вторичный фон;
- основной текст;
- отключённый текст;
- граница;
- цвет ошибки;
- состояние наведения;
- активное состояние.
Семантический токен должен ссылаться на примитив, а не хранить отдельное HEX-значение. Тогда при изменении фирменного цвета достаточно обновить один базовый токен — изменения распространятся на кнопки, поля, карточки и другие элементы автоматически.
Именно при создании такой структуры ИИ особенно эффективен: Claude может за несколько минут сформировать десятки переменных, распределить их по коллекциям и настроить связи между слоями.
Автоматизация компонентов в Figma
Следующий этап — создание библиотеки компонентов. Claude Code можно передать подробную матрицу:
- тип компонента;
- размер;
- состояние;
- расположение иконки;
- правила отступов;
- текстовый стиль;
- нейминг;
- используемые токены.
Например, одна кнопка может включать четыре визуальных типа, три размера, четыре состояния и несколько вариантов расположения текста и иконок. В результате формируется более сотни комбинаций.
| Что ИИ делает хорошо | Что остаётся дизайнеру |
|---|---|
| Создаёт варианты и настраивает Auto Layout | Иконки и loading-состояния |
| Применяет токены и задаёт component properties | Absolute positioning |
| Соблюдает систему названий | Отдельные значения padding |
| Держит единые размеры и отступы | Финальная доводка и проверка |
ИИ выполняет большую часть механической сборки, но принимать результат без проверки нельзя.
Как создавать экраны на основе дизайн-системы
После создания библиотеки Claude можно поручить сборку интерфейса: например, экрана авторизации, личного кабинета или формы заявки.
Критически важно сформулировать требование:
Используй существующие компоненты, токены и текстовые стили.
Без этого указания ИИ может нарисовать новый прямоугольник вместо экземпляра компонента кнопки или применить случайное значение отступа.
При правильной постановке задачи Claude собирает экран из готовой системы:
- использует существующие компоненты;
- соблюдает типографическую иерархию;
- применяет размерные токены;
- выстраивает адаптивную структуру через Auto Layout;
- сохраняет единый визуальный язык.
Такой макет уже можно развивать и передавать в разработку, а не выбрасывать после презентации.
Где ИИ не заменяет дизайнера
Claude Code ускоряет производство интерфейсов, но не принимает ключевые продуктовые решения. ИИ не определяет самостоятельно:
- какой пользовательский сценарий является основным;
- какая информация должна находиться выше;
- какое действие сделать главным;
- насколько интерфейс соответствует позиционированию бренда;
- какие состояния и ошибки необходимо предусмотреть;
- удобно ли решение реальному пользователю.
Поэтому мы рассматриваем ИИ как инструмент исполнения, а не как замену UX- и UI-экспертизе. Правильное разделение работы выглядит так:
дизайнер проектирует систему и сценарии → ИИ выполняет повторяющиеся операции → специалист проверяет структуру и визуально дорабатывает результат
Как мы автоматизируем создание дизайн-систем
В 33 РЕШЕНИЯ мы начинаем с аудита текущего Figma-файла и определяем, какие элементы уже можно переиспользовать, а какие значения необходимо систематизировать. После этого:
- Проектируем архитектуру примитивных и семантических токенов.
- Переносим цвета, типографику, отступы и радиусы в переменные.
- Настраиваем нейминг и правила использования.
- Создаём библиотеку базовых компонентов и состояний.
- Собираем шаблоны ключевых экранов.
- Проверяем консистентность и готовность к разработке.
В результате компания получает не набор разрозненных макетов, а управляемую систему, которую можно масштабировать вместе с продуктом.
Нужно систематизировать макеты в Figma?
Проведём аудит текущего файла, определим структуру токенов и покажем, какие этапы создания дизайн-системы можно автоматизировать с помощью ИИ без потери контроля над UX и визуальным качеством. Оставить заявку