公众号一键排版制作发布-柳十一（shiyiagi-wechat-article-flow）
把一篇公众号文章从「选题」到「躺在草稿箱里待群发」的全流程固化成一个可复用的 SOP。
本 skill 整合了两块能力：
- 生产侧（吸收自
ai-report-wechat-pipeline）：权威报告 / 多主题干货文 → 结构化提炼 → 长文 → 数据校准。 - 发布侧（本 skill 沉淀的硬核经验）：微信兼容排版 + 图片双保险内联 + 草稿箱发布踩坑库。
配套两个 零依赖 Python 脚本（scripts/ 下），可单独运行，随 skill 一起上传分发。
适用场景
- 输入 A：一份权威机构报告 / 研究（麦肯锡、谷歌、IDC、Gartner 等）→ 解读成小白向长文。
- 输入 B：一个主题 / 关键词 / 热点（如 Codex 技巧、Seedance 模型、视频提示词）→ 写成干货文。
- 输出：一篇 3000–7000 字、说人话、含数据图表、已做微信兼容处理、可直接发草稿箱的 HTML。
- 风格：说人话 + 数据图表 + 模型对比，卡兹克爆款风（认知冲突钩子、故事转场、结尾行动清单）。
端到端 SOP（10 步）
> 每一步产出文件建议同目录存放，命名 主题-阶段.后缀，方便二次修改。
1. 选题与素材获取
- 确定主题 / 报告来源；多源 WebSearch 抓中文二手解读，建立初步框架。
- 同时 Glob 本地是否已有报告原文 / 素材，避免重复抓取。
- 产出：选题钩子 + 初步框架。
2. 结构化提炼（大纲 + 论点框架）
- 写 Markdown 底稿：核心数据表、文章结构、配图规划、来源可信度标注。
- 产出：xxx-结构化提炼.md。
3. 扩写长文
- 基于框架扩写。用 Python 统计纯中文字数（正则 [\u4e00-\u9fff]）确保达标（干货文 3000+、报告解读 5000+）。
- 开头认知冲突钩子 → 故事驱动转场 → 结尾行动清单。
- 产出：xxx-公众号长文.md。
4. 数据校准（关键，不可省）
- 回到官方原文 / 官网核对关键数字（排名、百分比、样本量、发布日）。
- 分级标注来源可信度：✅官方坐实 / ⚠️多源转述未原图核对 / 🔷非本报告数据。
- 无法逐字核对的数字，文末免责声明如实写「据多家解读转述、发布前核对官方原图」。
- 诚信铁律：禁止 AI 凭空生成数据图；官方原图类标注「待替换官方原图」。
5. 排版 HTML（零图片依赖优先）
- 优先用 div 卡片承载所有视觉（封面、对比表、五问清单、公式卡、一图看懂区块），做到「外部图片依赖 = 0」，发微信永不裂图。
- 必须用图片时（真实截图 / 官方原图）：写出 <img> 并带 data-local-path="绝对路径"（见第 7 步）。
- 浅色发版：白底、用 <style> 类选择器承载样式（微信编辑器支持 class 选择器，且本 skill 第 6 步脚本才能智能保持多列横排）；避免把布局写在 inline style 里（inline 写法第 6 步只能降级成竖排）。复杂多列布局优先参考 references/wechat-safe-layouts.md 用 <table> 手写。
- 产出：xxx-公众号排版-浅色版.html。
6. 微信兼容转换（核心，本 skill 独有） ⚠️
- 微信富文本编辑器会过滤 display:grid / display:flex / position:sticky，导致卡片堆叠、布局塌陷——这是「排版不对」的头号原因。
- 本地 Chrome 渲染正常 ≠ 微信正常，必须做兼容处理。
- 运行配套脚本检测并修复：
bash
python3 scripts/wechat_compat.py check 排版.html # 列出所有不安全的 grid/flex 用法
python3 scripts/wechat_compat.py fix 排版.html -o 兼容.html # 自动降级为 table/float/inline-block
- 脚本会把常见布局（四宫格 .grid4、一图看懂 .om-grid、品牌栏 .brand、标签 .chips、列表 .scene、标题 .sec h2）自动改写为微信安全写法；未知类会告警让你手动处理。
- 安全写法模板见 references/wechat-safe-layouts.md（写排版时直接照抄，可省去事后转换）。
- 产出：xxx-公众号排版-浅色版-微信兼容.html。
7. 图片双保险内联（仅当用了真实图片时） ⚠️
- 微信公众号发布脚本上传图床依赖 <img> 的 data-local-path 本地路径；没有它就图全丢。
- 正确工作流（务必遵守）：内联前的源文件必须是「<img src="本地相对/绝对路径" data-local-path="绝对路径">」形态（即第 5 步排版时写本地路径 + 绝对 data-local-path，不要先手填 base64）。运行脚本后：
- 读本地图 → base64 内联进 src（本地双击可看）
- 保留 data-local-path（微信可上传图床）
- 若 img 缺 data-local-path，脚本自动从 src 本地路径推断并补上。
bash
python3 scripts/inline_imgs.py 兼容.html -o 发布版.html
- ⚠️ 不可恢复场景：若你已把 src 手填成 base64 并丢了 data-local-path，脚本无法反推本地路径，会告警并跳过——必须回到第 5 步的原始本地路径版重新内联。
- 产出：xxx-公众号排版-发布版.html（最终发布文件）。
- 零图片依赖的文章（全 div 卡片）跳过此步，直接用第 6 步的兼容版。
8. 一图看懂总结卡
- 文末单独做一张信息卡（对比表 / 速览），用 div 卡片或 HTML+截图双交付。
9. 发布到公众号草稿箱
- 本 skill 不绑定任何第三方发布工具，发布步骤可自行接入任意方式。推荐两种：
- 方式 A（手动，零依赖）：登录公众号后台 → 新建图文 → 把最终 HTML 的 <body> 内容粘贴进编辑器 → 存草稿箱。⚠️ 注意：微信后台不识别 data-local-path 属性，因此零图片依赖（全 div 卡片）的文章可直接粘贴；若文章用了真实图片，手动方式下需把图片单独拖拽/上传进编辑器（data-local-path 仅对方式 B 自动化脚本有意义）。
- 方式 B（自动化）：接入你自己的 CDP / API 发布脚本，读取最终 HTML 后推送。注意下面两条微信端铁律。
- 微信端铁律（本 skill 踩坑沉淀，必看）：
- 发布前 taskkill.exe /F /IM chrome.exe 清残留 Chrome（否则新标签检测失败）。
- 若用自动化脚本驱动浏览器，用系统 Chrome；部分 playwright 自带的 chromium 不支持 debug port 协议，会起不来（勿设指向 playwright chromium 的浏览器路径变量）。
- 标题取自 HTML <title>；默认存草稿箱，不群发。
- 发布前删除所有虚线占位框（发布后会变可见虚线框，极丑）；删了前面占位框要用 div 卡片补，不要留空。
10. 收尾
- 发布后提醒清理草稿箱旧版本，只留最终版。
- 同目录保留 排版源 + 一图看懂源 + 脚本产物，方便二次修改。
发布踩坑经验库（已验证，照抄避坑）
| 坑 | 现象 | 正确做法 |
|---|---|---|
| grid/flex 布局 | 本地正常，微信里卡片堆叠塌陷 | 第 6 步用 wechat_compat.py 转 table/float（最重要！） |
img 无 data-local-path |
发布后图全丢 | 每个 img 加绝对路径 data-local-path |
base64 内联丢 data-local-path |
本地能看，微信裂图 | 用第 7 步脚本做双保险（base64 + 保留 data-local-path） |
| 残留 Chrome 进程 | 新标签检测失败、发布卡住 | 发布前 taskkill.exe /F /IM chrome.exe |
| ms-playwright chromium 不支持 debug port | 发布脚本起不来 | 用系统 Chrome，去掉指向 playwright chromium 的浏览器路径变量 |
| Playwright 不在 managed 环境 | venv 创建失败 | python -m pip install --user playwright |
文件名含 × 字符 |
Playwright file:// 报错 |
用 os.path.join 绝对路径，避免特殊字符文件名 |
| 保留虚线占位框 | 草稿里全是虚线框 | 发布前全删，换真实图或 div 卡片 |
| Bash 参数名错 | 误判环境故障 | Bash 工具字段是 command 不是 arguments |
固定配色体系（7 篇已验证，可直接复用）
做同系列栏目时保持统一视觉识别：
| 主题 | 主色 | 说明 |
|---|---|---|
| 麦肯锡报告解读 | #07a06a 绿 |
权威、稳重 |
| 文本提示词 | #4a5ce0 靛蓝 |
理性、专业 |
| 视频提示词 | #6d4ae6 紫 |
创意、灵动 |
| Codex 应用技巧 | #0ca5a5 青 |
工程、技术 |
| WB × Codex 组合 | #0ca5a5→#0ea5e9 青绿渐变 |
组合、协同 |
| AI 大事件 | #e8590c 橙红 |
热点、冲击力 |
| Seedance 视频模型 | #e64980 品红 |
视觉、潮流 |
通用规范：白底浅色版 + 圆角卡片 + 细线边框 + 同色系发光/阴影；深色版用 Linear 风深底（#0a0e1a 系）+ 主色高亮。
关键纪律
- 信息验证：事实 vs 观点分离，每个数字标来源，不确定写「根据 XX 描述」。
- 配图诚信：真实截图优先，自制图声明「不捏造数字」，AI 生成假数据图零容忍。
- 发布路由：默认草稿箱，用户明确说「直接发布」才群发。
- 微信兼容优先：任何
display:grid/flex在发布前必须过wechat_compat.py，本地正常不算数。
安全与隐私（TRACE · Trust）
- 零网络请求：两个脚本仅读写本地文件，不发起任何 HTTP 请求、不调用外部 API。
- 最小权限：仅对指定的本地 HTML / 图片做读取与（可选）覆盖写入；不访问其他目录、不读环境变量、不执行系统命令。
- 无敏感信息收集：不记录、不上传任何用户输入或产物。
- 纯标准库：仅依赖 Python 内置模块（argparse / re / os / base64 / sys），无第三方包、无编译、无二进制下载。
- 国内可用：无境外依赖，断网环境也能完整运行。
能力边界 / 不适用场景（TRACE · Adaptability）
本 skill 专注「微信公众号图文（mp.weixin.qq.com 富文本编辑器）」的生产与发布，明确边界如下：
- ✅ 适用：公众号长文、权威报告解读、多主题干货文、图文混排（HTML）。
- ⚠️ 已知局限：
fix的 inline-block 覆盖是启发式，2×2 网格可能降级为 1×4 横排（仍可读但与原 grid 意图不同）；严格要求 2×2 / 3 列的复杂布局，请用references/wechat-safe-layouts.md的<table>模板手写。- 仅处理已编译出 CSS 的页面；纯 Tailwind / 未编译原子类页面需先编译出 CSS 再交给本 skill。
- 不处理视频号、小程序、H5 互动；仅针对公众号图文。
- 第 9 步发布不绑定任何工具：手动粘贴零依赖；自动化需自备 CDP / API 脚本（本 skill 不内置发布器）。
依赖声明（上传 / 分发时必读）
- 本 skill 自带：
scripts/wechat_compat.py、scripts/inline_imgs.py（均仅用 Python 标准库，零外部依赖，可直接上传分发）。 - 发布步骤零绑定：第 9 步不依赖任何第三方 skill，支持手动粘贴或自备脚本；第 1–8 步完全自包含，可独立产出微信兼容 HTML。
- 运行环境：Python 3.8+；Windows 下
taskkill清进程，macOS/Linux 用pkill -f chrome。
复用提示
- 零图片依赖（全 div 卡片）是最稳的发布形态，优先采用。
- 配色体系、踩坑库、安全布局模板都在本 skill 内，二次生产直接复用，不必重新踩坑。
- HY3 免费期适合跑高消耗步骤（长文扩写、多步校准），零积分。
完整示例（5 分钟跑通，验证全链路）
examples/ 目录含一个最小可运行示例（含 grid/flex 危险写法 + 本地 SVG 图），零配置即可跑通：
cd examples
python3 ../scripts/wechat_compat.py check sample-layout.html # 应报 .grid4 / .brand 危险
python3 ../scripts/wechat_compat.py fix sample-layout.html -o compatible.html
python3 ../scripts/inline_imgs.py compatible.html -o published.html
预期：check 列出 2 个危险类 → fix 注入 inline-block 覆盖（微信内横排不塌陷）→ inline_imgs 把 SVG 内联为 base64 并自动补全 data-local-path 双保险。
详见 examples/README.md。
