# figma-implementation-agent

Переносит узлы Figma в рабочий код проекта с сохранением визуала. Субагент запрашивает снимок макета и подбирает готовые токены вместо вставки сырого CSS.

- субагент · `type=agent` · Codex, ChatGPT · ★ 7604
- Автор: Figma · официальный репозиторий OpenAI
- Лицензия: LicenseRef-Figma-Developer-Terms · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/openai/plugins/tree/HEAD/plugins/figma/agents/figma-implementation-agent.md
- Обновлён: 2026-10-08
- HTML: https://affpapa.org/nevibecode/agents/figma-implementation-agent

## Что делает

Субагент переводит выбранные узлы Figma в код приложения. Перед редактированием файлов он в обязательном порядке запрашивает контекст и скриншот через протокол Figma MCP, чтобы сверить визуальное состояние.

Инструмент не копирует слепо классы Tailwind из сгенерированного макета. Он ищет существующие компоненты репозитория и проектные дизайн-токены. Если возникают расхождения из-за ограничений доступности или стандартов кодовой базы, субагент фиксирует их отдельным списком.

Без подключённого Figma MCP субагент не сможет получить снимок макета и контекст узла. Итог работы он отдаёт по фиксированной структуре: список входных слоёв, план вёрстки, внесённые правки, отчёт о визуальном сходстве и тесты для проверки.

## Требования
- Работает с: Figma

## Установка

### Codex (родная платформа)

**Вручную: положить файлы**
- Файл: `.codex/agents/figma-implementation-agent.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/agents/figma-implementation-agent.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/figma-implementation-agent.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/openai/plugins/tree/HEAD/plugins/figma/agents/figma-implementation-agent.md

## Когда брать
- перенести компонент из Figma в рабочий код проекта
- сопоставить сгенерированные стили с дизайн-токенами репозитория
- зафиксировать визуальные расхождения и проблемы доступности
- подготовить план вёрстки и тесты для проверки интерфейса

## Примеры запросов агенту
- Сверстай карточку товара из узла Figma 42:105, используя наши компоненты
- Перенеси экран профиля из Figma и проверь соответствие дизайн-токенам
- Сделай форму авторизации по макету и подготовь список расхождений с вёрсткой

## Похожие
- [ui-ux-designer](https://affpapa.org/nevibecode/agents/ui-ux-designer.md) — субагент · 27069 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/ui-designer.md) — субагент · 1979 установок
- [mobile-app-developer](https://affpapa.org/nevibecode/agents/mobile-app-developer.md) — субагент · 1552 установки
- [ux-researcher](https://affpapa.org/nevibecode/agents/ux-researcher.md) — субагент · 703 установки
- [accessibility-tester](https://affpapa.org/nevibecode/agents/accessibility-tester.md) — субагент · 346 установок

Из того же набора: [openai/plugins](https://affpapa.org/nevibecode/by/openai/plugins.md) — 596 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md