qt-figma-component-generation — Claude Code skill: QML from Figma
Reads Figma components over MCP and writes QML controls for Qt Quick Controls 2. It runs at the component generation step of a design-system workflow.
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-codeWhat qt-figma-component-generation does
The skill pulls component metadata out of a Figma file and turns it into QML files that consume your design-system singletons. Variants, states, sizing and token usage get mapped onto idiomatic Qt Quick Controls 2 patterns. Everything goes through Figma MCP: get_metadata for the file structure, then get_design_context per component.
Before anything is generated, the project needs design-tokens.json plus the singletons Primitives.qml, Theme.qml, Spacing.qml and FontInterface.qml in a design-system/ folder. Miss either and the skill stops and points you at qt-figma-token-extraction first. That dependency is the hard gate here.
Then it asks which component groups to take and which implementation pattern to use. Pattern A keeps all state logic inside one self-contained file. Pattern B splits a component into Component.qml and a singleton ComponentStyle.qml for swappable themes. Don't mix them: A sets the variant as a string, B uses an integer enum. For most projects the author recommends starting with Pattern A, since it's easier to debug. Progress is tracked in one inventory table with statuses from pending to done.
What it helps with
- generate QML controls from Figma components
- port button variants and states into Qt Quick Controls 2
- build a
TextField.qmlwith label, error text and a clear button - create a checkbox with an indeterminate state and a Canvas tick
- pick between an inline component and a style-singleton pair
Example prompts for the agent
- Generate QML components from our Figma design system
- Build
Button.qmlfrom the Figma component, default variant plus Hover, Pressed and Disabled - Take the
Checkboxcomponent in Figma and produce the QML control for it
How to install qt-figma-component-generation
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-code2Manually: put the files in place
~/.claude/skills/qt-figma-component-generation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/qt-figma-component-generation/
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a codex2Manually: put the files in place
.agents/skills/qt-figma-component-generation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a cursor2Manually: put the files in place
.cursor/skills/qt-figma-component-generation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install TheQtCompanyRnD/agent-skills qt-figma-component-generation2Manually: put the files in place
.github/skills/qt-figma-component-generation/SKILL.md1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a gemini-cli2Platform CLI
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-figma-component-generationManually: put the files in place
.devin/skills/qt-figma-component-generation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about qt-figma-component-generation
How do I install qt-figma-component-generation in Claude?
Run npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation -a claude-code. The skill file then lives at ~/.claude/skills/qt-figma-component-generation/SKILL.md.
What does qt-figma-component-generation do?
It extracts component metadata from Figma over MCP and generates QML controls for Qt Quick Controls 2 that use your design-system singletons.
What do I need before running it?
A connected Figma MCP with get_metadata and get_design_context available, plus design-tokens.json and the design-system singletons from qt-figma-token-extraction. Without them the skill halts at its prerequisites check.
