ardot-generate-design

Name: ardot-generate-design
Author: balabalabalading

118stars12forks

How to install ardot-generate-design?

balabalabalading/huuuuuuho-skills/ardot-generate-design

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

Installs into the current project.

Summary

在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时，将此技能与 ardot-use 配合使用。通过 6 步工作流程编排多个 MCP 工具：初始化 → 样式系统 → 变量 → 骨架 → 逐区块构建 → 验证。触发条件："在 Ardot 中创建落地页"、"构建登录屏幕"、 "在 Ardot 中设计仪表板"、"制作设置页面"、"创建个人资料屏幕"、 "在 Ardot 中构建此页面"、"将此设计转换为 Ardot"。

Files · 1

View on GitHub

SKILL.md

1	# ardot-generate-design — 构建页面和屏幕
2
3	在 Ardot 中使用设计系统组件、变量和样式构建完整的页面、视图和多区块 UI 容器。不使用硬编码的十六进制/像素值。
4
5	## 技能边界
6
7	- 当交付物是组合页面或屏幕时使用此技能（登录页面、仪表板、设置面板、落地页等）
8	- 如果用户想要创建可复用组件，切换到 [ardot-generate-library](../ardot-generate-library/SKILL.md)
9	- 如果用户只想查询样式指南，直接使用 [ardot-style-guide](../ardot-style-guide/SKILL.md)
10
11	## 前置条件
12
13	开始前必须加载：
14	- `ardot-use` — 用于 batch_edit DSL 规则、变量绑定、注意事项
15	- `ardot-create-new-file` — 用于 create_new_page 用法
16	- `ardot-style-guide` — 用于 search_style_guide → build_style_guide 工作流程
17
18	---
19
20	## 必需工作流程（6 步）
21
22	### 第一步：初始化
23
24	获取目标页面类型的编辑器状态和设计指南。
25
26	```
27	fetch_editor_state(includeSchema: true)
28	fetch_guidelines(topic) // landing-page \| web-app \| mobile-app \| slides \| table
29	fetch_file_info // 检查写入权限
30	```
31
32	### 第二步：建立样式系统
33
34	如果尚不存在设计系统：
35
36	```
37	search_style_guide → build_style_guide （完整协议见 ardot-style-guide）
38	get_available_fonts （验证字体可用性）
39	```
40
41	如果文件中已存在设计系统：
42
43	```
44	fetch_variables （获取现有变量 ID 和值）
45	batch_read({parentId: "<ComponentsPage>"}) （发现现有可复用组件）
46	```
47
48	### 第三步：创建变量
49
50	将样式指南的设计令牌转换为 Ardot 变量：
51
52	```
53	apply_variables({
54	"Colors": {
55	"modes": ["Dark"],
56	"variables": {
57	"bg-primary": { "type": "COLOR", "scopes": ["ALL_FILLS"],
58	"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
59	"text-primary": { "type": "COLOR", "scopes": ["TEXT_FILL"],
60	"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
61	...build_style_guide 中的所有颜色...
62	}
63	},
64	"Spacing": {
65	"modes": ["Dark"],
66	"variables": {
67	"spacing-sm": { "type": "FLOAT", "scopes": ["GAP"],
68	"valuesByMode": {"Dark": 8} },
69	"spacing-md": { "type": "FLOAT", "scopes": ["GAP"],
70	"valuesByMode": {"Dark": 16} },
71	"radius-sm": { "type": "FLOAT", "scopes": ["CORNER_RADIUS"],
72	"valuesByMode": {"Dark": 6} }
73	}
74	}
75	})
76	```
77
78	记录所有返回的变量 ID — 在第五步绑定时需要它们。
79
80	> 硬性关卡 — 禁止的快捷方式：
81	> - 禁止：在变量创建之前开始 batch_edit
82	> - 禁止：使用硬编码十六进制值代替变量（cornerRadius 除外）
83
84	### 第四步：创建页面骨架
85
86	```
87	create_new_page({name: "<页面名称>", select: false})
88	→ 记录 pageId
89	```
90
91	然后创建包装框架和区块容器：
92
93	```js
94	// 骨架的单个 batch_edit 调用
95	wrapper = I("<pageId>", {
96	"type": "FRAME", "name": "<屏幕名称>",
97	"width": 375, "height": "hug_contents",
98	"layout": "vertical",
99	"fills": [{"type": "SOLID", "color": {r:..., g:..., b:...},
100	"boundVariables": {"color": {"id": "VariableID:X:Y", "type": "VARIABLE_ALIAS"}}}],
101	"children": [
102	{"type": "FRAME", "name": "Header", "width": "fill_container", "height": 56,
103	"layout": "horizontal", "paddingLeft": 16, "paddingRight": 16,
104	"counterAxisAlignItems": "CENTER"},
105	{"type": "FRAME", "name": "Content", "width": "fill_container",
106	"height": "hug_contents", "layout": "vertical",
107	"paddingLeft": 24, "paddingRight": 24, "paddingTop": 24, "paddingBottom": 24},
108	{"type": "FRAME", "name": "Footer", "width": "fill_container", "height": 48}
109	]
110	})
111	```
112
113	记录每个区块框架的节点 ID（Header、Content、Footer 等）。
114
115	### 第五步：构建每个区块
116
117	一次构建一个区块。每个区块使用自己的 `batch_edit` 调用（≤25 个操作）。
118
119	```
120	对于每个区块：
121	1. 准备该区块的操作字符串
122	2. batch_edit → 创建区块内容
123	3. batch_read → 验证结构
124	4. batch_edit (U) → 绑定变量（特别是 TEXT 节点）
125	5. batch_read → 验证绑定
126	```
127
128	TEXT 节点需要两步绑定（见 ardot-use 注意事项 #4）：
129	- I() → 使用 `fill: "#HEX"` 创建
130	- 单独的 batch_edit U() → 使用 fills+boundVariables 绑定变量
131
132	> 硬性关卡 — 禁止的快捷方式：
133	> - 禁止：在 I() 中直接将变量绑定到 TEXT 节点
134	> - 禁止：使用来自先前 batch_edit 调用的绑定名称
135	> - 禁止：每个 batch_edit 调用超过 25 个操作
136
137	### 第六步：验证
138
139	```
140	capture_screenshot({
141	"nodeIds": ["<screenNodeId>", ...所有屏幕节点 ID],
142	"screenShotDir": "/tmp/ardot-verify"
143	})
144	```
145
146	审查所有截图检查：
147	- 视觉正确性（颜色、间距、对齐）
148	- 文本未被裁剪或溢出
149	- 所有区块存在且布局正确
150
151	如果发现问题 → `batch_edit` 修复 → 再次 `capture_screenshot`。
152
153	## 变量 ID 追踪
154
155	维护所有变量 ID 的持续记录：
156
157	\| 变量名 \| 变量 ID \|
158	\|--------\|---------\|
159	\| bg-primary \| VariableID:3:14 \|
160	\| text-primary \| VariableID:3:15 \|
161	\| accent-warm \| VariableID:3:16 \|
162	\| spacing-md \| VariableID:3:17 \|
163	\| radius-sm \| VariableID:3:18 \|
164
165	从 `apply_variables` 返回值或 `fetch_variables` 获取。
166
167	## 批次管理 — 25 操作限制
168
169	当区块需要超过 25 个操作时：
170
171	1. 按逻辑子区块拆分 — 一个调用中的头部项目，另一个调用中的内容卡片
172	2. 将创建与绑定分离 — 一个调用中的 I()，下一个调用中的 U() 绑定
173	3. 合并小型独立更新 — 将多个单节点 U() 调用合并为一个批次
174
175	## 错误恢复
176
177	如果 batch_edit 失败：
178	1. 读取错误 — 它是原子性的，文件未更改
179	2. 修复问题（通常是：错误的节点 ID、错误的 pageId 或语法错误）
180	3. 重试 batch_edit 调用
181
182	详细恢复策略见 [ardot-use references/validation-and-recovery.md](../ardot-use/references/validation-and-recovery.md)。

