От Figma к коду: как прокинуть UI-кит в Claude Code и не сойти с ума

От Figma к коду: как прокинуть UI-кит в Claude Code и не сойти с ума

Про Claude Code сейчас трубят из каждого утюга. Способности — пушка, но давайте приземлим это на наши бытовые задачи. Например: как по-быстрому «обогатить» свой UI-кит кодовой базой, чтобы нейронки-агенты потом собирали вам консистентный дизайн, опираясь на ваши наработки, а не на свой рандомный вкус.

Суть: у вас есть кит в Figma. Компоненты, варианты, переменные — всё на месте. Теперь нужно, чтобы это зажило в коде как React-компоненты и CSS-токены. Claude Code через MCP залетает в ваш файл, читает его и пишет код на основе реальных данных. То, что раньше делалось неделями, теперь залетает за пару часов.

Но сначала — Шаг 0, на котором все обычно сыпятся.

Подготовьте Figma-файл (без этого будет хаос)

Claude читает файл через API. Если у вас там свалка из слоев «Rectangle 47» — чуда не будет.

Компоненты — только через Main Components.

Варианты — строго через Component Properties.

Стили — всё должно быть привязано к Variables или Styles. Никакого «красного на глаз».

Если кит причесан — вы в игре. Если нет — идите чинить, иначе Claude выплюнет мусор.

Инструменты: чем собрать кит, если его еще нет

Прежде чем скармливать кит коду, его надо по-человечески собрать. Вот что реально работает:

Figma AI / Make — база. Накидать черновик экрана или интерактивный прототип по промту. Быстро, удобно, но часто слишком стерильно. Хорошо как фундамент.

Figr Identity — это уже про систему. Генерит компоненты, которые дружат с токенами и логикой.

Готовые решения — иногда быстрее взять эталон. Untitled UI (база баз) или Shadcn/ui для Figma. Если работаете с Tailwind — это вообще кратчайший путь к адекватному результату.

Шаг 1. Коннектим Claude Code

Шаг 2. Выворачиваем структуру файла

Вот ссылка на файл. Вытащи через MCP все компоненты, цвета, HEX-ы, текстовые стили и отступы. Мне нужна полная карта, прежде чем начнем кодить.

Claude вернет структуру. Проверьте её. Это момент истины: станет понятно, где вы накосячили в Figma-файле.

Шаг 3. Генерим токены

«На основе файла создай tokens.json. Группируй всё: colors, typography, spacing. Сверху накинь скрипт generate-css.js, чтобы получить готовый styles/tokens.css. Запускай».

Это самая приятная часть — токены залетают идеально, потому что это голая математика.

Шаг 4. Пишем компоненты

Берем, например, Button. Просим Claude написать React-компонент, который в точности повторяет варианты из Figma.

Важно: заставляйте его использовать только CSS-переменные из вашего файла токенов. Добавляем стейты (hover, focus, loading), типы для TS и Storybook для документации. Повторяем для каждого элемента.

Шаг 5. Зацикливаем процесс (Builder.io)

Когда код готов, используем плагин Builder.io. Он «маппит» ваши компоненты в Figma на реальный код.

Результат? Дизайнер рисует новый экран из готовых компонентов в Figma, а разработчик получает чистый React-код, который дергает ваши компоненты, а не генерит новую фигню.

Что в сухом остатке:

За один вечер вы получаете живую дизайн-систему: токены, CSS, React-библиотеку и Storybook. Figma — источник истины для визуала, код — для продакшена.

Всё связано, всё летает. ну не чудо ли?