qt-figma-component-generation — скилл для Claude Code: QML из Figma
Читает компоненты Figma через MCP и пишет по ним QML-контролы на Qt Quick Controls 2. Нужен на шаге генерации компонентов в воркфлоу дизайн-системы.
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-codeЧто делает qt-figma-component-generation
Скилл берёт метаданные компонентов из Figma и превращает их в готовые QML-файлы, которые опираются на синглтоны дизайн-системы. Варианты, состояния, размеры и использование токенов он раскладывает по идиоматичным паттернам Qt Quick Controls 2. Работает через Figma MCP: сначала get_metadata по файлу, потом get_design_context по каждому компоненту.
Перед запуском в проекте уже должны лежать design-tokens.json и синглтоны Primitives.qml, Theme.qml, Spacing.qml, FontInterface.qml в папке design-system/. Если их нет, скилл останавливается и отправляет сначала прогнать qt-figma-token-extraction. Это главное ограничение: без файла токенов генерация не начнётся.
Дальше скилл спрашивает, какие группы компонентов брать, и предлагает выбрать паттерн реализации. Паттерн A — самодостаточный файл со всей логикой состояний внутри. Паттерн B — пара Component.qml и ComponentStyle.qml с синглтоном, для нескольких переключаемых тем. Смешивать их нельзя: в A вариант задаётся строкой, в B — целочисленным enum. Для большинства проектов автор советует начать с паттерна A, он проще в отладке. Инвентарь компонентов ведётся одной таблицей со статусами от pending до done.
Какие задачи решает
- собрать QML-контролы по компонентам из Figma
- перенести варианты и состояния кнопки в Qt Quick Controls 2
- сгенерировать
TextField.qmlс подписью, ошибкой и кнопкой очистки - сделать чекбокс с неопределённым состоянием и Canvas-галочкой
- выбрать между inline-компонентом и парой со style-синглтоном
Примеры запросов агенту
- Сгенерируй QML-компоненты из Figma по нашей дизайн-системе
- Сделай
Button.qmlиз компонента Figma, вариант по умолчанию и состояния Hover, Pressed, Disabled - Возьми компонент
Checkboxиз Figma и собери по нему QML-контрол
Как установить qt-figma-component-generation
1Через Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-code2Вручную: положить файлы
~/.claude/skills/qt-figma-component-generation/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/qt-figma-component-generation/
1Через Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a codex2Вручную: положить файлы
.agents/skills/qt-figma-component-generation/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a cursor2Вручную: положить файлы
.cursor/skills/qt-figma-component-generation/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install TheQtCompanyRnD/agent-skills qt-figma-component-generation2Вручную: положить файлы
.github/skills/qt-figma-component-generation/SKILL.md1Через Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a gemini-cli2Командой платформы
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-figma-component-generationВручную: положить файлы
.devin/skills/qt-figma-component-generation/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о qt-figma-component-generation
Как установить qt-figma-component-generation в Claude?
Выполните npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-code. После этого файл скилла лежит в ~/.claude/skills/qt-figma-component-generation/SKILL.md.
Что делает qt-figma-component-generation?
Достаёт метаданные компонентов из Figma через MCP и пишет по ним QML-контролы на Qt Quick Controls 2, которые используют синглтоны дизайн-системы.
Что нужно, чтобы скилл заработал?
Подключённый Figma MCP с инструментами get_metadata и get_design_context, а также design-tokens.json и синглтоны дизайн-системы из qt-figma-token-extraction. Без них скилл останавливается на проверке предварительных условий.
