qt-figma-token-extraction

Name: qt-figma-token-extraction
Author: TheQtCompanyRnD

128installs33forks

How to install qt-figma-token-extraction?

theqtcompanyrnd/agent-skills/qt-figma-token-extraction

$npx -y skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction

Installs into the current project.

Summary

Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull their design system out of Figma — whether they say "export tokens from Figma", "get desig

Files · 1

View on GitHub

SKILL.md

1	# Figma Token Extraction Skill
2
3	This skill extracts design tokens from a Figma file, maps them to QML types, and generates a ready-to-use QML design system with a unified `Theme` singleton.
4
5	## Skill Structure
6
7	Supporting files are loaded alongside this SKILL.md:
8
9	```
10	qt-figma-token-extraction/
11	├── SKILL.md # this file — entry point
12	├── references/
13	│ └── token-mapping.md # Figma variable type → QML type mapping rules
14	└── examples/
15	├── Primitives.qml # primitive color palette template
16	├── Theme.qml # semantic token template (references Primitives)
17	├── FontInterface.qml # font loaders + icon index template
18	├── Spacing.qml # spacing and radii template
19	└── Typography.qml # typography scale template
20	```
21
22	When reaching Step 4 (type mapping), read `references/token-mapping.md` before generating any QML.
23	When generating QML files in Step 6, use the files in `examples/` as structural templates — they reflect the real Qt Design Studio naming and organisation patterns.
24
25	---
26
27	## Step 0 — Check Qt Project Setup
28
29	Always call the AskUserQuestion tool — even if a project appears to be open. Never assume the currently open project is the intended target.
30
31	Before calling, read the context to personalise the question:
32	- If a project is already open (files visible, `CMakeLists.txt` present), name it in the first option so the user can confirm or redirect.
33	- If the user's request is an update ("update my colors", "re-extract tokens", "sync the design system"), omit the "create new project" option — updates always target an existing project.
34
35	For an update request — two options, no "create new":
36	```
37	tool: AskUserQuestion
38	question: "Which project should I update the design tokens in?"
39	options:
40	- "This project — <detected project name or path> (currently open)"
41	- "A different existing project — I'll give you the path"
42	```
43
44	For an initial setup request — all three options:
45	```
46	tool: AskUserQuestion
47	question: "Which Qt project should I set up the design system in?"
48	options:
49	- "This project — <detected project name or path> (currently open)"
50	- "A different existing project — I'll give you the path"
51	- "Create a new project"
52	```
53
54	If no project is open yet, replace the first option with just `"An existing project — I'll give you the path"`.
55
56	If the project exists (confirmed or path provided): Note the project path. Continue to Step 1 — do not ask for Figma files yet.
57
58	If a new project is needed: Scaffold the folder structure and create `main.cpp` and `main.qml` now, then continue to Step 1:
59
60	```
61	my-project/
62	├── CMakeLists.txt ← set up in Step 7
63	├── main.cpp ← create now (template below)
64	├── main.qml ← create now (template below)
65	└── design-system/ ← generated files go here
66	```
67
68	Create `main.cpp` with this exact content — use `QGuiApplication`, not `QApplication` (Widgets is not needed for Qt Quick):
69
70	```cpp
71	#include <QGuiApplication>
72	#include <QQmlApplicationEngine>
73
74	int main(int argc, char *argv[])
75	{
76	QGuiApplication app(argc, argv);
77	QQmlApplicationEngine engine;
78
79	engine.loadFromModule("<ProjectName>", "Main");
80
81	if (engine.rootObjects().isEmpty())
82	return -1;
83
84	return app.exec();
85	}
86	```
87
88	Replace `<ProjectName>` with the URI used in `qt_add_qml_module()` — they must match exactly.
89
90	> Do not use the old `QUrl url(u"qrc:/..."_qs)` pattern. In Qt 6, `qt_add_qml_module` places files under `qrc:/qt/qml/<URI>/` — not `qrc:/<URI>/` as in Qt 5. Using the old path causes a silent load failure. `loadFromModule()` avoids this entirely and is the correct approach for Qt 6.5+.
91
92	Create `Main.qml` as a placeholder — capital M, not lowercase. `loadFromModule()` is case-sensitive and looks for a type named `Main`, which maps to `Main.qml`:
93
94	```qml
95	import QtQuick
96
97	Window {
98	width: 640
99	height: 480
100	visible: true
101	title: "My Qt App"
102	}
103	```
104
105	> CMake setup: The full CMakeLists.txt — including singleton registration — is written in Step 7 once all QML files are known. Do not write

