Google上周悄悄发布了一个叫Stitch的工具，官方用的词是"Vibe Design"——你描述界面的感觉，AI帮你把UI代码写出来。《华尔街日报》同期发了一篇长报道，把这件事放进了一个更大的叙事框架里：AI正在让软件开发这件事变得越来越像说话。

Vibe Coding这个概念并不新，但它现在真的可用了。本文带你做两个完整的实战项目——一个前端页面，一个带后端的工具服务——全程不写一行手动代码，只用自然语言描述需求。

---

Vibe Coding是什么，为什么现在才可用

一句话描述：你用中文（或英文）说出你想要什么，AI把代码写出来，你测试、反馈、迭代，直到满意为止。

这个流程的核心变化是：你从"代码作者"变成了"需求方"。你不需要知道CSS的flex布局怎么写，不需要记住React的useEffect钩子语法，不需要查SQLite的连接字符串格式。你只需要说清楚"我想要一个什么样的东西"。

为什么之前不行，现在才可用？三个条件同时成立了：

第一，AI理解能力有了质的提升。 现在的模型能理解"极简感""温暖的棕色调""像Notion一样简洁"这类模糊的感受描述，并把它转化成具体的设计决策。以前的模型只能处理精确的技术指令。

第二，工具能在项目维度工作了。 Cursor、Claude Code这类工具不再只是改一行代码，它们能理解整个项目的文件结构，在多个文件之间协调修改，跟踪上下文，做系统性的工程决策。

第三，有足够多的成功案例打消了疑虑。 Garry Tan用Claude Code重建项目的故事，以及大量非开发者用AI做出MVP原型的案例，让人开始相信这条路走得通，不只是演示效果。

---

实战一：摄影师作品展示落地页

场景设定： 你是一个摄影师，想做一个展示作品集的个人主页，但完全不懂前端开发。

打开Claude Code，新建一个文件夹，然后输入这段描述：

> 帮我做一个摄影师个人作品展示页面。风格要极简，以黑白为主色调，配少量暖灰色点缀。顶部是全屏大图轮播，支持左右切换，图片之间有淡入淡出的过渡效果。中间是作品集网格，点击可以放大查看。底部有简短的个人介绍和联系方式（邮箱和Instagram链接）。用纯HTML+CSS+JS实现，不依赖任何框架或库。

描述里有几个关键点值得注意：风格词（极简、黑白主调）、具体功能（全屏轮播、左右切换、淡入淡出）、结构描述（顶部/中间/底部的内容安排）、技术限定（不依赖框架）。

Claude Code生成之后，在浏览器里打开测试。通常第一版的整体结构是对的，但细节会有需要调整的地方。这时候不需要自己改代码，直接反馈：

• "轮播图的切换箭头太小了，改大一点，加一个半透明的深色背景"
• "作品网格的间距太紧，每个格子之间加12px的间距"
• "底部字体太小，联系方式那里用16px"

每次反馈，Claude Code直接修改对应的代码，你刷新浏览器看效果，再继续反馈。这个迭代过程通常3到5轮之后能得到满意的结果。

全程你没有打开过任何代码文件，没有修改过一行CSS，但得到了一个可以直接上线的作品展示页面。

---

实战二：URL短链服务（含后端）

场景设定： 你的团队经常要分享内部文档链接，URL太长不好管理，想要一个自己的短链服务，不想用第三方。

这个项目涉及后端逻辑，比前端页面复杂一些。分三步走，效果比一口气说完好得多。

第一步，搭核心功能：

> 帮我搭一个URL短链服务。技术栈：Node.js + Express，数据存SQLite。核心功能：通过API传入原始URL，生成一个6位随机字符的短码；访问短链接时自动跳转到原始URL；记录每条短链的点击次数和最后访问时间。

等它生成完，在终端运行服务，用curl或者Postman测试几个接口：创建短链是否成功，访问短链是否正确跳转，点击次数是否在递增。测试通过，进第二步。

第二步，加管理界面：

> 在刚才的服务基础上，加一个Web管理页面。页面展示所有已创建的短链，包括：原始URL（截断显示，超长的加tooltip展示完整内容）、短链地址（可点击复制）、点击次数、创建时间。支持按点击次数排序。用原生HTML+CSS，不需要任何框架，风格简洁专业。

第三步，加安全验证：

> 给创建短链的API加Bearer Token认证，Token在服务启动时从环境变量读取。管理页面也要加基础的HTTP认证，用户名和密码从环境变量读取。

三步走完，你有了一个功能完整、有管理界面、有基础安全保护的内部短链服务。

---

五个让结果更接近预期的技巧

技巧一：用类比描述风格，而不是用形容词

"简洁的风格"这种描述太模糊，AI只能猜。"风格参考Linear的产品页，冷色调，大量留白"这种描述AI能理解，因为它见过Linear，知道那是什么感觉。有具体参考比纯粹形容词效果好很多。

技巧二：明确说清楚你不想要什么

"不要使用任何UI框架""不要用TypeScript，用纯JavaScript""不要加登录功能"。限制条件说清楚可以避免AI做出你不想要的选择，后期不用改回来。

技巧三：一次只加一个功能

不要一口气描述所有功能，跑通了核心功能再加。AI一次处理的需求越复杂，出错的概率越高，出了问题也更难定位在哪里。

技巧四：截图比文字描述更精准

在Cursor里，遇到界面问题可以截图直接给AI说"这里的对齐有问题"或者"这个按钮位置不对"，比用文字描述位置关系要精准得多。

技巧五：让AI解释关键逻辑

每次生成完，对关键业务逻辑问一句"解释一下这部分是怎么工作的"。不只是为了理解，更是为了发现问题——如果AI的解释和你的预期不一致，说明实现可能有偏差，趁早发现趁早改。

---

Vibe Coding的边界在哪里

说清楚它搞不定什么，比夸大它的能力更重要。

以下这些场景，Vibe Coding目前还撑不住：高并发系统的性能调优、实时音视频通话的底层实现、复杂支付系统的安全审计、医疗健康数据的合规处理、大型微服务架构的整体设计。这些场景需要专业的工程判断，AI生成的代码可能在表面上能跑，但经不起生产环境的压力测试。

但是，个人项目、内部工具、活动落地页、数据展示看板、原型验证、小型API服务——这类占到日常软件需求80%以上的场景，Vibe Coding完全够用，而且比传统方式快几倍到几十倍。

---

最后说一点

Vibe Coding不是"以后不用学编程了"的意思。更准确的说法是：以前花在写样板代码、查API文档、调CSS像素上的时间，现在可以全部省下来，花在真正重要的事情上——想清楚要做什么，想清楚给谁用，想清楚用户体验应该是什么感觉。

工具已经准备好了。现在的问题只有一个：你有没有值得做的想法。