Vibe Coding 入门指南 – 5分钟做出第一个AI项目

Vibe Coding 入门指南

5分钟做出第一个AI项目 – 从零到发布的实战教程

视频来源： YouTube · Vibe Coding Fundamentals In 33 minutes

核心定位： 使用AI辅助编程,无需传统编程基础即可开发应用,边做边学的新型编程方式

适用人群： 编程新手、想尝试AI开发的设计师、产品经理、创业者

第一部分:核心提纲

快速上手:你的第一个项目

核心承诺: 看完这篇,你能立刻动手做项目。不需要先学编程,边做边懂。

为什么从心情日记App开始?

功能简单,5分钟能做完
界面好看,能发给朋友炫耀
涵盖了80%常用功能(输入、存储、显示)

Step 1:打开工具(30秒)

快速启动Replit

电脑打开 replit.com
点右上角Sign up → 用Google账号登录(秒登)
点大大的蓝色按钮Create Repl
选Generate with AI(从提示词创建)

💡 为什么选Replit? 因为它是”云端的”,不用在你电脑上装东西,打开网页就能用。

Step 2:告诉AI你要做什么(1分钟)

看到输入框了吗?复制下面这段话,粘贴进去:

做一个简单的心情日记 app:

功能:
- 显示4个表情按钮(😊 开心、😢 难过、😡 生气、🤔 平静)
- 点击表情后,可以输入今天的想法(最多100字)
- 点"保存"按钮后,下方显示历史记录(日期+表情+内容)
- 最多显示最近10条记录