People who liked this also viewed

6 picks

Type

qt-figma-token-extraction

128installs33forks

View on GitHub

How to install qt-figma-token-extraction?

theqtcompanyrnd/agent-skills/qt-figma-token-extraction

$npx -y skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Figma Token Extraction Skill
2
3	This skill extracts design tokens from a Figma file, maps them to QML types, and generates a ready-to-use QML design system with a unified `Theme` singleton.
4
5	## Skill Structure
6
7	Supporting files are loaded alongside this SKILL.md:
8
9	```
10	qt-figma-token-extraction/
11	├── SKILL.md # this file — entry point
12	├── references/
13	│ └── token-mapping.md # Figma variable type → QML type mapping rules
14	└── examples/
15	├── Primitives.qml # primitive color palette template
16	├── Theme.qml # semantic token template (references Primitives)
17	├── FontInterface.qml # font loaders + icon index template
18	├── Spacing.qml # spacing and radii template
19	└── Typography.qml # typography scale template
20	```
21
22	When reaching Step 4 (type mapping), read `references/token-mapping.md` before generating any QML.
23	When generating QML files in Step 6, use the files in `examples/` as structural templates — they reflect the real Qt Design Studio naming and organisation patterns.
24
25	---
26
27	## Step 0 — Check Qt Project Setup
28
29	Always call the AskUserQuestion tool — even if a project appears to be open. Never assume the currently open project is the intended target.
30
31	Before calling, read the context to personalise the question:
32	- If a project is already open (files visible, `CMakeLists.txt` present), name it in the first option so the user can confirm or redirect.
33	- If the user's request is an update ("update my colors", "re-extract tokens", "sync the design system"), omit the "create new project" option — updates always target an existing project.
34
35	For an update request — two options, no "create new":
36	```
37	tool: AskUserQuestion
38	question: "Which project should I update the design tokens in?"
39	options:
40	- "This project — <detected project name or path> (currently open)"
41	- "A different existing project — I'll give you the path"
42	```
43
44	For an initial setup request — all three options:
45	```
46	tool: AskUserQuestion
47	question: "Which Qt project should I set up the design system in?"
48	options:
49	- "This project — <detected project name or path> (currently open)"
50	- "A different existing project — I'll give you the path"
51	- "Create a new project"
52	```
53
54	If no project is open yet, replace the first option with just `"An existing project — I'll give you the path"`.
55
56	If the project exists (confirmed or path provided): Note the project path. Continue to Step 1 — do not ask for Figma files yet.
57
58	If a new project is needed: Scaffold the folder structure and create `main.cpp` and `main.qml` now, then continue to Step 1:
59
60	```
61	my-project/
62	├── CMakeLists.txt ← set up in Step 7
63	├── main.cpp ← create now (template below)
64	├── main.qml ← create now (template below)
65	└── design-system/ ← generated files go here
66	```
67
68	Create `main.cpp` with this exact content — use `QGuiApplication`, not `QApplication` (Widgets is not needed for Qt Quick):
69
70	```cpp
71	#include <QGuiApplication>
72	#include <QQmlApplicationEngine>
73
74	int main(int argc, char *argv[])
75	{
76	QGuiApplication app(argc, argv);
77	QQmlApplicationEngine engine;
78
79	engine.loadFromModule("<ProjectName>", "Main");
80
81	if (engine.rootObjects().isEmpty())
82	return -1;
83
84	return app.exec();
85	}
86	```
87
88	Replace `<ProjectName>` with the URI used in `qt_add_qml_module()` — they must match exactly.
89
90	> Do not use the old `QUrl url(u"qrc:/..."_qs)` pattern. In Qt 6, `qt_add_qml_module` places files under `qrc:/qt/qml/<URI>/` — not `qrc:/<URI>/` as in Qt 5. Using the old path causes a silent load failure. `loadFromModule()` avoids this entirely and is the correct approach for Qt 6.5+.
91
92	Create `Main.qml` as a placeholder — capital M, not lowercase. `loadFromModule()` is case-sensitive and looks for a type named `Main`, which maps to `Main.qml`:
93
94	```qml
95	import QtQuick
96
97	Window {
98	width: 640
99	height: 480
100	visible: true
101	title: "My Qt App"
102	}
103	```
104
105	> CMake setup: The full CMakeLists.txt — including singleton registration — is written in Step 7 once all QML files are known. Do not write

People who liked this also viewed

6 picks

Type