前言

大家好，我是Mark。从25年起，大家或许经常能听到 Vibe Coding 这个概念，也就是从那时起开发产品的规则已经被彻底改变。让编程从写代码，变成聊需求，这种靠聊天就能开发出产品的范式，就叫 Vibe Coding。为什么要写这篇文章呢？主要是网上的教程太碎片化，以及没有完整的实战案例。这就导致大家东看看西学学，很难系统性的学习 Vibe Coding。所以嘛，我将自己练习两年半的 Vibe Coding 的经验分享出来，可能不是最好。但应该可以帮助到各位… 本篇文章适用于所有人，只要你有想法就能创建出独属于你自己的“一人APP“。在正式开始之前，我们先来看看本篇文章将带你掌握哪些内容：我会带你理解什么是 Vibe Coding、如何选择适合自己的开发工具、以及如何开启你的第一个 Vibe Coding 项目，最后还会分享一些AI的对话技巧，帮助你少走弯路、更快上手。准备好了吗？让我们开启这场 Vibe Coding 的奇幻之旅吧~

一、什么是 Vibe Coding

简单来说 Vibe Coding ，就是用自然语言“指挥”AI写代码，开发者更像在提需求、看结果、不断纠错，而不是自己逐行手敲。当然 Vibe Coding 也有边界，这并不意味着“有了 AI 就可以完全不懂代码”。更准确的说，它更像是一种新的开发协作方式：人负责目标、约束和判断，AI 负责生成。所以，Vibe Coding 的核心并不是“让 AI 替你开发一切”，而是把写代码这件事，从“手工逐行实现”，转变成“自然语言描述 + AI 生成 + 人工验收纠错”的新范式。

二、如何选择 AI 工具

在正式选择工具之前，我先带大家把市面上常见的 AI 编程工具做一个简单分类。理解它们各自的定位和特点之后，再结合自己的需求去选择，会更清晰，也更不容易踩坑。 第一类：零代码平台： 这类平台不需要安装软件，打开浏览器就能用。开发完成以后支持一键发布，对零基础同学简直是太友好了。 工具推荐：秒哒、NoCode、扣子编程 优势： 上手门槛低、开发速度快、试错成本低 劣势： 灵活性不足、可控性较弱、平台依赖

第二类：AI IDE： 这类工具本质上还是代码编辑器，但深度集成了 AI 能力。你可以将已有的项目无缝切换到这类编辑器，相比零代码平台，AI IDE更适合已经有一点开发基础、希望提升效率的人。 工具推荐：Cursor、Trae、Windsurf 优势： 灵活性更强，功能多、生态更齐全 劣势： 对使用者有一定的技术要求

第三类：命令行工具： 这类工具运行在终端里，看起来没有 IDE 那么“花哨”，但执行能力往往更强。相比零代码平台和 AI IDE，命令行工具更适合有一定开发经验、希望把 AI 深度接入实际工作流的人。 工具推荐： Claude Code、OpenAI Codex CLI 优势： 极简风格、效率极高，自动化能力更强 劣势： 对使用者有一定的技术要求

三、开启第一个 Vibe Coding 项目

经过上述铺垫，大家也应该理解了什么是 Vibe Coding，也知道了常见工具的分类，接下来就到了实操环节。很多人第一次使用 AI 编程工具时，最容易犯的一个错误，就是一上来就丢给 AI 一个很大的需求，比如：

“帮我做一个完整的后台系统。”  
“帮我写一个 AI 产品，从前端到后端全部搞定。”  
“帮我做一个能直接上线的网站。”

这样乍一看似乎效率很高，但结果往往令人失望。对 AI 来说，需求越大、越模糊，生成出来的内容也就越容易失控。有些地方看起来能跑，但后续维护起来却很难。所以，第一个 Vibe Coding 项目，最重要的不是“让 AI 一次做完”，而是让自己先熟悉“与 AI 协作开发”的节奏。当你确定了第一个项目之后，接下来不要急着让 AI 直接开始写代码，而是先把项目的基础信息说清楚。
比如： 做一个番茄时钟 ，那你至少需要告诉 AI 这几件事：

