К основному содержанию
скилл CX Codex

figma-generate-library · nexu-io — скилл для Claude Code: как установить

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

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

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

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

Для запуска полного пайплайна с оригинальными скриптами, ассетами и ссылками потребуется установить апстрим-пакет из https://github.com/figma/skills. Без него скрипты сборки недоступны. Запись в OpenDesign даёт агенту лишь сигнатуру для обнаружения.

Запуск происходит автоматически по триггерам вроде «figma library» или при прямом обращении по имени скилла.

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

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

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

  • Обнови библиотеку figma library на основе наших компонентов в репозитории
  • Синхронизируй дизайн-систему: figma from codebase
  • Запусти скилл figma-generate-library для экспорта компонентов в Figma

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

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill figma-generate-library -a claude-code

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

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

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

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

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

Выполните команду npx skills add nexu-io/open-design --skill figma-generate-library -a claude-code. Манифест будет сохранён в ~/.claude/skills/figma-generate-library/SKILL.md.

Что делает скилл figma-generate-library?

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

Что требуется для запуска оригинального сценария сборки?

Нужно загрузить апстрим-пакет из репозитория https://github.com/figma/skills в каталог скиллов активного агента. Там содержатся исполняемые скрипты и исходные ассеты.

Исходный текст

SKILL.md · Apache-2.0
---
name: figma-generate-library
description: |
  Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
triggers:
  - "figma library"
  - "design system library"
  - "figma from codebase"
  - "sync figma"
od:
  mode: design-system
  category: figma
  upstream: "https://github.com/figma/skills"
---

# figma-generate-library

> Curated from Figma's MCP server guide.

## What it does

Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.

## Source

- Upstream: https://github.com/figma/skills
- Category: `figma`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
```

Then ask the agent to invoke this skill by name (`figma-generate-library`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Похожие скиллы

Всё по теме «Дизайн» →

Сначала — figma-generate-library от других авторов.

figma-generate-library официальный openai Скилл для синхронизации дизайн-системы Figma с кодовой базой. Помогает создать или обновить переменные, компоненты, режимы (светлая/тёмная тема) и документацию в правильном порядке — без фаз, выполненных в неправильной последовательности. CX Codex +1 2 700установок figma-generate-library официальный Figma Скилл для построения профессиональной дизайн-системы в Figma на основе кодовой базы. Создаёт переменные, компоненты с вариантами, стили типографики и теминг в правильном порядке — от токенов к готовым компонентам. CX Codex GP ChatGPT 32установок figma-generate-design официальный openai Собирает и обновляет целые экраны в Figma из кода или описания, используя опубликованную дизайн-систему, а не нарисованные с нуля прямоугольники. CX Codex +1 2 900установок figma-create-design-system-rules официальный openai Генерирует правила дизайн-системы для кодовой базы при переносе макетов из Figma. Помогает агентам соблюдать структуру компонентов и токенов проекта. CX Codex +1 2 900установок figma-build awdr74100 Собирает дизайн в подключённом Figma-файле из кода или описания и переиспользует его компоненты, переменные и стили. Пригодится для переноса экранов и UI-компонентов. CX Codex +1 1 300установок qt-figma-component-generation qt-ai-skills Читает компоненты Figma через MCP и пишет по ним QML-контролы на Qt Quick Controls 2. Нужен на шаге генерации компонентов в воркфлоу дизайн-системы. CX Codex +1 435установок figma heygen-com Импортирует ассеты, токены бренда и компоненты из Figma в проект HyperFrames и собирает из кадров анимацию. Пригодится, когда нужно оживить макет, а не вставлять статичные картинки. CX Codex +1 334 000установок pp-figma Giuliano Giacaglia Выгружает компактные данные фреймов Figma для кодогенерации, проверяет нерешённые комментарии и находит неиспользуемые компоненты. Пригодится при переносе макетов в код и аудитах дизайн-систем. CX Codex +1 726установок

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

Весь набор →
stitch-loop Скилл запускает итеративный цикл обратной связи между дизайном и кодом: критика макета → правка кода → проверка фidelity. Подойдёт, если нужно приближать вёрстку к макету по несколько раз. CX Codex +1 2 700установок gif-sticker-maker Скилл превращает фотографии в анимированные GIF-стикеры в стилистике Funko Pop и Pop Mart через MiniMax API. Пригодится для сборки авторских наборов аватарок и стикеров. CX Codex +1 2 700установок fal-video-edit Скилл помогает менять стиль существующего видео, повышать его разрешение, удалять фон и добавлять аудио с помощью моделей fal.ai. Пригодится для правок готовых роликов через агента. CX Codex +1 2 700установок venice-audio-speech Скилл подключает модели синтеза речи Venice.ai с выбором голосов и форматов. Пригодится для озвучки документов, создания закадра к видео или голоса агента. CX Codex +1 2 700установок sora Скилл создаёт, перерабатывает и управляет короткими видео через OpenAI Sora API. Пригодится для кинематографичных сцен, b-roll и итераций концептов. CX Codex +1 2 700установок fal-restore Скилл для восстановления качества фото: убирает размытие и шум, исправляет лица, восстанавливает старые документы через API fal.ai. CX Codex +1 2 700установок fal-tryon Виртуальная примерка одежды на человеке через модели fal.ai. Помогает собирать лукбуки и карточки для каталогов интернет-магазинов. CX Codex +1 2 700установок venice-image-edit Скилл редактирует изображения, увеличивает их разрешение и убирает фон через Venice.ai API. Пригодится для задач с обработкой изображений. CX Codex +1 2 700установок

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

Компании, которые помогают держать аналитику открытой