ardot-generate-design

ardot-generate-design — 构建页面和屏幕

在 Ardot 中使用设计系统组件、变量和样式构建完整的页面、视图和多区块 UI 容器。不使用硬编码的十六进制/像素值。

技能边界

• 当交付物是组合页面或屏幕时使用此技能（登录页面、仪表板、设置面板、落地页等）
• 如果用户想要创建可复用组件，切换到 ardot-generate-library
• 如果用户只想查询样式指南，直接使用 ardot-style-guide

前置条件

开始前必须加载：

• ardot-use — 用于 batch_edit DSL 规则、变量绑定、注意事项
• ardot-create-new-file — 用于 create_new_page 用法
• ardot-style-guide — 用于 search_style_guide → build_style_guide 工作流程

---

必需工作流程（6 步）

第一步：初始化

获取目标页面类型的编辑器状态和设计指南。

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