docs-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Docs Page Skill

Produce a single, three-column documentation page in one HTML file.

生成一个包含三栏布局的单HTML文件文档页面。

Workflow

工作流程

Read the active DESIGN.md (injected above). Use the body type token for prose; the mono token for code; respect line-height and max-width rules.
Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
Lay out three regions:
- Left nav (240–280px, sticky): grouped link list, current page bolded with a left-edge accent stripe. 3–5 groups of 4–8 links.
- Article body (max-width ~720px, centered in the middle column): H1, lede paragraph, H2 sections, code blocks, callout boxes (note / warning), inline links, lists.
- Right TOC (200–240px, sticky): "On this page" with the H2/H3 anchors, current section highlighted as the user scrolls.
Write a single HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , all CSS inline.
- CSS Grid for the three columns; sticky positioning for the rails.
- Code blocks: monospace token, soft surface fill, copy-button affordance (visual only — no JS needed).
- Anchor IDs on every H2/H3 so the TOC links work.
- ```
data-od-id
```
  on the nav, article, and TOC.
Prose: write at least 350 words of believable docs. Include at least one shell command, one code snippet (5–15 lines), one callout, one table.
Self-check:
- Body text wraps at the DS line-length sweet spot (60–75 chars).
- Code uses the DS mono token, not generic
```
monospace
```
  .
- Accent is restrained — used for active nav item, links, one callout border. Not on body text.
- Page is readable at 1280w and collapses gracefully below 900w (TOC drops out, nav becomes a top drawer).

读取当前的DESIGN.md（已注入上方）。正文使用body类型令牌；代码使用mono类型令牌；遵循行高和最大宽度规则。
从需求中选择主题——页面应看起来像真实的文档，而非通用线框。需包含具体的API名称、命令示例、合理的参数。
布局三个区域：
- 左侧导航栏（240–280像素，粘性定位）：分组链接列表，当前页面链接加粗并带有左侧强调条纹。包含3–5组链接，每组4–8个。
- 文章主体（最大宽度约720像素，居中于中间栏）：包含一级标题（H1）、引导段落、二级标题（H2）章节、代码块、提示框（说明/警告）、内联链接、列表。
- 右侧目录（TOC）（200–240像素，粘性定位）：显示“On this page”（本页内容）及H2/H3锚点，用户滚动时高亮当前章节。
编写单个HTML文档：
- ```
<!doctype html>
```
  through
```
</html>
```
  , all CSS inline.
- 使用CSS Grid实现三栏布局；侧边栏使用粘性定位。
- 代码块：使用monospace令牌、柔和背景填充、复制按钮样式（仅视觉效果——无需JS实现）。
- 为所有H2/H3添加锚点ID，使目录链接可正常跳转。
- 为导航栏、文章主体和目录添加
```
data-od-id
```
  属性。
正文内容：撰写至少350字的真实可信文档内容。需包含至少一个Shell命令、一段代码片段（5–15行）、一个提示框、一张表格。
自我检查：
- 正文文本换行符位于DS行长度最佳位置（60–75字符）。
- 代码使用DS mono令牌，而非通用的
```
monospace
```
  。
- 强调色使用克制——仅用于当前导航项、链接、提示框边框。不应用于正文文本。
- 页面在1280像素宽度下可读，且在900像素宽度以下可优雅折叠（目录隐藏，导航栏变为顶部抽屉式）。

Output contract

输出约定

Emit between

<artifact>

tags:

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

One sentence before the artifact, nothing after.

输出内容需包裹在

<artifact>

标签内：

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

在artifact标签前添加一句话，标签后无内容。