Back to Details

docs-page

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Docs Page Skill

Docs Page Skill

Produce a single, three-column documentation page in one HTML file.
生成一个包含三栏布局的单HTML文件文档页面。

Workflow

工作流程

  1. 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.
  2. Pick a topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
  3. 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.
  4. 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.
  5. 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.
  6. 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).
  1. 读取当前的DESIGN.md（已注入上方）。正文使用body类型令牌；代码使用mono类型令牌；遵循行高和最大宽度规则。
  2. 从需求中选择主题——页面应看起来像真实的文档，而非通用线框。需包含具体的API名称、命令示例、合理的参数。
  3. 布局三个区域：
    • 左侧导航栏（240–280像素，粘性定位）：分组链接列表，当前页面链接加粗并带有左侧强调条纹。包含3–5组链接，每组4–8个。
    • 文章主体（最大宽度约720像素，居中于中间栏）：包含一级标题（H1）、引导段落、二级标题（H2）章节、代码块、提示框（说明/警告）、内联链接、列表。
    • 右侧目录（TOC）（200–240像素，粘性定位）：显示“On this page”（本页内容）及H2/H3锚点，用户滚动时高亮当前章节。
  4. 编写单个HTML文档： 
    • <!doctype html>
      through 
      </html>
      , all CSS inline.
    • 使用CSS Grid实现三栏布局；侧边栏使用粘性定位。
    • 代码块：使用monospace令牌、柔和背景填充、复制按钮样式（仅视觉效果——无需JS实现）。
    • 为所有H2/H3添加锚点ID，使目录链接可正常跳转。
    • 为导航栏、文章主体和目录添加
      data-od-id
      属性。
  5. 正文内容：撰写至少350字的真实可信文档内容。需包含至少一个Shell命令、一段代码片段（5–15行）、一个提示框、一张表格。
  6. 自我检查：
    • 正文文本换行符位于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标签前添加一句话，标签后无内容。