qt-figma-component-generation

Name: qt-figma-component-generation
Author: TheQtCompanyRnD

309stars33forks

How to install qt-figma-component-generation?

theqtcompanyrnd/agent-skills/qt-figma-component-generation

$npx -y skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation

Installs into the current project.

Summary

Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "co

Files · 1

View on GitHub

SKILL.md

1	# Figma Component Generation Skill
2
3	This skill reads component definitions from a Figma file via MCP and generates production-ready QML control files that consume the design-system singletons produced by the token-extraction skill.
4
5	---
6
7	## Prerequisites
8
9	Before generating any components, confirm all of the following exist in the project:
10
11	1. `design-tokens.json` — the merged token file from the token-extraction skill
12	2. QML design system singletons — `Primitives.qml`, `Theme.qml`, `Spacing.qml`, `FontInterface.qml` in a `design-system/` folder
13
14	If either is missing, stop and run the token-extraction skill first (`qt-figma-token-extraction`).
15
16	Verify Figma MCP is connected — confirm that `get_metadata` and `get_design_context` are available in the tool list. If not, tell the user:
17	> "The Figma MCP connector isn't connected yet. Connect it via your MCP configuration, then come back and we can start."
18
19	Do not proceed until the connection is confirmed.
20
21	---
22
23	## Step 1 — Component Discovery
24
25	Use `get_metadata` to fetch the file structure and identify which pages and frames contain components:
26
27	```
28	Tool: get_metadata
29	Input: { "fileKey": "<file key>" }
30	```
31
32	From the response, note all pages and frames or component sets named as component groups (e.g. "Button", "Text Field", "Checkbox").
33
34	Ask the user:
35	> "I can see the following component groups in the Figma file: [list]. Which ones should I generate QML files for? Or should I do all of them?"
36
37	Build a single component inventory table and keep it updated throughout the entire workflow — do not create a second table later:
38
39	\| Figma component name \| Node ID \| QML file \| Status \|
40	\|---\|---\|---\|---\|
41	\| Button \| 67:139 \| Button.qml \| pending \|
42	\| Text Field \| ... \| TextField.qml \| pending \|
43
44	Status values: `pending` → `extracting` → `mapping` → `done` / `blocked`
45
46	---
47
48	## Step 2 — Pattern Selection
49
50	Ask the user to choose an implementation pattern before reading any assets or writing any code. If the AskUserQuestion tool is available, use it:
51
52	```
53	tool: AskUserQuestion
54	question: "Which code style should the generated components use?"
55	options:
56	- "Pattern A — Inline (self-contained file, all state logic inside the component)"
57	- "Pattern B — Style singleton (ComponentStyle.qml + Component.qml, supports multiple themes)"
58	- "I'm not sure — recommend one"
59	```
60
61	If the tool is not available (e.g. in Claude Code, Codex, or Copilot), ask the question in plain text and wait for a reply before proceeding.
62
63	If the user selects "I'm not sure", recommend Pattern A for most projects — it is simpler, self-contained, and easier to debug. Only recommend Pattern B if the project already has a `Qt.Themes` / `TokenInterface` layer or needs to support multiple swappable themes.
64
65	> Pattern B uses integer enum variants, not strings. Pattern A uses `property string variant: "primary"`. Pattern B uses `property int typeVariant: ButtonStyle.TypeVariant.Primary`. Do not mix the two approaches — pick one and use it consistently throughout all components.
66
67	---
68
69	## Step 3 — Prepare the Chosen Pattern
70
71	Before extracting or writing anything, make sure the structure for the chosen pattern is in front of you. Pattern B is read from the bundled assets; Pattern A is built from the inline snippets in Step 5.
72
73	### Pattern A assets — `references/`
74
75	This folder contains Figma-verified Pattern A controls. Each is a self-contained file where all state logic lives inside the component using conditional expressions on `readonly property` values.
76
77	\| Reference file \| Output file \| Demonstrates \|
78	\|---\|---\|---\|
79	\| `references/Button.qml` \| `Button.qml` \| AbstractButton, multi-variant state machine, size helpers, accent family mapping \|
80	\| `references/TextField.qml` \| `TextField.qml` \| TextInput wrapped in ColumnLayout, label + error + helper text, clear button \|
81	\| `references/Checkbox.qml` \| `Checkbox.qml` \| CheckBox in

