16 今梦 11小时前 186次点击
Hello大家,今天给大家带来一款我们最近在研究的小项目——我们自己写的「梦仔公众号排版工具」。这款工具的作用,就是将我们写好的文章进行 HTML 样式的排版。排好之后,点击预览就能直接看到代码呈现出来的完整样子;确认满意后,点击复制到剪贴板,再到公众号 App 里粘贴,就可以完成从排版到发表的完整流程。
困于方寸之间
那为什么要做这款工具呢?其实是源于我自己。我一直在用手机写公众号,起初我的排版几乎是没有排版可言的,因为我只用到了手机端公众号助手的一些通用功能,比如加粗、更换颜色、缩进,除此之外就没有了。那些排版功能很有限,我自己的审美和精力也有限,所以排出来的文章大概率都比较丑,也比较奇怪。看着别人排得都很好看,也去咨询过,市面上确实有一些专门的排版工具,比如壹伴助手、秀米等等。但问题是,它们大多需要电脑,而我手上没有电脑,看不到排版后的样式;手机端 App 又不能显示 HTML 代码,粘贴过去也看不出完整效果,所以一直没办法很好地使用这些工具,况且有些工具还是收费的。
再三找了一圈之后,没有发现我能用起来的工具。我发现这些工具大多都有一个特性:排版好的内容需要在微信公众号助手的网页端后台上传到草稿,再点击发送。而网页端有一个麻烦的地方——需要管理员微信号扫码登录。我只有一个手机,没办法扫码,因为不支持截图,必须面对面扫,所以我连后台都登不上去,非常苦恼。手上没有电脑,这条路大概率是走不通的。
AI排版初探
走不通的情况下,我就想,有没有其他办法?能不能借助现在的 AI 技术?于是和朋友聊了聊。有朋友告诉我,像豆包这个工具,排版好的 HTML 代码是可以直接在线预览样式的。我去试了一下,确实是这个样子。于是,我就把文章发给豆包,让它直接帮我排版。我使用的提示词如下:
请基于我提供的文本,生成一份适用于微信公众号排版的 HTML 和 CSS 样式代码,严格遵循以下要求:
1. 内容完整:不得增加或删减原文中的任何文字和标点符号,保持原文完全不变。
2. 标题层级:智能识别文章中已有的标题文字,使用 h1、h2、h3 标签进行层级标注。严禁自行添加原文中不存在的标题(包括主标题和子标题)。
3. 设计风格:先根据文章的内容和风格进行整体排版规划,再细化具体样式。整体追求美观、现代、高级的视觉风格,避免复杂花哨的装饰元素。
4. 链接处理规则:
· 若原文中的链接属于微信公众号生态内链接(如 mp.weixin.qq.com 域名下的链接),则使用 标签包裹,保留可点击的链接属性(href)。
· 若原文中的链接不属于微信生态链接,请勿将其包裹为可点击链接,而是以普通文本形式展示。可以通过 CSS 对其进行颜色、字重等样式美化,但不得添加 href 属性或使其产生跳转行为。
5. 留白规范:页面两侧留白约 1.5 个字符宽度,确保阅读舒适度。
6. 输出格式:仅输出可直接使用的 HTML 与 CSS 代码,样式内嵌于 HTML 文件中。
把这段提示词和文章内容一起发给豆包,它就会给文章进行 HTML 排版,然后返回代码。
粘贴的诀窍
发回来之后,我们直接点击预览,看到效果觉得不错了,就可以长按预览区域,先点击全选,再点击复制,这样就能将内容直接复制到手机的剪贴板。接着打开公众号助手,新建一篇文章,在编辑器里长按文本框,注意,一定一定要点微信公众号助手的“粘贴”按钮,不要用输入法剪贴板的粘贴,不然样式带不过来。
从想法到应用
用是能用了,但我发现,光是排版还不够,因为整个过程还是要在多个 App 之间切来切去,挺麻烦的。我就在想,能不能干脆自己做一个工具,把这些需求都服务好?于是,我又和朋友聊了聊,有一位线上的伙伴,网名叫“阅读者”。他之前投过小米耳机和豆包同声传译的评测稿,还是个学生,目前也在研究一些好玩的 AI 项目,比如用 AI 辅助开发。他听到我有这个需求后,就尝试帮我做了这么一个安卓工具,这也是他第一次做安卓项目,算是他的第一款完全自己写出来的安卓 App,挺不错的一个作品。
三大核心功能
我试用了一下,非常满足我的需求。第一,可以粘贴 HTML、CSS 或者 Markdown 代码,点击预览就能看到 HTML 渲染后的样子;除了粘贴,也可以通过导入本地的 HTML 或 Markdown 文件来预览。第二,有历史记录功能。我们可以查看以往预览过的文章历史,因为用 AI 排版就跟开盲盒一样,一次生成的样式未必满意,往往需要让 AI 多出几版,再择优而选。择优的过程就需要回顾历史中 AI 排过的版本。如果像以前那样没有历史功能,每次都要去翻 AI 的聊天记录,找到那个版本,复制、粘贴到工具里预览,回来再重复,工作量就太大了。所以这个历史记录功能非常实用。
同时,还有一大块功能叫“AI 润色”——我们在 App 里直接内置了一个 AI 助手,目前使用的是 DeepSeek 模型。因为我发现在排版过程中,DeepSeek 生成的排版内容比较符合我的预期,所以我们内置了一个免费的 DeepSeek 工具。可以直接向它发送消息,把前面的提示词和文本一起发过去,它就会输出代码,我们复制下来,再粘贴到 App 的编辑器里预览,然后一键复制到公众号助手,整个编辑与发布流程就完成了。
开源共筑未来
希望这款工具能给和我一样用手机编辑公众号文章的伙伴带来一些帮助。确实,用手机写公众号挺费劲的。以前我从写作、排版到发布,要花很多很多时间,而大部分时间都耗在排版上,真正写文反而快一些。尤其是有了 AI 辅助和标点符号的修改后,我写文章的速度已经很快了,唯一卡住的地方就是排版,需要亲自去调。有时候只想给某几个字加粗或换个颜色,就得放大屏幕、逐字选中,再去找对应的颜色,反复放大缩小查看结果,对眼睛伤害很大,效率也很低,还不一定排得好看。所以,才有了上面这个工具的诞生,希望能帮自己解决这些问题。
这个思路是我自己全程想好的,然后请阅读者一步步去实现,中间调试了无数个版本。目前项目也已经开源,我们构建了第一个 release 版本,但在功能上还有一些欠缺,比如一键生成图片、一键打开公众号助手等许多想法都还没实现。因为阅读者还在读大学,时间有限,我也不太好意思一直麻烦他。所以开源之后,我非常希望有更多志同道合的开发者小伙伴和我们一起共建这个项目,无论是完善前端 UI 还是丰富功能,能够继续维护下去,让它帮助到更多人,也能把我这个想法普惠给更多的伙伴。其他朋友可以下载体验,如果遇到 bug 或有新的需求,也欢迎在留言区提出,后面有机会我们会尝试更新和优化。
有兴趣维护的开发者可以了解一下,也欢迎加入交流群,和阅读者以及大家一起交流。之前我分享过用豆包进行排版的思路,看到有些小伙伴的排版确实变好看了,这让我很开心。希望这篇文章还能帮到更多、更多的人。
点击这里下载我打开之后就显示了这些文字,然后没有其他内容,也没有关闭按钮。
欢迎使用梦子公众号排版工具
粘贴或输入 HTML / CSS / Markdown 内容。
切换到预览页查看渲染效果并一键复制。
历史记录会自动保存关键快照,避免误操作丢失。
AI 辅助已上线,点击编辑页的“AI 编辑”按钮体验智能润色、扩写、摘要等功能。
更多说明,请查看“设置”“帮助”,包含完整的无障碍使用指南。
我还真没找到。屏幕探测都用上了。
刚才去试了一下,结果还是什么都没出现,甚至连滚动音效都没出现,有没有可能跟屏幕尺寸有关系,然后做编程的时候也没在那个地方加滚动条,这是我的猜测。
欢迎使用梦子公众号排版工具
粘贴或输入 HTML / CSS / Markdown 内容。
切换到预览页查看渲染效果并一键复制。
历史记录会自动保存关键快照,避免误操作丢失。
AI 辅助已上线,点击编辑页的“AI 编辑”按钮体验智能润色、扩写、摘要等功能。
更多说明,请查看“设置”“帮助”,包含完整的无障碍使用指南。
开始使用
我研究研究一下hh
这个东西非常实用,肯定会帮助很多人的,给楼主点赞。