balabalabalading/ardot-generate-design
| 在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时，将此技能与 ardot-use 配合使用。 通过 6 步工作流程编排多个 MCP 工具：初始化 → 样式系统 → 变量 → 骨架 → 逐区块构建 → 验证。 触发条件："在 Ardot 中创建落地页"、"构建登录屏幕"、 "在 Ardot 中设计仪表板"、"制作设置页面"、"创建个人资料屏幕"、 "在 Ardot 中构建此页面"、"将此设计转换为 Ardot"。
npx skills add https://github.com/balabalabalading/huuuuuuho-skills --skill ardot-generate-design在 Ardot 中使用设计系统组件、变量和样式构建完整的页面、视图和多区块 UI 容器。不使用硬编码的十六进制/像素值。
开始前必须加载：
ardot-use — 用于 batch_edit DSL 规则、变量绑定、注意事项ardot-create-new-file — 用于 create_new_page 用法ardot-style-guide — 用于 search_style_guide → build_style_guide 工作流程获取目标页面类型的编辑器状态和设计指南。
fetch_editor_state(includeSchema: true)
fetch_guidelines(topic) // landing-page | web-app | mobile-app | slides | table
fetch_file_info // 检查写入权限
如果尚不存在设计系统：
search_style_guide → build_style_guide （完整协议见 ardot-style-guide）
get_available_fonts （验证字体可用性）
如果文件中已存在设计系统：
fetch_variables （获取现有变量 ID 和值）
batch_read({parentId: "<ComponentsPage>"}) （发现现有可复用组件）
将样式指南的设计令牌转换为 Ardot 变量：
apply_variables({
"Colors": {
"modes": ["Dark"],
"variables": {
"bg-primary": { "type": "COLOR", "scopes": ["ALL_FILLS"],
"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
"text-primary": { "type": "COLOR", "scopes": ["TEXT_FILL"],
"valuesByMode": {"Dark": {r: ..., g: ..., b: ..., a: 1}} },
...build_style_guide 中的所有颜色...
}
},
"Spacing": {
"modes": ["Dark"],
"variables": {
"spacing-sm": { "type": "FLOAT", "scopes": ["GAP"],
"valuesByMode": {"Dark": 8} },
"spacing-md": { "type": "FLOAT", "scopes": ["GAP"],
"valuesByMode": {"Dark": 16} },
"radius-sm": { "type": "FLOAT", "scopes": ["CORNER_RADIUS"],
"valuesByMode": {"Dark": 6} }
}
}
})
记录所有返回的变量 ID — 在第五步绑定时需要它们。
> 硬性关卡 — 禁止的快捷方式：
> - 禁止： 在变量创建之前开始 batch_edit
> - 禁止： 使用硬编码十六进制值代替变量（cornerRadius 除外）
create_new_page({name: "<页面名称>", select: false})
→ 记录 pageId
然后创建包装框架和区块容器：
// 骨架的单个 batch_edit 调用
wrapper = I("<pageId>", {
"type": "FRAME", "name": "<屏幕名称>",
"width": 375, "height": "hug_contents",
"layout": "vertical",
"fills": [{"type": "SOLID", "color": {r:..., g:..., b:...},
"boundVariables": {"color": {"id": "VariableID:X:Y", "type": "VARIABLE_ALIAS"}}}],
"children": [
{"type": "FRAME", "name": "Header", "width": "fill_container", "height": 56,
"layout": "horizontal", "paddingLeft": 16, "paddingRight": 16,
"counterAxisAlignItems": "CENTER"},
{"type": "FRAME", "name": "Content", "width": "fill_container",
"height": "hug_contents", "layout": "vertical",
"paddingLeft": 24, "paddingRight": 24, "paddingTop": 24, "paddingBottom": 24},
{"type": "FRAME", "name": "Footer", "width": "fill_container", "height": 48}
]
})
记录每个区块框架的节点 ID（Header、Content、Footer 等）。
一次构建一个区块。每个区块使用自己的 batch_edit 调用（≤25 个操作）。
对于每个区块：
1. 准备该区块的操作字符串
2. batch_edit → 创建区块内容
3. batch_read → 验证结构
4. batch_edit (U) → 绑定变量（特别是 TEXT 节点）
5. batch_read → 验证绑定
TEXT 节点需要两步绑定（见 ardot-use 注意事项 #4）：
fill: "#HEX" 创建> 硬性关卡 — 禁止的快捷方式：
> - 禁止： 在 I() 中直接将变量绑定到 TEXT 节点
> - 禁止： 使用来自先前 batch_edit 调用的绑定名称
> - 禁止： 每个 batch_edit 调用超过 25 个操作
capture_screenshot({
"nodeIds": ["<screenNodeId>", ...所有屏幕节点 ID],
"screenShotDir": "/tmp/ardot-verify"
})
审查所有截图检查：
如果发现问题 → batch_edit 修复 → 再次 capture_screenshot。
维护所有变量 ID 的持续记录：
| 变量名 | 变量 ID |
|--------|---------|
| bg-primary | VariableID:3:14 |
| text-primary | VariableID:3:15 |
| accent-warm | VariableID:3:16 |
| spacing-md | VariableID:3:17 |
| radius-sm | VariableID:3:18 |
从 apply_variables 返回值或 fetch_variables 获取。
当区块需要超过 25 个操作时：
如果 batch_edit 失败：
详细恢复策略见 ardot-use references/validation-and-recovery.md。
Take balabalabalading/ardot-generate-design from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.