uSpec — скилл
Скиллы uSpec пишут документацию дизайн-системы из Figma: контракт компонента, цвет, структуру и поведение для скринридеров.
- 251 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы через Figma MCP рисуют и меняют фреймы в вашем файле Figma.
- Для снимка компонента нужен сторонний плагин Figma.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/uspecОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы через Figma MCP рисуют и меняют фреймы в вашем файле Figma.
- Для снимка компонента нужен сторонний плагин Figma.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
uSpec, набор скиллов для Cursor, Claude Code и Codex, документирует компоненты дизайн-системы. Плагин uSpec Extract снимает выбранный компонент в Figma, а скилл `create-component-md` собирает из снимка канонический контракт `.json` и краткое руководство `.md` по API, структуре, цвету и поведению для скринридеров. Дальше скиллы `create-*` рисуют спецификации обратно в Figma через MCP: анатомию, цветовые токены, размеры и отступы, свойства, озвучку VoiceOver и TalkBack, а для анимации таймлайн по данным After Effects. Набор работает с Figma Console MCP или родным Figma MCP.
Для кого. Дизайнерам и разработчикам дизайн-систем, которые описывают компоненты в Figma и хотят получать спецификации от агента, а не рисовать их вручную.
Подходит, если
- Библиотека компонентов в Figma нуждается в аннотациях цвета и структуры.
- Разработчику нужен машинный контракт компонента для автоматизации.
- Команда готовит описание поведения для VoiceOver, TalkBack и ARIA.
- Для анимации компонента собирают таблицу таймлайна и кривых.
Не подходит, если
- Дизайн живет вне Figma.
- Figma MCP не подключен.
- Спецификации нужны для экранов, а не для отдельных компонентов.
Пример запроса к агенту
Опиши компонент Button из выбранного фрейма Figma и нарисуй аннотации цвета и структуры.Ограничения
Нужны Figma, плагин uSpec Extract и Figma Console MCP либо родной Figma MCP. После установки первым запускают скилл `firstrun`: он извлекает ключи шаблонов из вашей библиотеки Figma. Скиллы рисуют в вашем файле, поэтому пробуйте сначала на копии. Плагин при первом запуске просит ссылку Figma на выбранный компонент и запоминает ее для документа. Навыки работают только через один из двух названных MCP.
Как отключить. Удалите скиллы из `.cursor/skills/`, `.claude/skills/` или `.agents/skills/`, папку `references/` и файл `uspecs.config.json` в корне проекта. Плагин uSpec Extract убирают в Figma отдельно.
Частые вопросы
Что делает init?
Команда спрашивает агента и Figma MCP, ставит скиллы в каталог агента, копирует справочные документы в `./references/` и пишет `uspecs.config.json`.
Как обновить скиллы?
Запустите `npx uspec-skills update` после обновления пакета. Команда `npx uspec-skills doctor` проверит установку.
Откуда берутся данные компонента?
Из файла `_base.json`, который делает плагин uSpec Extract. Плагин бесплатен в Figma Community, исходники открыты в папке `figma-plugin/`.
Какие агенты поддерживаются?
Cursor, Claude Code и Codex. Платформу задает флаг `--platform cursor | claude-code | codex`.
Нужен ли Figma MCP?
Да. Спецификации рисуются через Figma Console MCP или родной Figma MCP, который выбирают при `init`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для дизайн-систем Figma: чтение, аудит с проверкой WCAG, создание компонентов и выгрузка токенов в код.
Скилл рисует UI-компонент как чертеж Apple: один лист с отступами, радиусами и слоями, плюс ролик из этого листа.
Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
Codex-скилл разбирает скриншоты и макеты Figma, ранжирует замечания и рисует картинки-аннотации с номерами из отчета
Figma To Code MCP — макет Figma в код
Figma To Code MCP
Figma в код через MCP: сервер отдает агенту макет в виде компактного YAML с именами свойств как в CSS, раскрытыми переменными и вынесенными в файл SVG
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| uSpec (эта карточка) | нет | 251 | ||
| Figma Console MCP | нет | API-ключ | 3 293 | дает агенту доступ к Figma; uSpec поверх него ведет процесс документации компонента |
| Генератор DESIGN.md для Figma | нет | 157 | формирует DESIGN.md по макету; uSpec пишет контракты и спецификации отдельных компонентов |
Коротко о README
Машинным источником истины служит контракт компонента `.json`. Людям и процессам на базе LLM предназначен краткий `.md`.