之前，我简单体验了一下Claude Code，在一些简单的代码和工具任务里面，可以看到Vibe Coding 能带来的巨大提升

相信很多使用过人的朋友在尝试过一次后，都会被深刻的震撼到

最近也看到很多大佬的谈到，Claude Code 用 1 小时就完成了过去一年以来所构建的东西

那么在高强度的复杂工程里面，Vibe Coding 究竟能带来什么样的体验呢？

在过去的 10 天里，我消耗了10亿Tokens，就来分享一下我的一些实际体验和心得吧。

首先需要声明的是，能消耗这么多token，并不是我钞能力无敌，可以肆意挥霍

而是这段时间我用的都是私有化部署的开原模型，分别是

1. GLM-4.7
2. MiniMax-M2.1
3. Qwen3-235B-A22B
4. DeepSeek-V3.2

同时再叠个甲，上述几个模型，都是用的开源方案进行本地部署的

虽然decode的速度比官方快很多，但是并不具备官方的编程工具，且对Claude Code的适配也并不完善

所以无论你用的是Claude的模型，还是用官方的上述模型，实际效果应该都会比我更好

一开始

熟悉的朋友可能了解，我们在公司内部使用OpenWebUI搭建了一套AI系统，专门服务内部用户。

OpenWebUI是一个超过120k⭐️的超级开源项目，相信很多人都知道他

有超过700位开发者贡献过代码，我自己也是其中之一[旺柴]

我们在上面搭建了以上几个模型的服务，用户可以在OpenWebUI上直接调用DeepSeek等相关模型

同时建了一个RAG系统，用于回答内部用户的问题

这套系统在线上跑了一年之后，用户反馈也非常不错，但也存在不少问题，比如

1. 用户不知道这一大堆模型该怎么选，哪个能识图？哪个能写代码？哪个能写材料？是被问到最多的问题
2. RAG出来的东西不准，需要人工校验
3. AI办事流程开发复杂，连个简单的请假，都要专门写工作流

RAG的问题尤其凸显

在文档数据量从几百个增长到几十万个的时候

花费在人肉排查问题上的时间，有时候比RAG本身带来的提效要高很多

比如下面这个问题，在文档数超过80000个后，rerank模型对某些明明正确的结果给出的灾难性打分

求助了很多朋友都遇到这种类似的问题

RAG的感觉就是Demo很美好，一落地就抓瞎

固定的RAG工作流，有时候让在用户只问一个简单问题，也要忍受查询文档的缓慢过程

这体验非常糟糕，这也是在当下这个时点内部AI系统面临的困境。

对于这种用业余时间维护的为爱发电项目，就几乎变成了一个无法维护的项目

OpenAgentWebUI

那么在当下这个时间点，如果要搭建一个内部AI系统，Agent模式肯定是最合适的

所以基于这个考虑，我就开始尝试基于Claude Code搭建一个OpenAgentWebUI来解决上述问题

1. 只有一个AI

不让用户选择，就没有模型选择的问题

这个AI能识图、能写材料、能写代码、能画图、能查内部资料、能办事

2. Agentic RAG

针对不同用户的不同任务，由AI自主判断，选择合适的RAG工作流

这也就是Agentic RAG的概念

3. 保持用户习惯

为了降低用户的学习成本，与现在所有的AI保持一致，用户在使用OpenAgentWebUI的时候，不需要学习新的指令，只需要按照现在的习惯来使用即可。

开始编码

我给把前面的故事给Claude Code讲了一遍

接下来让AI根据我的描述进行计划并实施编码后，他给了我这样一个界面

看起来完全不可用，简直丑的不忍直视

看到这个的时候连我自己都在笑这是什么玩意

反思

如果是这样的话，那压根就没有做了，这得做到猴年马月了，这Vibe Coding也不行啊

但是仔细回想，这只是AI一次生成的，如果我把整个工作流按照正常的开发流程来一遍，也许可行呢？

设计先行

相信各位在公司里做开发，也是首先产品设计方案，其次UI/UX出原型图，最后根据原型图进行开发的吧

那么好，我们就从设计开始，让AI不考虑任何功能实现，我们只考虑UI/UX的设计，用纯html+css的方式来只做样式设计

很快，大概用了半个小时左右的调整和细化，原型很快就做出来了

设计稿在代码仓库的frontend/design目录下

