docs-page

文档页面技能

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

工作流

1. 阅读当前生效的 DESIGN.md（已注入上文）。正文使用正文类型令牌；代码使用等宽令牌；遵循行高和最大宽度规则。
2. 从简介中选择一个主题——页面应看起来像真实文档，而不是通用线框图。使用具体的 API 名称、命令示例和合理的参数。
3. 布局三个区域，使用行内轴方向进行表达，以便在 dir="rtl" 下正确翻转布局：
   • 行内起始侧导航（240–280px，粘性定位）：分组链接列表，当前页面加粗，并在行内起始边缘添加强调色条。3–5 个分组，每组 4–8 个链接。
   • 文章正文（最大宽度约 720px，在中间列居中）：H1 标题、导语段落、H2 章节、代码块、提示框（注意／警告）、行内链接、列表。
   • 行内末尾侧目录（200–240px，粘性定位）：“本页内容”及 H2/H3 锚点，随用户滚动高亮当前章节。
4. 编写一个 HTML 文档：
   • 从 <!doctype html> 到 </html>，所有 CSS 均内联。
   • 三栏使用 CSS Grid；侧栏使用粘性定位。
   • 代码块：使用等宽令牌、柔和的表面填充，以及复制按钮样式（仅视觉效果——无需 JS）。
   • 为每个 H2/H3 添加锚点 ID，确保目录链接有效。
   • 在导航、文章和目录上添加 data-od-id。
5. 正文：撰写至少 350 个单词、可信的文档内容。至少包含一条 shell 命令、一段代码片段（5–15 行）、一个提示框和一张表格。
6. 自检：
   • 正文应符合设计系统推荐的行长，约为 60–75 个字符。
   • 代码应使用设计系统的等宽令牌，而非通用的 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 前写一个句子，之后不写任何内容。