figma-implementation-agent — субагент для Codex: обзор и запуск
Переносит узлы Figma в рабочий код проекта с сохранением визуала. Субагент запрашивает снимок макета и подбирает готовые токены вместо вставки сырого CSS.
.codex/agents/figma-implementation-agent.tomlЧто делает figma-implementation-agent
Субагент переводит выбранные узлы Figma в код приложения. Перед редактированием файлов он в обязательном порядке запрашивает контекст и скриншот через протокол Figma MCP, чтобы сверить визуальное состояние.
Инструмент не копирует слепо классы Tailwind из сгенерированного макета. Он ищет существующие компоненты репозитория и проектные дизайн-токены. Если возникают расхождения из-за ограничений доступности или стандартов кодовой базы, субагент фиксирует их отдельным списком.
Без подключённого Figma MCP субагент не сможет получить снимок макета и контекст узла. Итог работы он отдаёт по фиксированной структуре: список входных слоёв, план вёрстки, внесённые правки, отчёт о визуальном сходстве и тесты для проверки.
Какие задачи решает
- перенести компонент из Figma в рабочий код проекта
- сопоставить сгенерированные стили с дизайн-токенами репозитория
- зафиксировать визуальные расхождения и проблемы доступности
- подготовить план вёрстки и тесты для проверки интерфейса
Примеры запросов агенту
- Сверстай карточку товара из узла Figma 42:105, используя наши компоненты
- Перенеси экран профиля из Figma и проверь соответствие дизайн-токенам
- Сделай форму авторизации по макету и подготовь список расхождений с вёрсткой
Как установить figma-implementation-agent
Вручную: положить файлы
.codex/agents/figma-implementation-agent.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.claude/agents/figma-implementation-agent.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.cursor/agents/figma-implementation-agent.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о figma-implementation-agent
Как установить figma-implementation-agent в Codex?
Добавьте конфигурационный файл агента по пути .codex/agents/figma-implementation-agent.toml в вашем проекте.
Что делает figma-implementation-agent?
Он считывает узел дизайна через Figma MCP, запрашивает снимок экрана и переносит интерфейс в код, используя готовые токены и компоненты проекта.
Почему субагент не переносит сырые классы Tailwind из Figma?
Правила агента требуют воспринимать разметку из Figma MCP как промежуточный образец, чтобы заменять прямые стили на существующие компоненты репозитория.
