写作与公文
把 Markdown 转成可粘贴到微信公众号后台的…
将 Markdown 文稿排版为可全选复制并粘贴到微信公众号后台的 HTML,并按需生成单风格、6 个推荐风格或全部 15 个风格。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 38/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 55/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
把 Markdown 转成可粘贴到微信公特定
解决思路
- 读取 Markdown 文件或用户直接贴出的 Markdown 内容。
- 执行前必须读取 `templates/styles.md`,按里面的 style id、别名、适用场景和 CSS 生成。
- 样式库中的 CSS 是设计源,生成时必须按「微信粘贴兼容性」规则展开到具体 HTML 元素。
- 根据用户选择生成 1 个、6 个推荐风格、或 15 个全部风格。
- 输出 HTML 文件,文件名带风格名。
- 生成预览总览页,方便用户在浏览器里点开比较。
- 生成后自动打开总览页或单个 HTML 文件。
- 不改写文章观点,不做内容诊断,不润色文案,只做发布排版。
- 每个可见的 `<p>`、`<h1>`、`<h2>`、`<h3>`、`<blockquote>`、`<ul>`、`<ol>`、`<li>`、`<pre>`、`<code>`、`<hr>` 都必须包含完整的 `style` 属性。
- 正文字号、行高、颜色、字体、间距等基础样式不得只写在 `<body>` 或最外层容器上。
- `<body>` 可以保留本地预览需要的宽度和页边距,但正文不得依赖 `<body>` 继承后才能正确显示。
- 列表需要同时给列表容器和每个 `<li>` 写入必要样式。
- 正式交付 HTML 禁止使用 `<style>` 标签。
- 正式交付 HTML 禁止使用 class 或 id 选择器。
- 正式交付 HTML 禁止使用 `:before`、`:after` 等伪元素。
- 正式交付 HTML 禁止使用外部 CSS、字体、图片或脚本。
- 正式交付 HTML 禁止依赖最外层 `<div>`、`<section>` 或 `<article>` 才能成立的继承样式。
- 正式交付 HTML 禁止使用 hover、动画、`position: fixed`。
- 正式交付 HTML 禁止使用 JavaScript。
- 如果某个风格原本使用伪元素、渐变或父级继承,必须改写为微信公众号稳定支持的行内样式。
- 装饰性效果无法稳定保留时,优先删除装饰,保留层级、重点和可读性。
- 正文元素优先直接放在 `<body>` 下。
- 不为普通段落增加无意义的嵌套容器。
- 需要连续视觉效果时,把边框、背景、间距分别写到每个相关子元素上。
- 不把全局字体、字号、颜色或行高只放在一个复制时可能消失的根容器中。
- 优先使用稳定 CSS 子集:`font-family`、`font-size`、`font-weight`、`line-height`、`color`、`background-color`、`margin`、`padding`、`border`、`border-left`、`border-bottom`、`text-align`。
- 谨慎使用微信公众号可能重写或清洗的复杂属性。
- 能用单色、边框和留白表达时,不使用渐变、阴影、复杂布局或装饰性生成内容。
- 使用粘贴稳定版骨架:`<!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>`。
- 默认把 Markdown 中出现的第一个一级标题 `# 文章标题` 作为文章标题元信息使用。
- 标题文字写入 HTML `<head>` 中的 `<title>`,也可以用于输出文件命名。
- 不把这个一级标题渲染为 `<body>` 中的 `<h1>`。
- 正文从一级标题之后的第一个实际内容元素开始。
- 如果文稿后面再次出现一级标题,将其降级为正文中的 `<h2>`,避免正文层级重新从 `<h1>` 开始。
- 只有用户明确要求「正文保留标题」「显示一级标题」或同等意思时,才把首个一级标题输出为 `<h1>`。
- 浏览器标签页中的 `<title>` 不属于可复制的公众号正文,可以保留。
- 用户没有指定风格或模式时,先问一句,不直接生成:你想怎么生成?1. 推荐一个最合适的风格 2. 生成 6 个推荐风格让我挑 3. 生成全部 15 个风格 4. 我指定风格。用户选完后再执行。
- 用户表达清楚时直接生成,不再追问。
- 用户说「做成 Medium 风格」时选择 `medium`。
- 用户说「适合科技产品更新」时选择 `stripe` 或 `linear`。
- 用户说「做成课程讲义」时选择 `course`。
- 用户说「适合商业分析」时选择 `ft`。
- 用户说「全部生成让我挑」时使用 `--all`。
- 用户说「先生成几个推荐的」时使用 `--preview`。
- 参数优先级最高;如果用户同时给了自然语言和参数,以参数为准。
- `--style <id>`:只生成指定风格。
- `--recommend`:自动判断并生成 1 个最合适风格。
- `--preview`:生成 6 个推荐风格 + 总览页。
- `--all`:生成全部 15 个风格 + 总览页。
- 默认推荐 6 个:`minimal` 极简黑白(默认款、方法论、诊断报告);`medium` Medium Essay(长文观点、个人文章);`stripe` Stripe Docs(工具说明、教程、产品文档);`wired` WIRED Feature(科技观点、AI、产品发布);`ft` FT Analysis(商业分析、市场判断、对标研究);`course` 课程讲义(课程、教程、学习笔记)。
- 完整风格池:`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,使用默认基名:`公众号文章`。
- Markdown 支持元素映射:文稿开头的首个 `# 标题` 默认只写入 `<head><title>`,不进入正文。
- Markdown 支持元素映射:后续出现的 `# 标题` 降级为 `<h2>标题</h2>`。
- Markdown 支持元素映射:`## 标题` 转为 `<h2>标题</h2>`。
- Markdown 支持元素映射:`### 标题` 转为 `<h3>标题</h3>`。
- Markdown 支持元素映射:普通段落转为 `<p>内容</p>`。
- Markdown 支持元素映射:`> 引用` 转为 `<blockquote>引用</blockquote>`。
- Markdown 支持元素映射:`- 列表项` 转为 `<ul><li>列表项</li></ul>`。
- Markdown 支持元素映射:`**重点**` 转为 `<strong>重点</strong>`。
- Markdown 支持元素映射:`` `代码` `` 转为 `<code>代码</code>`。
- Markdown 支持元素映射:`---` 转为 `<hr>`。
- 连续列表项必须合并到同一个 `<ul>`。
- 空行用于分段。
- Markdown 硬换行不要转换成 `<br>`。
- 普通段落内部的单个换行合并为空格。
- 每段末尾的中文句号 `。` 去掉。
- HTML 特殊字符必须转义,避免破坏结构。
- 代码块如果出现,转换为 `<pre><code>...</code></pre>`,样式沿用该风格的 `code/pre` 规则;如果风格没有 `pre`,补一段基础 `pre` CSS。
- 表格不直接生成 `<table>`,微信公众号兼容性差;优先转换为列表。
- 图片不内嵌;把图片位置保留为 `<p>[图片:描述]</p>`。
- 链接保留为文本形式,必要时在文末列出。
- 默认提取文稿中的首个一级标题作为文章标题元信息,并从正文输出中移除;用户明确要求正文保留标题时例外。
- 根据所选 style id 读取对应 CSS。
- 把选择器中的属性写到每个匹配的可见元素上。
- 把正文基础样式补到每个段落、标题、列表和代码元素上,不能只依赖继承。
- 删除 `<style>` 标签、class、id 和伪元素规则。
- 将 `background` 单色值规范为 `background-color`。
- 检查每个可见元素是否拥有独立、完整的粘贴样式。
- 单风格:生成一个 HTML,完成后打开这个 HTML。
- `--preview`:生成 6 个推荐风格:`minimal`、`medium`、`stripe`、`wired`、`ft`、`course`。
- `--preview`:同时生成 `00_公众号HTML风格总览.html` 和 `风格目录.md`。
- `--preview`:完成后打开总览页。
- `--all`:生成全部 15 个风格,同时生成总览页和风格目录。
- `--all`:完成后打开总览页。
- 总览页只用于本地预览,不需要粘贴到公众号后台。
- 总览页必须按分组展示风格。
- 总览页每个风格卡片链接到对应 HTML。
- 总览页写清楚风格名、适用场景、style id。
- 总览页不使用外部资源。
- 总览页可以使用 `<style>` 和 class,因为它只用于本地预览;总览页链接到的每个正式交付 HTML 仍必须符合「微信粘贴兼容性」规则。
- 每个正式交付 HTML 必须通过检查:不包含 `<style>` 标签。
- 每个正式交付 HTML 必须通过检查:不包含 `class=` 或 `id=`。
- 每个正式交付 HTML 必须通过检查:不包含 `:before`、`:after`、`<script>`、外部 URL 或 `@import`。
- 每个正式交付 HTML 必须通过检查:不包含仅用于承载全局样式的最外层正文容器。
- 每个正式交付 HTML 必须通过检查:每个可见正文元素都有 `style` 属性。
- 每个正式交付 HTML 必须通过检查:每个普通段落都独立包含 `font-size`、`line-height` 和 `color`。
- 每个正式交付 HTML 必须通过检查:列表容器和每个列表项都有 `style` 属性。
- 每个正式交付 HTML 必须通过检查:HTML 结构校验通过。
- 默认模式下,`<body>` 不包含文稿开头的一级标题,也不重复出现 `<head><title>` 的文章标题;用户明确要求正文保留标题时例外。
- 可以使用命令做基础检查:`xmllint --html --noout "输出文件.html"`。
- 可以使用命令做基础检查:`rg -n '<style|class=|id=|:before|:after|<script|https?://|@import' "输出文件.html"`;第二条命令应该没有输出。
- 若环境没有 `xmllint` 或 `rg`,使用等价工具完成检查。
- 生成完成后告诉用户:已生成。打开 HTML 后:1. Cmd+A 全选 2. Cmd+C 复制 3. 粘贴到微信公众号后台编辑器 4. 用微信后台预览检查手机端效果。
- 如果生成了多个风格,告诉用户先在总览页里点开比较,选定后再复制对应 HTML。
- 不要联网加载字体、CSS、图片或脚本。
- 不要使用 JavaScript。
- 不要依赖 hover、动画、`position: fixed` 等公众号后台不稳定能力。
- 正式交付 HTML 的 CSS 必须逐元素展开为行内样式,不使用 `<style>`。
- 正文默认保持 16px 左右,行高 1.75-1.95。
- 不要为了风格牺牲中文长文可读性。
- 不要把来源媒体的品牌资产、logo、专有视觉原样复制进 HTML;这里只借鉴排版范式。
- 完成当前任务后直接结束。
- 只有用户明确询问下一步,且当前环境已经安装 `/dbs` 时,简短提示:「下一步不确定时,可以输入 `/dbs`。」
适用边界 · 注意事项
- 不要用于改写文章观点、内容诊断或润色文案;该技能只做发布排版。
- 不适用于需要内嵌图片、复杂表格、交互/动画/JavaScript、外部字体或外部 CSS 的公众号排版。
- 如果用户没有微信公众号后台或不需要生成微信公众号发布 HTML,不应使用。