菜单
从头设计或为 Ardot 项目应用视觉主题时使用此技能。 涵盖 `search_style_guide` → `build_style_guide` 工作流程，用于发现和应用完整的设计系统（颜色、排版、间距、布局模式）。 触发条件："设计落地页"、"创建仪表板"、"应用深色主题"、 "设置设计系统"、"选择调色板"、"为应用选择字体"、 "样式指南"、"视觉风格"、"外观和感觉"。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/balabalabalading/huuuuuuho-skills --skill ardot-style-guide命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
微信公众号文章创作。当用户想把工作流探索、AI 工具测评、产品体验、个人实践、生活感悟等素材整理成公众号文章时使用。即使用户只是说「帮我写篇文章」「整理成推文」「发公众号」，也应当触发此技能。
**强制性前置条件** — 每次调用 `batch_edit` 工具之前，必须先调用此技能。 未经加载此技能，绝不能直接调用 `batch_edit`。 当用户想要在 Ardot 设计文件中创建、更新、移动或删除节点时触发 — 例如插入框架、文本、形状、组件；将变量绑定到填充/描边； 构建屏幕、组件或设计库。当涉及 batch_edit DSL 操作时也加载 （I/U/M/D/C/G 操作符）。
**强制性前置条件** — 每次调用 `create_new_page` 工具之前，必须先调用此技能。 未经加载此技能，绝不能直接调用 `create_new_page`。 当用户想要在 Ardot 设计文件中创建新页面时触发。 关键词：在 Ardot 上下文中的"创建新页面"、"添加页面"、"新画布"。
| name | ardot-style-guide |
| description | 从头设计或为 Ardot 项目应用视觉主题时使用此技能。 涵盖 `search_style_guide` → `build_style_guide` 工作流程，用于发现和应用完整的设计系统（颜色、排版、间距、布局模式）。 触发条件："设计落地页"、"创建仪表板"、"应用深色主题"、 "设置设计系统"、"选择调色板"、"为应用选择字体"、 "样式指南"、"视觉风格"、"外观和感觉"。 |
| disable-model-invocation | false |
通过 search_style_guide → build_style_guide 工具链发现和应用完整的设计系统。Ardot 独有的能力，Figma 没有等效功能。
batch_edit 之前使用此技能build_style_guide 的输出是权威性的 — 所有下游工具必须严格遵循其值fetch_editor_state(includeSchema: true)fetch_guidelines(topic)提供特定关键词以定位用户意图。
search_style_guide({
"topic": "landing-page", // 或 web-app、mobile-app、slides、table
"designKeywords": "SaaS dashboard modern clean professional",
"colorKeywords": "dark mode cool blue professional",
"typographyKeywords": "modern sans-serif clean readable",
"layoutKeywords": "dashboard analytics cards grid"
})
收到结果后，逐一审查每个领域：
get_available_fonts 检查）？如果某个领域的所有候选都合适 → 继续到 build_style_guide。
对于第一轮没有合适匹配的领域，再次调用 search_style_guide，对该领域的关键词使用 true 以获取完整目录：
search_style_guide({
"topic": "landing-page",
"designKeywords": "SaaS dashboard",
"colorKeywords": true, // 颜色的完整目录
"typographyKeywords": true // 排版的完整目录
})
仅对第二轮后仍无合适匹配的领域，你可以使用自己的设计知识。这应该很少见。
一旦你在所有领域做出选择，调用 build_style_guide：
build_style_guide({
"selections": {
"style": 2, // 搜索结果中的索引或名称
"color": 1,
"typography": 3,
"layout": 0
}
})
build_style_guide 响应提供必须使用的精确值：
#HEX 或 {r, g, b} 值 — 不要调整硬性关卡：如果设计系统说背景是
#FAF5FF，使用#FAF5FF（转换为 0–1 范围用于 batch_edit）。如果你意识到它与用户意图冲突 （例如，用户想要深色但得到浅色），返回search_style_guide使用更正后的关键词 — 不要静默覆盖值。
样式指南十六进制颜色 → batch_edit {r, g, b} 0–1 格式：
#FAF5FF → {r: 0.98, g: 0.96, b: 1.0}
#1A1A2E → {r: 0.10, g: 0.10, b: 0.18}
#E8714A → {r: 0.91, g: 0.44, b: 0.29}
将样式类别名称与用户描述匹配。信任内容而非搜索分数 — 匹配意图的低分候选比不相关的高分候选更好。
具体检查背景（主表面颜色）、卡片（次表面）和前景（文本/图标）值。这三个值告诉你调色板是浅色还是深色。
在选择之前使用 get_available_fonts 验证字体可用性。如果两种字体都不可用，字体配对就没有用。检查标题和正文字体。
将模式名称与功能意图匹配。例如，"pricing" → 寻找比较/表格布局；"dashboard" → 寻找卡片网格布局。
| topic | 用途 | 典型 designKeywords |
|---|---|---|
landing-page | 营销页面、主页、促销网站 | "hero section"、"CTA"、"features" |
web-app | SaaS 仪表板、管理面板、内部工具 | "dashboard"、"data table"、"sidebar" |
mobile-app | iOS/Android 应用屏幕 | "bottom nav"、"cards"、"list" |
slides | 演示文稿 | "title slide"、"content"、"chart" |
table | 数据表和仪表板 | "data grid"、"filters"、"pagination" |
1. fetch_editor_state(includeSchema: true)
2. fetch_guidelines(topic) → 页面类型的设计规则
3. get_available_fonts → 检查字体可用性
4. search_style_guide (第一轮) → 关键词搜索
5. [如需要] search_style_guide (第二轮) → 完整目录回退
6. build_style_guide(selections) → 获取权威设计令牌
7. apply_variables → 创建与令牌匹配的变量
8. batch_edit → 使用精确的令牌值构建 UI