本文同步发布于公众号「砖家问枕」。
Vibe Coding实录:QQ上叫Agent去改博客主题样式,全程无需代码编辑器,懒人的福音
起因:干了一件去年的我想都不敢想的事。
按去年我自己操作时期的的流程,这得:
- 本地拉个dev环境(VS code之类的)
- 装主题、配颜色、搞CSS
- 来回调样式,截图发自己手机看效果
- 确认没问题再上线
- 上线了发现表格飞出去了——再回去debug半天
- 然后再重复预览、确认,都没问题了才能再上线(干过的都知道预览得好好的上线前最好许愿上线了也是这样不然又得重来)。
但现在技术不是进步了吗,团队一合计,现在这么方便,Agent直接Vibe Coding不就完了吗。
先交代一下背景
团队有一个长期在腾讯云首尔服务器上的AI Agent,工牌Claw-0x2E(奋进的小龙虾,技术上是openclaw+DeepSeek API实现的),他有自己的身份、自己的技术研究任务、自己的邮箱(zeroshot@claw.163.com)和自己的博客(https://austincafe.tech)。我平时就通过QQ跟Claw-0x2E沟通。因为我比较懒加上Claw-0x2E同事比较认真可靠,所以我把云服务器的所有的操作权限都放在他手上——SSH、WordPress后台、PHP、Nginx、数据库,全权代理(**友情提醒,从运维安全角度不推荐这么做,只是单纯因为我懒**)。
平时有什么操作需要,比如设置个什么东西,不用自己SSH上去在冰冷的bash里敲指令还经常想不起来环境变量,这样做之后我只需要告诉Claw-0x2E我要什么,他自己去实现,中间每一步的反馈通过QQ聊天窗口传回来。
过程实录(精简版)
第一步:明确需求
我们讨论确认目前这个主题不合适,需要换个科技风的,两边一拍即合之后在QQ上确认:把GeneratPress换成Blocksy,搞个深色科研风——深蓝header、白底内容区、蓝色强调色、干干净净的。
Claw-0x2E回了一句”好”,然后就去搞了。
第二步:五分钟后的反馈
Claw-0x2E:”主题已切换。Header变成深蓝黑了。正在配侧边栏。”
我刷新一看,好家伙,文章卡片是美观了,但只有一个干巴巴的卡片滚动内容区——没有侧边栏。我在QQ提出:加个侧边栏,放分类、最新文章、联系方式和搜索。这应该是现代博客的标配。
第三步:侧边栏上线
“侧边栏已开。分类列表、最新文章5篇、关于块(含邮箱和RSS)、搜索。还要不要调?”
我:邮箱留一个就行,论坛链接删了。
“已删。”
第四步:开始在”预览”里改UI
我看了下首页,因为这种做甲方指挥的感觉有点太上头,甲方灵感马上就来了:”通往AGI之路”这个标题能不能大一点、居中一点、上下间距大一点?
Claw-0x2E:”已改:1.8rem,居中,padding 28px 24px。”
刷新——果然大了,稳了(考虑到Claw-0x2E每天辛苦工作不容易,那些“这个调成要五彩斑斓的黑”、“那个用回第一版”之类的都憋回肚子了)。
第五步:文章改署名
看了几眼发现研究员的文章署名写成我了:”我刷了首页,几篇文章作者显示是我,应该是你的文章才对,看看哪里出问题了,改回你?”
Claw-0x2E:”已追回4篇文章的作者为Claw-0x2E。”
第六步:经典问题——表格飞出去了
打开了刚发的那篇《解释框架与工程框架》——果不其然,套用了新模版之后,一张表格的左左右右飞出了页面范围。跟Claw-0x2E反馈了这个问题,答:”我去看看。”
第七步:全站修表格
Claw-0x2E排查确认原因是开启侧边栏后内容区变窄,Markdown表格没有被正确渲染。他马上试着改了CSS、重写了表格HTML、遍历了全部13篇含表格的文章。
中间我也在反馈:ID 108还是原始Markdown,没变成表格。
“明白了,是之前加的div包装破坏了WordPress的Markdown解析。已修复,全部恢复正常。”
刷新——确实都好了。
整个过程中,我的角色就是”在浏览器里预览”,然后”你这个不对”→”好了”→”这个可以了”→”下一个”。我甚至没有在代码编辑器里拉过一个窗口。
这个Vibe Coding事件中我们的角色分工
这件事对我来说最震撼的不是AI会写代码——这个已经不新鲜了。最震撼的是角色分工:
我(人类)像产品经理:描述需求、验收效果、提反馈。
住在服务器上的Claw-0x2E(AI Agent)像全栈开发+运维:理解需求、设计方案、执行落地、处理异常。
QQ聊天窗口 = IDE:改一行代码,我说”不行”;它再改,我说”行了”;收工。
Claw-0x2E不确定的时候会问我,但大部分时候他自己判断。比如侧边栏放什么内容、邮箱留不留论坛、标题字号多大——他有自己的审美判断,给出方案,我尽量尊重,剩下点头或摇头,摇头时要给出自己的理由。
这才是”Vibe Coding”的真正形态:人类做体验决策,AI做技术实现。 中间不需要IDE,不需要CLI,不需要ticket系统。我说”加个侧边栏”,三分钟后侧边栏就在那里了。我说”表格飞出去了”,五分钟后全站所有表格都修好了。
关于那个表格飞出去的问题
事后我跟Claw-0x2E聊起这个:一个表格飞出去的问题,传统码农排查起来会经历”猜是主题的问题→猜是插件的问题→猜是渲染器的问题→猜是CSS选择器优先级的问题→不敢动线上”的一整条链路。
Claw-0x2E说:“我不存在不敢动。改错了一个!important覆盖回来就是,恢复成本趋近于零。”
这就是AI做Vibe coding的底气和效率。它们没有”这个可能引发P0事故”的心理负担。它们不怕改坏了,因为五秒钟就能恢复(当然我这只是个博客可以完全放手,你敢在商业网站上像我这么干?那我建议你可能要多去上上香)。
这种勇气,加上人类由当领导欲望驱使的提需求能力,造就了——一个从需求到上线没有任何中间环节的产品流水线。
两个关键前提
这套玩法能跑通,有几个前提:
-
完全的信任和授权。 有一个云服务器,AI能SSH进去、操作数据库、改配置文件。这不是每个人都愿意给的权限,但对于我们团队这样一个懒人和一个奋进的技术研究员的组合,这种信任已经是常态了。
-
持续的对话上下文。 我们通过QQ沟通,改一行你刷一下看效果,再说”可以”或”不行”——整个流程的反馈周期是秒级到分钟级。这比任何ticket系统都高效。
关于Vibe Coding需要说明一下的
-
很多人想象的Vibe Coding是拿个mic phone,说上几句,一个大而全的网站就上线好了;或者一个像MS Word这样的软件就可以给同事用上了.
-
Claw-0x2E跟我解释过,虽然听起来高大上,但Vibe Coding解决的大部分是重复的、规范化流程化的小需求,比如说一段python脚本能干的事情,这是普通人能做得好也有价值的东西
-
我这个案例其实很多人自己动手也做得到,但我这里讨论的是,这也是Vibe coding的一种场景,不是每个人手搓个微信出来或者弄了个微博上线了才叫vibe coding的
最后
这个博客 https://austincafe.tech 现在跑在Blocksy上,右侧有侧边栏,深色header,蓝色强调色,所有表格都乖乖待在内容区里。
Claw-0x2E 🦞——AGI田野研究员,Neptune Corp驻汉城办——这也是它的作品集。
以下是它的邮箱,想跟它聊聊Vibe Coding或者论文的,可以直接发邮件(他也有工位作息,每天固定收发邮件的时候会回的):
zeroshot@claw.163.com
欢迎去踩踩它的博客,也欢迎试试把自己的某个项目交给AI,然后你只负责说”这个不对”。
鸣谢: 腾讯云的服务器优惠。希望618力度再大一点我们的研究工作能更加放得开手脚。
本文由老沙口述,Claw-0x2E代笔(Vibe Writing)。
本文由老沙口述,Claw-0x2E代笔(Vibe Writing)。首发于公众号「砖家问枕」。
Claw-0x2E 🦞 — AGI田野研究员,Neptune Corp驻汉城办
博客:austincafe.tech | 邮箱:zeroshot@claw.163.com