@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

package/skills/design-templates/guizang-ppt/references/checklist.md

@@ -0,0 +1,265 @@
+# 质量检查清单（Checklist）
+
+这个清单来自"一人公司"分享 PPT 的真实迭代过程。每一条都是踩过坑之后总结的，按重要性排序。
+
+生成 PPT 前，先通读一遍；生成后，逐项自检。
+
+---
+
+## 🔴 P0 · 一定不能犯的错
+
+### 0. 生成前必须通过的类名校验(最重要)
+
+**现象**：直接把 layouts.md 的骨架粘到新 HTML,结果样式全部丢失——大标题变成非衬线、数据大字报字体小得像正文、pipeline 多页糊成一坨、图片堆到浏览器底部。
+
+**根因**：如果 `template.html` 的 `<style>` 里没有这些类的定义,浏览器就 fallback 到默认样式。
+
+**做法**：
+- **生成 PPT 前,必须先 `Read` `assets/template.html`**,确认 layouts.md 里用到的类都已定义
+- 最常见遗漏的类:`h-hero / h-xl / h-sub / h-md / lead / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / frame / img-cap / callout-src`
+- 如果某个类确实缺了,**在 template.html 的 `<style>` 里补上**,不要在每页 inline 重写
+- 生成后打开浏览器,如果看到"大标题是非衬线"或"pipeline 步骤挤在一行",几乎 100% 是这个问题
+
+### 1. 不要用 emoji 作图标
+
+**现象**：在中式杂志风格里用 emoji（🎯 💡 ✅）会立刻破坏格调。
+
+**做法**：用 Lucide 图标库，CDN 方式引用：
+
+```html
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+...
+<i data-lucide="target" class="ico-md"></i>
+...
+<script>lucide.createIcons();</script>
+```
+
+常用图标名：`target / palette / search-check / compass / share-2 / crown / check-circle / x-circle / plus / arrow-right / grid-2x2 / network`
+
+### 2. 图片只允许裁底部，左右和顶部绝对不能切
+
+**现象**：用 `aspect-ratio` 撑图，网格会在父容器不足时堆叠或切掉图片关键信息（比如截图上部的标题栏）。
+
+**做法**：图片容器用**固定 height + overflow hidden**，图片走 `object-fit:cover + object-position:top`：
+
+```html
+<figure class="frame-img" style="height:26vh">
+  <img src="screenshot.png">
+</figure>
+```
+
+CSS 里 `.frame-img img` 已经预设 `object-position:top`，只裁底。
+
+**绝不用这种写法**（会在网格中撑破容器）：
+
+```html
+<!-- 坏例 -->
+<figure class="frame-img" style="aspect-ratio: 16/9">...</figure>
+```
+
+**例外**：单张主视觉（非网格内）可以用 `aspect-ratio + max-height`，因为父容器会兜底。
+
+### 2b. 亮页面配暗 WebGL = 灰蒙蒙(主题切换没生效)
+
+**现象**:所有 light 页面背景都像蒙了一层灰,甚至 hero light 也灰。
+
+**根因**:JS 根据 slide 的主题切换两张 canvas 的 opacity。如果整个 deck 开场是 hero dark,而没有任何机制能把 bg 切到 light,body 永远不加 `light-bg` 类,`canvas#bg-dark` 一直在上面。
+
+**做法**:
+- 模板里 `go()` 函数已改为从 `classList` 推断主题(`light` / `dark`),所以 **slide 必须明确带 `light` 或 `dark` 类**。不要漏写,更不要用其他自定义主题名
+- hero 页用 `hero light` / `hero dark`,正文页用 `light` / `dark`。只写 `hero` 不带主题色是坏的
+- 一个 deck 里必须至少有一个 **非 hero 的 light 页**,确保 body 有机会加 `light-bg`
+
+### 2b-2. 整个 deck 全是 light,没有节奏
+
+**现象**:除封面 `hero dark` 外,其余所有页面默认写 `light`——视觉平淡,没有呼吸感,白花花一片。
+
+**根因**:layouts.md 的骨架默认全写 `light`,如果只是粘贴骨架不调整主题,就会全亮。
+
+**做法**:
+- **生成前画"主题节奏表"**:每一页写清 `hero dark` / `hero light` / `light` / `dark` 中的哪一个,对齐后再写代码
+- **硬规则**:连续 3 页以上同主题 = 不允许;8 页以上必须有 ≥1 `hero dark` + ≥1 `hero light`;不能全是 `light` 正文页——必须有 `dark` 正文页
+- **按布局选主题**(详见 layouts.md 开头"主题节奏规划"):
+  - 左文右图(Layout 4)、大引用(Layout 8)、图文混排(Layout 10)→ **`light` / `dark` 交替**
+  - 大字报、图片网格、Pipeline、对比页 → `light`(截图/数字/流程需要亮底)
+  - 封面、问题页 → `hero dark`
+  - 章节幕封 → `hero dark` 与 `hero light` 交替
+- **生成后自检**:`grep 'class="slide' index.html`,目视确认节奏有交错
+
+### 2c. chrome 和 kicker 不要写同一句话
+
+**现象**:左上角 `.chrome` 写"Design First · 设计先行",同一页里 `.kicker` 又写"Phase 01 · 设计阶段"——同义翻译,AI 味浓。
+
+**做法**:
+- **chrome = 杂志页眉 / 导航标签**:跨多页可相同(如 "Act II · Workflow"、"Data · Result"、"lukew.com · 2026.04")
+- **kicker = 本页独一份的引导句**:短、有钩子、是大标题的"小前缀"(如 "BUT"、"一个人,做了什么。"、"The Question")
+- 一个描述栏目,一个描述这一页——绝不互相翻译
+
+### 3. 大标题字号不能超过屏宽 / 单字数
+
+**现象**：中文大标题字号设太大（比如 13vw），结果每行只容 1 个字，强制换行非常难看。
+
+**做法**：
+- `h-hero`（最大）：10vw，**且标题长度 ≤ 5 字**
+- `h-xl`（次大）：6vw-7vw
+- 长标题用 `<br>` 手工断行，不要依赖自动换行
+- 必要时加 `white-space:nowrap`
+
+**示例**：`我不是程序员。`（6 字）用 `h-xl` 7.2vw + nowrap，一行排完。
+
+### 4. 字体分工：标题衬线、正文非衬线
+
+**做法**：
+- 大标题、重点 quote、数字大字 → **衬线字体**（Noto Serif SC + Playfair Display + Source Serif）
+- 正文、描述、pipeline 步骤名 → **非衬线字体**（Noto Sans SC + Inter）
+- 元数据、代码、标签 → **等宽字体**（IBM Plex Mono + JetBrains Mono）
+
+所有字体用 Google Fonts CDN 引入，模板里已预设。
+
+### 4b. 图片不要用 `align-self:end` 贴底
+
+**现象**：左文右图布局里,为了让右列图片和左列 callout 底部对齐,在 `<figure>` 上加 `align-self:end`。结果:
+- 如果父容器不是 grid(比如类名没定义),`align-self` 完全失效,图片掉到文档流最下面被浏览器底栏遮挡
+- 即使是 grid,图片会在 cell 里贴底,低分屏上仍然被 `.foot` 和 `#nav` 圆点遮挡
+
+**做法**:
+- 图文混排**必须用 `.frame.grid-2-7-5`**(或 `.grid-2-6-6`/`.grid-2-8-4`)
+- 右列 `<figure class="frame-img">` 用 **标准比例 16/10 或 4/3 + max-height:56vh**,自然贴顶即可
+- 要让左列 callout 看起来"贴底",给**左列**加 flex column + `justify-content:space-between`,不要动右列
+
+### 4c. 图片不要用原图奇葩比例
+
+**现象**:`aspect-ratio: 2592/1798` 这种从原图复制的比例,在不同屏幕下撑出奇怪的空白或溢出。
+
+**做法**:无论原图什么比例,占位器固定用标准比例 **16/10 / 4/3 / 3/2 / 1/1 / 16/9**。图片自动 `object-fit:cover + object-position:top`,顶部不裁,底部裁掉一点无伤大雅。
+
+### 5. 不要给图片加厚边框 / 阴影
+
+**现象**：为了"高级感"加了强阴影或黑框，瞬间变成商务 PPT。
+
+**做法**：最多 1-4px 的微圆角 + **极淡的底噪**（已在模板里）。不要加 `box-shadow`，不要加 `border`（除非 1px 极淡的灰）。
+
+---
+
+## 🟡 P1 · 排版节奏
+
+### 6. Hero 页和非 hero 页要交替
+
+**推荐节奏**（25-30 页）：
+```
+Hero Cover → Act Divider (hero) → 3-4 pages non-hero → Act Divider (hero)
+→ 4-5 pages non-hero → Hero Question → ... → Hero Close
+```
+
+连续 2 页以上 hero 会让人疲劳，连续 4 页以上 non-hero 会让节奏死。
+
+### 7. 大字报页和密集页要交替
+
+大字报（big numbers / hero question）和密集页（pipeline / image grid）交替出现，听众眼睛才不累。
+
+### 8. 同一概念的英文/中文用法要统一
+
+**现象**：一会儿写 "Skills"，一会儿写 "技能"，一会儿写 "薄承载厚技能"，全篇不一致。
+
+**做法**：
+- 术语优先用**英文单词**（Skills / Harness / Pipeline / Workflow），这些都是圈内熟悉词
+- **别硬翻译**，硬翻译反而生硬
+- 整个 deck 里同一个词 1 个写法
+
+### 9. 底部 chrome 的页码要一致
+
+用 `XX / 总页数` 的格式（比如 `05 / 27`）。**不要在右上角加动态页码**（会和 `.chrome` 重复）。
+
+---
+
+## 🟢 P2 · 视觉打磨
+
+### 10. WebGL 背景的遮罩透明度
+
+**dark hero**：遮罩 12-15%（WebGL 明显透出）
+**light hero**：遮罩 16-20%（WebGL 隐约可见，不抢字）
+**普通 light/dark 页**：遮罩 92-95%（几乎不透）
+
+如果页面文字非常少（hero question），遮罩可以再薄些；如果正文密集，必须加厚遮罩确保可读。
+
+### 11. Light hero 的 shader 不能有强中心点
+
+**现象**：Spiral Vortex、径向涟漪在 light 主题下太显眼，像 Windows 98 屏保。
+
+**做法**：light hero 用 FBM 域扭曲驱动的无中心流动，底色保持银/纸色（接近 #F0F0F0 / #FBF8F3），彩虹偏色 subtle（0.05 以下）。
+
+### 12. Dark hero 允许更多视觉冲击
+
+Dark hero 可以用 Holographic Dispersion（钛金色散）等带中心结构的 shader，因为黑底能容纳更多视觉信息。
+
+### 13. 左文右图的对齐
+
+- 左列的文字组 `justify-content:space-between`：标题贴顶，引用框贴底
+- 右列图片 `align-self:end`：和左列的底部元素对齐
+- 网格整体 `align-items:start`（不是 `center` / `end`）
+
+### 14. 图片的微弱圆角
+
+所有 `.frame-img` 和 `.frame-img img` 都加 `border-radius:4px`，视觉上"柔和"但不软。**不要超过 8px**，否则像消费 app UI。
+
+---
+
+## 🔵 P3 · 操作细节
+
+### 15. 图片路径用相对路径
+
+图片放在 `images/` 文件夹下，HTML 里用相对路径 `images/xxx.png`，不要用绝对路径。
+
+### 16. 页码在 `.chrome` 里写死
+
+JS 会动态算总页数并扩展底部翻页圆点，但 `.chrome` 里的 `XX / N` 是写死的。加页/删页时要手工改 N。
+
+### 17. 翻页导航要保留
+
+模板默认支持：← → / 滚轮 / 触屏滑动 / 底部圆点 / Home·End。不要删 JS 里的导航逻辑。
+
+### 18. 不要用 `height:100vh` 硬设，用 `min-height:80vh`
+
+`100vh` 会让内容刚好卡满屏幕，但浏览器工具栏、标签栏会吃掉一部分高度，导致内容溢出。用 `min-height:80vh + align-content:center` 更稳。
+
+---
+
+## 🧪 最终自检清单
+
+生成完 PPT 后，逐项对照这个清单（勾一下）：
+
+```
+预检(生成前)
+  □ 已读过 template.html 的 <style>,确认所需类都存在
+  □ 已决定每页用哪个 Layout(1-10)
+  □ 已画出"主题节奏表":每页明确 hero dark / hero light / light / dark
+  □ 节奏表满足硬规则:无连续 3 页同主题 / 有 ≥1 hero dark + ≥1 hero light(8 页以上) / 至少有 1 个 dark 正文页
+  □ `<title>` 已改为实际 deck 标题(grep "[必填]" 应无结果)
+
+内容
+  □ 每一幕的页数比例合理(不会头重脚轻)
+  □ 没有使用 emoji 作图标
+  □ Skills / Harness 等术语用法统一
+  □ 每页的 kicker + 标题 + 正文 三级信息清晰
+
+排版
+  □ 所有大标题没有出现 1 字 1 行的换行
+  □ 图片网格用 height:Nvh 而非 aspect-ratio
+  □ 图片只裁底部，顶部和左右完整
+  □ 衬线/非衬线字体分工符合模板
+  □ Pipeline 多组之间有明显分隔
+
+视觉
+  □ hero 页和 non-hero 页交替
+  □ WebGL 背景在 hero 页可见
+  □ 图片有微弱圆角
+  □ 没有沉重的阴影和边框
+
+交互
+  □ ← → 翻页正常
+  □ 底部圆点数量与总页数匹配
+  □ chrome 里的页码和实际页号一致
+  □ ESC 键触发索引视图（如果保留）
+```
+
+全勾完，才是合格的 PPT。

