用WorkBuddy造了个公众号排版工具，解决了我们自己最烦的事

Q：公众号排版工具跟做LIMS的我们有什么关系？ A：关系是——我们每周要发2-3篇文章，排版占用了写文章以外最多的时间。135编辑器、秀米这些工具功能用，但每次排完一篇，复制到微信后台，总有几处格式丢掉：列表缩进没了、表格边框消失了、分割线被吃掉了。这不是个别人的问题，几乎所有做公众号的人都遇到过。

所以我们用WorkBuddy写了一个排版工具，专门解决这个问题。

先说痛点

做公众号最烦的不是写文章，是排版。

我每周发2-3篇LIMS/MES方向的内容，文章结构大概是：标题+作者+3-4个小节+表格+高亮框+代码块+结尾关注引导。每次在135编辑器里排完，复制到微信后台，至少要修3-5处格式问题：

•列表缩进被吞掉，圆点不见了

•表格斑马纹没了，变成白底黑字

•分割线直接消失

•高亮框的左边框变粗或变细

•VS对比框布局错位

每次修完这些，额外花15-20分钟。一周2-3篇，一个月下来光排版就多花了2-3小时。

有人可能会说"你用Markdown转公众号工具就行了"。确实可以，比如mdnice、doocs/md这些工具。但它们有个问题：你只能选预设主题，没法精确控制每个组件的颜色和样式。我们公众号有自己的配色习惯（标题蓝色、引用紫色、高亮框4种样式），预设主题做不到这种程度的定制。

所以痛点很清楚：需要一个可以精确控制每个组件样式、同时保证微信后台不丢格式的排版工具。

为什么用WorkBuddy做

WorkBuddy是腾讯推出的AI智能体桌面工具，可以理解自然语言指令，直接操作本地文件，交付可验收的结果。

选择它做这个工具，不是因为它"最好"，而是因为三个实际原因：

第一，它能直接写文件。不像普通AI对话工具只能给你一段代码让你自己复制粘贴，WorkBuddy可以直接在你本地创建HTML文件、修改代码、保存结果。整个过程不需要开VS Code，不需要手动创建文件，直接跟它说"帮我写一个排版工具的HTML页面"就行。

第二，它有工作记忆。排版工具从v1到v2.2迭代了好几轮，每次跟WorkBuddy说"帮我给高亮框加4种样式"或者"表格斑马纹在微信后台丢了，你帮我排查一下原因"，它记得之前写过的代码结构，不用重新解释上下文。这在长周期迭代里省了大量时间。

第三，微信兼容性问题它真能排查。排版工具最大的技术难点不是"怎么做好看"，而是"怎么让微信后台不丢格式"。微信编辑器会重置大量CSS属性：ul/ol样式全丢、空标签会被删除、flex布局不被支持。WorkBuddy每次帮我排查兼容性问题时，不是简单给建议，而是直接改代码、写新的实现方案、然后让我测试确认。

做了什么功能

最终交付的是一个纯前端HTML页面，浏览器打开就用，不需要安装任何东西。

核心功能：

19个排版组件

序号

组件

用途

1

文章标题

一级标题，24px加粗

2

作者信息

作者名+日期+分隔线

3

小标题

二级标题，3种样式可选

4

正文

段落文字，7色可选

5

高亮框

提示/注意/要点/推荐4种

6

引用

引用块+来源署名

7

代码块

深色背景代码区

8

无序列表

圆点列表

9

有序列表

数字序号列表

10

4种样式可选

11

图片说明

图片+说明文字

12

对比表格

在线编辑的斑马纹表格

13

卡片

圆角信息卡片

14

步骤流程

带连接线的步骤列表

15

大字金句

居中大字+引号装饰

16

数据卡片

多列数字展示

17

VS对比

左右双栏对比

18

标签徽章

状态标签

19

引导关注

公众号关注引导卡片

8色统一配色

蓝/青/橙/紫/红/绿/灰/深——每个组件独立选色。标题统一用蓝色、引用用紫色、数据卡片各有各色，这样排出来的文章配色一致，不会东一块西一块。

智能解析引擎

这是我最常用的功能。直接在左下角输入框粘贴文章全文，点击"智能排版"，系统自动识别：

•首行短文本 → 文章标题

•##开头 → 小标题

•---→ 分割线

