От 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 выплюнет мусор.
Инструменты: чем собрать кит, если его еще нет
Прежде чем скармливать кит коду, его надо по-человечески собрать. Вот что реально работает:
https://www.figma.com/make/ — база. Накидать черновик экрана или интерактивный прототип по промту. Быстро, удобно, но часто слишком стерильно. Хорошо как фундамент.
https://www.figma.com/community/plugin/1350743748296105581— это уже про систему. Генерит компоненты, которые дружат с токенами и логикой.
Готовые решения — иногда быстрее взять эталон. https://www.figma.com/community/file/1020079203222518115 (база баз) или https://www.figma.com/community/file/1203061493325953101 для 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. Зацикливаем процесс ( http://builder.io/)
Когда код готов, используем плагин http://Builder.io/. Он «маппит» ваши компоненты в Figma на реальный код.
Результат? Дизайнер рисует новый экран из готовых компонентов в Figma, а разработчик получает чистый React-код, который дергает ваши компоненты, а не генерит новую фигню.
Что в сухом остатке:
За один вечер вы получаете живую дизайн-систему: токены, CSS, React-библиотеку и Storybook. Figma — источник истины для визуала, код — для продакшена.
Всё связано, всё летает. ну не чудо ли?