界面:
- 用温暖的蓝色系(#4A90E2)
- 卡片式设计,圆角,有阴影
- 手机上也能用

技术:
用 React + Tailwind CSS

点Create Repl按钮。

Step 3:看着AI给你干活(2分钟)

观察AI工作过程

你会看到:

左边:AI在写代码(文件一个个冒出来)
右边:有个预览窗口

不用管代码! 你现在唯一要做的就是:

等右边出现界面(大概1-2分钟)
看到Webview里出现你的app

如果右边一直没反应? 看左下角,找到Run按钮(绿色三角),点一下。

Step 4:测试你的App(1分钟)

现在你应该看到4个表情按钮、一个输入框、一个”保存”按钮。

试试这些操作

点个表情(比如 😊)
输入框里写”今天天气真好”
点”保存”
看下面是不是出现了记录?

🎉 成了!你刚用AI做了个能用的app!

Step 5:发给朋友炫耀(1分钟)

分享你的作品

看右上角,有个Share按钮:

点开它
复制Cover page下面的链接
发给朋友:”我刚做的app,试试?”

朋友打开链接,就能用你的app。 真的,就是这么简单。

常见问题解答

Q:我要改点东西怎么办?比如换个颜色?

看左边,有个聊天框(AI icon),直接说:

"把蓝色改成粉色(#FF69B4)"

AI会自动改,等几秒,右边界面就变了。

Q:出错了怎么办?

看有没有红色的错误信息,全选复制,然后告诉AI:

"there is an error: [粘贴错误]"

AI会自己试着修。

Q:我想加个新功能?

直接说就行:

"加个统计功能:显示这个月心情最好的是哪天"

Q:这个app数据存在哪?刷新会丢吗?

现在数据存在浏览器里(localStorage),刷新不会丢。但换台电脑就看不到了。想要永久保存?后面教你。

✅ 恭喜!你刚跨过了最难的一步

你现在拥有的技能

✅ 会用AI做一个能用的app
✅ 会改颜色、改文字
✅ 会让AI修bug
✅ 能分享给别人用

5个避坑原则:为什么你能成功?

你可能有点懵:”就这?这就做完了?”

对,就是这么简单。但你之所以成功,是因为你(无意中)做对了5件事。现在拆解给你看,这样你下次做别的项目也能成功。

原则1:想清楚(Thinking)

你刚才做了啥?

你给的那段提示词,其实是个”迷你需求文档”,包含了:

✅ 功能(选表情、写话、显示记录)
✅ 界面风格(蓝色系、卡片、圆角)
✅ 技术栈(React + Tailwind CSS)

为什么很多人会失败?

❌ 含糊的提示词:

"帮我做个日记 app"

→ AI不知道你要啥功能,随便做一个,你肯定不满意。

❌ 太复杂的提示词:

"做个超级日记 app,要有:登录、多人协作、导出PDF、语音输入、
AI分析情绪、推荐音乐、云同步、主题切换、提醒功能……"

→ AI一次做不完,半成品一堆bug。

黄金法则:说清楚这3个

要回答的问题	具体说	例子
1. 用户能干啥?	列出3-5个核心功能	选表情、写内容、看历史
2. 长啥样?	说配色、风格、参考对象	“像Apple的简约风”
3. 谁用?在哪用?	场景	“手机上用,记录心情”

记住: 想得越具体,AI做出来的越符合你的期望。

原则2:存快照(Checkpoints)

你刚才漏了啥?

你的app现在能用,但如果你改着改着弄崩了,就回不去了。

真实悲剧: [X平台真实案例] 有人做了两周的SaaS项目,加新功能时改崩了,因为没存档,两周的工作全丢了。

现在立刻做(30秒)

在Replit:

看左边侧栏,找到Version Control图标(像时钟的)
点进去,点Create checkpoint
写个备注:”初始版本,能用”

以后每次改完功能,都存一次档。

什么时候存档?

✅ 功能做完,测试没问题时
✅ 准备改某个功能之前(万一改坏了)
✅ 每天结束工作时

比喻: 就像打游戏,Boss战前存个档(S/L大法)。你做项目也一样:改功能前存个档,改坏了?读档,回到上个版本。

这个原则能救你的命,别偷懒。

原则3:会调bug(Debugging)

核心思维

做东西 = 50% 构建 + 50% 修bug

出错是常态,别觉得”是我太笨”。专业程序员每天也在修bug。

最简单的修bug方法(3步)

Step 1:复制完整错误

看到红色的错误信息了吗?
全选、复制(Ctrl+C / Cmd+C)

Step 2:告诉AI

"there is an error:
[粘贴完整错误]"

Step 3:等AI修

AI会自己尝试修复
等几秒,测试一下
还不行?重复Step 1-2

允许AI试3-5次,别着急。

如果AI试了5次还没修好?

❌ 含糊不清:

"这个不工作"

✅ 说人话:

"我点了保存按钮,没反应。
控制台报错:[粘贴错误]
我期望:点保存后,下面应该出现记录卡片"

不懂代码也没关系! 大多数时候,直接复制错误就够了。

原则4:会选工具(Frameworks)

为什么要指定技术栈?

因为AI学过所有现成方案,你告诉它用哪个,比让它瞎琢磨靠谱。

新手常用技术栈

做网页app:

"技术:React + Tailwind CSS"

React:目前最流行的前端框架
Tailwind CSS:写样式超快的工具

做动画效果:

"技术:用 Three.js 做 3D 动画"

做数据可视化:

"技术:用 Recharts 画图表"

不知道用啥?问AI

"我要做个[功能],推荐一个适合新手的技术框架"

比如:

"我要做拖拽功能(把卡片拖来拖去重新排序),
推荐一个 React 的拖拽框架"

AI会推荐,然后帮你实现。

你需要懂多少?

最低要求(10分钟能搞懂):

前端:用户看到的界面(按钮、颜色、动画)
后端:处理数据的服务器(保存、计算、发邮件)
API:前端和后端对话的方式

比喻:

前端 = 餐厅的菜单和装修(你看到的)
后端 = 厨房(做菜、准备食材)
API = 服务员(把你的订单传给厨房)

你不需要会做菜,但要知道餐厅怎么运作的。

原则5:说详细(Context)

核心规则

你给AI的信息越详细,它做出来的越符合预期。

怎么”说详细”?

1. 需求阶段:给参考

❌ “做个登录页面”

✅ “做个登录页面,参考Notion的设计: – 左边放品牌介绍+插图 – 右边是登录表单(email + 密码) – 用渐变背景(从 #667eea 到 #764ba2) – 按钮用圆角,悬停时颜色变深”

2. 修bug阶段:完整信息

❌ “登录功能坏了”

✅ “登录功能报错: – 错误信息:[粘贴完整错误] – 触发步骤:输入邮箱密码 → 点登录 → 出现500错误 – 截图:[贴个截图] – 我期望:登录成功后跳转到首页”

3. 改界面阶段:给图片

最强大的方式:给张图片

截图你喜欢的设计
或者让AI画一个:”画个这个app的界面草图”
然后说:”照着这个做”

记住: 多说 > 少说。你觉得说太多了,其实刚刚好。

助记词:猫会跳舞 🐱

The Friendly Cat Dances Constantly

Thinking(想清楚):说清功能、风格、场景
Frameworks(选工具):指定用React、Three.js等
Checkpoints(存快照):每次改完功能都存档
Debugging(调bug):复制错误,说”there is an error”
Context(说详细):给参考图、完整错误、具体描述

记住这5个,你就比90%的新手强。

第二部分:资源索引

30天进阶路线图

Week 1-2:做3个经典项目(建立信心)

目标: 证明你真的会了,不是运气

🔥 项目1:番茄钟计时器

难度: ⭐(1小时) | 学到啥: 计时器、声音提醒、状态管理

提示词模板:

做一个番茄钟计时器 app:

功能:
- 默认25分钟倒计时(可调整为15/30/45分钟)
- 开始、暂停、重置按钮
- 倒计时结束时:播放提示音 + 显示"休息5分钟"提示
- 显示今天完成了几个番茄钟

界面:
- 中心是大大的倒计时数字(字体用 Poppins)
- 用红色系(#E74C3C)
- 圆形进度条围绕倒计时数字
- 按钮用圆角,扁平化设计

技术:
React + Tailwind CSS

完成后试试:

改成50分钟工作 + 10分钟休息
加个”今日统计”,显示完成的番茄钟和总专注时间

🌤️ 项目2:天气查询

难度: ⭐⭐(2小时) | 学到啥: API调用、动态样式、数据处理

提示词模板:

做一个天气查询 app:

功能:
- 输入城市名(中文或英文),点查询
- 显示:当前温度、天气状况、湿度、风速
- 显示对应的天气图标(晴天☀️、雨天🌧️、多云☁️)
- 背景颜色根据天气变化(晴天用蓝色渐变、雨天用灰色)

界面:
- 顶部大大的搜索框
- 中间展示天气信息(卡片式)
- 底部显示未来3天的天气预报(小卡片)
- 用毛玻璃效果(backdrop-blur)

技术:
- React + Tailwind CSS
- 用 OpenWeatherMap API(免费)
- 我会提供 API key

数据处理:
- 摄氏度显示,可切换到华氏度
- 风速用"公里/小时"

新技能: 第一次用外部API

可能遇到的坑:

API key要去openweathermap.org免费注册
注册后等10分钟才能用
测试时先用”Beijing”试试

💼 项目3:个人作品集页面

难度: ⭐(1.5小时) | 学到啥: 布局、卡片设计、响应式设计

提示词模板:

做一个个人作品集网页:

内容:
- 顶部:头像(圆形) + 名字 + 一句话介绍
- 技能区域:显示技能标签(如:Python、设计、摄影、写作)
- 项目展示:3个项目卡片,每个包含:
  -- 项目缩略图(占位图)
  -- 项目名称
  -- 简短描述(2行)
  -- "查看详情"按钮
- 底部:社交链接图标(GitHub、邮箱、Twitter)

界面:
- 参考 Apple 官网的简约风格
- 大量留白
- 用黑白灰+一个点缀色(#0071E3 苹果蓝)
- 卡片有悬停效果(hover 时轻微上移+阴影加深)
- 手机上也好看(响应式)

技术:
React + Tailwind CSS

特殊要求:
- 头像用这个占位图:https://api.dicebear.com/7.x/avataaars/svg?seed=Felix
- 项目缩略图用:https://picsum.photos/400/300

Week 3-4:理解原理(边做边学)

目标: 不只是”能做”,还要”知道为什么”

学习策略

1. 重做一个项目,这次要理解它的结构

选前面3个项目的任意一个,重新做一遍。但这次:

做完后,问AI:”解释一下这个项目的文件结构”
让AI告诉你:哪个文件负责啥

2. 问AI教你概念

在Replit的聊天框,问这些问题:

"前端和后端有什么区别?用这个项目举例"

"什么是 API?为什么天气查询要用 API?"

"React 的组件是什么意思?这个项目有几个组件?"

"为什么要用 Tailwind CSS 而不是普通 CSS?"

让AI用你的项目解释,比看教程管用。

你需要搞懂的5个概念

概念	简单解释	去哪学
前端 vs 后端	前端=界面,后端=数据处理	YouTube搜”前端后端区别 5分钟”
API	两个软件对话的方式	问AI:”用天气查询项目解释API”
组件	把界面拆成可复用的小块	问AI:”这个项目有哪些组件?”
状态(State)	存储变化的数据(如:计时器的秒数)	问AI:”State在番茄钟项目里是啥?”
Git	版本控制工具(存档系统)	Replit自带,但可以学学Git命令

别一次学完! 做哪个项目,就学那个项目用到的概念。

学习资源(都是免费的)

求助指南

Bug解决路径

Step 1: 复制错误 → 贴给 AI:"there is an error [粘贴]"
  ↓ 没解决?
  
Step 2: 截图 + 详细描述:"我点了提交按钮,出现这个错误[截图]"
  ↓ 还没解决?
  
Step 3: 问 AI:"这个项目的文件结构是啥?问题可能在哪个文件?"
  ↓ 还是不行?
  
Step 4: 去社区求助
  - Replit Discord(英文,回复快)
  - Reddit r/learnprogramming(友好,适合新手)
  - 知乎搜"Vibe Coding"相关问题

怎么提问更容易得到帮助?

❌ 差的提问:

"我的代码不工作,怎么办?"

→ 没人能帮你,信息太少。

✅ 好的提问:

"我在做天气查询 app,点击查询按钮后没反应。

错误信息:[粘贴完整错误]
已经尝试:复制错误给 AI,它改了但还是不工作
项目链接:[Replit 分享链接]
截图:[贴张截图]

我期望:点查询后应该显示天气信息"

→ 这样别人能快速定位问题。

30天之后的进阶路线

路线1:做更复杂的项目

加上”登录/注册”功能
连接真实数据库(Firebase / Supabase)
学习部署(把app放到自己的域名)

路线2:学一些原理

系统学React(但你已经会用了,学起来很快)
了解”后端”怎么写(Node.js + Express)
学点数据库知识(SQL基础)

路线3:从Replit迁移到Windsurf/Cursor

做更复杂、可扩展的应用
学习本地开发环境
学习Git命令行操作

建议: 先把路线1走完,再考虑路线2和3。

第三部分:总结与行动

关键要点总结

30天检验标准 – 你应该能做到:

技能测试:

独立做出一个有3-5个功能的app
会用API(比如天气API)
遇到错误,能在30分钟内自己解决(或知道怎么问)
会用Version Control存档和回滚

概念测试:

能用一句话解释”前端”、”后端”、”API”
知道React的“组件”是啥意思
理解为什么要“存档”(版本控制)

实战测试:

能给朋友解释“Vibe Coding是什么”
看到一个app,能说出“我也能做这个”
有想法时,能在1小时内做出原型

立即行动清单

今天就做(5-10分钟)

打开replit.com,用Google账号登录
跟着第一部分,做出心情日记app
创建第一个checkpoint(存档)

本周完成(1-3小时)

完成3个经典项目中的任意一个
把做好的app分享给至少1个朋友
问AI解释一个你不懂的概念

长期坚持(30天)

每周至少做1个新项目
每次改功能前先存档
遇到bug,先自己尝试解决3次再求助
把”猫会跳舞”5原则贴在电脑旁

金句收尾

“所有大神都是从做’垃圾项目’开始的。区别是:他们做了,然后越做越好。你如果不开始,永远停在原地。”

— Vibe Coding 核心理念

“别追求完美。你做的第一个app肯定界面不够好看、功能很简单、有一些小bug。但是:它能跑,它是你做的,朋友能用。这就够了。“

— 给所有初学者的建议

“The Friendly Cat Dances Constantly – 想清楚(Thinking)、选工具(Frameworks)、存快照(Checkpoints)、调bug(Debugging)、说详细(Context)。记住这5个,你就比90%的新手强。“

— 猫会跳舞助记法

第一部分:核心提纲

快速上手:你的第一个项目

为什么从心情日记App开始?

Step 1:打开工具(30秒)

快速启动Replit

Step 2:告诉AI你要做什么(1分钟)

Step 3:看着AI给你干活(2分钟)

观察AI工作过程

Step 4:测试你的App(1分钟)

试试这些操作

Step 5:发给朋友炫耀(1分钟)

分享你的作品

常见问题解答

Q:我要改点东西怎么办?比如换个颜色?

Q:出错了怎么办?

Q:我想加个新功能?

Q:这个app数据存在哪?刷新会丢吗?

你现在拥有的技能

5个避坑原则:为什么你能成功?

原则1:想清楚(Thinking)

你刚才做了啥?

为什么很多人会失败?

黄金法则:说清楚这3个

原则2:存快照(Checkpoints)

你刚才漏了啥?

现在立刻做(30秒)

什么时候存档?

原则3:会调bug(Debugging)

核心思维

最简单的修bug方法(3步)

如果AI试了5次还没修好?

原则4:会选工具(Frameworks)

为什么要指定技术栈?

新手常用技术栈

不知道用啥?问AI

你需要懂多少?

原则5:说详细(Context)

核心规则

怎么”说详细”?

助记词:猫会跳舞 🐱

第二部分:资源索引

30天进阶路线图

Week 1-2:做3个经典项目(建立信心)

🔥 项目1:番茄钟计时器

🌤️ 项目2:天气查询

💼 项目3:个人作品集页面

Week 3-4:理解原理(边做边学)

学习策略

你需要搞懂的5个概念

学习资源(都是免费的)

推荐顺序

求助指南

Bug解决路径

怎么提问更容易得到帮助?

30天之后的进阶路线

路线1:做更复杂的项目

路线2:学一些原理

路线3:从Replit迁移到Windsurf/Cursor

第三部分:总结与行动

关键要点总结

立即行动清单

今天就做(5-10分钟)

本周完成(1-3小时)

长期坚持(30天)

金句收尾

Tags