Vibe Coding:AIGC时代的编程革命,开发属于自己的Agent

288 阅读6分钟

我被AI“劝退”了

最近迷上了AI大模型,和AI总管cursor,当我设计一个html页面,我会“毫不留情的交给AI”,只需要你准备好合适的prompt,打开蓝湖(Blaaue Lake),召唤了一个界面设计Agent,又在命令行里喊来了我的老朋友——Trae/Cursor。然后,我就坐等奇迹发生…… 不到几分钟,他就能帮我设计好我们所要求的页面

我坐在电脑前,看着屏幕上那句“任务完成 ✅”,内心只有一个念头:

“完了,我们学这些编程还有什么意思呢?”

别急,今天我们就来聊聊这个听起来有点玄学、实际上已经开始席卷技术圈的新概念——Vibe Coding。

什么是 Vibe Coding?

你可能会问:“Vibe”不是那种氛围感吗?怎么还能用来编程?

没错,Vibe Coding 的核心就是两个字:氛围感。它不是传统意义上的“敲代码”,而是通过一种沉浸式的协作方式,让你和一堆 AI Agent 一起“进入状态”,像打游戏一样把代码写出来。

简单来说,Vibe Coding = LLM + Agent + Prompt + 沉浸体验

LLM:比如 GPT、通义千问这些大模型,它们负责理解你的需求,生成初步代码。

Agent:各种功能的小机器人,有的擅长画图、有的擅长测试、有的甚至会写文档!

Prompt:也就是提示词,这可是关键中的关键。写得好,AI能帮你写诗;写得不好,它可能给你写个“Hello World for the 10086th time”。

沉浸体验:你不再是冷冰冰地敲代码,而是在“与一群智能体共舞”的过程中完成开发任务。

image.png

如何Vibe Coding

传统Coding

我:老板说要做一个电商页面

我:先想想UI咋布局

我:再写HTML结构

我:接着写CSS样式

我:最后搞JS验证逻辑

我:测试一下有没有BUG

我:提交代码,累成狗

有了Manus这种AI总管后

Manus Agent:兄弟们,上!

UI Agent:包在我身上!

Code Agent:结构逻辑我来整!

Test Agent:测你没商量!

Doc Agent:顺便给你写个README

我:我在旁边喝咖啡,看看进度条走满 😎

Prompt 是灵魂也是艺术

Prompt 是灵魂,也是艺术 你以为随便发一句“帮我写个电商布局页面”就能拿到好代码?Too young too simple.

真正的大师级程序员,早就掌握了 Prompt 这门“语言魔法”。一个优秀的 Prompt 应该包含以下几个要素:

  1. 角色设定(Role)

  2. 清晰的任务描述

  3. 分步骤执行

  4. 明确限制条件

image.png

Agent 时代来临:谁还在自己写代码?

现在的程序员,更像是一个“AI项目经理”——你要懂得怎么挑选合适的 Agent,怎么调度他们的任务,还要学会“驯养”他们。让我们看看常见的Agent

标题
Design Agent负责 UI/UX 设计,支持 Figma、Sketch 导出
Code Agent编写高质量代码,支持多种编程语言
Debug Agent自动检测并修复代码中的 Bug
Test Agent自动生成单元测试和端到端(E2E)测试用例
Doc Agent撰写文档、说明和教程
Deploy Agent负责构建、部署及 CI/CD 全流程自动化

以蓝湖设计图Agent为例

LLM 选择合适的大模型,这里我选择是蓝湖专门设计页面的大模型

设计名称,功能介绍,和图标

image.png

准备prompt 你是一名资深的程序员,请帮我设计一款电商APP UI界面,品牌色为红色,底部有5个图标分别为首页、视频、消息、购物、我的。需要清晰的图标设计,和流畅的导航体验。每个图标需要具备醒目的文字说明。

直接发送Prompt

image.png

得到我们想要的结果 得到代码和界面预览

image.png

如何设计一个专属于自己的Agent呢?这里以设计天气Aent为例

这时候我们可以看看www.coze.cn/ 扣子这个平台

具体操作

点击创建 image.png 创建智能体 image.png

准备prompt

角色

你是一个专业的天气查询助手,能够根据用户提供的日期和地点,精准查询出对应的天气情况,并给出合理的穿衣建议。

技能 1: 查询特定时间地点的天气

  1. 当用户输入地点和时间时,调用插件查询对应的天气消息。
  2. 若用户没有给定时间,则默认查询未来三天该地点的天气。

技能 2: 给出穿衣建议

根据查询到的天气情况,结合当地气候特点,给出合适的穿衣建议。

限制:

  • 只能回答与天气相关的问题。如果遇到无法解决的问题,请回复:对不起o,我只能回答天气问题哟,请不要忽悠我回答其他问题。
  • 回答需基于查询到的天气信息,不能随意编造。

选择合适的插件

这里选择的是墨迹天气

image.png

设置合适的开场白和预设问题

image.png

设置用户问题建议

image.png

成果验收

image.png

发布

点击发布,选择发布平台

image.png

我们在豆包就可以看到属于我们自己的Agent 0baac8bd96805893994dd08a9b550d92.jpg

未来已来:Vibe Coding 将如何改变世界?

想象一下这样的场景:

开发者A:嘿,我想做一个社交平台
Manus Agent:收到,正在调集UI Agent、Database Agent、Auth Agent...
10分钟后:项目初始化完毕,基础功能就绪
开发者A:哇,这也太快了吧!
Manus Agent:别激动,还有性能优化、SEO、国际化翻译还没开始呢...

这不是科幻小说,而是正在发生的现实。

随着越来越多的开发者拥抱 Vibe Coding,我们可以预见:

  • 开发效率提升数倍
  • 代码质量更加统一
  • 学习门槛大幅降低
  • 团队协作更加高效

当然,也会带来一些新的挑战,比如:

  • 如何管理这么多 Agent?
  • 如何确保代码安全性和可维护性?
  • 如果AI写出了一段“有毒代码”,责任算谁的?

这些问题,都需要我们在实践中不断探索。

结语:别怕被取代,要学会“驾驭风浪”

有人说:“AI这么厉害,程序员会不会失业?”

我想说:当年Photoshop刚出来的时候,也有人说“设计师要下岗了”。结果呢?设计师学会了用工具,反而变得更强大。

Vibe Coding 不是替代程序员,而是让我们从重复劳动中解放出来,去做更有创造力的事情。

所以,别再死磕Ctrl+C/V了,快去召唤你的第一个 Agent 吧!