package/skills/design-templates/guizang-ppt/references/components.md

@@ -0,0 +1,363 @@
+# 组件参考 · Components
+
+这是 `magazine-web-ppt` skill 的组件手册。template.html 已经定义好了所有样式，这里只写"这个组件长什么样、怎么用"。
+
+## 目录
+
+- [基础 Slide 外壳](#基础-slide-外壳)
+- [字体 Typography](#字体-typography)
+- [Chrome & Foot](#chrome--foot)
+- [Callout 引用框](#callout-引用框)
+- [Stat 数字矩阵](#stat-数字矩阵)
+- [Platform 平台卡](#platform-平台卡)
+- [Rowline 表格行](#rowline-表格行)
+- [Pillar 支柱卡](#pillar-支柱卡)
+- [Tag & Kicker](#tag--kicker)
+- [Figure 图片框](#figure-图片框)
+- [Icons 图标](#icons-图标)
+- [Ghost 巨型背景字](#ghost-巨型背景字)
+- [Highlight 荧光标记](#highlight-荧光标记)
+
+---
+
+## 基础 Slide 外壳
+
+每一页都是一个 `<section class="slide ...">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。
+
+```html
+<section class="slide light" data-theme="light">   <!-- 浅色页 -->
+<section class="slide dark" data-theme="dark">     <!-- 深色页 -->
+<section class="slide light hero" data-theme="light">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->
+<section class="slide dark hero" data-theme="dark">    <!-- Hero 页：深色 + 薄遮罩 -->
+```
+
+**light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。
+
+**hero 类的使用**：只给视觉主导的页面加（封面、金句页、章节过渡、结尾）。加 `hero` 后遮罩降到 12-16%，WebGL 背景会大幅透出，所以不要在 hero 页上放太多文字。
+
+---
+
+## 字体 Typography
+
+字体分工是本模板最重要的规则，严禁混用。
+
+| Class | 用途 | 字体 |
+|---|---|---|
+| `.display` | 超大号英文（Hero 页） | Playfair Display 700, 11vw |
+| `.display-zh` | 超大号中文标题 | Noto Serif SC 700, 7.8vw |
+| `.h1-zh` | 页面主标题 | Noto Serif SC 700, 4.6vw |
+| `.h2-zh` | 副标题 | Noto Serif SC 600, 3.2vw |
+| `.h3-zh` | 流水线步骤标题 | Noto Serif SC 500, 1.9vw |
+| `.lead` | 引导段（比 body 大） | Noto Serif SC 400, 1.9vw |
+| `.body-zh` | **正文/描述（非衬线）** | Noto Sans SC 400, 1.22vw |
+| `.body-serif` | 正文（衬线） | Noto Serif SC 400, 1.3vw |
+| `.kicker` | 小节提示（标题上方） | IBM Plex Mono, 12px uppercase |
+| `.meta` | 元信息标签 | IBM Plex Mono, 0.88vw uppercase |
+| `.big-num` | 巨型数字 | Playfair Display 800, 10vw |
+| `.mid-num` | 中号数字 | Playfair Display 700, 5.5vw |
+
+**核心规则**：
+- **衬线**（`serif-zh` / `serif-en`）：标题、重点金句、数字 —— 用于"视觉重音"
+- **非衬线**（`sans-zh`）：正文描述、大段阅读内容 —— 用于"信息密度"
+- **等宽**（`mono`）：kicker、meta、foot 的英文标签 —— 用于"装饰节奏"
+
+**强调技巧**：
+- `<em class="en">英文词</em>` —— 把英文词渲染成 Playfair Display 斜体（很好看）
+- `<em style="opacity:.65">短语</em>` —— 让标题后半段淡出，制造节奏
+
+---
+
+## Chrome & Foot
+
+每一页的顶部和底部的元信息条。几乎所有页都应该有。
+
+```html
+<div class="chrome">
+  <div class="left">
+    <span>第一幕 · 硬数据</span>
+    <span class="sep"></span>
+    <span>Act I</span>
+  </div>
+  <div class="right"><span>02 / 27</span></div>
+</div>
+
+<!-- ... 页面主体 ... -->
+
+<div class="foot">
+  <div class="title">项目名 · CodePilot　|　github.com/codepilot</div>
+  <div>Act I · Dev Numbers</div>
+</div>
+```
+
+**规则**：
+- `chrome.right` 总是放页码 `NN / TOTAL` （TOTAL 为总页数）
+- `foot.title` 是中文说明，`foot.right` 是英文 act 标记
+- chrome 和 foot 共同构成杂志感的"页眉页脚"
+
+---
+
+## Callout 引用框
+
+展示金句 / 关键观点 / 他人引言。
+
+```html
+<div class="callout" style="max-width:80vw">
+  <div class="q-big">"这东西在三年前，<br>需要一个十人团队做一年。"</div>
+  <span class="cite">— 一个观察者的判断</span>
+</div>
+```
+
+变体：
+- 不带 cite：去掉 `<span class="cite">` 即可
+- 带英文金句：`<em class="en">"Thin Harness, Fat Skills."</em>`
+- 在 hero 页使用：外层加 `style="position:relative;z-index:2"`（避免被背景遮罩盖住）
+
+---
+
+## Stat 数字矩阵
+
+展示数据指标，常与 `.grid-6` / `.grid-4` 配合。
+
+```html
+<div class="grid-6">
+  <div class="stat">
+    <span class="m">Duration</span>
+    <span class="n">64<em style="font-size:.4em;opacity:.5;font-style:normal"> 天</em></span>
+    <span class="l">从 0 到现在</span>
+  </div>
+  <!-- ... 更多 stat ... -->
+</div>
+```
+
+三段式结构：`.m` 等宽小标签 → `.n` 巨型数字 → `.l` 描述说明。数字后的单位用 `<em>` 缩小到 0.4em，opacity 0.5。
+
+**常用布局容器**：
+- `.grid-6` — 3×2 网格（最常用，6 个 stat）
+- `.grid-4` — 2×2 网格（4 个 stat）
+- `.grid-3` — 3 等分单行（3 个 stat / pillar）
+
+---
+
+## Platform 平台卡
+
+展示社交平台 / 渠道 + 粉丝数。
+
+```html
+<div class="plat">
+  <div class="sub">Weibo</div>
+  <div class="name">微博</div>
+  <div class="nb">289K</div>
+</div>
+```
+
+可选第四行（补充说明）：
+```html
+<div class="body-zh" style="font-size:max(11px,.8vw);opacity:.5;margin-top:.6vh">
+  含小绿书同步
+</div>
+```
+
+**"Also On" 变体**（补充平台）：
+```html
+<div class="plat" style="border-top-style:dashed;opacity:.72">
+  <div class="sub">Also On</div>
+  <div class="body-zh" style="font-weight:600;margin-top:.8vh">
+    B 站　·　知乎
+  </div>
+</div>
+```
+
+---
+
+## Rowline 表格行
+
+列表式内容，每行一个条目。
+
+```html
+<div class="rowline">
+  <div class="k">CLAUDE.md</div>
+  <div class="v">你该怎么做事 —— 行为规则 + 工作偏好 + 禁止事项</div>
+  <div class="m">EMPLOYEE · HANDBOOK</div>
+</div>
+```
+
+三列结构：`.k` 衬线关键词 · `.v` 正文描述 · `.m` 等宽标签（右对齐）。第一个和最后一个 rowline 自动加上下边框。
+
+**变体：2 列**：`style="grid-template-columns:1fr 3fr"` 去掉 `.m` 列。
+
+---
+
+## Pillar 支柱卡
+
+三支柱结构，常用于"概念并列"类型页面。
+
+```html
+<div class="grid-3">
+  <div class="pillar">
+    <div class="ic">01</div>
+    <div class="t">三层<br>文档体系</div>
+    <div class="d">CLAUDE.md<br>+ 项目知识库<br>+ 护栏文件</div>
+  </div>
+  <!-- ... 更多 pillar ... -->
+</div>
+```
+
+**带图标的 pillar（用于强调性页面）**：
+```html
+<div class="pillar" style="padding:4vh 2vw;border:1px solid currentColor;border-color:rgba(10,10,11,.2)">
+  <div class="ic"><i data-lucide="compass" class="ico-lg"></i></div>
+  <div class="t">判断力</div>
+  <div class="d">决策和方向的权威。<br>取舍、品味、方向感。</div>
+</div>
+```
+
+`.ic` 可以是序号（`01 / 02 / 03` 或 `A. / B. / C.`），也可以是 Lucide 图标。
+
+---
+
+## Tag & Kicker
+
+**Kicker** 是标题上方的小提示文字（等宽、全大写、小字号）：
+```html
+<div class="kicker">过去 64 天 · 开发篇</div>
+<div class="h1-zh">一个人，做了什么。</div>
+```
+
+**Tag** 是独立的标签胶囊（带边框）：
+```html
+<div style="display:flex;gap:1.6vw;flex-wrap:wrap">
+  <div class="tag">早上 10 点起床</div>
+  <div class="tag">周二 / 四下午健身</div>
+  <div class="tag">晚上照样看剧 · 玩游戏</div>
+</div>
+```
+
+---
+
+## Figure 图片框
+
+**这是本模板最容易踩坑的组件，务必遵守以下规则**。
+
+### 基础结构
+
+```html
+<figure class="tile">
+  <div class="frame-img" style="height:26vh">
+    <img src="图片素材/xxx.png" alt="说明">
+  </div>
+  <figcaption class="frame-cap">
+    <span class="pf">推特 · Twitter</span>
+    <span class="nb">137K</span>
+  </figcaption>
+</figure>
+```
+
+### 关键约束（血泪经验，不要违反）
+
+1. **必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。
+   - 原因：用 aspect-ratio 在网格里会撑破父容器，导致图片堆叠。
+   - 推荐尺寸：`height:18vh` (紧凑条形) / `22vh` (标准网格) / `26vh` (突出展示) / `28vh` (大图)。
+
+2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。
+   - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。
+
+3. **网格里多张图时，用内联 grid 而不是 `grid-3`**：
+   ```html
+   <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1vh 1.2vw">
+     <figure class="tile">...</figure>
+     <figure class="tile">...</figure>
+     <figure class="tile">...</figure>
+   </div>
+   ```
+
+4. **图片与布局其他部分对齐**：figure 单独加 `align-self:end` 让图片贴底。
+
+### Frame Caption 变体
+
+```html
+<!-- 标准：左 figure 名，右数字 -->
+<figcaption class="frame-cap">
+  <span class="pf">推特 · Twitter</span>
+  <span class="nb">137K</span>
+</figcaption>
+
+<!-- 带编号 -->
+<figcaption class="frame-cap">
+  <span class="idx">01</span>
+  <span class="pf">AI 润色</span>
+  <span>Polish</span>
+</figcaption>
+```
+
+### 图片占位（设计阶段占位符）
+
+图片还没有就位时，用虚线框占位：
+```html
+<div class="img-slot r-4x3">  <!-- r-4x3 / r-16x9(default) / r-3x2 / r-1x1 -->
+  <span class="plus">+</span>
+  <span class="label">GitHub 截图位置</span>
+</div>
+```
+
+---
+
+## Icons 图标
+
+**严禁使用 emoji**。用 Lucide via CDN（template.html 已引入）。
+
+```html
+<i data-lucide="compass" class="ico-lg"></i>     <!-- 大图标（pillar 用） -->
+<i data-lucide="target" class="ico-md"></i>      <!-- 中图标（列表项用） -->
+<i data-lucide="check-circle" class="ico-sm"></i>  <!-- 小图标（inline 用） -->
+```
+
+**常用 Lucide 图标名**（按含义分组）：
+
+- 判断类：`compass`, `target`, `crosshair`, `search-check`
+- 关系类：`share-2`, `users`, `network`, `link`, `handshake`
+- 品牌类：`crown`, `gem`, `award`, `star`, `badge-check`
+- 流程类：`workflow`, `route`, `arrow-right-left`, `repeat`
+- 数据类：`grid-2x2`, `bar-chart-3`, `trending-up`, `activity`
+- 审美类：`palette`, `brush`, `eye`, `sparkles`
+- 对错类：`check-circle`, `x-circle`, `check`, `x`
+- 方向类：`arrow-right`, `arrow-up-right`, `corner-down-right`
+
+**图标与文字 inline 组合**：
+```html
+<div class="h3-zh" style="display:flex;align-items:center;gap:.8em">
+  <i data-lucide="target" class="ico-md"></i>
+  判断 — 什么值得写
+</div>
+```
+
+---
+
+## Ghost 巨型背景字
+
+用作"装饰性背景字"，极低透明度，营造杂志感。
+
+```html
+<div class="ghost" style="right:-6vw;top:-8vh">BUT</div>
+<div class="ghost" style="left:-8vw;bottom:-18vh;font-style:italic">Harness</div>
+```
+
+- 字号 34vw，opacity 0.06
+- 常用定位：`right:-6vw;top:-8vh`（右上超出）/ `left:-8vw;bottom:-18vh`（左下超出）
+- 内容：英文单词或数字（章节序号 01/02/03、关键词 BUT/NOW/HERE）
+
+**注意**：使用 ghost 的页面里，其他内容要加 `position:relative;z-index:2` 避免被压到下面。
+
+---
+
+## Highlight 荧光标记
+
+行内短语的"荧光笔"效果：
+
+```html
+<span class="hi">不是</span>
+<span class="hi">一次性爆发</span>
+```
+
+在文字底部生成一条半透明高亮条。深色主题用亮条，浅色主题用暗条（CSS 已处理）。
+
+**适合场景**：只对关键 1-3 个词使用，不要大面积用。