implement-from-figma — команда для Codex: что делает и как установить
Команда переносит фреймы и компоненты из макетов Figma прямо в код проекта. Она скачивает графику и сверяет вёрстку с дизайном.
~/.codex/prompts/implement-from-figma.mdЧто делает implement-from-figma
Команда разбирает ссылку на макет, извлекая идентификатор узла node-id. Если ссылка не передана, скрипт попытается взять активный элемент через MCP-сервер figma-desktop. Затем через вызовы get_design_context и get_screenshot агент собирает контекст дизайна и снимок экрана.
Графика скачивается напрямую из MCP без подмены иконочными пакетами или заглушками. Это снижает риск расхождений с дизайном. Агент пишет код с учётом существующих компонентов репозитория, проверяет результат локально и составляет список отличий.
Для масштабной переработки интерфейса или правок сразу в нескольких файлах команда передаёт задачу субагенту figma-implementation-agent.
Какие задачи решает
- перенести компонент или экран из макета Figma в кодовую базу
- выгрузить оригинальные графические ассеты через MCP без моков
- проверить соответствие вёрстки дизайну и составить список расхождений
- делегировать масштабную вёрстку субагенту figma-implementation-agent
Примеры запросов агенту
- /implement-from-figma <figma_url> target="src/components/Header.tsx" mode="component"
- Сверстай экран профиля по ссылке <figma_url> в режиме screen
- /implement-from-figma target="src/Button.tsx"
Как установить implement-from-figma
Вручную: положить файлы
~/.codex/prompts/implement-from-figma.mdВызов — /prompts:implement-from-figma. В Codex этот формат помечен устаревшим, замена — скиллы
Вручную: положить файлы
.claude/commands/implement-from-figma.mdВызов — /implement-from-figma. Для всех проектов — ~/.claude/commands/
Вручную: положить файлы
.github/prompts/implement-from-figma.prompt.mdВручную: положить файлы
.gemini/commands/implement-from-figma.tomlGemini хранит команды в TOML: текст запроса — в поле prompt
Вопросы о implement-from-figma
Как установить implement-from-figma в Codex?
Сохраните файл команды по пути ~/.codex/prompts/implement-from-figma.md.
Что делает команда implement-from-figma?
Она считывает макет через MCP, забирает скриншот и ассеты, после чего генерирует код компонента или экрана по стандартам проекта.
Когда задача передаётся figma-implementation-agent?
Делегирование происходит при крупных изменениях интерфейса или когда правки затрагивают сразу несколько файлов проекта.
