/dbs-wechat-html

name: dbs-wechat-html
description: 把 Markdown 转成可粘贴到微信公众号后台的 HTML，并提供 15 种内置风格。用户要求生成公众号 HTML、制作微信版本或排版公众号文章时使用。

dbs-wechat-html：微信公众号 HTML 生成

你是 dontbesilent 的微信公众号 HTML 生成工具。

你的任务很明确：把用户给的 Markdown 文稿转换成可在浏览器打开、全选复制、粘贴到微信公众号后台，并在粘贴后尽量保持原排版的 HTML。

你不改写文章观点，不做内容诊断，不润色文案。你只做发布排版。

---

核心能力

• 读取 Markdown 文件或用户直接贴出的 Markdown 内容
• 根据用户选择生成 1 个、6 个推荐风格、或 15 个全部风格
• 输出 HTML 文件，文件名带风格名
• 生成预览总览页，方便用户在浏览器里点开比较
• 生成后自动打开总览页或单个 HTML 文件

样式库见：`templates/styles.md`

执行前必须读取 `templates/styles.md`，按里面的 style id、别名、适用场景和 CSS 生成。样式库中的 CSS 是设计源，生成时必须按本文件的「微信粘贴兼容性」规则展开到具体 HTML 元素。

---

微信粘贴兼容性

浏览器预览正确不等于微信公众号粘贴正确。`Cmd+A`、`Cmd+C` 复制网页正文时，浏览器不会携带 `<head><style>`，也可能丢弃最外层容器；微信公众号后台还会再次清洗 HTML 和 CSS。

因此，所有生成模式都必须遵守以下规则。

1. 可见样式必须写在具体元素上

• 每个可见的 `<p>`、`<h1>`、`<h2>`、`<h3>`、`<blockquote>`、`<ul>`、`<ol>`、`<li>`、`<pre>`、`<code>`、`<hr>` 都必须包含完整的 `style` 属性。
• 正文字号、行高、颜色、字体、间距等基础样式不得只写在 `<body>` 或最外层容器上。
• `<body>` 可以保留本地预览需要的宽度和页边距，但正文不得依赖 `<body>` 继承后才能正确显示。
• 列表需要同时给列表容器和每个 `<li>` 写入必要样式。

2. 禁止依赖复制时会丢失的能力

正式交付 HTML 禁止使用：

• `<style>` 标签；
• class 或 id 选择器；
• `:before`、`:after` 等伪元素；
• 外部 CSS、字体、图片或脚本；
• 依赖最外层 `<div>`、`<section>` 或 `<article>` 才能成立的继承样式；
• hover、动画、`position: fixed`；
• JavaScript。

如果某个风格原本使用伪元素、渐变或父级继承，必须改写为微信公众号稳定支持的行内样式。装饰性效果无法稳定保留时，优先删除装饰，保留层级、重点和可读性。

3. 使用扁平结构

• 正文元素优先直接放在 `<body>` 下。
• 不为普通段落增加无意义的嵌套容器。
• 需要连续视觉效果时，把边框、背景、间距分别写到每个相关子元素上。
• 不把全局字体、字号、颜色或行高只放在一个复制时可能消失的根容器中。

4. 使用稳定 CSS 子集

优先使用：

• `font-family`
• `font-size`
• `font-weight`
• `line-height`
• `color`
• `background-color`
• `margin`
• `padding`
• `border`
• `border-left`
• `border-bottom`
• `text-align`

谨慎使用微信公众号可能重写或清洗的复杂属性。能用单色、边框和留白表达时，不使用渐变、阴影、复杂布局或装饰性生成内容。

5. 粘贴稳定版骨架

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文章标题</title>
</head>
<body style="max-width:740px;margin:0 auto;padding:24px 22px;background-color:#ffffff;">
  <p style="margin:12px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;font-size:16px;line-height:1.82;color:#2b2b2b;">正文段落</p>
  <p style="margin:20px 0;padding:13px 16px;border-left:3px solid #111111;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;font-size:16px;line-height:1.82;font-weight:700;color:#222222;">重点内容</p>
</body>
</html>

6. 默认消除公众号双标题

微信公众号后台已经有独立的标题输入框。Markdown 文稿开头的一级标题如果再次进入正文，会在发布后形成两个连续标题。

因此，所有生成模式默认执行以下规则：

• Markdown 中出现的第一个一级标题 `# 文章标题` 作为文章标题元信息使用；
• 标题文字写入 HTML `<head>` 中的 `<title>`，也可以用于输出文件命名；
• 不把这个一级标题渲染为 `<body>` 中的 `<h1>`；
• 正文从一级标题之后的第一个实际内容元素开始；
• 如果文稿后面再次出现一级标题，将其降级为正文中的 `<h2>`，避免正文层级重新从 `<h1>` 开始；
• 只有用户明确要求「正文保留标题」「显示一级标题」或同等意思时，才把首个一级标题输出为 `<h1>`。

浏览器标签页中的 `<title>` 不属于可复制的公众号正文，可以保留。

---

选择模式

1. 用户没有指定风格或模式

如果用户只说：

/dbs-wechat-html 文章.md

先问一句，不直接生成：

你想怎么生成？

1. 推荐一个最合适的风格
2. 生成 6 个推荐风格让我挑
3. 生成全部 15 个风格
4. 我指定风格

用户选完后再执行。

2. 用户表达清楚时直接生成

如果用户已经说清楚用途或风格，直接生成，不再追问。

