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

figma-generate-design · openai — скилл для Codex: что делает и как установить

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

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

Что делает figma-generate-design

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

Перед вызовом use_figma нужно загрузить figma-use. Для работы нужны подключённый Figma MCP-сервер, целевой файл с опубликованной дизайн-системой или доступом к библиотеке и его fileKey. Если исходник — веб-приложение с изображениями, инструкция требует параллельно запустить generate_figma_design, чтобы перенести изображения в Figma.

Ставьте его, если переносите в Figma составной экран из кода или описания. Для создания новых компонентов и вариантов этот скилл не предназначен.

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

  • перенести страницу приложения из кода в Figma
  • собрать модальное окно из компонентов дизайн-системы
  • обновить экран Figma по текущему интерфейсу

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

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

Как установить figma-generate-design

1Через Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-generate-design -a codex

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

.agents/skills/figma-generate-design/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установок

Другие версии figma-generate-design

figma-generate-design официальный openai Собирает и обновляет целые экраны в Figma из кода или описания, используя опубликованную дизайн-систему, а не нарисованные с нуля прямоугольники. Claude Code CX Codex Cursor +1 2 900установок figma-generate-design nexu-io Переносит экраны приложения из кода или описания в Figma, используя компоненты дизайн-системы и токены. Пригодится, когда нужно собрать или обновить макет. Claude Code CX Codex Cursor +1 2 700установок

Похожие

frontend-design-review microsoft Скилл проверяет и создаёт интерфейсы с учётом дизайна, доступности и дизайн-системы. Подходит для ревью UI, PR и адаптивной вёрстки. Claude Code GitHub Copilot 237установок markdown-html-orchestrator Alireza Rezvani Маршрутизирует длинные Markdown-документы, код-ревью и слайды в подходящий конвертер, который создаёт HTML-файл. Подходит, когда документ нужно читать или показывать в браузере. Claude Code 46установок design-system Alireza Rezvani Настраивает фирменный стиль и проверяет контрастность по WCAG 2.2 AA для конвертеров markdown-html. Генерирует 12 CSS-токенов перед экспортом документов, слайдов или ревью. Claude Code 33установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о figma-generate-design

Как установить figma-generate-design в Codex?

Выполните npx skills add openai/plugins --skill figma-generate-design -a codex. Скилл появится в .agents/skills/figma-generate-design/SKILL.md.

Что делает figma-generate-design?

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

Что нужно для работы figma-generate-design?

Нужны подключённый Figma MCP-сервер, целевой файл с опубликованной дизайн-системой или доступом к библиотеке, а также его fileKey. Перед вызовом use_figma загрузите figma-use.

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

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

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

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