ardot-style-guide

Name: ardot-style-guide
Author: balabalabalading

118stars12forks

How to install ardot-style-guide?

balabalabalading/huuuuuuho-skills/ardot-style-guide

$npx -y skills add balabalabalading/huuuuuuho-skills --skill ardot-style-guide

Installs into the current project.

Summary

从头设计或为 Ardot 项目应用视觉主题时使用此技能。涵盖 search_style_guide → build_style_guide 工作流程，用于发现和应用完整的设计系统（颜色、排版、间距、布局模式）。触发条件："设计落地页"、"创建仪表板"、"应用深色主题"、 "设置设计系统"、"选择调色板"、"为应用选择字体"、 "样式指南"、"视觉风格"、"外观和感觉"。

Files · 1

View on GitHub

SKILL.md

1	# ardot-style-guide — 样式指南搜索与构建
2
3	通过 `search_style_guide` → `build_style_guide` 工具链发现和应用完整的设计系统。Ardot 独有的能力，Figma 没有等效功能。
4
5	## 技能边界
6
7	- 当用户想要从头建立视觉风格时使用此技能
8	- 在任何创建带样式 UI（颜色、排版）的 `batch_edit` 之前使用此技能
9	- 如果用户已有已建立的设计系统和已知令牌，可跳过此技能
10	- `build_style_guide` 的输出是权威性的 — 所有下游工具必须严格遵循其值
11
12	## 前置条件
13
14	- 必须已调用 `fetch_editor_state(includeSchema: true)`
15	- 应为目标设计类型加载 `fetch_guidelines(topic)`
16
17	---
18
19	## search_style_guide — 三轮回退协议
20
21	### 第一轮：关键词搜索
22
23	提供特定关键词以定位用户意图。
24
25	```
26	search_style_guide({
27	"topic": "landing-page", // 或 web-app、mobile-app、slides、table
28	"designKeywords": "SaaS dashboard modern clean professional",
29	"colorKeywords": "dark mode cool blue professional",
30	"typographyKeywords": "modern sans-serif clean readable",
31	"layoutKeywords": "dashboard analytics cards grid"
32	})
33	```
34
35	收到结果后，逐一审查每个领域：
36
37	- style：样式类别是否与请求的视觉风格匹配？
38	- color：检查背景、卡片和前景值。如果用户想要深色模式但所有背景值都是浅色（#F_xxxx 范围），则此领域没有合适匹配。
39	- typography：情绪是否匹配？字体是否可用（使用 `get_available_fonts` 检查）？
40	- layout：模式是否适合页面类型？
41
42	如果某个领域的所有候选都合适 → 继续到 `build_style_guide`。
43
44	### 第二轮：完整目录（如果任何领域没有合适匹配）
45
46	对于第一轮没有合适匹配的领域，再次调用 `search_style_guide`，对该领域的关键词使用 `true` 以获取完整目录：
47
48	```
49	search_style_guide({
50	"topic": "landing-page",
51	"designKeywords": "SaaS dashboard",
52	"colorKeywords": true, // 颜色的完整目录
53	"typographyKeywords": true // 排版的完整目录
54	})
55	```
56
57	### 第三轮：自身设计知识（仅在第二轮也失败时）
58
59	仅对第二轮后仍无合适匹配的领域，你可以使用自己的设计知识。这应该很少见。
60
61	---
62
63	## build_style_guide — 权威性约束
64
65	一旦你在所有领域做出选择，调用 `build_style_guide`：
66
67	```json
68	build_style_guide({
69	"selections": {
70	"style": 2, // 搜索结果中的索引或名称
71	"color": 1,
72	"typography": 3,
73	"layout": 0
74	}
75	})
76	```
77
78	### 关键：返回的设计系统是权威性的
79
80	`build_style_guide` 响应提供必须使用的精确值：
81
82	- 颜色：使用精确的 `#HEX` 或 `{r, g, b}` 值 — 不要调整
83	- 排版：使用精确指定的字体系列、大小、粗细
84	- 边框半径：使用精确的 px 值
85	- 间距：使用精确的 px 值
86	- 效果：使用精确的阴影/模糊参数
87
88	> 硬性关卡：如果设计系统说背景是 `#FAF5FF`，使用 `#FAF5FF`
89	> （转换为 0–1 范围用于 batch_edit）。如果你意识到它与用户意图冲突
90	> （例如，用户想要深色但得到浅色），返回 `search_style_guide` 使用更正后的关键词
91	> — 不要静默覆盖值。
92
93	### 将样式指南值转换为 batch_edit
94
95	样式指南十六进制颜色 → batch_edit {r, g, b} 0–1 格式：
96	```
97	#FAF5FF → {r: 0.98, g: 0.96, b: 1.0}
98	#1A1A2E → {r: 0.10, g: 0.10, b: 0.18}
99	#E8714A → {r: 0.91, g: 0.44, b: 0.29}
100	```
101
102	---
103
104	## 每个领域的选择策略
105
106	### 样式
107	将样式类别名称与用户描述匹配。信任内容而非搜索分数 — 匹配意图的低分候选比不相关的高分候选更好。
108
109	### 颜色
110	具体检查背景（主表面颜色）、卡片（次表面）和前景（文本/图标）值。这三个值告诉你调色板是浅色还是深色。
111
112	### 排版
113	在选择之前使用 `get_available_fonts` 验证字体可用性。如果两种字体都不可用，字体配对就没有用。检查标题和正文字体。
114
115	### 布局
116	将模式名称与功能意图匹配。例如，"pricing" → 寻找比较/表格布局；"dashboard" → 寻找卡片网格布局。
117
118	---
119
120	## topic 参数指南
121
122	\| topic \| 用途 \| 典型 designKeywords \|
123	\|-------\|------\|---------------------\|
124	\| `landing-page` \| 营销页面、主页、促销网站 \| "hero section"、"CTA"、"features" \|
125	\| `web-app` \| SaaS 仪表板、管理面板、内部工具 \| "dashboard"、"data table"、"sidebar" \|
126	\| `mobile-app` \| iOS/Android 应用屏幕 \| "bottom nav"、"cards"、"list" \|
127	\| `slides` \| 演示文稿 \| "title slide"、"content"、"chart" \|
128	\| `table` \| 数据表和仪表板 \| "data grid"、"filters"、"pagination" \|
129
130	---
131
132	## 完整工作流程总结
133
134	```
135	1. fetch_editor_state(includeSchema: true)
136	2. fetch_guidelines(topic) → 页面类型的设计规则
137	3. get_available_fonts → 检查字体可用性
138	4. search_style_guide (第一轮) → 关键词搜索
139	5. [如需要] search_style_guide (第二轮) → 完整目录回退
140	6. build_style_guide(selections) → 获取权威设计令牌
141	7. apply_variables → 创建与令牌匹配的变量
142	8. batch_edit → 使用精确的令牌值构建 UI
143	```