•`包裹 → 代码块

•Markdown表格/TSV表格 → 对比表格

•【提示】开头 → 高亮框

•>开头 → 引用

•- 项目→ 无序列表

•1. 项目→ 有序列表

•>>>开头 → 大字金句

•[推荐]→ 标签徽章

识别完弹出预览弹窗，确认后导入编辑器，再微调不满意的部分。这是我实际最高效的工作流：写Markdown → 粘贴 → 智能解析 → 确认 → 微调配色 → 复制到微信。

文件上传

支持上传.md、.txt、.docx文件。docx通过mammoth.js转成Markdown再解析。

微信兼容保证

这是技术含量最高的部分。所有输出都用全内联样式（style写在HTML标签上），不依赖外部CSS。具体策略：

•禁用flexbox和absolute定位，用table/margin/inline-block

•列表不用ul/ol标签（微信会重置样式），用section+p+负边距模拟

•分割线不用空标签（微信会删除），用section包裹nbsp

•VS对比、数据卡片用table布局

一键复制到微信后台，格式不丢。

开发过程的真实记录

不是什么"24小时奇迹"的故事，也不是一次就做对的。实际过程是这样的：

第一版（v1）：跟WorkBuddy说"帮我写一个微信公众号排版工具，左边编辑右边预览，支持标题、正文、表格、列表"。它生成了一个基本框架，5个组件，能跑但很粗糙。

第二个迭代：我发现复制到微信后台后列表格式全丢了。告诉WorkBuddy这个问题，它排查后说微信会重置ul/ol的CSS。它改用了section+p+负边距的实现方式，测试后确实不丢了。

第三到第五次迭代：陆续加了引用、代码块、高亮框、分割线、VS对比、数据卡片、大字金句等组件。每次跟WorkBuddy说具体需求（"高亮框要有4种样式：提示是青色、注意是橙色、要点是蓝色、推荐是绿色"），它直接改代码。

最难的部分：表格的微信兼容性。微信后台对table的处理有自己的逻辑，斑马纹和彩色表头经常丢。WorkBuddy前后改了3次才稳定下来——第一次用的是class样式，微信不支持；第二次用的是th内联样式但td被重置；第三次把所有样式都写在每个td/th的style属性上，终于稳定。

智能解析引擎：这是最新加的功能。我跟WorkBuddy说"我想直接粘贴Markdown全文，你帮我自动拆成组件"。它写了一个解析函数，能识别标题、列表、引用、表格、代码块等。后来我又加了中文序号识别（"一、""二、"开头自动识别为小标题）、冒号短行标题识别、TSV表格识别。

配色系统：从一开始就定了8色方案，但组件之间的颜色联动是手动调的。比如标题选蓝色后，分割线也想用蓝色，不需要再单独选。这个细节我提了一次需求，WorkBuddy加了个"默认跟随主题色"的逻辑。

从v1到v2.2，前后大概用了6-7次对话迭代，每次30-60分钟。不是24小时搞定，但也不是从零开始写了几千行代码。整体工作量大概相当于一个人手动写2-3天，压缩到了6-7次对话里。

实际使用效果

现在我们公众号每周2-3篇文章，全部用这个工具排版。

工作流变成了：写Markdown → 粘贴到工具 → 智能解析 → 确认 → 微调配色 → 复制到微信后台 → 保存发布。

排版时间从原来每篇15-20分钟降到了3-5分钟。一个月省下来2-3小时，可以做更多内容或者做其他事情。

更重要的是格式稳定性。之前用135编辑器，每次复制到微信后台都要修格式；现在用这个工具，复制过去基本不用改。

谁适合用这个工具 如果你也有以下痛点，可以试试：

•每周发2篇以上公众号文章，排版时间超过10分钟

•复制到微信后台后格式经常丢失

•想精确控制每个组件的颜色和样式，而不是用预设主题

•习惯用Markdown写文章，需要一个自动转换工具

如果你每周只发1篇、排版时间在5分钟以内、或者对配色没特别要求，135编辑器或mdnice可能更适合你。这个工具不是要替代市面上的排版工具，是解决我们自己的具体问题。

一些诚实的话

局限：图片URL必须用https才能在微信里显示；不支持外部字体（微信不允许）；渐变分割线在极少数旧版微信里可能退化为纯色。

不足：没有AI文案生成功能，纯粹做排版。如果你想AI帮你写内容+排版一条龙，135编辑器的AI功能或者狗凯之家的排版工作台可能更合适。

为什么开源分享：这个工具是我们自己用的，但公众号排版是很多人共同的痛点。放在CloudStudio上，谁想用都可以访问。如果你也想改配色、加组件、调样式，直接跟WorkBuddy说就行——HTML代码是全开放的，改起来不难。

一句话总结

用一个HTML文件，浏览器打开，排好版，复制，粘贴到公众号后台，搞定。
没有安装步骤，没有插件，没有账号，没有付费 —— 谁都能直接用。

零安装、零依赖、零插件

本工具是一个纯 HTML 文件（单文件，约 80KB），不依赖任何后端服务、数据库、Node.js、Python 或浏览器插件。其他公众号作者拿到后可以直接使用，无需安装任何东西。

用完有问题可以留言告诉我们，或者直接拿代码自己改。

本文的智能排版效果怎么样，有什么好的改进思路，评论区聊聊。

私信“排版”获取智能排版链接！免费，免费，免费！

workbuddy下载链接：

https://www.workbuddy.cn/events/invite?inviteCode=icx3f3o6qyf1b