Skill detail
dbs-wechat-html
Generates WeChat-compatible HTML from Markdown, but is platform-specific.
Inspect before use
Automated review checks relevance, not safety or endorsement. Read the source instructions before using this skill.
SKILL.md
The saved excerpt is a snapshot from review. The external source remains the complete and most current version.
--- 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. 粘贴稳定版骨架 ```html <!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. 用户没有指定风格或模式 如果用户只说： ```text /dbs-wechat-html 文章.md ``` 先问一句，不直接生成： ```text 你想怎么生成？ 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 READMERead the full source on GitHub (opens external page)