qt-figma-token-extraction — Claude Code skill: Figma tokens to QML
Reads variables, text styles and tokens out of a Figma file, then writes design-tokens.json and working QML singletons built around one Theme.
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a claude-codeWhat qt-figma-token-extraction does
The skill walks your agent through a fixed sequence. It first asks which Qt project should receive the design system, then whether the Figma file has more than one variable mode, and only after that requests the file links. Variables or plain Styles are detected on its own, so you don't have to know which one your file uses.
Inside the skill folder are a type-mapping reference for Figma-to-QML conversion and five singleton templates: Primitives.qml, Theme.qml, FontInterface.qml, Spacing.qml, Typography.qml. They follow Qt Design Studio naming, which makes the output easier to drop into an existing codebase. Singleton registration in CMakeLists.txt happens at the end, once every file name is settled. For an empty project the skill also lays down main.cpp with QGuiApplication and a Main.qml stub.
On Qt 6 the module path matters. loadFromModule() resolves Main.qml under qrc:/qt/qml/<URI>/, while the Qt 5-style qrc:/<URI>/ path fails without a clear error. With several variable modes and no terminal at hand, the agent falls back to MCP with manual mode switching. Your agent still needs Figma access, otherwise extraction never starts.
What it helps with
- pull a color palette and type scale from Figma
- produce a JSON file of design tokens
- generate QML singletons that match Qt Design Studio
- split light and dark themes across variable modes
- bootstrap a Qt Quick project from nothing
Example prompts for the agent
- Export the design tokens from our Figma file and generate
design-tokens.jsonwith QML singletons - Re-extract tokens from Figma and update the colors in this project
- Map the Figma variables to QML and register the singletons in
CMakeLists.txt
How to install qt-figma-token-extraction
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a claude-code2Manually: put the files in place
~/.claude/skills/qt-figma-token-extraction/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/qt-figma-token-extraction/
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a codex2Manually: put the files in place
.agents/skills/qt-figma-token-extraction/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a cursor2Manually: put the files in place
.cursor/skills/qt-figma-token-extraction/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install TheQtCompanyRnD/agent-skills qt-figma-token-extraction2Manually: put the files in place
.github/skills/qt-figma-token-extraction/SKILL.md1Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a gemini-cli2Platform CLI
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-figma-token-extractionManually: put the files in place
.devin/skills/qt-figma-token-extraction/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -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-token-extraction
How do I install qt-figma-token-extraction in Claude Code?
Run npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a claude-code. The skill lands at ~/.claude/skills/qt-figma-token-extraction/SKILL.md.
What does qt-figma-token-extraction do?
It collects variables, text styles and tokens from a Figma file, saves them as design-tokens.json, and creates QML singletons that share a single Theme.
Which platforms and Qt version does the skill support?
Compatibility is stated for Claude, Codex and GitHub Copilot, with metadata for Qt 6.x. Multiple variable modes require either a terminal or manual mode switching over MCP.
