structured-artifact
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseStructured Artifact
结构化制品
A structured artifact is plain HTML that opens from and works on a
phone. Load first — it decides what each page shows
and in what order; this skill builds it.
file:///information-hierarchy结构化制品是可通过打开且在手机上可用的纯HTML文件。请先加载——它决定了每个页面展示的内容及顺序；本技能负责构建它。
file:///information-hierarchyOne page or several
单页或多页
Start from one . Its first viewport carries the answer, and depth
discloses in place — , popovers, a collapsible detail panel. Grow
into a folder ( + child pages + ) when readers need
whole pages per branch: the index becomes a map with links, and each child
page stands alone with its own lede. has the
folder mechanics.
index.html<details>index.htmlshared.cssresources/multi-page-site.md从单个开始。它的首个视口承载核心答案，深层内容通过、弹出框、可折叠详情面板就地展示。当读者需要为每个分支单独创建完整页面时，可扩展为文件夹结构（ + 子页面 + ）：此时索引页变为带有链接的导航地图，每个子页面独立存在并拥有自己的导语。中包含文件夹结构的实现机制。
index.html<details>index.htmlshared.cssresources/multi-page-site.mdBuild so it keeps working
构建确保长期可用
Everything ships static — plain tags, zero build step — so the
artifact opens anywhere, years later, with nothing installed. CDN tags are
the default; vendor the scripts into the folder when the artifact must work
offline (). Resource snippets show the shape
of each library's use, pinned only to a major version — before building,
web-search the library's current version and syntax when anything looks
dated, rather than trusting the snippet as frozen truth. Design for a
narrow viewport and let wider layouts be enhancements; touch targets stay
≥ 44px and diagrams pan and pinch. Drive colors from CSS custom properties on
, default light, with a ☀/🌙 toggle that adds to —
readers get a readable page in daylight and a choice at night.
<script>resources/layout-and-theme.md:root.dark<html>resources/layout-and-theme.md所有内容均以静态形式交付——使用纯标签，无需构建步骤——因此该制品无需安装任何软件，多年后仍可在任意环境下打开。默认使用CDN标签；若制品需支持离线使用，请将脚本打包到文件夹中（详见）。资源代码片段展示了各库的使用方式，仅锁定主版本——构建前，若发现任何内容过时，请通过网络搜索该库的当前版本和语法，不要将代码片段视为一成不变的标准。优先针对窄视口设计，宽屏布局仅作为增强；触摸目标尺寸保持≥ 44px，图表支持平移和缩放。通过上的CSS自定义属性控制颜色，默认浅色模式，提供☀/🌙切换按钮，点击后为添加类——读者在白天可获得易读的页面，夜晚也有选择的余地。
<script>resources/layout-and-theme.md:root<html>.darkresources/layout-and-theme.mdVerify the end state
验证最终状态
Open the artifact in a browser before calling it done — a snippet that
looked right in the editor still fails at runtime (a CDN URL 404s, a library
changed its API, a diagram overflows). Check what a reader meets: the first
viewport carries the answer, every page renders at ~375px width, the theme
toggle flips both text and embedded content, links between pages resolve,
and Mermaid diagrams render correctly.
在完成构建前，请在浏览器中打开制品进行验证——编辑器中看似正确的代码片段仍可能在运行时出错（例如CDN URL返回404、库更新了API、图表溢出等）。检查读者会遇到的情况：首个视口承载核心答案、所有页面在约375px宽度下正常渲染、主题切换可同时切换文本和嵌入内容、页面间链接可正常跳转、Mermaid图表渲染正确。
Enrichments
功能增强
Mix and match resources and patterns as needed, starting with the simplest
pattern and adding complexity only when information hierarchy calls for it.
Load a resource when a beat calls for its pattern:
| Pattern | When a beat needs | Resource |
|---|---|---|
| Multi-page site | Index + child pages, nav, cross-links | |
| Mockup | Wireframe or annotated plan the reader must see | |
| Diagram | Dependencies, flow, system maps | |
| Data table | Records with sortable/filterable columns | |
| Data chart | Quantities, trends, distributions | |
| Timeline | Chronological events with detail | |
| Tree / TOC | Hierarchy navigation, document outline | |
| Card grid | Items with summary + expandable detail | |
| Diff / comparison | Before/after, version diff | |
For custom node rendering, drag, or live filtering on graphs beyond what
Mermaid offers, see .
resources/experimental-react-flow.md根据需要组合使用资源和模式，从最简单的模式开始，仅当信息层级需要时才增加复杂度。
当需要对应模式时加载相应资源：
| 模式 | 适用场景 | 资源 |
|---|---|---|
| 多页网站 | 索引页+子页面、导航、跨链接 | |
| 原型图 | 读者需查看的线框图或带注释的规划图 | |
| 图表 | 依赖关系、流程、系统地图 | |
| 数据表格 | 带有可排序/可筛选列的记录 | |
| 数据图表 | 数量、趋势、分布 | |
| 时间线 | 带详情的按时间顺序事件 | |
| 树形结构/目录 | 层级导航、文档大纲 | |
| 卡片网格 | 带有摘要+可展开详情的条目 | |
| 差异对比 | 前后对比、版本差异 | |
若需要自定义节点渲染、拖拽或Mermaid无法支持的图表实时筛选功能，请查看。
resources/experimental-react-flow.md