ardot-generate-library

Name: ardot-generate-library
Author: balabalabalading

118stars12forks

How to install ardot-generate-library?

balabalabalading/huuuuuuho-skills/ardot-generate-library

$npx -y skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library

Installs into the current project.

Summary

在 Ardot 中构建可复用组件库或设计系统时使用此技能。涵盖从变量/设计令牌创建到使用正确变量绑定构建组件的完整工作流程，直至最终验证。触发条件："创建组件库"、"构建设计系统"、 "制作可复用按钮"、"创建 UI 组件"、"构建组件集"、 "设计系统"、"组件库"、"可复用组件"。

Files · 1

View on GitHub

SKILL.md

1	# ardot-generate-library — 构建组件库
2
3	在 Ardot 中构建可复用组件库和设计系统。组件使用正确的变量绑定创建，以便响应主题/模式变化。
4
5	## 技能边界
6
7	- 构建可复用组件时使用此技能（按钮、卡片、输入框、导航栏等）
8	- 创建包含令牌和组件的设计系统时使用此技能
9	- 如果构建一次性页面/屏幕，请改用 [ardot-generate-design](../ardot-generate-design/SKILL.md)
10
11	## 前置条件
12
13	- `ardot-use` — 用于 batch_edit DSL 规则、变量绑定、注意事项
14	- `ardot-create-new-file` — 用于创建 Components 页面
15
16	---
17
18	## 阶段一：基础
19
20	### 1a：创建 Components 页面
21
22	```
23	create_new_page({name: "Components", select: false})
24	→ 记录 pageId（例如 "3:1672"）
25	```
26
27	### 1b：创建设计令牌（变量）
28
29	使用 `apply_variables` 创建变量基础。组件将绑定到这些变量。
30
31	```json
32	apply_variables({
33	"variables": {
34	"Colors": {
35	"modes": ["Dark", "Light"],
36	"variables": {
37	"accent-primary": {
38	"type": "COLOR", "scopes": ["ALL_FILLS"],
39	"valuesByMode": {
40	"Dark": {"r": 0.91, "g": 0.44, "b": 0.29, "a": 1},
41	"Light": {"r": 0.83, "g": 0.38, "b": 0.23, "a": 1}
42	}
43	},
44	"accent-primary-text": {
45	"type": "COLOR", "scopes": ["TEXT_FILL"],
46	"valuesByMode": {
47	"Dark": {"r": 1, "g": 1, "b": 1, "a": 1},
48	"Light": {"r": 1, "g": 1, "b": 1, "a": 1}
49	}
50	},
51	"bg-secondary": {
52	"type": "COLOR", "scopes": ["ALL_FILLS"],
53	"valuesByMode": {
54	"Dark": {"r": 0.15, "g": 0.15, "b": 0.15, "a": 1},
55	"Light": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1}
56	}
57	},
58	"text-primary": {
59	"type": "COLOR", "scopes": ["TEXT_FILL"],
60	"valuesByMode": {
61	"Dark": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1},
62	"Light": {"r": 0.1, "g": 0.1, "b": 0.1, "a": 1}
63	}
64	},
65	"border-default": {
66	"type": "COLOR", "scopes": ["STROKE"],
67	"valuesByMode": {
68	"Dark": {"r": 0.25, "g": 0.25, "b": 0.25, "a": 1},
69	"Light": {"r": 0.85, "g": 0.85, "b": 0.85, "a": 1}
70	}
71	}
72	}
73	},
74	"Spacing": {
75	"modes": ["Dark", "Light"],
76	"variables": {
77	"spacing-xs": {"type": "FLOAT", "scopes": ["GAP"],
78	"valuesByMode": {"Dark": 4, "Light": 4}},
79	"spacing-sm": {"type": "FLOAT", "scopes": ["GAP"],
80	"valuesByMode": {"Dark": 8, "Light": 8}},
81	"spacing-md": {"type": "FLOAT", "scopes": ["GAP"],
82	"valuesByMode": {"Dark": 16, "Light": 16}},
83	"spacing-lg": {"type": "FLOAT", "scopes": ["GAP"],
84	"valuesByMode": {"Dark": 24, "Light": 24}},
85	"radius-sm": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
86	"valuesByMode": {"Dark": 6, "Light": 6}},
87	"radius-md": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
88	"valuesByMode": {"Dark": 8, "Light": 8}},
89	"radius-lg": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
90	"valuesByMode": {"Dark": 12, "Light": 12}}
91	}
92	}
93	}
94	})
95	```
96
97	在追踪表中记录所有返回的变量 ID 以供后续绑定使用。
98
99	> 硬性关卡：
100	> - 禁止：在变量存在之前创建组件
101	> - 禁止：使用硬编码颜色创建组件（cornerRadius 除外）
102
103	---
104
105	## 阶段二：组件创建
106
107	按依赖顺序逐个构建组件：
108
109	```
110	原子组件（无依赖）：
111	→ Button、Input、Label、Icon、Badge、Avatar、Divider
112
113	分子组件（依赖原子组件）：
114	→ Card（使用 Button、Badge）、NavBar（使用 Button）、FormField（使用 Input、Label）
115	```
116
117	### 每个组件的工作流程
118
119	```
120	1. batch_edit (I) → 在 Components 页面上创建组件，设置 reusable:true
121	- 对框架填充使用 boundVariables（暂不用于 TEXT 填充）
122	- TEXT 子元素使用 fill: "#HEX" 占位符
123	- 记录返回的组件节点 ID
124
125	2. batch_read → 验证组件结构
126
127	3. batch_edit (U) → 将变量绑定到 TEXT 子元素
128	- 对每个 TEXT 节点应用 fills+boundVariables
129
130	4. batch_read → 验证变量绑定存在
131
132	5. capture_screenshot → 组件的视觉检查
133	```
134
135	### 示例：Button/Primary/md
136
137	```js
138	// 第一步：创建组件
139	btnPrimaryMd = I("3:1672", {
140	"type": "FRAME",
141	"name": "Button/Primary/md",
142	"reusable": true,
143	"width": "hug_contents", "height": 32,
144	"layout": "horizontal",
145	"paddingLeft": 16, "paddingRight": 16,
146	"paddingTop": 6, "paddingBottom": 6,
147	"cornerRadius": 8,
148	"primaryAxisAlignItems": "CENTER",
149	"counterAxisAlignItems": "CENTER",
150	"fills": [{"type": "SOLID", "color": {"r": 0.91, "g": 0.44, "b": 0.29},
151	"boundVariables": {"color": {"id": "VariableID:3:14", "type": "VARIABLE_ALIAS"}}}],
152	"children": [
153	{"type": "TEXT", "name": "Label", "characters": "Button",
154	"fontSize": 14, "fill": "#FFFFFF"}
155	]
156	})
157	// 返回：btnPrimaryMd → "3:544"，TEXT 子元素 → "3:545"
158
159	// 第三步（单独的 batch_edit）：绑定文本颜色变量
160	U("3:545", {
161	"fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1},
162	"boundVariables": {"color": {"id": "VariableID:3:15", "type": "VARIABLE_ALIAS"}}}]
163	})
164	```
165
166	### 示例：带子元素的卡片
167
168	```js
169	card = I("3:1672", {
170	"type": "FRAME",
171	"name": "Card/Default",
172	"reusable": true,
173	"width": 320, "height": "hug_contents",
174	"layout": "vertical",
175	"paddingLeft": 20, "paddingRight": 20,
176	"paddingTop": 20, "paddingBottom": 20,
177	"cornerRadius": 12,
178	"fills": [{"type": "SOLID", "color": {"r": 0.15, "g": 0.15, "b": 0.15},
179	"boundVariabl

People who liked this also viewed

6 picks

Type

ardot-generate-library

118stars12forks

View on GitHub

How to install ardot-generate-library?

balabalabalading/huuuuuuho-skills/ardot-generate-library

$npx -y skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# ardot-generate-library — 构建组件库
2
3	在 Ardot 中构建可复用组件库和设计系统。组件使用正确的变量绑定创建，以便响应主题/模式变化。
4
5	## 技能边界
6
7	- 构建可复用组件时使用此技能（按钮、卡片、输入框、导航栏等）
8	- 创建包含令牌和组件的设计系统时使用此技能
9	- 如果构建一次性页面/屏幕，请改用 [ardot-generate-design](../ardot-generate-design/SKILL.md)
10
11	## 前置条件
12
13	- `ardot-use` — 用于 batch_edit DSL 规则、变量绑定、注意事项
14	- `ardot-create-new-file` — 用于创建 Components 页面
15
16	---
17
18	## 阶段一：基础
19
20	### 1a：创建 Components 页面
21
22	```
23	create_new_page({name: "Components", select: false})
24	→ 记录 pageId（例如 "3:1672"）
25	```
26
27	### 1b：创建设计令牌（变量）
28
29	使用 `apply_variables` 创建变量基础。组件将绑定到这些变量。
30
31	```json
32	apply_variables({
33	"variables": {
34	"Colors": {
35	"modes": ["Dark", "Light"],
36	"variables": {
37	"accent-primary": {
38	"type": "COLOR", "scopes": ["ALL_FILLS"],
39	"valuesByMode": {
40	"Dark": {"r": 0.91, "g": 0.44, "b": 0.29, "a": 1},
41	"Light": {"r": 0.83, "g": 0.38, "b": 0.23, "a": 1}
42	}
43	},
44	"accent-primary-text": {
45	"type": "COLOR", "scopes": ["TEXT_FILL"],
46	"valuesByMode": {
47	"Dark": {"r": 1, "g": 1, "b": 1, "a": 1},
48	"Light": {"r": 1, "g": 1, "b": 1, "a": 1}
49	}
50	},
51	"bg-secondary": {
52	"type": "COLOR", "scopes": ["ALL_FILLS"],
53	"valuesByMode": {
54	"Dark": {"r": 0.15, "g": 0.15, "b": 0.15, "a": 1},
55	"Light": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1}
56	}
57	},
58	"text-primary": {
59	"type": "COLOR", "scopes": ["TEXT_FILL"],
60	"valuesByMode": {
61	"Dark": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1},
62	"Light": {"r": 0.1, "g": 0.1, "b": 0.1, "a": 1}
63	}
64	},
65	"border-default": {
66	"type": "COLOR", "scopes": ["STROKE"],
67	"valuesByMode": {
68	"Dark": {"r": 0.25, "g": 0.25, "b": 0.25, "a": 1},
69	"Light": {"r": 0.85, "g": 0.85, "b": 0.85, "a": 1}
70	}
71	}
72	}
73	},
74	"Spacing": {
75	"modes": ["Dark", "Light"],
76	"variables": {
77	"spacing-xs": {"type": "FLOAT", "scopes": ["GAP"],
78	"valuesByMode": {"Dark": 4, "Light": 4}},
79	"spacing-sm": {"type": "FLOAT", "scopes": ["GAP"],
80	"valuesByMode": {"Dark": 8, "Light": 8}},
81	"spacing-md": {"type": "FLOAT", "scopes": ["GAP"],
82	"valuesByMode": {"Dark": 16, "Light": 16}},
83	"spacing-lg": {"type": "FLOAT", "scopes": ["GAP"],
84	"valuesByMode": {"Dark": 24, "Light": 24}},
85	"radius-sm": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
86	"valuesByMode": {"Dark": 6, "Light": 6}},
87	"radius-md": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
88	"valuesByMode": {"Dark": 8, "Light": 8}},
89	"radius-lg": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
90	"valuesByMode": {"Dark": 12, "Light": 12}}
91	}
92	}
93	}
94	})
95	```
96
97	在追踪表中记录所有返回的变量 ID 以供后续绑定使用。
98
99	> 硬性关卡：
100	> - 禁止：在变量存在之前创建组件
101	> - 禁止：使用硬编码颜色创建组件（cornerRadius 除外）
102
103	---
104
105	## 阶段二：组件创建
106
107	按依赖顺序逐个构建组件：
108
109	```
110	原子组件（无依赖）：
111	→ Button、Input、Label、Icon、Badge、Avatar、Divider
112
113	分子组件（依赖原子组件）：
114	→ Card（使用 Button、Badge）、NavBar（使用 Button）、FormField（使用 Input、Label）
115	```
116
117	### 每个组件的工作流程
118
119	```
120	1. batch_edit (I) → 在 Components 页面上创建组件，设置 reusable:true
121	- 对框架填充使用 boundVariables（暂不用于 TEXT 填充）
122	- TEXT 子元素使用 fill: "#HEX" 占位符
123	- 记录返回的组件节点 ID
124
125	2. batch_read → 验证组件结构
126
127	3. batch_edit (U) → 将变量绑定到 TEXT 子元素
128	- 对每个 TEXT 节点应用 fills+boundVariables
129
130	4. batch_read → 验证变量绑定存在
131
132	5. capture_screenshot → 组件的视觉检查
133	```
134
135	### 示例：Button/Primary/md
136
137	```js
138	// 第一步：创建组件
139	btnPrimaryMd = I("3:1672", {
140	"type": "FRAME",
141	"name": "Button/Primary/md",
142	"reusable": true,
143	"width": "hug_contents", "height": 32,
144	"layout": "horizontal",
145	"paddingLeft": 16, "paddingRight": 16,
146	"paddingTop": 6, "paddingBottom": 6,
147	"cornerRadius": 8,
148	"primaryAxisAlignItems": "CENTER",
149	"counterAxisAlignItems": "CENTER",
150	"fills": [{"type": "SOLID", "color": {"r": 0.91, "g": 0.44, "b": 0.29},
151	"boundVariables": {"color": {"id": "VariableID:3:14", "type": "VARIABLE_ALIAS"}}}],
152	"children": [
153	{"type": "TEXT", "name": "Label", "characters": "Button",
154	"fontSize": 14, "fill": "#FFFFFF"}
155	]
156	})
157	// 返回：btnPrimaryMd → "3:544"，TEXT 子元素 → "3:545"
158
159	// 第三步（单独的 batch_edit）：绑定文本颜色变量
160	U("3:545", {
161	"fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1},
162	"boundVariables": {"color": {"id": "VariableID:3:15", "type": "VARIABLE_ALIAS"}}}]
163	})
164	```
165
166	### 示例：带子元素的卡片
167
168	```js
169	card = I("3:1672", {
170	"type": "FRAME",
171	"name": "Card/Default",
172	"reusable": true,
173	"width": 320, "height": "hug_contents",
174	"layout": "vertical",
175	"paddingLeft": 20, "paddingRight": 20,
176	"paddingTop": 20, "paddingBottom": 20,
177	"cornerRadius": 12,
178	"fills": [{"type": "SOLID", "color": {"r": 0.15, "g": 0.15, "b": 0.15},
179	"boundVariabl

People who liked this also viewed

6 picks

Type