UX Collective: как заставить Claude Code следовать вашей дизайн-системе в Figma

О чём статья

Опубликованная в UX Collective в мае 2026 года, это практическое руководство дизайнера Сэна Линя по конкретной проблеме: когда AI-агенты для кодирования, такие как Claude Code, пишут UI на холст Figma, они склонны использовать жёстко заданные значения — шестнадцатеричные цвета, размеры в пикселях, необработанные отступы — вместо токенов дизайн-системы и экземпляров компонентов. В статье описываются четыре Claude Code Skills, которые предотвращают это на каждом этапе процесса сборки.

Контекст

По мере того как Figma MCP-сервер и Claude Code становятся более доступными, дизайнеры экспериментируют с агентными рабочими процессами, где языковой модели даётся бриф, и она генерирует фреймы прямо на холст Figma. Проблема, которую решает Сэн Линь, носит структурный характер: агент, у которого нет явных правил о дизайн-системе, будет производить вывод, который выглядит правдоподобно, но нарушает логику системы. Исправление этого постфактум занимает больше времени, чем сделать правильно с самого начала.

Четырёхэтапный рабочий процесс

Первый навык — предварительная проверка (preflight check). Перед тем как создать какой-либо узел на холсте, агент проводит аудит карты токенов и реестра компонентов. Он перечисляет доступные переменные, токены отступов и стили текста в файле Figma. Если preflight не проходит — например, если компоненты не связаны — агент останавливается и сообщает о проблеме, а не продолжает работу.

Второй навык обрабатывает разбор дизайн-брифа. Когда дизайнер делится скриншотом, ссылкой или письменным описанием, этот навык преобразует входные данные в структурированный бриф: какие секции строить, какие компоненты из подключённой библиотеки использовать и какие токены применять. Это делает намерение явным до начала любой генерации.

Третий навык обеспечивает поиск по библиотеке компонентов. Каждый раз, когда агенту нужен UI-элемент, он сначала запрашивает подключённую библиотеку компонентов Figma. Если подходящий компонент существует, используется его экземпляр. Если ничего не найдено — строится с нуля. Это предотвращает генерацию агентом произвольного UI, когда мог бы подойти компонент из системы.

Четвёртый навык — QA-проверка привязки токенов. После записи на холст агент выполняет шаг валидации, который проверяет каждую привязку — преобразуя жёстко заданные шестнадцатеричные значения обратно в их семантические эквиваленты-токены там, где это применимо, и помечая любые узлы, которые не сопоставляются с переменной.

Ключевой аргумент

Основная мысль статьи: Claude Code сам по себе недостаточен для соответствия дизайн-системе. Соответствие требует явных инструкций в каждой точке принятия решений. Четыре навыка добавляют эти инструкции структурированным образом, так что поведение агента предсказуемо в разных проектах и файлах. Автор формулирует это как написать рабочий процесс один раз и надёжно вызывать его, а не объяснять правила системы в каждом промпте.

Кому читать

Продакт-дизайнерам и лидам дизайн-систем, экспериментирующим с Figma MCP или Claude Code для генерации UI и желающим убедиться, что AI-генерируемый вывод остаётся в рамках их дизайн-системы.