К основному содержанию
affpapa.org
RU EN
скилл CX Codex GP ChatGPT официальный · OpenAI

figma-implement-motion — скилл для Codex: что делает и как установить

Переносит анимации и переходы из Figma в код на motion.dev или чистом CSS. Пригодится разработчикам при верстке анимированных компонентов по макету.

Установить в Codex · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add openai/plugins --skill figma-implement-motion -a codex
Открыть на GitHub

Что делает figma-implement-motion

Скилл автоматизирует перенос моушна из макетов в рабочий репозиторий. Работа строится через два вызова: get_design_context поставляет структуру разметки со стилями, а get_motion_context отдает точные тайминги, кривые сглаживания и готовые сниппеты. Идентификатор узла связывает обе части воедино.

Инструмент берёт готовые сниппеты CSS @keyframes или motion.dev прямо из ответа сервера. Если готового сниппета нет, логика собирает анимацию по ключевым кадрам. Для сложных сцен доступна группировка узлов с общей временной шкалой.

Для работы обязателен подключенный MCP-сервер Figma и ссылка на узел макета. Скилл нужен тем, кто регулярно верстает динамичные интерфейсы по готовым прототипам. Если же анимацию требуется создать внутри самого редактора, этот инструмент не подойдет.

Какие задачи решает

  • перенести тайминги и кривые сглаживания из Figma в код
  • сгенерировать CSS-анимации по ключевым кадрам макета
  • встроить анимации motion.dev в разметку компонентов
  • синхронизировать движение связанных элементов интерфейса

Примеры запросов агенту

  • Реализуй анимацию для этого компонента из Figma
  • Перенеси моушн из макета по ссылке в кодовую базу
  • Добавь анимацию из Figma в компонент кнопки

Как установить figma-implement-motion

1Через Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-implement-motion -a codex

2Вручную: положить файлы

.agents/skills/figma-implement-motion/SKILL.md

Для всех проектов — ~/.agents/skills/

Из того же набора201

Весь набор →
supabase официальный supabase Скилл помогает настраивать базу данных, аутентификацию и RLS в Supabase без скрытых дыр в безопасности. CX Codex GP ChatGPT 8установок remotion-render официальный Remotion Экспортирует видео и отдельные кадры из проектов Remotion через консольные команды. CX Codex GP ChatGPT 3установок figma-create-new-file официальный Figma Создаёт пустые файлы Figma, FigJam или Slides в черновиках нужной команды. Скилл готовит параметры и planKey перед запуском MCP-инструментов. CX Codex GP ChatGPT 6установок swiftui-performance-audit официальный OpenAI Находит причины просадок кадров, долгого рендеринга и утечек памяти в SwiftUI. Помогает разобрать код вьюшек или подготовить замеры для профилирования. CX Codex GP ChatGPT 109установок swiftui-liquid-glass официальный OpenAI Скилл помогает создавать и проверять интерфейсы SwiftUI с Liquid Glass для iOS 26+. Он нужен при внедрении эффекта, ревью и проверке fallback-сценариев. CX Codex GP ChatGPT 121установок swiftui-ui-patterns официальный OpenAI Скилл помогает собирать и рефакторить SwiftUI-интерфейсы: навигацию, состояние, компоновку и контролы. Подойдёт для новых экранов и правок существующего проекта. CX Codex GP ChatGPT 114установок swiftui-view-refactor официальный OpenAI Скилл наводит порядок в коде SwiftUI: делит разросшиеся экраны на отдельные структуры View и выносит побочные эффекты из body. CX Codex GP ChatGPT 113установок ios-memgraph-leaks официальный OpenAI Скилл захватывает и разбирает утечки памяти iOS из симулятора или .memgraph. Нужен для поиска удерживающих связей и проверки исправлений. CX Codex GP ChatGPT 1 054установок

Похожие

applicationinsights-web-ts Microsoft Помогает подключить Application Insights к браузерному приложению и собирать телеметрию: просмотры страниц, запросы и ошибки. Пригодится для RUM и трассировки GenAI-агентов на клиенте. Claude Code GitHub Copilot 38установок podcast-generation microsoft Генерирует озвучку текстов в формате подкаста через модель Azure OpenAI GPT Realtime Mini по WebSocket. Помогает настроить стриминг аудио от FastAPI до React. Claude Code GitHub Copilot 29установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. Claude Code CX Codex Cursor +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. Claude Code CX Codex Cursor +1 1 200 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. Claude Code Claude.ai 186 758установок

Вопросы о figma-implement-motion

Как установить figma-implement-motion в Codex?

Выполните команду npx skills add openai/plugins --skill figma-implement-motion -a codex. Файл скилла запишется в каталог .agents/skills/figma-implement-motion/SKILL.md.

Что делает скилл figma-implement-motion?

Он превращает данные анимаций из макетов Figma в готовый код на motion.dev или CSS keyframes. Скилл соединяет свойства движения с разметкой через идентификаторы слоев.

Что требуется для работы этого скилла?

Необходимы доступный MCP-сервер Figma, целевой репозиторий и ссылка на макет с идентификатором узла.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

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