People who liked this also viewed

6 picks

Type

ardot-generate-design

118stars12forks

View on GitHub

How to install ardot-generate-design?

balabalabalading/huuuuuuho-skills/ardot-generate-design

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# ardot-generate-design — 构建页面和屏幕
2
3	在 Ardot 中使用设计系统组件、变量和样式构建完整的页面、视图和多区块 UI 容器。不使用硬编码的十六进制/像素值。
4
5	## 技能边界
6
7	- 当交付物是组合页面或屏幕时使用此技能（登录页面、仪表板、设置面板、落地页等）
8	- 如果用户想要创建可复用组件，切换到 [ardot-generate-library](../ardot-generate-library/SKILL.md)
9	- 如果用户只想查询样式指南，直接使用 [ardot-style-guide](../ardot-style-guide/SKILL.md)
10
11	## 前置条件
12
13	开始前必须加载：
14	- `ardot-use` — 用于 batch_edit DSL 规则、变量绑定、注意事项
15	- `ardot-create-new-file` — 用于 create_new_page 用法
16	- `ardot-style-guide` — 用于 search_style_guide → build_style_guide 工作流程
17
18	---
19
20	## 必需工作流程（6 步）
21
22	### 第一步：初始化
23
24	获取目标页面类型的编辑器状态和设计指南。
25
26	```
27	fetch_editor_state(includeSchema: true)
28	fetch_guidelines(topic) // landing-page \| web-app \| mobile-app \| slides \| table
29	fetch_file_info // 检查写入权限
30	```
31
32	### 第二步：建立样式系统
33
34	如果尚不存在设计系统：
35
36	```
37	search_style_guide → build_style_guide （完整协议见 ardot-style-guide）
38	get_available_fonts （验证字体可用性）
39	```
40
41	如果文件中已存在设计系统：
42
43	```
44	fetch_variables （获取现有变量 ID 和值）
45	batch_read({parentId: "<ComponentsPage>"}) （发现现有可复用组件）
46	```
47
48	### 第三步：创建变量
49
50	将样式指南的设计令牌转换为 Ardot 变量：
51
52	```
53	apply_variables({
54	"Colors": {
55	"modes": ["Dark"],
56	"variables": {
57	"bg-primary": { "type": "COLOR", "scopes": ["ALL_FILLS"],
58	"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
59	"text-primary": { "type": "COLOR", "scopes": ["TEXT_FILL"],
60	"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
61	...build_style_guide 中的所有颜色...
62	}
63	},
64	"Spacing": {
65	"modes": ["Dark"],
66	"variables": {
67	"spacing-sm": { "type": "FLOAT", "scopes": ["GAP"],
68	"valuesByMode": {"Dark": 8} },
69	"spacing-md": { "type": "FLOAT", "scopes": ["GAP"],
70	"valuesByMode": {"Dark": 16} },
71	"radius-sm": { "type": "FLOAT", "scopes": ["CORNER_RADIUS"],
72	"valuesByMode": {"Dark": 6} }
73	}
74	}
75	})
76	```
77
78	记录所有返回的变量 ID — 在第五步绑定时需要它们。
79
80	> 硬性关卡 — 禁止的快捷方式：
81	> - 禁止：在变量创建之前开始 batch_edit
82	> - 禁止：使用硬编码十六进制值代替变量（cornerRadius 除外）
83
84	### 第四步：创建页面骨架
85
86	```
87	create_new_page({name: "<页面名称>", select: false})
88	→ 记录 pageId
89	```
90
91	然后创建包装框架和区块容器：
92
93	```js
94	// 骨架的单个 batch_edit 调用
95	wrapper = I("<pageId>", {
96	"type": "FRAME", "name": "<屏幕名称>",
97	"width": 375, "height": "hug_contents",
98	"layout": "vertical",
99	"fills": [{"type": "SOLID", "color": {r:..., g:..., b:...},
100	"boundVariables": {"color": {"id": "VariableID:X:Y", "type": "VARIABLE_ALIAS"}}}],
101	"children": [
102	{"type": "FRAME", "name": "Header", "width": "fill_container", "height": 56,
103	"layout": "horizontal", "paddingLeft": 16, "paddingRight": 16,
104	"counterAxisAlignItems": "CENTER"},
105	{"type": "FRAME", "name": "Content", "width": "fill_container",
106	"height": "hug_contents", "layout": "vertical",
107	"paddingLeft": 24, "paddingRight": 24, "paddingTop": 24, "paddingBottom": 24},
108	{"type": "FRAME", "name": "Footer", "width": "fill_container", "height": 48}
109	]
110	})
111	```
112
113	记录每个区块框架的节点 ID（Header、Content、Footer 等）。
114
115	### 第五步：构建每个区块
116
117	一次构建一个区块。每个区块使用自己的 `batch_edit` 调用（≤25 个操作）。
118
119	```
120	对于每个区块：
121	1. 准备该区块的操作字符串
122	2. batch_edit → 创建区块内容
123	3. batch_read → 验证结构
124	4. batch_edit (U) → 绑定变量（特别是 TEXT 节点）
125	5. batch_read → 验证绑定
126	```
127
128	TEXT 节点需要两步绑定（见 ardot-use 注意事项 #4）：
129	- I() → 使用 `fill: "#HEX"` 创建
130	- 单独的 batch_edit U() → 使用 fills+boundVariables 绑定变量
131
132	> 硬性关卡 — 禁止的快捷方式：
133	> - 禁止：在 I() 中直接将变量绑定到 TEXT 节点
134	> - 禁止：使用来自先前 batch_edit 调用的绑定名称
135	> - 禁止：每个 batch_edit 调用超过 25 个操作
136
137	### 第六步：验证
138
139	```
140	capture_screenshot({
141	"nodeIds": ["<screenNodeId>", ...所有屏幕节点 ID],
142	"screenShotDir": "/tmp/ardot-verify"
143	})
144	```
145
146	审查所有截图检查：
147	- 视觉正确性（颜色、间距、对齐）
148	- 文本未被裁剪或溢出
149	- 所有区块存在且布局正确
150
151	如果发现问题 → `batch_edit` 修复 → 再次 `capture_screenshot`。
152
153	## 变量 ID 追踪
154
155	维护所有变量 ID 的持续记录：
156
157	\| 变量名 \| 变量 ID \|
158	\|--------\|---------\|
159	\| bg-primary \| VariableID:3:14 \|
160	\| text-primary \| VariableID:3:15 \|
161	\| accent-warm \| VariableID:3:16 \|
162	\| spacing-md \| VariableID:3:17 \|
163	\| radius-sm \| VariableID:3:18 \|
164
165	从 `apply_variables` 返回值或 `fetch_variables` 获取。
166
167	## 批次管理 — 25 操作限制
168
169	当区块需要超过 25 个操作时：
170
171	1. 按逻辑子区块拆分 — 一个调用中的头部项目，另一个调用中的内容卡片
172	2. 将创建与绑定分离 — 一个调用中的 I()，下一个调用中的 U() 绑定
173	3. 合并小型独立更新 — 将多个单节点 U() 调用合并为一个批次
174
175	## 错误恢复
176
177	如果 batch_edit 失败：
178	1. 读取错误 — 它是原子性的，文件未更改
179	2. 修复问题（通常是：错误的节点 ID、错误的 pageId 或语法错误）
180	3. 重试 batch_edit 调用
181
182	详细恢复策略见 [ardot-use references/validation-and-recovery.md](../ardot-use/references/validation-and-recovery.md)。

People who liked this also viewed

6 picks

Type