# 既定 HTML 输入转换分支

当用户提供的是一份已经成型的 HTML，而不是散乱文本或 URL 摘要时，按本分支处理。目标不是“重新写一篇”，而是把原 HTML 当作事实源，转换成微信公众号读者愿意读、愿意收藏、能直接复制资产的版本。

## 触发条件

出现以下任一情况，进入本分支：

- 用户提供本地 HTML 文件路径。
- 用户说已经把 HTML 复制到剪贴板。
- 用户粘贴了大段 HTML。
- 抓取网页得到的正文不完整，用户补充了原始 HTML。

## 总原则

1. **源 HTML 是事实源**：章节、表格、代码、字段名、数字、SQL、命令、API 语义，以 HTML 中的内容为准。
2. **不要直接美化原 HTML**：先抽取干净结构，再重建微信 HTML。原 HTML 里的 class、脚本、按钮、代码高亮 span、站点锚点，通常都不适合微信。
3. **完整优先，风格其次**：用户明确要求“尽量完整”时，保留技术细节、表格、代码块和边界条件。不要为了短视频式爽感压掉关键限制。
4. **读者喜欢的是路径，不是装饰**：微信公众号版要让读者知道“我该按什么顺序理解 / 排查 / 复用”，而不是只换成漂亮卡片。

## 推荐工作流

### 1. 固化输入

如果用户说 HTML 在剪贴板，macOS 下可以先保存到临时文件：

```bash
pbpaste > /tmp/source-article.html
```

其他系统请让用户直接粘贴 HTML、提供文件路径，或使用平台等价命令。不要只依赖浏览器抓取结果；抓取版可能丢失代码缩进、表格结构、Mermaid 源、特殊标注。

### 2. 做结构体检

先统计而不是立刻改写：

- 标题层级：`h1/h2/h3/h4`
- 表格数量
- 代码块数量
- 图片 / SVG / Mermaid 数量
- SVG 动画数量，以及是否有编辑器私有属性（`leaf`、`data-pm-slice`、`mpa-*`）
- 是否有脚本、样式块、复制按钮、锚点图标

输出给自己看的判断：这篇是“教程型”“技术解释型”“观点型”“案例复盘型”，后面排版方式不同。

### 3. 抽取干净中间稿

把原 HTML 转成干净结构：

- 标题保留为章节层级。
- 段落保留纯文本。
- 表格转成二维数组。
- 代码块保留原始换行和缩进。
- 列表转成独立条目。
- 删除无意义元素：复制按钮、锚点 SVG、站点导航、代码高亮 span、脚本、样式块。
- 删除编辑器私有属性：`leaf`、`data-pm-slice`、`mpa-font-style`、`data-mpa-action-id` 等。它们来自微信/壹伴/ProseMirror 的内部 DOM，不能进入新的交付 HTML。

不要把原 HTML 直接套微信公众号样式；那会把博客系统的噪声一起带进成稿。

### 4. 判断哪些内容要“原样保留”，哪些要“微信化重排”

**原样保留**：

- 原文的关键表格、清单、对照关系和案例链路。
- 数字口径、专有名词、引用来源、产品名、时间线。
- 技术文中的 SQL、命令、API 示例、配置片段、字段名、表名、枚举值、版本号。
- 长 snake_case、dotted path、环境变量、文件路径、命令参数不要照搬进普通表格；优先转成卡片式字段说明，避免微信编辑器在表格里处理不可断行 token 时卡住。

**微信化重排**：

- 开头补读者痛点，不要一上来堆概念。
- 长表格前补一句“这张表怎么读”。
- 复杂图后补一句“主理人碎碎念”，解释读者该拿走什么。
- 多个代码块之间补排查路径，避免读者只看到素材堆叠。
- 原文中重复的中间表，可以保留但要加“这是阶段性结果”的提示。

### 5. 用图表替换“博客里已经渲染坏的逻辑图”

很多博客会把 Mermaid / 图表渲染成大量 SVG、CSS 或压扁后的文本。处理方式：

- 不要直接复制渲染后的 Mermaid 噪声。
- 从图的标题、相邻段落、节点文字里还原逻辑。
- 重新画成轻量内联 SVG。
- 若 drawio-mcp 可用，可以先画；导出过重或不稳定时，改手写 SVG。

适合补图的位置：

- 组织结构、系统架构、数据流。
- 生命周期、步骤流转、状态机。
- 对比表、决策树、方法论模型。
- 技术文里的三表关系、回滚、分支、fork、版本链、排查 SOP。

### 6. 涉及可执行结论时必须补“适用边界”

既定 HTML 往往来自博客、笔记或内部经验，里面可能混合了事实、推断、教学抽象和个人偏好。微信公众号读者会把文章当成可执行依据，所以必须标清：

