Skill-Details
dbs-wechat-html
Generates WeChat-compatible HTML from Markdown, but is platform-specific.
Vor Nutzung prüfen
Die automatische Prüfung bewertet Relevanz, nicht Sicherheit oder Empfehlung. Lies vor der Nutzung die Quellanweisungen.
SKILL.md
Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle 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 READMEVollständige Quelle auf GitHub lesen (öffnet externe Seite)