figma-code-connect-components · openai — скилл для Claude Code
Связывает опубликованные компоненты из Figma с кодом проекта через Figma Code Connect. Помогает сопоставить свойства макета с интерфейсами в репозитории.
npx skills add openai/skills --skill figma-code-connect-components -a claude-codeЧто делает figma-code-connect-components
Скилл автоматизирует сопоставление дизайн-системы с кодовой базой. Через вызов get_code_connect_suggestions он опрашивает выбранный узел макета, отсекает уже подключённые элементы и собирает список компонентов с их свойствами. Затем ассистент ищет подходящие файлы в каталогах вроде src/components/, сравнивает имена, пропсы и варианты в коде на TypeScript или JavaScript, после чего предлагает связи пользователю.
После подтверждения соответствий скилл выполняет пакетную привязку через вызов send_code_connect_mappings. Если используется десктопный клиент через figma-desktop MCP, адрес макета вводить не нужно — узел берётся из активного окна. При передаче ссылки из браузера скилл самостоятельно переводит формат идентификатора узла из node-id=1-2 в вид 1:2.
Для работы необходимы тарифный план Figma Organization или Enterprise, а сами компоненты должны быть опубликованы в библиотеке команды. Без запущенного Figma MCP-сервера сопоставление выполнить не получится.
Какие задачи решает
- найти неразмеченные компоненты в выбранном узле Figma
- сопоставить свойства дизайн-системы с пропсами в коде
- зарегистрировать связи Code Connect пакетом через MCP-сервер
- обнаружить файлы компонентов в репозитории по структуре макета
Примеры запросов агенту
- Свяжи выбранный в десктопной Figma компонент с кодом через Code Connect
- Найди совпадения в репозитории для макета по ссылке с параметром
node-idи настрой привязку - Запусти
figma-code-connect-componentsдля проверки неразмеченных кнопок
Как установить figma-code-connect-components
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-code-connect-components -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-code-connect-components/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-code-connect-components/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-code-connect-components -a codex2Вручную: положить файлы
.agents/skills/figma-code-connect-components/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-code-connect-components -a cursor2Вручную: положить файлы
.cursor/skills/figma-code-connect-components/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/skills figma-code-connect-components2Вручную: положить файлы
.github/skills/figma-code-connect-components/SKILL.md1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-code-connect-components -a gemini-cli2Командой платформы
gemini skills install https://github.com/openai/skills --path skills/.curated/figma-code-connect-componentsВручную: положить файлы
.devin/skills/figma-code-connect-components/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-code-connect-components -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о figma-code-connect-components
Как установить figma-code-connect-components в Claude Code?
Выполните команду npx skills add openai/skills --skill figma-code-connect-components -a claude-code в терминале.
Что делает figma-code-connect-components?
Скилл анализирует выбранные компоненты в Figma, находит похожие файлы и свойства в репозитории проекта и регистрирует привязки Code Connect.
На каких тарифах Figma работает связывание компонентов?
Инструмент требует подписки Organization или Enterprise, поскольку функция Code Connect доступна только на них. Связываемые компоненты должны быть предварительно опубликованы в библиотеке команды.
