Paper Editorial · 纸感编辑:米白画布
paper-editorialv1.0.0
主题
MIT
纸感编辑:米白画布、墨色正文、刊头朱红;适用:浅色 only;大标题衬线加粗;红只作强调不铺大底
不适用场景
禁用:深色底;细字重大标题;文字贴边
载入预览…
卡片与舞台里跑的是包内真实的预览页;WebGL 类需点“运行预览”才会建立渲染上下文。
取用方式
固定版本(CDN)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nakamotosai/sai-assets@pack/paper-editorial@1.0.0/packs/paper-editorial/css/default.css">raw 直取(跟随 main)
curl -O https://raw.githubusercontent.com/nakamotosai/sai-assets/main/packs/paper-editorial/SKILL.md仓库内落地
python scripts/apply.py paper-editorial --to <项目目录>整包下载
https://assets.ouuut.com/downloads/paper-editorial.zip源码与规则
pack.json{
"schema": 1,
"id": "paper-editorial",
"title": "Paper Editorial · 纸感编辑:米白画布",
"kind": "theme",
"category": "themes",
"version": "1.0.0",
"license": "MIT",
"attribution": [
{
"name": "Sai Theme Lab · themes/paper-editorial.json",
"license": "MIT",
"what": "原色板来源(旧库原子,只读取用)"
}
],
"origin": {
"project": "sai-theme-lab",
"path": "themes/paper-editorial.json",
"derived_from": null
},
"entry": "SKILL.md",
"files": {
"tokens": [
"tokens/absolute.json",
"tokens/index.json",
"tokens/semantic/paper-editorial.json"
],
"css": [
"css/default.css",
"css/all.css",
"css/themes.css"
],
"usage": "docs/usage.md",
"assert": "scripts/assert_tokens.py",
"preview": "preview/index.html"
},
"tags": [
"light",
"theme",
"paper",
"ink",
"red",
"editorial"
],
"when": "纸感编辑:米白画布、墨色正文、刊头朱红;适用:浅色 only;大标题衬线加粗;红只作强调不铺大底",
"not_for": "禁用:深色底;细字重大标题;文字贴边",
"default_variant": "paper-editorial",
"verified": {
"date": "2026-11-03",
"how": "python packs/paper-editorial/scripts/assert_tokens.py",
"evidence": "PASS assert_tokens paper-editorial | variants=1 keys=19 hex=18 rgba=0 effects=1 contrast=ink/bg=16.13 onAccent/accent=5.71 | not_in_palette=[]"
},
"canonical_home": null
}
css/default.css/* Default = paper-editorial — 只链接这一份即最快 apply */
/* Paper Editorial — 纸感编辑:米白画布、墨色正文、刊头朱红 */
/* 语义变量与 --theme-* 别名双发;字体/圆角透传源令牌 */
:root,
[data-theme="paper-editorial"],
.theme-paper-editorial {
color-scheme: light;
--bg: #F7F3EB;
--theme-bg: #F7F3EB;
--bg-deep: #EFE9DF;
--theme-bg-deep: #EFE9DF;
--surface: #FFFCF7;
--theme-surface: #FFFCF7;
--surface-2: #EFE9DF;
--theme-surface-2: #EFE9DF;
--border: #D4CDC2;
--theme-border: #D4CDC2;
--ink: #1A1714;
--theme-ink: #1A1714;
--ink-muted: #6B6560;
--theme-ink-muted: #6B6560;
--ink-dim: #8A847C;
--theme-ink-dim: #8A847C;
--accent: #C41E3A;
--theme-accent: #C41E3A;
--accent-2: #9A1830;
--theme-accent-2: #9A1830;
--on-accent: #FFFCF7;
--theme-on-accent: #FFFCF7;
--red: #C41E3A;
--theme-red: #C41E3A;
--green: #2F6B4F;
--theme-green: #2F6B4F;
--aqua: #3D6B6B;
--theme-aqua: #3D6B6B;
--blue: #2C4A6E;
--theme-blue: #2C4A6E;
--purple: #6B4A6B;
--theme-purple: #6B4A6B;
--link: #C41E3A;
--theme-link: #C41E3A;
--code-bg: #EFE9DF;
--theme-code-bg: #EFE9DF;
--shadow: none;
--theme-shadow: none;
--radius-sm: 2px;
--theme-radius-sm: 2px;
--radius-md: 4px;
--theme-radius-md: 4px;
--radius-lg: 8px;
--theme-radius-lg: 8px;
--font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--theme-font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", Consolas, monospace;
--theme-font-mono: "JetBrains Mono", Consolas, monospace;
}
css/all.css/* Paper Editorial — 全部变体 + 基础 chrome */
/* 纸感编辑:米白画布、墨色正文、刊头朱红 */
/* 含 :root:单主题整站直接链接本文件 */
:root,
[data-theme="paper-editorial"],
.theme-paper-editorial {
color-scheme: light;
--bg: #F7F3EB;
--theme-bg: #F7F3EB;
--bg-deep: #EFE9DF;
--theme-bg-deep: #EFE9DF;
--surface: #FFFCF7;
--theme-surface: #FFFCF7;
--surface-2: #EFE9DF;
--theme-surface-2: #EFE9DF;
--border: #D4CDC2;
--theme-border: #D4CDC2;
--ink: #1A1714;
--theme-ink: #1A1714;
--ink-muted: #6B6560;
--theme-ink-muted: #6B6560;
--ink-dim: #8A847C;
--theme-ink-dim: #8A847C;
--accent: #C41E3A;
--theme-accent: #C41E3A;
--accent-2: #9A1830;
--theme-accent-2: #9A1830;
--on-accent: #FFFCF7;
--theme-on-accent: #FFFCF7;
--red: #C41E3A;
--theme-red: #C41E3A;
--green: #2F6B4F;
--theme-green: #2F6B4F;
--aqua: #3D6B6B;
--theme-aqua: #3D6B6B;
--blue: #2C4A6E;
--theme-blue: #2C4A6E;
--purple: #6B4A6B;
--theme-purple: #6B4A6B;
--link: #C41E3A;
--theme-link: #C41E3A;
--code-bg: #EFE9DF;
--theme-code-bg: #EFE9DF;
--shadow: none;
--theme-shadow: none;
--radius-sm: 2px;
--theme-radius-sm: 2px;
--radius-md: 4px;
--theme-radius-md: 4px;
--radius-lg: 8px;
--theme-radius-lg: 8px;
--font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--theme-font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", Consolas, monospace;
--theme-font-mono: "JetBrains Mono", Consolas, monospace;
}
/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body, system-ui, sans-serif);
line-height: 1.6;
}
.theme-apply a,
[data-theme-apply] a {
color: var(--link, var(--accent));
}
.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
font-family: var(--font-mono, ui-monospace, monospace);
background: var(--code-bg, var(--surface2, var(--surface)));
border-radius: var(--radius-sm, 4px);
}
.theme-apply .panel,
[data-theme-apply] .panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 6px);
box-shadow: var(--shadow, none);
}
.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
background: var(--accent);
color: var(--on-accent);
border-radius: var(--radius-sm, 4px);
}
css/themes.css/* Paper Editorial · 共存版:只出 [data-theme] / .theme-<id> 作用域,不含 :root
多主题应用(站点自带主题切换器)用这一份,避免全局覆盖项目自己的 token;
单主题直接应用请用 css/default.css。color-scheme 只在 [data-theme] 块里给。 */
[data-theme="paper-editorial"],
.theme-paper-editorial {
color-scheme: light;
--bg: #F7F3EB;
--theme-bg: #F7F3EB;
--bg-deep: #EFE9DF;
--theme-bg-deep: #EFE9DF;
--surface: #FFFCF7;
--theme-surface: #FFFCF7;
--surface-2: #EFE9DF;
--theme-surface-2: #EFE9DF;
--border: #D4CDC2;
--theme-border: #D4CDC2;
--ink: #1A1714;
--theme-ink: #1A1714;
--ink-muted: #6B6560;
--theme-ink-muted: #6B6560;
--ink-dim: #8A847C;
--theme-ink-dim: #8A847C;
--accent: #C41E3A;
--theme-accent: #C41E3A;
--accent-2: #9A1830;
--theme-accent-2: #9A1830;
--on-accent: #FFFCF7;
--theme-on-accent: #FFFCF7;
--red: #C41E3A;
--theme-red: #C41E3A;
--green: #2F6B4F;
--theme-green: #2F6B4F;
--aqua: #3D6B6B;
--theme-aqua: #3D6B6B;
--blue: #2C4A6E;
--theme-blue: #2C4A6E;
--purple: #6B4A6B;
--theme-purple: #6B4A6B;
--link: #C41E3A;
--theme-link: #C41E3A;
--code-bg: #EFE9DF;
--theme-code-bg: #EFE9DF;
--shadow: none;
--theme-shadow: none;
--radius-sm: 2px;
--theme-radius-sm: 2px;
--radius-md: 4px;
--theme-radius-md: 4px;
--radius-lg: 8px;
--theme-radius-lg: 8px;
--font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--theme-font-display: "Noto Serif SC", "Source Han Serif SC", serif;
--font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", Consolas, monospace;
--theme-font-mono: "JetBrains Mono", Consolas, monospace;
}
/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body, system-ui, sans-serif);
line-height: 1.6;
}
.theme-apply a,
[data-theme-apply] a {
color: var(--link, var(--accent));
}
.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
font-family: var(--font-mono, ui-monospace, monospace);
background: var(--code-bg, var(--surface2, var(--surface)));
border-radius: var(--radius-sm, 4px);
}
.theme-apply .panel,
[data-theme-apply] .panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 6px);
box-shadow: var(--shadow, none);
}
.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
background: var(--accent);
color: var(--on-accent);
border-radius: var(--radius-sm, 4px);
}
tokens/absolute.json{
"id": "paper-editorial",
"name": "Paper Editorial",
"mode": "light",
"signature": "纸感编辑:米白画布、墨色正文、刊头朱红",
"source": "themes/paper-editorial.json",
"colors": {
"bg": "#F7F3EB",
"bgDeep": "#EFE9DF",
"surface": "#FFFCF7",
"surface2": "#EFE9DF",
"border": "#D4CDC2",
"ink": "#1A1714",
"inkMuted": "#6B6560",
"inkDim": "#8A847C",
"accent": "#C41E3A",
"accent2": "#9A1830",
"onAccent": "#FFFCF7",
"red": "#C41E3A",
"green": "#2F6B4F",
"aqua": "#3D6B6B",
"blue": "#2C4A6E",
"purple": "#6B4A6B",
"link": "#C41E3A",
"codeBg": "#EFE9DF",
"shadow": "none"
}
}
tokens/index.json{
"default": "paper-editorial",
"themes": [
{
"id": "paper-editorial",
"name": "Paper Editorial",
"mode": "light",
"path": "tokens/semantic/paper-editorial.json",
"default": true
}
]
}
tokens/semantic/paper-editorial.json{
"id": "paper-editorial",
"name": "Paper Editorial",
"mode": "light",
"signature": "纸感编辑:米白画布、墨色正文、刊头朱红",
"colors": {
"bg": "#F7F3EB",
"bgDeep": "#EFE9DF",
"surface": "#FFFCF7",
"surface2": "#EFE9DF",
"border": "#D4CDC2",
"ink": "#1A1714",
"inkMuted": "#6B6560",
"inkDim": "#8A847C",
"accent": "#C41E3A",
"accent2": "#9A1830",
"onAccent": "#FFFCF7",
"red": "#C41E3A",
"green": "#2F6B4F",
"aqua": "#3D6B6B",
"blue": "#2C4A6E",
"purple": "#6B4A6B",
"link": "#C41E3A",
"codeBg": "#EFE9DF",
"shadow": "none"
},
"fonts": {
"display": "\"Noto Serif SC\", \"Source Han Serif SC\", serif",
"body": "\"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
"mono": "\"JetBrains Mono\", Consolas, monospace"
},
"radius": {
"sm": "2px",
"md": "4px",
"lg": "8px"
},
"derived": {
"bg": "bg",
"bgDeep": "bgDeep",
"surface": "surface",
"surface2": "surface2",
"border": "border",
"ink": "ink",
"inkMuted": "inkMuted",
"inkDim": "inkDim",
"accent": "accent",
"accent2": "accent2",
"onAccent": "onAccent",
"red": "red",
"green": "green",
"aqua": "aqua",
"blue": "blue",
"purple": "purple",
"link": "link",
"codeBg": "codeBg"
},
"a11y": {
"contrast_min": 4.5,
"pairs": {
"ink/bg": 16.13,
"onAccent/accent": 5.71
},
"adjusted": false,
"notes": [
"源里 --link 与 --accent 同为 #C41E3A(照源发;同屏同时出现时用 --accent-2 或下划线区分)"
]
}
}
docs/usage.md# Paper Editorial · 用法与配对规则
`paper-editorial` · mode `light` · 默认变体 `paper-editorial`
**signature**:纸感编辑:米白画布、墨色正文、刊头朱红
- 原色表:`tokens/absolute.json`(源盘 `colors` 原样,不改名不近似)。
- 语义映射:`tokens/semantic/paper-editorial.json`(`derived` 记每个语义键取自哪个源键;`a11y` 记对比度实测)。
- 变量双发:裸语义名(`--bg`)与 `--theme-` 前缀别名(`--theme-bg`)同值,便于接既有项目。
- 你不需要发明 hex:缺哪个角色就用对应变量,不要拿别的色近似。
## 变体表
| id | mode | 何时用 |
|---|---|---|
| `paper-editorial` | `light` | **默认**;纸感编辑:米白画布、墨色正文、刊头朱红 |
## 变量表(语义名 ↔ 前缀别名)
| 语义键 | CSS 变量 | 别名 |
|---|---|---|
| `bg` | `--bg` | `--theme-bg` |
| `bgDeep` | `--bg-deep` | `--theme-bg-deep` |
| `surface` | `--surface` | `--theme-surface` |
| `surface2` | `--surface-2` | `--theme-surface-2` |
| `border` | `--border` | `--theme-border` |
| `ink` | `--ink` | `--theme-ink` |
| `inkMuted` | `--ink-muted` | `--theme-ink-muted` |
| `inkDim` | `--ink-dim` | `--theme-ink-dim` |
| `accent` | `--accent` | `--theme-accent` |
| `accent2` | `--accent-2` | `--theme-accent-2` |
| `onAccent` | `--on-accent` | `--theme-on-accent` |
| `red` | `--red` | `--theme-red` |
| `green` | `--green` | `--theme-green` |
| `aqua` | `--aqua` | `--theme-aqua` |
| `blue` | `--blue` | `--theme-blue` |
| `purple` | `--purple` | `--theme-purple` |
| `link` | `--link` | `--theme-link` |
| `codeBg` | `--code-bg` | `--theme-code-bg` |
| `shadow` | `--shadow` | `--theme-shadow` |
## 配对规则(谁配谁)
| 用途 | 变量 | 口径 |
|---|---|---|
| 正文 / 段落 | `--ink` | 页面主文字色,始终用于 `--bg` 之上 |
| 次要文字 | `--ink-muted` / `--ink-dim` | 说明、元信息、时间戳;`--ink-muted` 比 `--ink-dim` 更接近正文 |
| 卡面 / 面板 | `--surface` + `--border` | 卡底用 `--surface`,描边用 `--border`;需要抬升时 `--surface-2` |
| 主按钮 | `--accent` + `--on-accent` | 一个视区只放一个主 CTA;文字色必须用 `--on-accent`(实测 5.71:1) |
| 链接 | `--link` | 链接一律用 `--link`;**强调色(`--accent`)不与链接同色** —— 本主题源里 `--link` 与 `--accent` 同为 `#C41E3A`;同屏同时出现时,链接补下划线或改用 `--accent-2`,按钮保持 `--accent` |
| 危险 / 破坏性 | `--red` | 删除、错误、警报 |
| 成功 | `--green` | 通过、已完成 |
| 页面底 | `--bg` / `--bg-deep` | 大底用 `--bg`,更深的分层用 `--bg-deep` |
一行口径:正文 `--ink`,次要 `--ink-muted`/`--ink-dim`,卡面 `--surface`+`--border`,主按钮 `--accent`+`--on-accent`,链接 `--link`,危险 `--red`,成功 `--green`;强调色不做链接色。
## 字体配方(源 `fonts` 透传)
| 角色 | 变量 | 栈 |
|---|---|---|
| `display` | `--font-display` | "Noto Serif SC", "Source Han Serif SC", serif |
| `body` | `--font-body` | "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif |
| `mono` | `--font-mono` | "JetBrains Mono", Consolas, monospace |
- 标题用 `var(--font-display)`,正文 `var(--font-body)`,代码/数字 `var(--font-mono)`;字重与字号档位不在本包内,按下方 `do` 的约束落地。
## 圆角(源 `radius` 透传)
| 变量 | 值 |
|---|---|
| `--radius-sm` | 2px |
| `--radius-md` | 4px |
| `--radius-lg` | 8px |
## 推荐做法(源 `do`)
- 浅色 only
- 大标题衬线加粗
- 红只作强调不铺大底
## 反模式(源 `dont`)
- 深色底
- 细字重大标题
- 文字贴边
## 对比度实测(WCAG,自写公式)
| 组合 | 实测 | 门槛 |
|---|---|---|
| `ink` on `bg` | 16.13:1 | ≥ 4.5:1 |
| `onAccent` on `accent` | 5.71:1 | ≥ 4.5:1 |
### 语义层留痕(透明记录)
- 源里 --link 与 --accent 同为 #C41E3A(照源发;同屏同时出现时用 --accent-2 或下划线区分)
## 应用片段
```css
/* 单主题:把 css/default.css 全文贴进项目,或在 <head> 里 link 它 */
/* 多主题共存:link css/themes.css,用 <html data-theme="paper-editorial"> 决定何时生效(无 :root,不覆盖项目 token) */
```
```html
<html data-theme="paper-editorial" class="theme-paper-editorial" lang="zh-CN">
<link rel="stylesheet" href="css/default.css">
```
## 来源 / Provenance
- 本地来源(仅登记本机路径,已由 sanitize 处理):[本地路径已移除]
SKILL.md---
name: paper-editorial
description: "Paper Editorial(light 纸感编辑:米白画布、墨色正文、刊头朱红)。触发:Paper Editorial / paper-editorial / 纸感编辑:米白画布、墨色正文、刊头朱红。不做整站重构。"
---
# paper-editorial
让任何网页/面板变成 **Paper Editorial** 的样子,不用 agent 自己编 hex。
纸感编辑:米白画布、墨色正文、刊头朱红
## When to use
- 用户点名 Paper Editorial / paper-editorial / 纸感编辑:米白画布、墨色正文、刊头朱红
- 需要整套配色(bg / bg-deep / surface / ink / accent / 状态色)而不是单个色值
- 需要 浅色 only
- 需要 大标题衬线加粗
- 需要 红只作强调不铺大底
## When not to use
- 整站品牌设计系统(要自定义组件/字体体系)→ 用设计类 skill
- 别的主题族(用户点名其它风格)
- 深色底
- 细字重大标题
- 文字贴边
## Default
**`paper-editorial`**(mode `light`)
| role | hex |
|---|---|
| `bg` | `#F7F3EB` |
| `bgDeep` | `#EFE9DF` |
| `surface` | `#FFFCF7` |
| `ink` | `#1A1714` |
| `accent` | `#C41E3A` |
| `link` | `#C41E3A` |
| `red` | `#C41E3A` |
## Sub-themes (id → when)
| id | mode | contrast | pick when |
|---|---|---|---|
| `paper-editorial` | `light` | — | **默认**;纸感编辑:米白画布、墨色正文、刊头朱红 |
## Files
| path | use |
|---|---|
| `tokens/absolute.json` | 源盘原色表(原样,含未参与语义映射的色) |
| `tokens/index.json` | 变体目录 + default |
| `tokens/semantic/paper-editorial.json` | 语义映射 + `derived`(取源哪个键)+ `a11y`(对比度实测) |
| `css/default.css` | 默认变体一份,含 `:root`,最快 apply |
| `css/all.css` | 全部变体 + 基础 chrome,含 `:root` |
| `css/themes.css` | 共存版:同 all.css 但**无 `:root`**,只 `[data-theme]` / `.theme-<id>` 作用域 |
| `docs/usage.md` | 配对规则 / 字体配方 / 反模式(中文) |
| `preview/index.html` | 活预览(独立单文件) |
## Agent apply steps
1. **Pick variant** — 用户点名变体就用它;否则 `paper-editorial`。
2. **Read tokens** — `tokens/semantic/paper-editorial.json`(`colors` 是语义键,`derived` 说明它取自源盘哪个键)。
3. **写入 CSS 变量** — 项目已有 `--bg/--ink/--accent` 就沿用同名;否则整份贴,或同时写 `--theme-*` 别名。
4. **挂主题作用域** — `<html data-theme="paper-editorial" class="theme-paper-editorial">`;多主题站点用 `css/themes.css`。
5. **选文件** — 单主题 `css/default.css`;多主题 `css/all.css`(带 `:root`)或 `css/themes.css`(不带)。
6. **按角色套件**:
- 页面底 → `--bg` / `--bg-deep`
- 卡面面板 → `--surface` + `--border`
- 正文 → `--ink`;次要 → `--ink-muted` / `--ink-dim`
- 主按钮 → `--accent` + `--on-accent`(一屏一个 CTA)
- 链接 → `--link`(**不**用 `--accent`,强调色不做链接色)
- 危险 → `--red`;成功 → `--green`
7. **不要发明 hex** — 颜色只能来自 `tokens/absolute.json`;缺角色就跳过该变量。
8. **自检** — `python scripts/assert_tokens.py` 必须打印 `PASS assert_tokens paper-editorial`。
### Minimal `:root` snippet (`paper-editorial`)
```css
:root {
color-scheme: light;
--bg: #F7F3EB;
--bg-deep: #EFE9DF;
--surface: #FFFCF7;
--surface-2: #EFE9DF;
--border: #D4CDC2;
--ink: #1A1714;
--ink-muted: #6B6560;
--ink-dim: #8A847C;
--accent: #C41E3A;
--accent-2: #9A1830;
--on-accent: #FFFCF7;
--red: #C41E3A;
--green: #2F6B4F;
--aqua: #3D6B6B;
--blue: #2C4A6E;
--purple: #6B4A6B;
--link: #C41E3A;
--code-bg: #EFE9DF;
--shadow: none;
}
```
### HTML switch
```html
<html data-theme="paper-editorial" class="theme-paper-editorial">
<link rel="stylesheet" href="css/default.css">
```
## Hard rules
- **Never** 深色底(源 `dont`)
- **Never** 细字重大标题(源 `dont`)
- **Never** 文字贴边(源 `dont`)
## Notes
- 预览:`preview/index.html`,单文件可直接打开
- 来源与语义层修正:`docs/usage.md` 末节。