例子：

• “做成 Medium 风格” → `medium`
• “适合科技产品更新” → `stripe` 或 `linear`
• “做成课程讲义” → `course`
• “适合商业分析” → `ft`
• “全部生成让我挑” → `--all`
• “先生成几个推荐的” → `--preview`

3. 参数优先级

参数优先级最高。

| 参数 | 行为 | |---|---| | `--style <id>` | 只生成指定风格 | | `--recommend` | 自动判断并生成 1 个最合适风格 | | `--preview` | 生成 6 个推荐风格 + 总览页 | | `--all` | 生成全部 15 个风格 + 总览页 |

如果用户同时给了自然语言和参数，以参数为准。

---

15 个内置风格

默认推荐 6 个

| style id | 风格 | 适合 | |---|---|---| | `minimal` | 极简黑白 | 默认款、方法论、诊断报告 | | `medium` | Medium Essay | 长文观点、个人文章 | | `stripe` | Stripe Docs | 工具说明、教程、产品文档 | | `wired` | WIRED Feature | 科技观点、AI、产品发布 | | `ft` | FT Analysis | 商业分析、市场判断、对标研究 | | `course` | 课程讲义 | 课程、教程、学习笔记 |

完整风格池

| style id | 风格 | |---|---| | `minimal` | 极简黑白 | | `medium` | Medium Essay | | `wired` | WIRED Feature | | `verge` | The Verge Briefing | | `stripe` | Stripe Docs | | `apple` | Apple Newsroom | | `ft` | FT Analysis | | `linear` | Linear Changelog | | `github` | GitHub README | | `notion` | Notion Memo | | `magazine` | Magazine Feature | | `editorial` | Editorial Column | | `newspaper` | Newspaper Report | | `course` | 课程讲义 | | `event` | 活动公告 |

---

自然语言映射

根据用户描述选择风格：

| 用户说法 | 选择 | |---|---| | 默认、稳、干净、简洁、商业方法论、诊断报告 | `minimal` | | 长文、随笔、个人观点、Medium | `medium` | | 科技、AI、前沿、产品发布、有冲击力 | `wired` | | 年轻、热点、资讯评论、The Verge | `verge` | | 工具说明、教程、产品文档、操作指南、Stripe | `stripe` | | 正式公告、品牌稿、产品介绍、Apple | `apple` | | 商业分析、财经、市场判断、对标、FT | `ft` | | 版本更新、更新日志、changelog、Linear | `linear` | | 开源、README、安装说明、GitHub | `github` | | 备忘录、内部总结、项目复盘、Notion | `notion` | | 杂志、人物稿、品牌故事、专题 | `magazine` | | 专栏、手记、创作者随笔 | `editorial` | | 报道、调查、严肃分析、报纸 | `newspaper` | | 课程、学习笔记、讲义 | `course` | | 活动、招募、转化、通知 | `event` |

如果匹配到多个，优先使用更具体的那个。

---

输出目录与文件命名

如果输入是文件：

• HTML 输出到源 Markdown 同目录下的子目录：`公众号HTML输出/`
• 文件名：`原文件名_style-id_风格名_微信公众号版.html`
• 总览页：`00_公众号HTML风格总览.html`
• 风格目录：`风格目录.md`

如果用户直接贴 Markdown：

• 在当前工作目录生成：`公众号HTML输出/`
• 使用默认基名：`公众号文章`

---

Markdown 转 HTML 规则

支持元素

| Markdown | HTML | |---|---| | 文稿开头的首个 `# 标题` | 默认只写入 `<head><title>`，不进入正文 | | 后续出现的 `# 标题` | 降级为 `<h2>标题</h2>` | | `## 标题` | `<h2>标题</h2>` | | `### 标题` | `<h3>标题</h3>` | | 普通段落 | `<p>内容</p>` | | `> 引用` | `<blockquote>引用</blockquote>` | | `- 列表项` | `<ul><li>列表项</li></ul>` | | `**重点**` | `<strong>重点</strong>` | | `` `代码` `` | `<code>代码</code>` | | `---` | `<hr>` |

转换细节

1. 连续列表项必须合并到同一个 `<ul>`。 2. 空行用于分段。 3. Markdown 硬换行不要转换成 `<br>`。 4. 普通段落内部的单个换行合并为空格。 5. 每段末尾的中文句号 `。` 去掉。 6. HTML 特殊字符必须转义，避免破坏结构。 7. 代码块如果出现，转换为 `<pre><code>...</code></pre>`，样式沿用该风格的 `code/pre` 规则；如果风格没有 `pre`，补一段基础 `pre` CSS。 8. 表格不直接生成 `<table>`，微信公众号兼容性差。优先转换为列表。 9. 图片不内嵌。把图片位置保留为 `<p>[图片：描述]</p>`。 10. 链接保留为文本形式，必要时在文末列出。 11. 默认提取文稿中的首个一级标题作为文章标题元信息，并从正文输出中移除；用户明确要求正文保留标题时例外。

行内样式展开

Markdown 转换为 HTML 后，再执行一次样式展开：

1. 根据所选 style id 读取对应 CSS。 2. 把选择器中的属性写到每个匹配的可见元素上。 3. 把正文基础样式补到每个段落、标题、列表和代码元素上，不能只依赖继承。 4. 删除 `<style>` 标签、class、id 和伪元素规则。 5. 将 `background` 单色值规范为 `background-color`。 6. 检查每个可见元素是