Автор и репозиторий
Автор — nexu-io. Репозиторий собрал 69k звёзд на GitHub. Распространяется под лицензией Apache-2.0. Файл figma-code-connect.md открыт: прочитать его можно до установки.
Открыть репозиторий
Скилл · Разработка
Figma Code Connect
Связывает компоненты Figma с их React-реализацией.
О скилле
Что делает
Автоматизирует Code Connect — официальную связь компонентов Figma с их React- или Vue-реализацией: файлы соответствий генерируются для всей библиотеки разом. Разработчики видят готовый код компонента прямо в Dev Mode без вопросов дизайнеру; ручной маппинг токенов и компонентов уходит. Требует базовый скилл figma-use.
Источник
Откуда скилл и как поставить
Установка в Claude Code
Склонируйте репозиторий в ~/.claude/skills/ и перезапустите Claude Code — скилл подхватится сам. Дальше просто попросите ассистента использовать «Figma Code Connect».
Cursor и другие редакторы
Скопируйте содержимое SKILL.md в системные правила проекта. Скиллы не запускают код — это текстовые инструкции, которые меняют поведение модели.
Хотите внедрить, но некогда разбираться?
Подберу скиллы под вашу задачу, поставлю и покажу на живом примере — быстрее, чем читать документацию.
Получить консультацию
Рядом на полке
Похожие скиллы
figma-design-system-rules.md★ 68k
Figma Design System Rules
Правила дизайн-системы в Figma: имена, токены, структура
nexu-io · Apache-2.0
shadcn-ui.md★ 67k
Shadcn UI
Быстрая сборка интерфейсов на компонентах shadcn/ui
nexu-io (Google Labs / Stitch) · Apache-2.0
design-system-patterns.md★ 37k
Design System Patterns
Дизайн-система с токенами, темами и библиотекой компонентов
Will Shobson · MIT
figma-design-react.md★ 114
Figma Design React
Ссылка на макет — готовые компоненты с точными стилями
Bitovi · MIT
figma-design-omni.md★ 45
Figma Design Omni
Достаёт из макета компоненты, переменные и спецификации
diegosouzapw · MIT
image-to-code.md★ 69k
Image to Code
Скриншот или макет на входе — рабочий HTML или React на выходе
nexu-io · Apache-2.0
Дальше
Куда идти дальше
Категория «Разработка»
Самая большая полка каталога: написание и ревью кода, рефакторинг, отладка, архитектура, работа с фреймворками.
Ко всем скиллам категорииСловарь терминов
Промпт, токен, MCP, агент — 44 понятия простыми словами, если что-то на этой странице звучит незнакомо.
Открыть словарьГайды
Пошаговые разборы: от первого промпта до своих агентов и автоматизации.
К каталогу гайдов
Вопросы
Частые вопросы
Что делает скилл Figma Code Connect?
Связывает компоненты Figma с их React-реализацией. Это Agent Skill — текстовое расширение для Claude Code и Cursor: подключается файлом SKILL.md и меняет поведение ассистента, кода внутри нет. Темы скилла: figma, code-connect, react, design-system, components.
Как установить Figma Code Connect?
Склонируйте репозиторий автора в папку скиллов: git clone https://github.com/nexu-io/open-design ~/.claude/skills/figma-code-connect — и перезапустите Claude Code, он подхватит скилл сам. В Cursor и похожих редакторах скопируйте содержимое SKILL.md в правила проекта. Перед установкой файл стоит прочитать: это обычный текст.
Это бесплатно?
Да. Скилл «Figma Code Connect» открыт: автор — nexu-io, скачивается из официального репозитория без регистрации. Распространяется под лицензией Apache-2.0. На этой странице ничего покупать не нужно — каталог часть моего раздела «Обучение».
Нужен такой результат в вашей работе?
Напишите, чем занимаетесь, — скажу, закроет ли задачу этот скилл или собрать решение под вас.
Получить консультациюПн–Вс, 10:00–20:00. Отвечаю лично.