Figma MCP для Claude Code: как передать макет агенту и сверстать один экран
Figma MCP передает Claude Code структурированный контекст макета: компоненты, переменные, размеры и расположение элементов. Код все равно генерирует Claude, поэтому подключение не гарантирует точное совпадение. Для первого теста возьмите один небольшой frame, а не весь дизайн продукта.
Подготовьте доступ к макету
Убедитесь, что у вас есть право просмотра нужного Figma-файла. Remote MCP server доступен через https://mcp.figma.com/mcp и рекомендуется Figma для большинства сценариев. Условия планов и лимиты могут различаться.
Подключите сервер в Claude Code по текущей инструкции клиента и пройдите авторизацию Figma. Не передавайте personal access token в промпте, если используется штатный OAuth.
Выберите один frame
Возьмите карточку тарифа или форму входа. В Figma нажмите правой кнопкой по frame и скопируйте ссылку на selection. В ней есть node ID, по которому MCP находит нужный объект.
Не отправляйте ссылку на весь файл, если задача касается одного экрана. Узкий контекст легче проверить и дешевле исправлять.
Сначала запросите описание
Используй Figma MCP и эту ссылку на frame. Ничего не меняй в коде. Перечисли размеры, типографику, цвета, отступы, интерактивные состояния и доступные компоненты проекта, которые можно переиспользовать. Отметь, чего в макете не видно.
Сверьте ответ с Figma. Если агент не видит node, проверьте ссылку, права и состояние MCP-сервера.
Сверстайте минимальный компонент
Реализуй этот frame как компонент в существующем проекте. Используй текущий UI-kit и токены вместо новых значений, где есть соответствие. Не меняй другие страницы и зависимости. Добавь Storybook story или локальный маршрут для проверки. Сначала покажи план файлов.
Просмотрите diff. MCP может дать дизайн-контекст, но не знает всех правил вашего кода без репозитория и его инструкций.
Сравните результат
Откройте компонент рядом с макетом на одинаковой ширине. Проверьте шрифт, сетку, состояния hover и focus, длинный текст и мобильный размер. Для точной приемки полезен скриншот, но финальное решение принимайте по DOM, доступности и поведению, а не только по пикселям.
В проектах ИИ-лаборатории Глеба Кудрявцева «Вайбкодинг на максималках» работа с агентом ведется в VS Code с Codex и связывается с Git и деплоем.
Тест завершен, когда один frame реализован без лишних зависимостей, состояния проверены, а Claude использовал существующие компоненты там, где они действительно совпадают.