Figma Create Design System Rulesавтор OpenAI

Figma Create Design System Rules Skill.

Замените расплывчатое указание «следуй дизайн-системе» конкретными путями и соглашениями.

Figma
Дизайн-системы
Правила для агентов

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

Обзор источника · Figma Create Design System RulesSKILL.md

Задача Figma Результат • Раздел или файл с правилами реализации Figma для конкретного проекта • Конкретные рекомендации по расположению компонентов, токенов и ассетов • Небольшая проверочная реализация, по которой уточняются правила Перед началом Подключение Figma MCP и доступ к целевой кодовой базе; формат итоговых правил зависит от среды программирования.

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

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

Превратите соглашения репозитория в правила реализации Figma

Рабочий процесс анализа репозитория, который составляет и проверяет конкретные правила для агентской реализации Figma.

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

Как это работает

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

Источник поддерживает форматы правил для Claude Code, Codex и Cursor. Полезные правила называют реальные пути компонентов и источники токенов, а не навязывают каждому репозиторию типовой подход на React или Tailwind. Процесс завершается проверкой правил на небольшом компоненте и доработкой того, что не сработало: написанная инструкция не доказывает, что агент будет всегда ей следовать.

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

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

Смотреть пример брифа

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

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

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

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

Подключение Figma MCP и доступ к целевой кодовой базе; формат итоговых правил зависит от среды программирования.

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

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

Ограничения

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

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

Доступ к репозиториюПредоставьте реальный проект, включая типичные компоненты и файлы стилей.
Среда агентаУкажите формат правил, который использует команда, например AGENTS.md, CLAUDE.md или правила Cursor.
Известные решения командыУкажите соглашения, которые нельзя надёжно вывести из кода, включая ответственных и утверждённые исключения.

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

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

Конкретные пути вместо лозунгов
Названные компонент Button и файл токенов полезнее общей просьбы о единообразии.
Адаптация к репозиторию
Источник рассматривает сгенерированное представление Figma как дизайн-контекст, который нужно адаптировать под собственный фреймворк и стили репозитория.

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

Попробуйте целевой бриф

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

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

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

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

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

Подключение Figma MCP и доступ к целевой кодовой базе; формат итоговых правил зависит от среды программирования.

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

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

Пример брифа

Используй figma-create-design-system-rules, чтобы задокументировать наши существующие соглашения по переносу из Figma в код. Сначала изучи репозиторий, сохрани текущий AGENTS.md и добавь целевой раздел с путями к нашим компонентам, токенам и ассетам. Не вводи новый фреймворк стилизации. Проверь рекомендации на одном небольшом компоненте и отметь любое соглашение, по которому нужно решение команды.

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

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

Все указанные пути к компонентам и токенам существуют.
Новые правила не противоречат существующим инструкциям проекта и не заменяют их.
Небольшая реализация следует намеченным соглашениям о повторном использовании и стилизации.

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

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

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

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

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

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

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

Рабочий процесс анализа репозитория, который составляет и проверяет конкретные правила для агентской реализации Figma.

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

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

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

Создаёт ли он токены внутри Figma?

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

Обязательно ли использовать в проекте React и Tailwind?

Нет. Источник прямо предписывает агенту определить фреймворк и подход к стилизации в репозитории и соответственно адаптировать правила.

Нужно ли превращать каждое соглашение в правило?

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

OpenDesign

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

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

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