Что подготовить
Нужна ссылка на конкретный макет или узел Figma, доступ через MCP и исходный проект. Укажите используемые компоненты и требования к адаптивности, чтобы сохранить принятый дизайн.
AGENT SKILLS
Скиллы для Figma и переноса макета в код
Скиллы для Figma в Codex: чтение контекста макета и перенос конкретного дизайна в интерфейс. Оба варианта требуют настроенного Figma MCP; сам скилл не подключает аккаунт и не выдаёт доступ к файлу.
Ищем скиллы…
| Избранное | AI-агенты | ||||
|---|---|---|---|---|---|
| Создание интерфейса по макету Figmafigma / openai Помогает разработчикам перенести выбранный макет Figma в код проекта. Учитывает существующие компоненты, стили и устройство приложения. Источник устарел — см. карточку | 27 992 | ||||
| Реализация интерфейса по макету Figmafigma-implement-design / openai Помогает разработчикам перенести компонент или экран из Figma в код приложения. Учитывает внешний вид макета, правила проекта и существующую систему компонентов. Источник устарел — см. карточку | 27 992 |
Процент положительных оценок = «Полезен» / все оценки. Зелёная часть шкалы — положительные, красная — отрицательные. Рядом указано число оценок LLMXP. Звёзды, форки и активность GitHub относятся ко всему репозиторию. Проверка файлов не заменяет тестирование скилла в вашем проекте. Как проверяем
Как выбрать: Figma: макет в код
figma помогает получить структуру, скриншоты, переменные и ресурсы макета. figma-implement-design выстраивает перенос выбранного узла в проект и визуальное сопоставление результата с исходником. В текущем каталоге оба скилла рассчитаны на Codex.
Установка и требования
В карточке выберите своего агента и проверьте зависимости. Совместимость инструкций не означает проверку запуска: библиотеки, CLI и доступы к сервисам могут потребоваться отдельно.
Как установить скилл →Как проверить результат
Сравните реализацию с макетом при одинаковом размере экрана. Проверьте типографику, отступы, ресурсы и мобильное поведение; совпадение одного скриншота не проверяет взаимодействия.
Пример задания агенту
В Codex перенеси указанный узел Figma в существующий проект. Используй его компоненты и ресурсы, сравни результат с макетом и проверь адаптивность. Сначала сообщи, если доступ к Figma MCP не настроен.Все скиллы: Дизайн и интерфейсы →
Частые вопросы об AI-скиллах
Claude Skills и Claude Code Skills — одно и то же?
Agent Skills — общий формат. В этом каталоге фильтр Claude Code подбирает инструкции для агента, работающего с проектом. Команда npx не устанавливает скилл в обычный веб-чат Claude: у веб-приложения отдельный способ загрузки и требования.
Можно ли скачать скиллы бесплатно?
Исходники доступны в публичных GitHub-репозиториях. Условия копирования определяет лицензия пакета. Работа агента, API и внешние сервисы могут требовать оплаты.
Как создать свой SKILL.md?
Создайте папку с файлом SKILL.md. В YAML-заголовке укажите name и description, затем опишите задачу, необходимые входные данные, шаги и проверку результата. Дополнительные материалы храните рядом и ссылайтесь на них относительными путями. Проверьте скилл на нескольких реальных заданиях.
Чем скилл отличается от MCP и плагина?
Скилл описывает порядок работы. MCP предоставляет агенту доступ к инструментам и данным. Плагин может объединять скиллы, настройки и подключения. Наличие инструкции не выдаёт доступ к внешнему сервису.
Как обновляются скиллы в каталоге?
Сборщик проверяет GitHub, звёзды и состав файлов. Новые версии требуют повторной проверки; команда установки остаётся закреплённой на одобренном коммите. Подробности — в методике.