- 哪些是官方资料、原始材料或作者亲历事实。
- 哪些是个人判断、业务实现、教学抽象或简化模型。
- 哪些做法有前置条件、版本限制、平台限制或场景限制。
- 示例中的简写值和真实生产值有什么差异。
- 技术文还要额外标清：官方 API / schema、具体数据库或框架实现、伪代码边界、SQL 是否适用于分支 / 回滚 / 并发 / 增量表。

可信度来自边界，不来自语气坚定。

### 7. 微信 HTML 重建规则

重建时遵守主 SKILL.md 的微信规范：

- 根节点用一个总 `<section>` 包裹。
- 所有样式内联。
- 不使用 `<style>`、CSS class、外部字体、外链脚本。
- `<strong>` 改成少量蓝色强调或结构化卡片。
- 代码块用逐行 `<pre>` + `<span>`，缩进改成 `&nbsp;`；不要手写 `leaf=""` 等编辑器私有属性。
- 表格使用 `<tbody>`，每个 `<td>` 内用 `<section>` 包内容。技术字段表格优先改卡片；必须保留表格时加 `table-layout:fixed`，字段名加 `word-break:break-all;overflow-wrap:anywhere;`。
- 追加 `<mp-style-type data-value="3"></mp-style-type>`。
- 保存到 `~/wechat-exports/*.wechat.html`。

### 8. 目标读者评审要关注“可信度”和“获得感”

既定 HTML 转微信时，subAgent 评审不要只问文风。至少选一个懂主题的读者，问：

- 哪个结论不敢信？缺来源、案例、上下文，还是边界条件？
- 哪张表、哪段图、哪组清单信息很多但不知道怎么读？
- 哪里只有素材堆叠，没有告诉读者下一步怎么用？
- 有没有把个案经验写成通用事实？
- 技术文再追问：哪段代码看完不知道怎么用？哪个快捷 SQL 在分支、回滚、并发、增量表场景下会误导？

收到反馈后，优先补边界、路径和反例，不要只润色句子。

### 9. 交付前检查

除了主 SKILL.md 的 AI 味 grep，还要检查：

```bash
# 微信兼容性
rg '<style|class=|<script|<strong' file.wechat.html
rg 'leaf=|data-pm-slice|mpa-font-style|data-mpa-action-id' file.wechat.html
rg 'animateTransform[^>]*type="translate"|repeatCount="indefinite"' file.wechat.html

# 结构数量，防止转换漏内容
rg -c '<table ' file.wechat.html
rg -c '<pre ' file.wechat.html
rg -c '<svg ' file.wechat.html

# 微信标记
rg '<mp-style-type data-value="3"' file.wechat.html
```

如果用户强调“尽量完整”，还要把原 HTML 的表格数、代码块数与成稿数量对齐说明。数量不必完全相等，但减少的部分要有理由，例如“Mermaid 渲染噪声已替换为手写 SVG”。

## 常见坑

- **直接贴原 HTML**：会带入站点 class、复制按钮、锚点 SVG、代码高亮碎片，微信里很容易乱。
- **过度重写**：会丢数字口径、表格关系、案例链路；技术文章还会丢字段名、SQL 条件、版本差异。
- **只做排版不补路径**：读者看到很多素材，但不知道该按什么顺序理解或使用。
- **把个案写成普适结论**：比如技术文里按最大 version 取最新值，遇到分支 / 回滚可能误导。
- **把教学抽象写成官方实现**：要明确“概念上”“官方实现中”“业务表中”分别是什么。
- **图表太重**：draw.io 导出的 SVG 可能含大量 foreignObject 和元数据，必要时改成轻量手写 SVG。
- **移动文字组 SVG 动画**：不要保留“同一 `<g>` 内含 `<text>/<tspan>`，同时有 `animateTransform type="translate"` 和其他 `<animate>`，并且 `repeatCount="indefinite"`”的结构。微信编辑器/壹伴同步时可能导致 Chrome renderer 100% CPU、数 GB 内存、页面黑屏。处理方式：去掉动画；把文字移出被 transform 的组；只动画纯图形；或转成静态 PNG/SVG。
- **技术字段表格**：不要把 `context_window.used_percentage`、`rate_limits.five_hour.used_percentage` 这类长字段放在 `<table>` 单元格里。字段名、环境变量、路径、命令参数优先用卡片或代码块展示；否则至少固定表格布局并强制断行。

## 输出说明模板

最终交付时简短说明：

```text
已基于原始 HTML 转换，而不是抓取摘要。
如有表格 / 代码 / Mermaid：说明保留了多少、替换了多少、为什么替换。
如涉及技术或可执行建议：说明补充了哪些适用边界；读者评审采纳了哪些意见。
文件已保存到 ~/wechat-exports/<name>.wechat.html。
```