People who liked this also viewed

6 picks

Type

ardot-style-guide

118stars12forks

View on GitHub

How to install ardot-style-guide?

balabalabalading/huuuuuuho-skills/ardot-style-guide

$npx -y skills add balabalabalading/huuuuuuho-skills --skill ardot-style-guide

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# ardot-style-guide — 样式指南搜索与构建
2
3	通过 `search_style_guide` → `build_style_guide` 工具链发现和应用完整的设计系统。Ardot 独有的能力，Figma 没有等效功能。
4
5	## 技能边界
6
7	- 当用户想要从头建立视觉风格时使用此技能
8	- 在任何创建带样式 UI（颜色、排版）的 `batch_edit` 之前使用此技能
9	- 如果用户已有已建立的设计系统和已知令牌，可跳过此技能
10	- `build_style_guide` 的输出是权威性的 — 所有下游工具必须严格遵循其值
11
12	## 前置条件
13
14	- 必须已调用 `fetch_editor_state(includeSchema: true)`
15	- 应为目标设计类型加载 `fetch_guidelines(topic)`
16
17	---
18
19	## search_style_guide — 三轮回退协议
20
21	### 第一轮：关键词搜索
22
23	提供特定关键词以定位用户意图。
24
25	```
26	search_style_guide({
27	"topic": "landing-page", // 或 web-app、mobile-app、slides、table
28	"designKeywords": "SaaS dashboard modern clean professional",
29	"colorKeywords": "dark mode cool blue professional",
30	"typographyKeywords": "modern sans-serif clean readable",
31	"layoutKeywords": "dashboard analytics cards grid"
32	})
33	```
34
35	收到结果后，逐一审查每个领域：
36
37	- style：样式类别是否与请求的视觉风格匹配？
38	- color：检查背景、卡片和前景值。如果用户想要深色模式但所有背景值都是浅色（#F_xxxx 范围），则此领域没有合适匹配。
39	- typography：情绪是否匹配？字体是否可用（使用 `get_available_fonts` 检查）？
40	- layout：模式是否适合页面类型？
41
42	如果某个领域的所有候选都合适 → 继续到 `build_style_guide`。
43
44	### 第二轮：完整目录（如果任何领域没有合适匹配）
45
46	对于第一轮没有合适匹配的领域，再次调用 `search_style_guide`，对该领域的关键词使用 `true` 以获取完整目录：
47
48	```
49	search_style_guide({
50	"topic": "landing-page",
51	"designKeywords": "SaaS dashboard",
52	"colorKeywords": true, // 颜色的完整目录
53	"typographyKeywords": true // 排版的完整目录
54	})
55	```
56
57	### 第三轮：自身设计知识（仅在第二轮也失败时）
58
59	仅对第二轮后仍无合适匹配的领域，你可以使用自己的设计知识。这应该很少见。
60
61	---
62
63	## build_style_guide — 权威性约束
64
65	一旦你在所有领域做出选择，调用 `build_style_guide`：
66
67	```json
68	build_style_guide({
69	"selections": {
70	"style": 2, // 搜索结果中的索引或名称
71	"color": 1,
72	"typography": 3,
73	"layout": 0
74	}
75	})
76	```
77
78	### 关键：返回的设计系统是权威性的
79
80	`build_style_guide` 响应提供必须使用的精确值：
81
82	- 颜色：使用精确的 `#HEX` 或 `{r, g, b}` 值 — 不要调整
83	- 排版：使用精确指定的字体系列、大小、粗细
84	- 边框半径：使用精确的 px 值
85	- 间距：使用精确的 px 值
86	- 效果：使用精确的阴影/模糊参数
87
88	> 硬性关卡：如果设计系统说背景是 `#FAF5FF`，使用 `#FAF5FF`
89	> （转换为 0–1 范围用于 batch_edit）。如果你意识到它与用户意图冲突
90	> （例如，用户想要深色但得到浅色），返回 `search_style_guide` 使用更正后的关键词
91	> — 不要静默覆盖值。
92
93	### 将样式指南值转换为 batch_edit
94
95	样式指南十六进制颜色 → batch_edit {r, g, b} 0–1 格式：
96	```
97	#FAF5FF → {r: 0.98, g: 0.96, b: 1.0}
98	#1A1A2E → {r: 0.10, g: 0.10, b: 0.18}
99	#E8714A → {r: 0.91, g: 0.44, b: 0.29}
100	```
101
102	---
103
104	## 每个领域的选择策略
105
106	### 样式
107	将样式类别名称与用户描述匹配。信任内容而非搜索分数 — 匹配意图的低分候选比不相关的高分候选更好。
108
109	### 颜色
110	具体检查背景（主表面颜色）、卡片（次表面）和前景（文本/图标）值。这三个值告诉你调色板是浅色还是深色。
111
112	### 排版
113	在选择之前使用 `get_available_fonts` 验证字体可用性。如果两种字体都不可用，字体配对就没有用。检查标题和正文字体。
114
115	### 布局
116	将模式名称与功能意图匹配。例如，"pricing" → 寻找比较/表格布局；"dashboard" → 寻找卡片网格布局。
117
118	---
119
120	## topic 参数指南
121
122	\| topic \| 用途 \| 典型 designKeywords \|
123	\|-------\|------\|---------------------\|
124	\| `landing-page` \| 营销页面、主页、促销网站 \| "hero section"、"CTA"、"features" \|
125	\| `web-app` \| SaaS 仪表板、管理面板、内部工具 \| "dashboard"、"data table"、"sidebar" \|
126	\| `mobile-app` \| iOS/Android 应用屏幕 \| "bottom nav"、"cards"、"list" \|
127	\| `slides` \| 演示文稿 \| "title slide"、"content"、"chart" \|
128	\| `table` \| 数据表和仪表板 \| "data grid"、"filters"、"pagination" \|
129
130	---
131
132	## 完整工作流程总结
133
134	```
135	1. fetch_editor_state(includeSchema: true)
136	2. fetch_guidelines(topic) → 页面类型的设计规则
137	3. get_available_fonts → 检查字体可用性
138	4. search_style_guide (第一轮) → 关键词搜索
139	5. [如需要] search_style_guide (第二轮) → 完整目录回退
140	6. build_style_guide(selections) → 获取权威设计令牌
141	7. apply_variables → 创建与令牌匹配的变量
142	8. batch_edit → 使用精确的令牌值构建 UI
143	```

People who liked this also viewed

6 picks

Type