3.0 KiB
3.0 KiB
name, description, triggers, od
| name | description | triggers | od | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| docs-page | 一个文档页面——内联起始导航、可滚动的文章正文、 内联结尾目录。当需求中提到"docs"、"documentation"、"guide"、"API reference" 或 "tutorial" 时使用。 |
|
|
文档页面技能
在单个 HTML 文件中生成一个三栏文档页面。
工作流程
- 阅读活跃的 DESIGN.md(已注入上方)。正文使用 body 类型 token;代码使用 mono token;遵守行高和最大宽度规则。
- 从需求中选取一个主题——页面看起来应该像真实的文档,而非通用线框图。包含具体的 API 名称、命令示例、合理的参数。
- 布局三个区域,在内联轴上表达,以便布局在
dir="rtl"下正确翻转:- 内联起始导航(240–280px,sticky):分组的链接列表,当前页面加粗,并在
inline-start边缘显示强调色条纹。3–5 组,每组 4–8 个链接。 - 文章正文(最大宽度约 720px,在中间列居中):H1、引导段落、H2 章节、代码块、提示框(注意/警告)、内联链接、列表。
- 内联结尾目录(200–240px,sticky):「本页内容」包含 H2/H3 锚点,当前章节随用户滚动高亮。
- 内联起始导航(240–280px,sticky):分组的链接列表,当前页面加粗,并在
- 编写单个 HTML 文档:
<!doctype html>到</html>,所有 CSS 内联。- 三列布局使用 CSS Grid;侧栏使用 sticky 定位。
- 代码块:mono token、柔和底色填充、复制按钮示意(仅视觉——无需 JS)。
- 每个 H2/H3 都带有锚点 ID,以便目录链接生效。
- 在导航、文章和目录上添加
data-od-id。
- 正文:撰写至少 350 词的可信文档。至少包含一条 shell 命令、一段代码片段(5–15 行)、一个提示框、一个表格。
- 自我检查:
- 正文文本在设计系统的最佳行长处换行(60–75 字符)。
- 代码使用设计系统的 mono token,而非通用的
monospace。 - 强调色克制使用——仅用于当前导航项、链接、一个提示框边框。不用于正文。
- 页面在 1280w 下可读,在 900w 以下优雅折叠(目录消失,导航变为顶部抽屉)。
- 在侧栏和强调色条纹上使用逻辑 CSS(
margin-inline-start、border-inline-start、inset-inline-end、text-align: start),以便布局在dir="rtl"下正确翻转。
输出契约
在 <artifact> 标签之间输出:
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>
artifact 前保留一句话描述,之后不跟任何内容。