你要做的是什么
用什么技术栈
这个版本要包含哪些功能

这时可能就会有同学说了：”我不懂技术啊，这怎么写？“ 先别着急~打开豆包，把你脑子里的想法说出来，剩下的事交给豆包帮你整理。

我想做一个番茄时钟网页应用，但我没有技术背景。  
  
请你帮我把这个想法整理成一份适合 AI 编程工具使用的项目需求说明，要求尽量写得清晰、具体、容易执行。  
  
我的想法是：  
1. 用户可以开始、暂停、重置计时  
2. 支持专注时间和休息时间切换  
3. 倒计时结束后要有提示  
4. 页面风格希望简洁、干净、容易使用

这样做你不需要自己硬着头皮去想技术栈是什么、功能范围怎么写，而是让 AI 帮你把模糊的想法，整理成像样的需求文档。有了详细的需求文档，接下来开始和 AI 对话~

1. 向 AI 发起第一个任务

笔者以扣子为例，复制需求文档粘贴到对话框中。点击发送按钮发送后，你就可以看到扣子已经开始干活了~~这时你需要喝杯咖啡等待结果即可…(dog) 等待代码生成完成后，右侧会自动显示预览效果。点击页面上的按钮，试试看~~

2. 优化细节

看起来非常棒…功能是完整的，这时你可能需要调整一些细节，比如：

有些细节需要调整：
1. 按钮颜色我觉得不好看，修改为粉色
2. 标题修改为Mark的番茄时钟
3. 背景修改为浅蓝色
4. 休息模式的时间修改为10分钟

这时 AI 会根据你的修改意见，继续修改代码，这个过程会很快的看到效果…

3. 添加新功能

如果你想增加更多的功能，可以继续和AI会话，比如：

在增加几个新功能：
1. 倒计时需要有进度环
2. 增加深色模式的主题切换
3. 在实现上方显示状态，正在专注、休息中、已暂停

AI 会根据你的需求，继续完善这些新功能。等待完成即可…

4. 测试效果

上述步骤都已经完成，你的番茄时钟应用就已经完成开发了。测试一下其它功能看是否正常如果你发现某些功能存在异常，则继续跟AI对话。让AI帮你把问题修复了，比如暂停以后点击开始按钮不生效，修复完成后继续测试就可以。

5. 部署上线

开发完成，将我们的番茄时钟应用发布到互联网上。让你的亲朋好友都可以使用~ 点击页面右上角的部署按钮无需修改任何内容，点击 开始部署 ，等待部署完成… 点击下方按钮，即可在浏览器中打开你的应用~ 当然你也可以通过链接在任意浏览器访问它，也可以将链接分享给你的亲朋好友让他们也能使用此应用。

四、关于 AI 对话的技巧

先说清目标：不要只说“帮我做个番茄时钟”，可以说“做一个简洁风格的番茄时钟网页，支持专注/休息切换、开始、暂停、重置”
效果不对就描述现象：不要只说“有问题”，可以说“开始按钮点了没反应”“倒计时暂停后又自己开始了”
把需求写成清单：不要使用一大段描述，分成 1、2、3 点会更容易让 AI 理解
AI每改一次就看一次效果：不要连续改十几轮再一起检查，最好改一轮就运行测试一下

五、结束

看到这了…恭喜你，你已经完成了 第一次 Vibe Coding 实战。

放在几年前像这样的过程，一般需要先学上几个月，才能勉强做出一个像样的网页应用。
但在今天只用了短短十几分钟，就把一个想法变成了真正可以运行、可以发布的产品。这就是 Vibe Coding 最直观的魅力。

结束~本篇文章，笔者主要带大家迈出 Vibe Coding 的第一步：把脑中的想法，变成可运行的产品原型。后续进阶指南中，我会继续带大家深入Vibe Coding，并逐步建立起更稳定、更专业的 AI 开发思路。