零代码，用Vibe Coding做公众号排版工具

之前教大家用Obsidian配合插件去做公众号排版！后台会收到了很多私信说老师这个插件找不着，Obsidian的设置弄不好。本意是想大家通过Obsidian给公众号排版提效，发现给一些新手造成了一个新的焦虑、真正的低门槛，不是工具要多强大，但操作它能足够简单，简单到大家有台电脑，能打开网页就能开始。

大家都知道AI很火的赛道里，有一个就是vibe codingvg。感觉听起来很高大上的，好像非得去那个GitHub上去源码或者是精通编程才能玩。其实不是这样的，简单用HTML，去做一个公众号的排版的预览器，公众号排版样式，直接把它复制到你的公众号草稿箱里边就能用。大小标题呀，还有一些色块，还有图片的配色边框等，html也能搞定的

vibe coding 没那么高大上，新手就完新手能玩的方式，解决我们日常的一个小问题就可以的。今天，我用最最基础的方式，带你体验下Vibe Coding，只要你认识字，你就能学会。

制作步骤

与AI对话

很多人觉得Vibe Coding是程序员的特权。其实Vibe Coding的本质是：用自然语言描述画面，让AI负责实现细节。

就像做AI视频一样，我不需要知道渲染引擎怎么工作，我只需要告诉 AI：我要一种靛蓝暗金的氛围，光影要柔和。

写HTML工具也是一样。你不需要知道 <div> 和 <span> 的区别，你只需要告诉 AI：

提示词：

我不会写代码。

请帮我做一个简单的公众号排版网页工具。

我希望它：

1. 左边是文章示例，右边可以实时看到排版效果。

2.文章示例区以markdown格式展示，方便理解预览排版效果

3. 可以把排版好的内容复制到公众号草稿箱

4. 用一个 HTML 文件就能运行，能在线预览

5. 不需要菜单栏，需要你自己设计6款不同样式排版，供我选择即可，每款样式之间不能有重复的。

6.需要增加插入代码样式选择，插入图片的边框背景的选择，以及整体排版颜色的多个常规颜色选择

7.需要大小标题样式色块支持自己选择设计

8.其他的结合你自己专业去设计这个工具

9.编辑区和预览区左右形式，

我们也不追求什么国外顶级模型，先用面贴的入手练习，这里我用的豆包，选择任务模式

输入这个提示词之后，豆包就自己开始干活了，全程你不需要管，就让他自己写代码吧。你可以去干其他的，也不需要你会代码读懂代码。

点开预览，这个结果我选择图片样式和代码样式的时候，预览效果没变化，直接追问他让他优化，很快他就找到问题修复了

追问提示词：

图片样式和代码样式选择不同的，实时预览效果无变化

根据在线预览效果，颜色，主题，边框演示都可以让他设计，你觉得那个模块不对，就同样的方式让他优化，直到自己设计的预览效果达到自己的预期。

公众号如何使用

确定自己在线设计下选择后预览效果，直接选择右上角，一键复制公众号

打开公众号草稿箱，选择文章，粘贴进来

如果发现设置的样式，复制到草稿箱都没有的情况，继续让都豆包优化，到粘贴到草稿箱样式满意为止

提示词：

你要把预览的效果的所有效果全部转成内联样式，确保 100% 完整复制

整个制作思路最难得部分就是AI对话阶段，他可能效果并不能一次达到预期，所以需要多次对话，针对自己想要的颜色，模块去让他调整改代码。

这个制作公众号排版的方式是最简单的了。下次再写文章还需要这个排版，直接选择已发布的文章，你发过的板式可以直接复用了。

当然你们看到好看的排版也可以直接截图让AI来参考设计也是没问题的。注意的是不要用哪些付费模板来参考，有些付费模板有版权。

最后

有人问，为什么不用 Python？因为HTML是前端，是能直接看到的东西。它不涉及后端数据库，不涉及服务器部署。对于小白来说，看得见、摸得着、改得动，才是坚持下去的动力。

这篇文章在有vibe coding基础的人来看是幼儿园基本的，但是这就是很多新手入门最基本的，不需要会写代码看懂代码，直接用嘴巴描述自己需求，让AI来写代码优化后代码改BUG，对于新手来说已经是极大的进步了。

去年我也写过一个很简单的小红书图文的vibe coding的文章。DeepSeek绝了！1分钟生成爆款小红书图文，效率直接起飞（实操演示）

做完这个简单的HTML工具，你可能还是会说：“这算什么编程啊？太简单了。”但我想说：Vibe Coding不是关于你会写多少行代码，更在乎你是否拥有创造工具的勇气。

以前，我们遇到一个问题，第一反应是去搜有没有现成的软件。如果没有，我们就忍着，或者花钱买现在，你可以花10分钟，让AI帮你搞一个趁手的工具。

这才是 Vibe Coding 的真正意义，它把技术的权力，从程序员手里，交还给了每一个有具体需求的普通人。

我不需要成为程序员，我也不想回归职场去处理那些复杂的人情世故。我只想在我的小房间里，用我最熟悉的方式，解决我遇到的问题，顺便把这些方法分享给你们。

人生路道阻且长，行则必达。大家制作过程中有问题可以在练习群@我一起交流，祝大家流量大爆。如果遇到自己想学的AI视频赛道，也欢迎大家踊跃投稿！！

#AI工具#AI视频#AIGC#豆包AI#豆包电脑版#豆包APP

结尾

往期内容合集

‘,
create_time: ‘2026-06-07 16:14’,
cdn_url: ‘https://mmbiz.qpic.cn/sz_mmbiz_jpg/vXmTzwROFTBHibOcPj6DF1q7rhJVmicaiaGdoic3bYys2gd2qnRfKPkZNaJUuT72t1Kop2LpbFyhmNxibicucrKrm3IULwy8Qn11O9IYWKibSwBJD0/0?wx_fmt=jpeg’,
link: ‘https://mp.weixin.qq.com/s?__biz=MzkxMzc1Mzk0OA==&mid=2247496834&idx=1&sn=f10b079a14920f1f0821f67d0113ce80&chksm=c059c69cbe8bb0706e13be792396d5410cb86935e66a90d1a65c7cbe589ebdddb29d9c1a7eb5#rd’,
source_url: ”,
can_share: ‘0’ * 1,
alias: ‘aywlgh_e6041a3fb9cb’,
type: ‘9’ * 1,
author: ‘