生成可直接粘贴到微信公众号编辑器的技术文章 — 自包含 HTML · 内联样式 · 移动端优先
Generate WeChat Official Account (公众号) articles as self-contained HTML with inline CSS — paste-ready for the mp.weixin.qq.com editor. An AI Agent Skill for WorkBuddy / Claude Code.
本仓库是一个 AI Agent Skill（技能包），供 WorkBuddy / Claude Code 等支持 skills 的 agent 加载使用。
✨ 已整合：本仓库能力已并入 studiohub —— 自媒体内容生产统一入口，单一工作流中即可调用（工作流 B·公众号文章）。
写一篇公众号技术文章，通常要经过：整理素材（DOCX / PPTX / PDF / 笔记）→ 规划章节 → 编写正文 → 设计卡片、表格与图片 → 处理公众号编辑器兼容格式 → 嵌入数据图与二维码。
wechat-article-html-skill 把这一整条链路固化为可复用的技能：输入素材，输出一个可直接粘贴发布的排版完成的自包含 HTML，全程无需手动排版。
适用场景：技术科普 · 产品推文 · 行业解读 · 实验方法分享 · 企业公众号运营。
以下截图来自实际生产案例——一篇《外泌体"TFF+超离"联合提取方案》技术长文，已正式发布至公众号。
区域 内容 头部 渐变封面（双行标题 + 标签）+ 浅蓝导语 正文 章节结构 + 原理图 + 关键参数表 + 数据图（WB膜包对比） 文末 深色联系区 + 二维码卡片 + 公司简介
- 所有样式内联，无外部 CSS / JS /
<head>/<body>（公众号编辑器会剥离这些标签） Ctrl+A → Ctrl+C → 粘贴到公众号编辑器即可使用，排版完整保留
- 8px 水平边距，充分利用手机屏幕宽度
- 章节间距
30px 8px 28px，每章结束后留白明显 - 图片
width: 100%; max-width: Npx; height: auto自适应
组件 说明 配色 14 色可复用配色表（深蓝 #1a5276 + 青绿 #16a085 主色调） 章节标题 圆形序号徽章 + 分割线 卡片 白色卡片三段式（头部 / 正文 / 底部提示） 步骤列表 圆形数字徽章 + flex 布局 数据表格 固定列宽 + 表头底色 + 单元格双居中 键值参数表 紧凑型标签 / 值对照 图片卡片 base64 内嵌 + 图注 + 结论高亮 联系区 / 二维码 深色渐变背景 + 白底二维码卡片 + 公司简介
针对微信编辑器粘贴时的样式清洗行为，沉淀了以下兼容铁律：
铁律 说明 1 表格底色写在每个 <th> / <td> 上 写在 <tr> 上会被剥离 2 使用 border-collapse: separate 配合圆角 否则圆角失效 3 分割线画在标题 border-bottom 上 空 <div> 画线会被编辑器剥离（只剩空行） 4 单元格必须双居中 text-align: center; vertical-align: middle; 5 渐变背景只用于有真实内容的 section 已验证可用（封面 / 联系区），空容器不适用 6 字体只用系统字体栈 外部字体引用会被剥离 7 图片 base64 内嵌 无外链、无 JS
- 从 PPTX / DOCX 素材中提取数据图，base64 内嵌至对应章节
- 文末公司区块：公众号二维码 + 公司简介
将本目录放置到 agent 的 skills 目录（例如 WorkBuddy 的 ~/.workbuddy/skills/wechat-article-html/）。
直接提供素材并说明意图：
把这两份材料写成一篇公众号文章
<提供 DOCX / PPTX / PDF / 笔记等素材>
wechat-article-html-skill/
├── SKILL.md # 技能定义：设计系统 + 组件模板 + 工作流 + 踩坑表
├── README.md # 本说明
├── LICENSE # MIT 许可
└── screenshots/ # 实际案例截图（用于 README 预览）
├── 01-header.png # 渐变封面 + 导语
├── 02-body.png # 章节结构 + 原理图 + 数据表 + 数据图
└── 03-footer.png # 联系区 + 二维码 + 公司简介
wechat article · 公众号文章 · 微信公众号 · WeChat Official Account · mp.weixin.qq.com · HTML generator · AI Agent Skill · agent skill · inline CSS · mobile-first · copy-paste HTML · 微信编辑器排版 · 公众号排版工具 · LLM skill · content creation
版本 说明 v1.0.0 初始版本：完整设计系统 + 组件模板 + 公众号编辑器兼容规范
MIT License
Copyright (c) 2026 flyanx
本技能基于实际公众号发布工作流沉淀，可自由 fork / 修改 / 复用。