Vibe Coding-前后端+聊天机器人的全栈实践

一、什么是Vibe Coding

Vibe Coding（氛围编程/沉浸式编程）是一种新兴的软件开发实践，由OpenAI联合创始人Andrej Karpathy于2025年2月提出。

1.1、核心概念

• 定义：开发者使用自然语言向AI描述需求，AI自动生成代码，开发者只关注结果是否符合预期

• 本质：将实现细节完全外包给AI，人类负责"出题+审核"，AI负责"解题+改卷"

• 流程：说想法→看结果→调整需求→再出结果，循环直到满意

1.2、关键特征

• 结果导向：不关心代码实现逻辑，只关注最终效果

• 自然语言交互：用日常语言描述需求，无需编程语法

• 即时反馈循环：快速迭代，持续优化

• 降低门槛：即使编程新手也能创建软件

1.3、优势

• 效率极高：省去调试和底层实现时间

• 零门槛：无需深厚编程功底

• 沉浸体验：专注于创意和需求表达

• 快速原型：想法快速落地验证

第一次了解这个概念还是在魔搭研习社，我写代码的能力不是很强，非常依赖AI，在Ai的帮助下我可以很快的完成一个任务。我认为Ai不是洪水猛兽、我们在了解技术栈后，AI可以很快的帮我们完成项目需求，效率大幅度提升，每一个人都能单独开发应用。对于那些很强的程序员，那更是如虎添翼。

二、参赛构思

2.1、主题Vibe Coding + 魔搭工具

本次采用qoder+ModelScope Qwen3-235B-A22B-Instruct-2507来完成本次项目。感谢魔搭提供的api_key

2.2、qoder的安装与使用

下载 | Qoder - 智能体编程平台

这里就不详细介绍安装了，在官网下载完成以后，就可以开始使用了。

和大多数ai编程工具一样有多个量级，基础版是免费使用的，一般完成一些不复杂的编程，非常推荐新手使用，等熟练使用编程工具以后就可以考虑升级版本。

2.3 、 Qwen3-235B-A22B-Instruct-2507

使用顶级大模型来作为聊天机器人的底座，可以自己部署一些小模型也是可以的，这里通过api的方式更加方便。

通过api的方式调用大模型，魔搭提供免费的api来调用这类顶级大模型，当时是有使用限制的，但是对于用来学习是完全够用的。

三、作品构思

3.1、笑话之王 - The King of Jokes

一个集成了AI聊天机器人的趣味笑话分享社区！来看看谁是笑话之王吧。

博主想要通过ai来完成一个集成前端、后端的完整应用。

3.2、✨ 功能特点

• 📝 发布笑话: 分享你的幽默时刻

• 👍 互动点赞: 为喜欢的内容点赞

• 💬 评论讨论: 与其他用户互动交流

• 🏆 排行榜: 查看最受欢迎的笑话和用户

• 🤖 AI聊天: 与Qwen3-235B AI助手对话，获取更多笑话

3.3、🛠️ 技术栈

• 前端: Vue 3 + Element Plus + Vite

• 后端: FastAPI + SQLAlchemy + Mysql

• AI模型: ModelScope Qwen3-235B-A22B-Instruct-2507

• 部署: Gradio

四、 动手实践

实践才是检验真理得唯一标准，不动手永远想是完成不了得，也不能进步，那就开始使用qoder吧。

4.1 先画蓝图，做好规划

# 提示词
我的主题是笑话之王。
我想搭建一个具有前后端功能的应用
每个注册用户可以在该应用里面讲述一个笑话，每个用户可以点赞，评论。最后做一个前十排行榜。排名第一的显示笑话之王的称号，后面排名的你看可以给什么称号合适。
现在，我需要你先制定一份任务规划书，里面有详细的前后端技术栈。后端我希望是python，fastapi，存储数据我希望用mysql。您先试着写计划书。然后我们商量着改进。
请开始任务。

记得称呼ai大人为您，然后干活更卖力（讲个笑话）

先把具体得框架搭好，不要担心搭错，ai可以帮你解决的。

各个细节的设计都很到位，哪里不满意就给他说就行。

4.2、开始行动

4.2.1首先我要考虑环境的问题，我是学python的，深知环境的重要性。

# 提示词
接下来写requirement.txt安装python环境可能用到的包，我这里希望使用conda来管理环境。环境名称也叫做The_King_of_Jokes。

4.2.2、不要担心下一步干嘛

即使你没有成熟的开发经验，ai会给你建议的，你可以自己决定下一步干什么，也可以采取ai给的建议。

4.2.3、测试

不要想把所有完成以后再来测试功能，哪个时候到处报错将是灾难性的。所以我习惯在完成一个功能后、就开始测试功能接口。

我们就去写的路由来可视化检查各个接口是否正常

这个时候我想起来mysql都还没有建表，登录认证功能都还没开始做。有开始请ai完善接下来的功能。

因为我本地是安装了MySQL8.0的所以接下来登录，建表，数据库初始化

基本所有功能接口完成以后，开始测试接口。

不要害怕报错，你应该期待报错，每一次报错将是你下一个项目的经验。

4.2.4、前端开发

有人会说我没有前端经验，一点都不会怎么办，我想说你会说话吗？会说话会打字那么就能做。

一直点击继续就行了，直到报错

想要什么功能和他说就行

修复问题

4.2.5、功能扩展

后面又想添加一个聊天机器人的功能，用来讲笑话。

4.3、功能展示

登录

笑话广场

排行榜

个人中心

聊天机器人

大家觉得好笑吗

演示地址：8.136.12.48/videos/mp4/xiaohuawang.mp4

体验地址：笑话之王

五、部署

部署应用新人可以在本地跑起来就很好了，如果想要让别人也能访问，可以考虑魔搭的创空间部署，说来丢人，我部署了变天都没成功。最后还是在我的服务器上部署了这个应用。

体验地址：笑话之王

六、总结

怎么说呢，我知道我这个应用在大佬面前就是搞笑的，但是没有行动，永远在那里空想，我认为更加可笑。只有不断动手尝试，你才能进步。不要害怕第一步，从零到一确实很难，但是只要你入门了，就会变得简单一点了。希望从事相关行业的新人能用于尝试，特别是在校的兄弟们，不要观望了，抽点时间玩玩。现在每个ai都是一个博学的老师，不在是哪个查个资料要上csdn的时代了。总之Vibe Coding + 魔搭工具,你上你也行。

当AI技术重塑感官，虚拟与现实的界限正在消融。
魔珐星云——以超写实数字人技术为核心，正在构建一个全新的虚拟生态。

诚邀您通过专属通道入驻，体验最前沿的虚拟互动技术，抢占Web3.0时代的先机。

👉 点击注册：https://c.c1nd.cn/9C9WW
💎 邀请代码： J3VA6QNSW2 

未来已来，期待在星云中与你相遇。🌌
注册使用我的专属邀请码体验数字人ai男友、女友。
平板，电脑均可体验