Files
2026-07-13 21:35:48 +08:00

3.0 KiB
Raw Permalink Blame History

name, description, triggers, od
name description triggers od
docs-page 一个文档页面——内联起始导航、可滚动的文章正文、 内联结尾目录。当需求中提到"docs"、"documentation"、"guide"、"API reference" 或 "tutorial" 时使用。
docs
documentation
guide
tutorial
api reference
文档
mode platform scenario preview design_system craft
prototype desktop engineering
type entry
html index.html
requires sections
true
color
typography
layout
components
requires
typography
typography-hierarchy
typography-hierarchy-editorial
rtl-and-bidi

文档页面技能

在单个 HTML 文件中生成一个三栏文档页面。

工作流程

  1. 阅读活跃的 DESIGN.md(已注入上方)。正文使用 body 类型 token;代码使用 mono token;遵守行高和最大宽度规则。
  2. 从需求中选取一个主题——页面看起来应该像真实的文档,而非通用线框图。包含具体的 API 名称、命令示例、合理的参数。
  3. 布局三个区域,在内联轴上表达,以便布局在 dir="rtl" 下正确翻转:
    • 内联起始导航240280px,sticky):分组的链接列表,当前页面加粗,并在 inline-start 边缘显示强调色条纹。3–5 组,每组 4–8 个链接。
    • 文章正文(最大宽度约 720px,在中间列居中):H1、引导段落、H2 章节、代码块、提示框(注意/警告)、内联链接、列表。
    • 内联结尾目录200240pxsticky):「本页内容」包含 H2/H3 锚点,当前章节随用户滚动高亮。
  4. 编写单个 HTML 文档:
    • <!doctype html></html>,所有 CSS 内联。
    • 三列布局使用 CSS Grid;侧栏使用 sticky 定位。
    • 代码块:mono token、柔和底色填充、复制按钮示意(仅视觉——无需 JS)。
    • 每个 H2/H3 都带有锚点 ID,以便目录链接生效。
    • 在导航、文章和目录上添加 data-od-id
  5. 正文:撰写至少 350 词的可信文档。至少包含一条 shell 命令、一段代码片段(5–15 行)、一个提示框、一个表格。
  6. 自我检查
    • 正文文本在设计系统的最佳行长处换行(60–75 字符)。
    • 代码使用设计系统的 mono token,而非通用的 monospace
    • 强调色克制使用——仅用于当前导航项、链接、一个提示框边框。不用于正文。
    • 页面在 1280w 下可读,在 900w 以下优雅折叠(目录消失,导航变为顶部抽屉)。
    • 在侧栏和强调色条纹上使用逻辑 CSSmargin-inline-startborder-inline-startinset-inline-endtext-align: start),以便布局在 dir="rtl" 下正确翻转。

输出契约

<artifact> 标签之间输出:

<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>

artifact 前保留一句话描述,之后不跟任何内容。