【Vibe Coding 实战】我如何用 AI 把一张草图变成了能跑的应用

背景:故事的开始

故事的开头,是公司里一个有点棘手的项目需求------给移液枪做自动化调参。

简单来说,就是我们要让移-液枪能快速自动调整参数,达到交付给客户的精准标准。在这之前,这活儿全靠人工,工程师们得一遍遍地测试、验证、调整,而且每种液体的标准还不一样,纯纯的体力活,费时又费力。

后来,我们团队想出了一个结合 LLM+Agent 的改造方案。核心思路就是让 Agent 去自动化地执行操作、收集数据、验证结果,再用这些数据去训练一个预测模型。基本上,就是把整个枯燥的流程都丢给 Agent 去搞定。

过程:从"灵魂草图"到 V1.0

在尝试 AI 编程之前,其实我已经吭哧吭哧搞出了一个 Demo。但在演示的时候,总觉得缺一个酷炫的 UI 界面来展示我们的成果。

一开始我打算用 Python 的 Gradio 快速搭一个,但发现 Gradio 的页面实在是太"朴素"了,有点配不上我们这套方案。

于是我决定,上!必须上 React + Node.js 全家桶!但问题来了,时间紧任务重,哪有空从零手写?这时候,我想到了最近很火的 AI 编程产品,决定尝试一下"Vibe Coding"的感觉。

挑来挑去,最后选了 bolt.new,原因很简单------它做出来的页面是真的好看!抱着试一试的心态,我开干了。

第一步:灵魂画手上线

万物起源于草图。我用 Excalidraw 画了张整体的"灵魂草图"。(PS:Excalidraw 这工具真心好用,强烈推荐!)

第二步:AI 生成前端

草图在手,我把它丢给了 bolt.new,让它帮我生成前端项目。

经过几轮"调教",一个可以运行的前端项目就诞生了!页面看起来挺清爽,感觉不错。虽然有些小 bug,但伤及无辜,花点时间修复一下就 OK 了,完全不影响主体功能。

第三步:让 AI 看着前端写后端

前端有了,后端自然也得跟上。任务的状态管理、执行流程、各种接口开发、还有和硬件的对接......一堆活儿等着。

这时我灵机一动:既然前端是 AI 生成的,我能不能让 AI 看着我的前端代码,帮我把后端也写了?

说干就干,我把这个任务交给了 Claude。结果相当惊喜,我想要的功能,Claude 基本上帮我搞定了七七八八。当然,这中间我也反复调整了好几轮提示词(prompt)。Claude 甚至还贴心地帮我做了版本管理,可以随时回滚。最终,我调试到了 v9 版本,同时也把我免费的调用次数给榨干了,哈哈。

(Claude 帮我生成的后端代码)

(Claude 甚至帮我设计并创建了数据库表结构)

Claude 根据我的前端项目,不仅生成了对应的 API,连数据库的表结构设计和创建都一条龙服务了。一个基本的 CRUD 后端就这么完成了,效率是真的高!

第四步:缝缝补补,打通最后一公里

有了 AI 生成的前后端框架,剩下的就是一些"体力活"了。我花了一些时间,把剩余的功能补全,比如 Agent 的具体规划(planning)、任务执行逻辑、和硬件的对接等等。

在这个过程中,Copilot 成了我的得力助手,帮我完成了大量的代码补全和逻辑实现。最后,连最终任务的校准报告生成和设计,也是在它的辅助下完成的。

至此,项目的 V1.0 版本顺利诞生!


(最终生成的校准报告)

一些感受

总有人说,AI 编程是来"取代"程序员的。但我的十二年软件开发生涯告诉我一件事:

"写代码从来不是瓶颈,代码最大的成本是理解,而不是写出来。"

在这个时代,"写出代码"的成本正变得越来越低,我相信未来只会更快、更好。但只有真正做过开发的人才明白,去理解需求、去想清楚到底要写出什么样的代码,这才是最核心、最无法被替代的部分。

就像很多人说的,这是一个变化飞快的时代,真正会被淘汰的,可能只是那批不愿意接受改变、不会利用 AI 的程序员。

结尾曲

最后,引用一段我最近看到并且非常喜欢的话来收尾吧:

"LLM很强大,但并未解决根本问题。

LLM在快速原型开发、脚手-架搭建和自动化方面确实带来了真正的价值。然而,它们无法消除清晰思考、谨慎审查以及周密设计的必要性。相反,随着生成代码越来越多,这些基础工作变得更为关键。

是的,写代码的成本确实降低了。但团队一起理解代码的成本并没有降低。

这才是真正的瓶颈。我们不应假装它不存在。"

时代的洪流滚滚向前,我愈发觉得自己渺小。但即便如此,我也希望能在浪潮中留下一点属于我自己的痕迹。

相关推荐
腾飞开源1 分钟前
05_Dify接入Ollama本地大模型
人工智能·项目实战·dify·ai智能体·ollama·企业级应用·接入模型
HavenlonLabs5 分钟前
重塑链上未来的隐形基石:长期主义下的生态演进
大数据·人工智能·安全·区块链
Jutick9 分钟前
远程 MCP 已配置,为什么你的 AI 开发工具仍查不到 A 股行情?
人工智能·mcp
phltxy10 分钟前
Spring AI Agents 智能体模式实战
java·人工智能·spring
li-xun13 分钟前
2026年6月14日博客精选
人工智能·ai
DogDaoDao24 分钟前
【GitHub】 Headroom 深度解析:AI Agent 上下文压缩层的完整技术拆解
人工智能·深度学习·程序员·github·ai agent·智能体·agent skill
挖坑的张师傅31 分钟前
方便 Mac 本机运行 e2b 的沙箱方案 e2b-local
人工智能·后端
生成论实验室36 分钟前
认知芯片:让判断力在物理定律上运行——AI芯片的第三条路
人工智能·语言模型·机器人·自动驾驶·安全架构
浦信仿真大讲堂36 分钟前
达索系统SIMULIA Abaqus 2026接触和约束的增强新功能介绍
人工智能·python·算法·仿真软件·达索软件
文艺倾年43 分钟前
【强化学习】MDP、贝尔曼方程与CartPole 编程,20W字总结(二)
人工智能·软件工程·强化学习