К основному содержанию
affpapa.org
RU EN
скилл CX Codex

figma-design — скилл для Claude Code: Figma, плагины и дизайн-системы

Скилл по Figma: компоненты, auto layout, переменные, прототипы и разработка плагинов. Пригодится, когда агент пишет код плагина или собирает дизайн-систему.

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

Что делает figma-design

Скилл описывает работу с Figma через Plugin API: иерархию узлов, компоненты и инстансы, auto layout, constraints, переменные и стили, реакции прототипов. Внутри — примеры на TypeScript: создать компонент, задать layoutMode, привязать переменную к заливке, применить стиль к тексту.

Отдельная часть — разработка плагинов: batch-операции по узлам, экспорт в PNG, JPG и SVG, хранение данных на узлах, работа с комментариями и историей версий. Описание опирается на документацию Figma Plugin API, подтянутую через Context7 (/figma/plugin-typings).

Переменные доступны только в Figma Design, в FigJam их не будет — это повод проверить, в каком файле вы работаете. Для плагинов понадобится среда сборки и типы @figma/plugin-typings; сам скилл их не ставит.

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

  • собрать компонент с вариантами и инстансами
  • настроить auto layout с отступами и растягиванием дочерних узлов
  • завести переменные для светлой и тёмной темы
  • написать плагин для массовой обработки узлов
  • выгрузить ассеты в PNG, JPG или SVG

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

  • создай компонент кнопки с вариантами primary и secondary
  • настрой auto layout во фрейме карточки: отступы 24, интервал 16
  • напиши плагин, который переименовывает все фреймы на странице

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

1Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code

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

~/.claude/skills/figma-design/SKILL.md

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

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

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

alembic Скилл ведёт миграции Alembic в проектах на SQLAlchemy: от alembic init до выката в прод и отката. Пригодится, когда схема поддержки меняется часто. CX Codex +1 644установок wireframing Скилл для проектирования интерфейсов: помогает пройти путь от набросков и структуры экранов до макета, близкого к финальному дизайну. CX Codex +1 566установок expressjs-development Скилл для ИИ-агента, который подсказывает, как строить Express.js-приложения: маршруты, middleware, обработка запросов и ошибок. CX Codex +1 555установок mobile-design Скилл для мобильного интерфейса: тач-цели, жесты, зоны большого пальца, безопасные области и адаптив под маленькие экраны. CX Codex +1 545установок spring-boot-development Скилл для ИИ-агента, который подсказывает, как писать Spring Boot: авто-конфигурация, внедрение зависимостей, REST-контроллеры, Spring Data и Spring Security. CX Codex +1 534установок rest-api-design-patterns Скилл-справочник по проектированию REST API: моделирование ресурсов, версионирование, пагинация, HATEOAS и работа с HTTP-методами. CX Codex +1 525установок asyncio-concurrency-patterns Скилл по конкурентности в Python: event loop, корутины, задачи, семафоры и блокировки. Пригодится, когда пишешь асинхронный сервис или клиент. CX Codex +1 489установок rust-systems-programming Скилл по системному Rust: владение, заимствование, потоки, async, unsafe и оптимизация. Пригодится, когда пишешь низкоуровневый код или переписываешь C/C++. CX Codex +1 485установок

Похожие

figma-prototyping dylantarre Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов. CX Codex +1 548установок figma-use официальный Figma Скилл задаёт правила работы с Figma Plugin API через инструмент use_figma. Он пригодится, когда нужно менять содержимое файла или программно изучать его структуру. CX Codex GP ChatGPT 36установок pp-figma Giuliano Giacaglia Выгружает компактные данные фреймов Figma для кодогенерации, проверяет нерешённые комментарии и находит неиспользуемые компоненты. Пригодится при переносе макетов в код и аудитах дизайн-систем. CX Codex +1 726установок figma-generate-library официальный openai Скилл для синхронизации дизайн-системы Figma с кодовой базой. Помогает создать или обновить переменные, компоненты, режимы (светлая/тёмная тема) и документацию в правильном порядке — без фаз, выполненных в неправильной последовательности. CX Codex +1 2 700установок baoyu-design JimLiu Скилл генерирует макеты интерфейсов, интерактивные прототипы и презентации в виде автономного HTML. Подходит для вёрстки экранов, дизайн-систем и схем. CX Codex +1 6 300установок figma-create-new-file figma Скилл ведёт агента через MCP-инструмент create_new_file: какой план и тип редактора взять, чтобы новый файл Figma появился там, где нужно. CX Codex +1 3 500установок

Рядом в теме «Дизайн»

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

Вопросы о figma-design

Как установить figma-design в Claude?

Выполните npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code. Файл скилла окажется в ~/.claude/skills/figma-design/SKILL.md.

Что делает figma-design?

Даёт агенту справочник по Figma Plugin API: компоненты, auto layout, constraints, переменные, стили, прототипы и разработка плагинов.

Для каких платформ подходит скилл?

Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

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

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

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

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