Локализованное руководство по чтению

figma-generate-designНазначение, использование и источник

Используйте этот навык вместе с figma-use, когда задача включает в себя перевод страницы приложения, представления или многосекционного макета в Figma. Триггеры: 'записать в Figma', 'создать в Figma из кода', 'отправить страницу в Figma', 'взять это'app/page«Создать в Figma», «Создать экран», «Создать целевую страницу в Figma», «Обновить экран Figma в соответствии с кодом». Это предпочтительный навык рабочего процесса, когда пользователь хочет создать или обновить целую страницу, экран или представление в Figma из кода или описания. Обнаруживает компоненты, переменные и стили системы дизайна с помощью search_design_system, импортирует их и постепенно, пошагово, собирает экраны, используя токены системы дизайна вместо жестко закодированных значений.

Источник получен: 2026-10-29

Репозиторий-источник: openai/skills
SKILL.md: skills/.curated/figma-generate-design/SKILL.md
Звёзды репозитория: 28,420
Последнее обновление репозитория: 2026-10-29
Категории Skills: Дизайн
Время последнего сбора: 2026-10-31 10:38 UTC+08:00

Лицензия: Не указано

Оригинальный файл SKILL.md

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

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

Что делает этот навык

Как работает рабочий процесс на вышестоящем уровне

Параллельный рабочий процесс с generate_figma_design (только для веб-приложений)

При создании экрана веб-приложения, который может отображаться в браузере, наилучшие результаты достигаются при параллельном выполнении обоих подходов: Начните создание экрана, используя рабочий процесс этого навыка (use_figma + компоненты системы дизайна) Запуститеgenerate_figma_designЧтобы сделать снимок экрана работающего веб-приложения с идеальной точностью до пикселя. После завершения обоих действий: обновите вывод use_figma, чтобы он соответствовал идеально точному расположению пикселей.generate_figma_designЗахват. Захват обеспечивает точное расстояние между элементами, их размер и визуальное оформление, к которым следует стремиться, в то время как ваш результат использования use_figma содержит корректные экземпляры компонентов, связанные с системой дизайна.

проход вверх по течению · L30 ↗

Необходимый рабочий процесс

Выполняйте эти шаги по порядку. Не пропускайте ни одного шага.

проход вверх по течению · L44 ↗

Шаг1: Понять экран

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

проход вверх по течению · L48 ↗

проход вверх по течению · js ↗

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Требования и настройка

Предварительные требования

Необходимо подключиться к серверу Figma MCP. Целевой файл Figma должен содержать опубликованную систему проектирования с компонентами (или иметь доступ к библиотеке команды).

проход вверх по течению · L21 ↗

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

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

Начните с безопасного пробного периода.

Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.

Формат навыков и спецификация каталога ↗

Подробнее читайте в источнике.

Перевод и сфера применения

В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.

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

Закрепленный источник: Прочитайте оригинал ↗
Источник получен: 2026-10-29T09:32:23Z
Исходный коммит: 49f948faa9258a0c61caceaf225e179651397431
Исходный SHA-256: 45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9

Вернуться к полному каталогу навыков