Agent skill

Ardot Generate Design

by balabalabalading in balabalabalading/huuuuuuho-skills

在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时，将此技能与 ardot-use 配合使用. An agent skill from balabalabalading/huuuuuuho-skills.

MITAuto-check passed

Install Ardot Generate Design

skills CLI

$ npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .claude/skills/ardot-generate-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .claude/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

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

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .agents/skills/ardot-generate-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .agents/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

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

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .cursor/skills/ardot-generate-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .cursor/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/balabalabalading/huuuuuuho-skills.git --path skills/Ardot-skills-nonofficial/ardot-generate-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .gemini/skills/ardot-generate-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .gemini/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .github/skills/ardot-generate-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .github/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

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

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-design .opencode/skills/ardot-generate-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ardot-generate-design" agent skill from https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/Ardot-skills-nonofficial/ardot-generate-design into .opencode/skills/ardot-generate-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ardot-generate-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ardot-generate-design
GitHub stars: 118
Token cost: ~1.2k tokens
SKILL.md length: 168 words
Files: 1
Skills in repo: 8
Repo updated: Sep 26, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时，将此技能与 ardot-use 配合使用. An agent skill from balabalabalading/huuuuuuho-skills.

Works in 3 steps: 按逻辑子区块拆分 — 一个调用中的头部项目，另一个调用中的内容卡片 → 将创建与绑定分离 — 一个调用中的 I()，下一个调用中的 U() 绑定 → 合并小型独立更新 — 将多个单节点 U() 调用合并为一个批次
SKILL.md covers 技能边界, 前置条件, 必需工作流程（6 步） and 变量 ID 追踪, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with Model Context Protocol. The repository describes itself as: My personal collection of Skills — open-source tools that extend Agent's capabilities for content creation, development logging, and productivity workflows. The licence is MIT.

Example prompts

“在 Ardot 中创建落地页”
“构建登录屏幕”
“在 Ardot 中设计仪表板”
“/ardot-generate-design”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit e2b6b5d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ardot Generate Design loads about 1.2k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 168 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~59
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from balabalabalading/huuuuuuho-skills at commit e2b6b5d, republished under its MIT licence (© balabalabalading). 168 words, ~1,154 tokens.

Download SKILL.mdSave it as .claude/skills/ardot-generate-design/SKILL.md (or your agent's skills folder).

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

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。

Files

Just SKILL.md in skills/Ardot-skills-nonofficial/ardot-generate-design of balabalabalading/huuuuuuho-skills.

Open the folder on GitHubat commit e2b6b5d

Compare with similar skills

Ardot Generate Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ardot Generate Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ardot Generate Design this skillbalabalabalading/huuuuuuho-skills	118	—	~1.2k	Automated safety check: Pass	MIT	14 days ago
MCP Server Builderanthropics/skills	180k	63 repos	~2.3k	Automated safety check: Pass	Apache-2.0	today
MCP Server BuildershareAI-lab/learn-claude-code	78k	4 repos	~1.2k	Automated safety check: Pass	MIT	11 days ago
MCP Integration for Pluginsanthropics/claude-plugins-official	38k	11 repos	~3.1k	Automated safety check: Pass	Apache-2.0	today
Figma use_figma Plugin API Ruleswarpdotdev/warp	65k	4 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills	8.5k	6 repos	~3.2k	Automated safety check: Notes	Apache-2.0	1 mo ago

Similar skills

MCP Server Builder
anthropics/skills
Official
Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.
180k GitHub starsUsed in 63 repos~2.3k tokens
Agent WorkflowsAuto-check passed
MCP Server Builder
shareAI-lab/learn-claude-code
Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.
78k GitHub starsUsed in 4 repos~1.2k tokens
Agent WorkflowsAuto-check passed
MCP Integration for Plugins
anthropics/claude-plugins-official
Official
Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.
38k GitHub starsUsed in 11 repos~3.1k tokens
Agent WorkflowsAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed
Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Official
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
8.5k GitHub starsUsed in 6 repos~3.2k tokens
Media & CreativeAuto-check: notes
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
63k GitHub starsUsed in 1 repo~949 tokens
Frontend & DesignAuto-check passed

Questions about Ardot Generate Design

What does Ardot Generate Design do?

在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时，将此技能与 ardot-use 配合使用. An agent skill from balabalabalading/huuuuuuho-skills. Ardot Generate Design is an agent skill from balabalabalading/huuuuuuho-skills.

How do I install Ardot Generate Design in Claude Code?

Run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a claude-code`. Or copy the skill folder (skills/Ardot-skills-nonofficial/ardot-generate-design in balabalabalading/huuuuuuho-skills) into .claude/skills/ardot-generate-design in your project. Claude Code loads it when a task matches its description.

How do I install Ardot Generate Design in Codex?

Run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a codex`. Or copy the skill folder (skills/Ardot-skills-nonofficial/ardot-generate-design in balabalabalading/huuuuuuho-skills) into .agents/skills/ardot-generate-design in your project. Codex loads it when a task matches its description.

Can I use Ardot Generate Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ardot-generate-design, .gemini/skills/ardot-generate-design, .github/skills/ardot-generate-design and .opencode/skills/ardot-generate-design in your project.

What does Ardot Generate Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Ardot Generate Design is instructions for the agent only.

Does Ardot Generate Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ardot Generate Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ardot Generate Design use?

Ardot Generate Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ardot Generate Design use?

About 1.2k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ardot Generate Design?

Skills that share tags, products or a category with Ardot Generate Design: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ardot Generate Design?

balabalabalading (a GitHub user) maintains it in balabalabalading/huuuuuuho-skills, which has 118 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 26, 2026.

Source: balabalabalading/huuuuuuho-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Ardot Generate Design

Facts

At a glance

What it does

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

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

技能边界

前置条件

必需工作流程（6 步）

第一步：初始化

第二步：建立样式系统

第三步：创建变量

第四步：创建页面骨架

第五步：构建每个区块

第六步：验证

变量 ID 追踪

批次管理 — 25 操作限制

错误恢复

Files

Compare with similar skills

Similar skills

More from balabalabalading/huuuuuuho-skills

Related

Questions about Ardot Generate Design