People who liked this also viewed

6 picks

Type

qt-figma-component-generation

309stars33forks

View on GitHub

How to install qt-figma-component-generation?

theqtcompanyrnd/agent-skills/qt-figma-component-generation

$npx -y skills add TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Figma Component Generation Skill
2
3	This skill reads component definitions from a Figma file via MCP and generates production-ready QML control files that consume the design-system singletons produced by the token-extraction skill.
4
5	---
6
7	## Prerequisites
8
9	Before generating any components, confirm all of the following exist in the project:
10
11	1. `design-tokens.json` — the merged token file from the token-extraction skill
12	2. QML design system singletons — `Primitives.qml`, `Theme.qml`, `Spacing.qml`, `FontInterface.qml` in a `design-system/` folder
13
14	If either is missing, stop and run the token-extraction skill first (`qt-figma-token-extraction`).
15
16	Verify Figma MCP is connected — confirm that `get_metadata` and `get_design_context` are available in the tool list. If not, tell the user:
17	> "The Figma MCP connector isn't connected yet. Connect it via your MCP configuration, then come back and we can start."
18
19	Do not proceed until the connection is confirmed.
20
21	---
22
23	## Step 1 — Component Discovery
24
25	Use `get_metadata` to fetch the file structure and identify which pages and frames contain components:
26
27	```
28	Tool: get_metadata
29	Input: { "fileKey": "<file key>" }
30	```
31
32	From the response, note all pages and frames or component sets named as component groups (e.g. "Button", "Text Field", "Checkbox").
33
34	Ask the user:
35	> "I can see the following component groups in the Figma file: [list]. Which ones should I generate QML files for? Or should I do all of them?"
36
37	Build a single component inventory table and keep it updated throughout the entire workflow — do not create a second table later:
38
39	\| Figma component name \| Node ID \| QML file \| Status \|
40	\|---\|---\|---\|---\|
41	\| Button \| 67:139 \| Button.qml \| pending \|
42	\| Text Field \| ... \| TextField.qml \| pending \|
43
44	Status values: `pending` → `extracting` → `mapping` → `done` / `blocked`
45
46	---
47
48	## Step 2 — Pattern Selection
49
50	Ask the user to choose an implementation pattern before reading any assets or writing any code. If the AskUserQuestion tool is available, use it:
51
52	```
53	tool: AskUserQuestion
54	question: "Which code style should the generated components use?"
55	options:
56	- "Pattern A — Inline (self-contained file, all state logic inside the component)"
57	- "Pattern B — Style singleton (ComponentStyle.qml + Component.qml, supports multiple themes)"
58	- "I'm not sure — recommend one"
59	```
60
61	If the tool is not available (e.g. in Claude Code, Codex, or Copilot), ask the question in plain text and wait for a reply before proceeding.
62
63	If the user selects "I'm not sure", recommend Pattern A for most projects — it is simpler, self-contained, and easier to debug. Only recommend Pattern B if the project already has a `Qt.Themes` / `TokenInterface` layer or needs to support multiple swappable themes.
64
65	> Pattern B uses integer enum variants, not strings. Pattern A uses `property string variant: "primary"`. Pattern B uses `property int typeVariant: ButtonStyle.TypeVariant.Primary`. Do not mix the two approaches — pick one and use it consistently throughout all components.
66
67	---
68
69	## Step 3 — Prepare the Chosen Pattern
70
71	Before extracting or writing anything, make sure the structure for the chosen pattern is in front of you. Pattern B is read from the bundled assets; Pattern A is built from the inline snippets in Step 5.
72
73	### Pattern A assets — `references/`
74
75	This folder contains Figma-verified Pattern A controls. Each is a self-contained file where all state logic lives inside the component using conditional expressions on `readonly property` values.
76
77	\| Reference file \| Output file \| Demonstrates \|
78	\|---\|---\|---\|
79	\| `references/Button.qml` \| `Button.qml` \| AbstractButton, multi-variant state machine, size helpers, accent family mapping \|
80	\| `references/TextField.qml` \| `TextField.qml` \| TextInput wrapped in ColumnLayout, label + error + helper text, clear button \|
81	\| `references/Checkbox.qml` \| `Checkbox.qml` \| CheckBox in

People who liked this also viewed

6 picks

Type