Figma Implement Designавтор OpenAI

Figma Implement Design Skill.

Используйте контекст, скриншоты и ассеты Figma, чтобы реализовать дизайн на существующем фреймворке вашего проекта.

Figma
Фронтенд-дизайн
Передача разработчикам

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Figma Implement DesignSKILL.md

Задача Figma Результат • Компоненты приложения или страница, соответствующие выбранному дизайну Figma • Сопоставления токенов и компонентов, соответствующие принятым в проекте • Визуальное сравнение с описанием необходимых отклонений Перед началом Подключённый Figma MCP, доступ к выбранному дизайну и целевому репозиторию, а также работающий предпросмотр для визуальной проверки.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Реализуйте дизайн Figma в существующей кодовой базе

Процесс реализации из Figma в код, объединяющий контекст узла, скриншоты, ассеты и повторное использование кода репозитория.

Процесс на основе источникаНе бенчмарк выполнения

Принцип работы

Figma Implement Design работает от выбранного узла Figma к коду в репозитории пользователя. Он объединяет структурированный контекст дизайна со скриншотом, затем адаптирует вёрстку, токены и ассеты под фреймворк проекта. Сгенерированный дизайн-инструментом React и утилитарные классы считаются лишь представлением, а не указанием заменить архитектуру приложения.

Источник делает упор на повторном использовании: существующие кнопки, поля ввода, типографику и примитивы вёрстки следует расширять, где это возможно. Сложные фреймы разбиваются на более мелкие запросы узлов, если ответ обрезан. Завершённость зависит от сравнения реальной реализации с эталоном и проверки адаптивности, взаимодействий и ассетов, а не просто от получения компилируемого кода.

Ожидаемые результаты

Компоненты приложения или страница, соответствующие выбранному дизайну Figma
Сопоставления токенов и компонентов, соответствующие принятым в проекте
Визуальное сравнение с описанием необходимых отклонений

Смотреть пример задачи

От задачи до проверки

01
Зафиксируйте точный дизайн
Определите ссылку на конкретный узел или поддерживаемое выделение в десктопном приложении, затем получите и структурированный контекст, и скриншот.
02
Адаптируйте под репозиторий
Используйте существующие компоненты и токены, получите предоставленные ассеты и сохраните соглашения о маршрутизации, состоянии и загрузке данных.
03
Сравните работающий интерфейс
Сверьте с выбранным дизайном вёрстку, типографику, интерактивные состояния, адаптивные ограничения и отображение ассетов.

02 Когда использовать

Когда использовать

Подключённый Figma MCP, доступ к выбранному дизайну и целевому репозиторию, а также работающий предпросмотр для визуальной проверки.

Подходит

Реализация утверждённого дизайнаПолезно, когда у компонента или экрана уже есть конкретный образец в Figma, а следующий шаг — код в репозитории.
Повторное использование дизайн-системыПодходит для сложившегося приложения, где визуальное соответствие не должно приводить к дублированию инфраструктуры компонентов.

Ограничения

Нет редактирования холстаРезультат этого навыка — код. Создание или изменение узлов внутри Figma относится к отдельному рабочему процессу.
Визуальная точность требует проверкиЦель попиксельного соответствия в источнике не доказывает, что сгенерированная реализация уже совпадает с дизайном. Рендеринг и сравнение по-прежнему необходимы.

Подготовьте эти входные данные

Конкретный узел FigmaУкажите ссылку на фрейм или компонент с ID узла либо поддерживаемое выделение в десктопном приложении.
Целевой репозиторийУкажите место реализации и сделайте доступными существующие компоненты, токены и соглашения.
Требования к поведениюУточните состояния взаимодействия и ожидания по адаптивности, которые один статичный фрейм может не передавать.

03 Важные решения

Важные решения

Два вида свидетельств
Структурированные свойства объясняют размеры и ограничения, а скриншот показывает визуальные связи, которые могут не отразиться в исходных значениях.
Существующая архитектура сохраняется
Процесс переводит результат дизайна в собственные соглашения проекта, а не переносит целиком чужой стиль реализации.

04 Пример задания

Попробуйте узкую задачу

Приведённый ниже пример задачи не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Добавьте отобранный навык в среду вашего агента и отдельно подключите Figma. Эти бета-материалы регулируются условиями для разработчиков Figma. Перед началом реализации убедитесь, что подключение возвращает контекст выбранного дизайна.

Исходный файл в репозитории

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-implement-design/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этой задаче.

Пример задачи

Используй figma-implement-design, чтобы реализовать выбранную панель настроек в нашем существующем проекте на Vue. Получи точный контекст узла и скриншот, используй наши компоненты форм и переменные токенов, а также предоставленные дизайн-ассеты. Сохрани текущую обработку данных. Сравни отрисованную панель на десктопной и мобильной ширине и задокументируй любые отклонения от фрейма Figma, вызванные требованиями доступности.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Реализация использует существующие компоненты и токены там, где они подходят.
Реальные ассеты загружаются, а типографика и отступы выбранного фрейма визуально сравниваются.
Адаптивность и интерактивные состояния проверяются тестами, а не выводятся из статичного скриншота.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Эта публикация не означает, что навык включён в поставку или что в неё входят внешние инструменты, учётные данные и программные зависимости.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника, ссылка на которую приведена ниже. Поведение и требования upstream могут измениться.

Владелец источника: OpenAI
Репозиторий: openai/skills
Файл навыка: skills/.curated/figma-implement-design/SKILL.md
Лицензия: Условия Figma
Проверенная версия: 2026-10-07 · 49f948faa925

Редакционное резюме источника

Процесс реализации из Figma в код, объединяющий контекст узла, скриншоты, ассеты и повторное использование кода репозитория.

Оригинальное резюме подготовлено OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не данные об использовании навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Заставит ли это мой проект использовать React?

Нет. В источнике сказано, что код, сгенерированный инструментом, — это представление дизайна, и его нужно перевести на фактический фреймворк репозитория.

Что если ответ Figma обрезан?

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

Должны ли точные значения Figma заменять все существующие токены?

Источник отдаёт приоритет согласованности дизайн-системы проекта и предлагает минимальные объяснённые корректировки, если значения различаются.

OpenDesign

Освободите место для следующей итерации дизайна.

Храните задачу, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Смотреть дизайн-навыки