mcpbeat Sign in

Ardot Generate Design Agent Skill

by balabalabalading

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

2k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
118
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/balabalabalading/huuuuuuho-skills --skill ardot-generate-design

The instruction itself

4 sections, as written by the author

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

然后创建包装框架和区块容器：

// 骨架的单个 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）：

  • I() → 使用 fill: "#HEX" 创建
  • 单独的 batch_edit U() → 使用 fills+boundVariables 绑定变量

> 硬性关卡 — 禁止的快捷方式：

> - 禁止： 在 I() 中直接将变量绑定到 TEXT 节点

> - 禁止： 使用来自先前 batch_edit 调用的绑定名称

> - 禁止： 每个 batch_edit 调用超过 25 个操作

第六步：验证

capture_screenshot({
  "nodeIds": ["<screenNodeId>", ...所有屏幕节点 ID],
  "screenShotDir": "/tmp/ardot-verify"
})

审查所有截图检查：

  • 视觉正确性（颜色、间距、对齐）
  • 文本未被裁剪或溢出
  • 所有区块存在且布局正确

如果发现问题 → batch_edit 修复 → 再次 capture_screenshot。

变量 ID 追踪

维护所有变量 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 操作限制

当区块需要超过 25 个操作时：

  • 按逻辑子区块拆分 — 一个调用中的头部项目，另一个调用中的内容卡片
  • 将创建与绑定分离 — 一个调用中的 I()，下一个调用中的 U() 绑定
  • 合并小型独立更新 — 将多个单节点 U() 调用合并为一个批次

错误恢复

如果 batch_edit 失败：

  • 读取错误 — 它是原子性的，文件未更改
  • 修复问题（通常是：错误的节点 ID、错误的 pageId 或语法错误）
  • 重试 batch_edit 调用

详细恢复策略见 ardot-use references/validation-and-recovery.md。

Other skills for the same job

different authors, same section of the catalogue
Theme Factory
by anthropics
vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

36k tokens
Brand Guidelines
by anthropics
vendor ×13

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

3k tokens
Artifacts Builder
by JayZeeDesign
×8

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts
Web Artifacts Builder
by anthropics
vendor ×7

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts
Frontend Design
by Karanjot786
×6

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

1k tokens
Frontend Design
by anthropics
vendor ×4

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

5k tokens
Expo Tailwind Setup
by openai
vendor ×4

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

3k tokens
Use Dom
by openai
vendor ×3

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

How to use it

Copy the folder

Take balabalabalading/ardot-generate-design from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

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.