看到这个原型的时候，信心就都回来了

原来我一个从来没搞过设计的后端工程师，也能做出来一个看着还不错的原型设计了啊！

接着编码

有了设计稿，就开始让 AI 一比一的还原设计稿

接下来就是一边摸鱼，一边干活，边调试边优化

一杯茶，一包烟，敲打AI一整天的方式完成了整个前端的开发

中间遇到一些AI乱写的地方，我会及时提醒他，让AI严格按照设计稿进行还原，比如一开始写成了这个样子

再根据心情一点点的调整，最后得到了这样的前端

在功能上，登录、注册、对话管理、AI对话、浅色/暗色切换、多语言、上传附件、搜索对话、用户编辑等十多个大的功能点基本上开发完成

截止到达到这个阶段，也才过去了一周不到，效率算是远超预期，接着我又开始了后端的开发

所有的代码我都公布在了

https://gitee.com/zsy3313422/open-claude-webui

目前尚未开发完成，最近写的有点累了，总结一下经验换换脑子，感兴趣的朋友也可以看看给点意见

经验总结

从开始琢磨这个事情，到完善一个可用的前端代码，也才过去了几天时间，这种效率是非常恐怖的

以我一个后端工程师的经验，估计写完这套前端代码，至少要花上可能数月的时间

AI编码效率，目前已经达到了一个非常高的水平，但是如何让AI编码能规范的按照你的思路进进行编码，以下是我的一点经验总结

1. 先有设计，再编码

在AI的帮助下使用figma、sketch等工具先设计出原型图，可以让你更在一开始的阶段更注重用户体验

设计稿写的越精确，AI编码的结果就越符合你的预期

如果你像我一样没用过设计工具，直接用html和css也是一个思路，不必拘泥于形式

2. Plan之后再Coding

在开启每次PR之前，使用Claude Code的Plan Mode（按两下shift+tab切换）与AI进行讨论完善计划

磨刀不误砍柴工，经过多轮讨论后生成代码质量更高，考虑的内容会更完善

3. 尽早开始维护你的CLAUDE.md

可能有人不知道什么是CLAUDE.md

这个文件是Claude Code的底层规范，分成三层 1. 系统级，由Claude管理，用户操作不了 2. 用户级，你自己的编码习惯和规则，在各个项目中通用 3. 项目级，仅在具体项目中使用

他就像整个开发团队里的约束文档，规定了整个项目的编码规范、设计规范、功能规范等

如果没有约束，AI写起代码来就会天马行空

一个很典型的例子就是，AI有可能一会用html自己写组件，一会引入一个乱七八糟的组件来实现相同的功能

时间长了你的代码就会变得几乎不可维护

4. 把你自己当做技术主管而不是程序员

在编码的过程中，你要把自己当做技术主管，而不是简单的当做一个程序员

你大量的时间，应该放在如何制定约束，让AI按照你的约束进行编码

比如我自己常用的

1. 代码查找时优先使用 LSP 工具
2. 访问外部网站时，如果访问失败使用本地代理
3. 前端在写css是严格限制使用 Tailwind CSS 类名
4. **优先使用现有组件框架**，避免从零手写 HTML/CSS 实现
5. 设计数据库时⚠️严禁使用 UUID 作为主键
6. ⚠️严禁使用数据库外键约束

你可以使用自己的编码习惯和团队习惯来进行约束

如果是团队工作，可以由整个团队共同讨论的编码规范结果

最终写入一个由团队共同使用的CLAUDE.md文件来约束AI的行为

相信你会用的越来越顺畅

5. 学会接受不完美

有很多人都讨厌屎山代码，很多人吐槽AI写的屎山代码

但是事实上说句可能扎心的话，没有程序员会觉得自己写的代码是屎山，但是看别人写的都是屎山

看看自己身边的同事写的代码

再看看公司内部前人遗留下的代码

有多少代码是真正让你看了会觉得写的真棒👍🏻？

有多少代码是让你看了后觉得就是写的一坨屎山？

接受AI写的不完美，就像是你不得不接受几年请青涩的自己，和其他人写的不完美的代码

真正实现价值，比写出完美的代码更重要

结束

好了感谢你看到这里，接下来我会继续完善上面的项目，并继续探索AI Coding

欢迎留下你的宝贵意见，我们下期再见啦！