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

figma-generate-library · openai — скилл для Claude Code: система дизайна

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

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

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

figma-generate-library учит, ЧТО строить в Figma и В КАКОМ ПОРЯДКЕ. Скилл разбивает работу на пять фаз: обнаружение (анализ кода и файла), основы (переменные и стили), структура (страницы и документация), компоненты (один за одним) и финальная проверка. Каждую фазу нужно завершить и получить одобрение перед следующей — это гарантирует, что структура Figma останется рабочей и не развалится при добавлении компонентов.

Скилл работает вместе с figma-use (тот знает API Figma, а generate-library знает архитектуру дизайн-системы). Обязательное требование: переменные создаются ДО компонентов, все переменные привязаны к правильным scopes, и каждый компонент живёт на отдельной странице. Работа идёт через 20–100+ вызовов use_figma, каждый — маленький, проверяемый шаг.

Без правильного порядка фаз система разваливается дорого. Если создать компоненты без переменных, а потом добавить переменные, придётся переделывать привязки. Если пропустить обнаружение, компоненты не совпадут с кодом.

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

  • Создать переменные и режимы в Figma, синхронизированные с дизайн-токенами кода
  • Построить библиотеку компонентов с вариантами и привязками к переменным
  • Настроить светлую и тёмную тему через Figma Variables
  • Документировать дизайн-систему (типографика, цвета, интервалы) в Figma
  • Рассинхронизировать Figma и код, когда они расходятся

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

  • Создай дизайн-систему в Figma: переменные для цветов, интервалов и типографики, затем компоненты Button, Card и Modal с вариантами
  • Обнови мою Figma-библиотеку: синхронизируй переменные из этого файла tokens.json, затем пересоздай компоненты Form с вариантами для состояний
  • Проверь, что дизайн-система в Figma совпадает с кодом: разберись, какие токены и компоненты есть в коде, какие в Figma, и заполни пробелы

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

1Через Skills CLI (Vercel)

npx skills add openai/skills --skill figma-generate-library -a claude-code

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

~/.claude/skills/figma-generate-library/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/figma-generate-library/

Из того же набора20

Весь набор →
pdf официальный openai Скилл для чтения, создания и проверки PDF, где важно, как выглядит страница. Пригодится, когда агент собирает документ и должен сам увидеть результат. Claude Code CX Codex Cursor +1 13 400установок gh-fix-ci официальный openai Находит упавшие проверки GitHub Actions в пулл-реквесте, собирает логи ошибок и готовит план исправлений. Скилл применяет правки только после подтверждения. Claude Code CX Codex Cursor +1 11 400установок openai-docs официальный openai Скилл ищет актуальные материалы OpenAI и помогает отвечать по API, Codex, моделям и обновлению промптов с опорой на официальную документацию. Claude Code CX Codex Cursor +1 6 100установок imagegen официальный openai Скилл создаёт и редактирует растровые изображения: иллюстрации, текстуры, спрайты и мокапы. Нужен, когда результатом должен стать bitmap-файл. Claude Code CX Codex Cursor +1 5 700установок jupyter-notebook официальный openai Создаёт чистые Jupyter-ноутбуки для экспериментов и пошаговых руководств через готовые шаблоны и вспомогательный скрипт. Помогает избежать ручной сборки сырого JSON. Claude Code CX Codex Cursor +1 5 600установок skill-creator официальный openai Руководство по созданию и обновлению скиллов для ИИ-агентов. Помогает упаковать рабочие процессы, скрипты и документацию без лишней траты токенов. Claude Code CX Codex Cursor +1 4 900установок gh-address-comments официальный openai Скилл помогает найти открытый pull request текущей ветки, разобрать комментарии ревью и применить выбранные исправления через gh. Claude Code CX Codex Cursor +1 4 800установок cloudflare-deploy официальный openai Скилл помогает выбрать сервис Cloudflare и подготовить деплой приложения или инфраструктуры через Workers, Pages и связанные продукты. Claude Code CX Codex Cursor +1 4 300установок

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

figma-generate-library официальный Figma Скилл для построения профессиональной дизайн-системы в Figma на основе кодовой базы. Создаёт переменные, компоненты с вариантами, стили типографики и теминг в правильном порядке — от токенов к готовым компонентам. CX Codex GP ChatGPT 32установок

Похожие

mobile-ios-design Seth Hobson Помогает проектировать нативные интерфейсы iOS и писать SwiftUI-вью по Apple HIG. Пригодится для экранов, навигации и адаптивной вёрстки. Claude Code CX Codex Cursor 23 659установок fluentui-blazor официальный github Скилл подсказывает, как подключать Microsoft Fluent UI Blazor и собирать интерфейсы из Fluent-компонентов. Нужен при разработке и отладке Blazor-приложений. GitHub Copilot 9 000установок legacy-circuit-mockups официальный github Создаёт макеты схем на макетной плате с помощью HTML5 Canvas. Пригодится, когда нужно показать расположение компонентов и проводов в проекте по электронике. GitHub Copilot 8 900установок interface-review jakubkrehel Проверяет ветки, пулл-реквесты и незакоммиченные правки на дефекты UI, вёрстки, типографики и доступности. Показывает, что именно сломалось или добавилось в интерфейсе. Claude Code CX Codex Cursor +1 18 100установок react-vite-dashboard официальный google-labs-code Скилл превращает макеты из Stitch в рабочий код дашборда на React и Vite. Он связывает дизайн-токены из DESIGN.md с кодом и подключает выборку данных через TanStack Query. Claude Code CX Codex Cursor +1 5 400установок ux-copy официальный anthropics Скилл пишет и проверяет тексты интерфейса: от кнопок до сообщений об ошибках. Пригодится, когда нужно подобрать формулировку для конкретного экрана и состояния пользователя. Claude Code CX Codex Cursor +1 4 600установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок

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

Как установить figma-generate-library в Claude Code?

Выполни команду npx skills add openai/skills --skill figma-generate-library -a claude-code, затем найди файл SKILL.md в папке ~/.claude/skills/figma-generate-library/.

Чем figma-generate-library отличается от figma-use?

figma-generate-library учит архитектуру дизайн-системы и порядок работы (переменные → компоненты → проверка). figma-use — это API Figma Plugin, синтаксис для конкретных операций. Оба скилла работают вместе.

Почему нельзя создать всё сразу, в одном вызове?

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

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

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

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

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