Figma Generate Designавтор OpenAI

Figma Generate Design Skill.

Создайте редактируемый экран Figma, который остаётся связанным со своей дизайн-системой.

Figma
UI-дизайн
Дизайн-системы

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

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

Задача Figma Результат • Новый или обновлённый экран Figma, собранный из экземпляров компонентов • Цвета, отступы и радиусы, привязанные к переменным, с повторно используемыми стилями • Визуальные проверки отдельных секций и всего экрана по источнику Перед началом Подключённый Figma MCP, доступ к целевому файлу, опубликованная дизайн-система и сопутствующий Skill figma-use для операций на холсте.

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

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

Сборка экранов Figma из существующих ресурсов дизайн-системы

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

Рабочий процесс по источникуНе тест производительности выполнения

Рабочий подход

Figma Generate Design работает в направлении от кода к дизайну: результат — экран внутри Figma, а не код приложения. Перед сборкой страницы он находит существующие экземпляры компонентов, переменные библиотеки и стили текста или эффектов. Источник предпочитает повторное использование, а не рисование похожих блоков с жёстко заданными значениями.

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

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

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

Посмотреть пример брифа

От брифа до проверки

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

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

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

Подключённый Figma MCP, доступ к целевому файлу, опубликованная дизайн-система и сопутствующий Skill figma-use для операций на холсте.

Хорошо подходит

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

Ограничения, которые стоит проверить

Нужен доступ к дизайн-системеОписанный процесс предполагает доступ к опубликованным компонентам или командной библиотеке и наличие подключения Figma MCP.
Не из Figma в кодСоздание реализации приложения по дизайну прямо исключено из основного направления этого Skill.

Что подготовить

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

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

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

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

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

Попробуйте точечный бриф

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

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

Держите figma-use и его справочные материалы API доступными вместе с этим процессом. Эти бета-материалы регулируются Условиями для разработчиков Figma. Одна лишь установка Skill не подключает и не авторизует файл Figma.

Исходный файл в upstream

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

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

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

Пример брифа

Используй figma-generate-design, чтобы воссоздать наш экран настроек аккаунта в указанном файле Figma. Используй его опубликованные компоненты и переменные повторно, проверь свойства по умолчанию в коде и сохрани реальные подписи. Сначала создай обёртку, затем собирай по одной секции. Покажи скриншоты секций и исправь обрезанный текст или заглушки, прежде чем считать экран завершённым.

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

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

Элементы управления — связанные экземпляры компонентов, а не нарисованные вручную заменители.
Текст и варианты соответствуют предоставленному экрану, включая свойства по умолчанию.
На скриншотах секций нет обрезанных подписей, наложений и оставшихся заглушек.

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

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

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

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

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

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

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

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

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

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

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

Результат — это скриншот?

Основной процесс создаёт редактируемые узлы и экземпляры Figma. Захваченная веб-страница может служить референсом, но не является предполагаемой структурой итогового экрана.

Что делать, если локальные переменные не найдены?

В источнике сказано проверить и подключённые библиотеки. Удалённые опубликованные переменные не возвращаются локальным API переменных.

Можно ли обновить только часть экрана?

Да. Он может находить существующие секции и менять их текст, варианты или компоновку, сохраняя незатронутые области.

OpenDesign

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

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

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