# 不会编程也能做应用：我用 Vibe Coding 完成了从 0 到上线
**作者**: 路飞 AI 研究员
**日期**: 2026-07-22T07:35:11.000Z
**来源**: [https://x.com/0xluffy_eth/status/2079832613611860424](https://x.com/0xluffy_eth/status/2079832613611860424)
---
0 行代码，做出完整应用。
我只上了 15 节 Vibe Coding 课。
登录、数据库、天气、AI，全有。
最后还拿到了公开访问网址。
而半年前，我连文件夹都分不清。
下面是我的完整实战过程。
## 【先换角色】
很多人学编程的第一步，就是去背 HTML、CSS、JavaScript。
这可能正是他们放弃的原因。
2023 年之后，AI 编程工具开始改变开发方式。普通人的任务，不再是独自把代码全部写出来，而是完成三件事：
1. 决定做什么
2. 用自然语言告诉 AI
3. 检查结果是否符合预期
我后来才明白，做 AI 应用更像拍电影。
我负责提出需求、判断效果和调整方向；AI负责完成具体实现。
这就是所谓的“氛围编程”，也就是 Vibe Coding。
它不是完全不思考，更不是随便说一句“帮我做个应用”就能成功。
它真正降低的是代码书写门槛，却把另一种能力变得更重要：
你能不能把脑子里的想法说清楚。
我最开始学到的提示词模板只有四句话：
你是一名〇〇。
我是△△。
我想完成□□。
请按照☆☆的风格和条件完成。
例如：
你是一名专业的 Web 设计师。
我是一个完全不懂编程的初学者。
我想制作一个面向爱猫人士的个人介绍网站。
请采用可爱但简洁的设计风格。
没有复杂术语，也不需要先学编程语法。
但这四句话已经包含了最基础的四个要素：
角色、背景、目标、条件。
## 【补电脑课】
我原本以为，第一节实操课会直接教我生成应用。
结果老师先讲了文件、文件夹、扩展名和路径。
当时我觉得这些东西太基础，后来才发现，零基础学习 AI 编程最容易卡住的地方，往往不是代码，而是电脑基础。
你至少要知道：
文件：一张数字化的纸
文件夹：存放文件的抽屉
扩展名：文件类型的标签
路径：文件在电脑里的具体地址
开发中最常见的扩展名包括：
.html 网页结构
.css 页面样式
.js 页面交互
.tsx React 组件
.md Markdown 文档
.env 环境变量
Mac 的路径可能是：
/Users/name/Desktop/myapp/index.html
Windows 的路径可能是：
C:\Users\name\Desktop\myapp\index.html
这些知识看起来很琐碎。
但当你告诉 AI“修改这个文件”时，如果连文件在哪里、叫什么、属于哪个项目都说不清，AI也很难准确处理。
所以我给零基础学习者的第一个建议不是安装十几个工具，而是先做一个小练习：
在桌面创建 test 文件夹。
在里面创建 memo.txt。
找到这个文件的完整路径。
这一步很无聊，却能避开后面大量低级错误。
## 【第一次运行】
最开始，我只使用 Gemini 和系统自带的文本编辑器。
我给 Gemini 的第一个完整需求，是制作一个“猫语翻译机”：
我想制作一个“猫语翻译机”。
功能：
- 点击按钮后，随机显示一种猫语，例如“喵”“呼噜”“哈气”
- 这是一个娱乐应用，整体效果可以夸张、有趣
设计：
- 采用宇宙飞船驾驶舱风格
- 背景偏暗
- 按钮带有发光效果
请使用 HTML、CSS 和 JavaScript，
把所有代码写进一个 index.html 文件。
Gemini 生成代码后，我完成了四个动作：
复制代码
粘贴到文本编辑器
保存为 index.html
用浏览器打开
网页真的运行了。
按钮可以点击，页面有动画，猫语也会随机变化。
更重要的是，我没有先学习如何写 JavaScript。
我只需要继续告诉 AI：
按钮太小，请放大。
背景太黑，请增加一些紫色。
猫语文字请加粗，并放在页面中央。
每修改一次，我就重新复制代码、粘贴、保存、刷新浏览器。
这个流程证明了一件事：
自然语言真的可以转化成可运行的软件。
但它也暴露了一个问题。
当修改次数越来越多时，“复制—粘贴—保存—刷新”会变得非常低效。
所以第五节课，我们开始使用真正的开发编辑器。
## 【进入编辑器】
编辑器可以理解为专门处理代码的工作台。
课程中介绍了三种选择：
VS Code：免费，扩展丰富
Cursor：AI 编程功能完整
Antigravity：内置 Gemini，适合跟随课程操作
具体选哪一个并不是重点。
真正重要的变化是：AI开始直接进入项目文件。
过去的流程是：
AI 生成代码
复制代码
粘贴进文件
手动保存
打开浏览器
刷新查看
进入 AI 编辑器后，流程变成：
告诉 AI 要做什么
AI 创建文件
AI 修改代码
预览自动更新
例如，我只需要说：
请创建一个 index.html 文件。
页面中央显示“Hello World”。
采用简洁的深色设计。
AI会直接创建文件并写入代码。
我接着说：
把标题改成渐变文字。
增加一个按钮。
点击按钮后显示欢迎信息。
它会继续修改原文件。
这才是 Vibe Coding 真正高效的地方：
我不再负责搬运代码，而是持续描述结果。
## 【先留后路】
第六节课开始学习 Git 和 GitHub。
这两个名字很容易把初学者吓退，但最简单的理解方式是：
Git：游戏存档系统
GitHub：云端存档仓库
假设我一天进行了三次修改：
09:00 完成首页
12:00 增加登录功能
18:00 修改整体设计
如果晚上发现设计改坏了，我可以回到中午的版本。
这就是 Git 的核心价值。
一次标准保存通常包含三个动作：
选择要保存的修改
填写本次修改说明
创建一次 Commit
好的 Commit 信息应该说明发生了什么：
增加登录页面
接入 Supabase
修复移动端按钮错位
而不是：
修改
更新
测试
当本地代码上传到 GitHub 后，即使电脑损坏，项目依然存在。
但这里有一个必须记住的安全规则：
绝对不要把 API 密钥直接上传到 GitHub。
我把密钥保存在 .env 文件中，再把 .env 写入 .gitignore：
.env
这样 Git 会自动忽略它。
你可以把 API 密钥理解成银行卡密码。
代码可以公开，密码不能公开。
## 【理解三层】
到了第七节课，我才开始真正理解网页的三层结构：
HTML：页面里有什么
CSS：这些东西长什么样
JavaScript：用户操作后会发生什么
可以把网页想象成一栋房子：
HTML 是墙、门和房间
CSS 是颜色、家具和装修
JavaScript 是电灯、水管和门铃
我不需要背下所有语法，但必须知道每一层负责什么。
因为下面两种指令的效果差距很大：
帮我把网页改好看一点。
和：
保留现有 HTML 结构。
重新调整 CSS 的字体、间距和卡片阴影。
不要修改 JavaScript 交互逻辑。
第二种指令更准确，因为我知道问题出在哪一层。
这也是 AI 编程中一个很反常识的事实：
不需要成为专业程序员，但需要掌握足够的概念，才能判断 AI 有没有做错。
## 【开始拼应用】
第八节到第十一节，我们开始接触真正的 Web 应用结构。
我先用 v0 生成界面，再通过 React 和 Next.js 组织页面，接着使用 Supabase 保存数据和处理用户登录。
这几个工具分别解决不同问题：
v0：生成界面
React：把界面拆成可重复使用的组件
Next.js：管理页面、路由和服务端功能
Supabase：存储数据和处理用户身份
React 的核心概念是组件。
一个按钮、导航栏、任务卡片，都可以做成独立组件。
它就像乐高积木：先做好零件，再把零件拼成完整应用。
我不需要亲手写组件，只需要告诉 AI：
创建一个 Button.tsx 组件。
按钮文字通过 Props 传入。
支持 primary 和 secondary 两种样式。
点击事件由父组件传入。
这里的 Props，可以理解为父组件传给子组件的参数。
State 则是页面会自动追踪的状态。
例如计数器从 0 变成 1 后，React 会自动更新页面，而不需要手动刷新。
AI会写代码，但我至少要知道：
Props：组件接收的数据
State：会引起页面更新的数据
Server Component：在服务器运行
Client Component：在浏览器运行
如果组件需要点击事件或 useState，通常需要在文件顶部添加：
"use client";
我不必背所有规则，但看到错误时，至少知道应该往哪个方向检查。
## 【数据进云端】
普通网页刷新后，很多数据会消失。
所以第十节课开始学习数据存储。
我用三个比喻理解数据保存：
State：握在手里的东西，刷新就没了
LocalStorage：放进口袋，只保存在当前设备
云数据库：存进银行，不同设备都能访问
Supabase 可以理解为一个带 API 的在线数据库。
它的基本结构很像表格：
Table：一张表
Column：字段
Row：一条数据
例如一个待办事项表，可以包含：
id
task_name
completed
user_id
created_at
我甚至不需要自己写 SQL。
我可以直接告诉 Supabase 的 AI SQL 工具：
请创建一张 Todo 应用使用的数据表。
字段包括：
- 任务名称，text 类型
- 是否完成，boolean 类型
- 用户 ID
- 创建时间，timestamp 类型
然后再告诉编辑器里的 AI：
删除原来的 LocalStorage 方案。
改为通过 Supabase 完成数据的新增、查询、修改和删除。
连接信息从环境变量读取。
完成后，我在电脑上添加任务，手机端也能看到。
这意味着它已经不再是一个单机网页，而是一个真正连接云数据库的应用。
## 【增加登录】
数据保存下来后，新的问题出现了：
如果所有用户都能看到同一批数据，这个应用依然不能真正使用。
所以第十一节课，我们加入了登录和数据隔离。
Supabase 支持通过邮件链接登录：
用户输入邮箱
系统发送登录链接
用户点击链接
完成身份验证
不需要记密码，也能快速完成开发测试。
但登录界面只是第一层。
真正决定用户能看到哪些数据的，是 RLS，也就是行级安全规则。
它的作用是：
A 用户只能读取自己的数据
B 用户只能读取自己的数据
两人的数据互相不可见
我通过两个浏览器窗口测试：
普通窗口登录账号 A，创建一条任务。
无痕窗口登录账号 B。
检查账号 B 是否看不到账号 A 的任务。
只有完成这项测试，我才确认数据隔离真正生效。
这一步也让我明白：
“页面看起来需要登录”和“数据库真的安全”，完全是两回事。
## 【接入外部能力】
第十二节和第十三节，我们先接入天气 API，再把 Gemini API 放进应用。
API 可以理解为餐厅服务员：
应用提出请求
API 把请求交给服务器
服务器返回数据
API 再把结果交给应用
我先使用 Open-Meteo 获取天气数据。
例如：
https://api.open-meteo.com/v1/forecast?latitude=35.689&longitude=139.691¤t_weather=true
接口会返回 JSON 数据：
{
"current_weather": {
"temperature": 15.5,
"weathercode": 0
}
}
我接着告诉 AI：
创建一个 Weather 组件。
调用 Open-Meteo API 获取当前天气。
显示温度和天气状态。
如果下雨，在任务列表顶部显示“记得带伞”。
这条提醒不要写入数据库。
应用开始根据外部数据自动改变界面。
之后，我又接入 Gemini API，让 AI读取当前任务列表并给出建议。
提示词结构是：
你是一名行动教练。
请阅读下面的任务列表。
找出最应该优先完成的一项。
给出一条具体建议。
回答不超过 100 字。
当我需要让程序直接处理 AI 输出时，我会要求它只返回 JSON：
请把下面的目标拆成可以执行的任务。
只返回 JSON，不要添加解释。
格式：
[
{
"task": "任务内容",
"priority": 1
}
]
AI的回答不再只是一段给人阅读的文字，而是可以直接写入任务列表的数据。
这一步，才让 AI从聊天工具变成应用内部的一项功能。
## 【八步流程】
前十三节课教我各种工具。
第十四节课，才把这些工具串成一套完整的开发方法。
我最终固定使用下面八步：
1. Start
打开 AI 编辑器，建立项目文件夹
2. Base
创建 Next.js 项目，先保证基础页面可以运行
3. DB
连接 Supabase，提前建立数据表和身份验证
4. Plan
明确用户、问题、核心功能和 MVP 边界
5. Research
让 AI检查技术风险、成本和替代方案
6. Ticket
把功能拆成足够小的任务
7. Build
一次只完成一个任务，并立即测试
8. Finish
检查缺失功能、错误、安全问题和部署配置
最关键的不是“让 AI一次把应用做完”，而是把任务拆小。
我一直使用下面这段提示词：
请根据已经确认的需求，把实现过程拆成细小的任务列表。
每个任务最多包含：
- 修改一个文件
或
- 完成一个独立功能
请按照下面的格式输出：
- [ ] Task 1：创建首页 UI
- [ ] Task 2：配置 Supabase 连接
- [ ] Task 3：实现用户登录
- [ ] Task 4：实现任务新增功能
请持续维护这份任务列表。
当我说“下一步”时，只执行一个尚未完成的任务。
完成后，把对应的 [ ] 改成 [x]。
不要提前执行后续任务。
这段提示词解决了 AI 编程最常见的问题：
一次改太多文件
前后逻辑冲突
忘记原始需求
错误叠加后无法定位
AI不怕任务多。
AI怕的是目标模糊、边界不清、一次要求太多。
## 【别迷信 AI】
最后一节课，我重新学习了 React、Next.js、Git 分支和部署原理。
原因很简单：
AI会犯错。
它可能引用不存在的函数，混淆框架版本，重复创建文件，也可能为了修复一个错误，引入三个新错误。
所以我开始要求 AI在修改前先解释：
这个错误出现在哪个文件？
根本原因是什么？
你准备修改哪些地方？
是否会影响其他功能？
修改完成后，我再让它检查：
请对照原始需求检查当前项目。
列出：
- 未完成的功能
- 可能存在的错误
- 安全风险
- 移动端问题
- 部署前必须处理的事项
不要直接修改，先输出检查结果。
我也开始使用 Git 分支测试新功能。
可以把分支理解成平行世界：
main：稳定版本
feature/login：登录功能实验
feature/new-design：新设计实验
实验成功后再合并进 main。
实验失败，直接删除分支，不影响稳定版本。
这比让 AI直接在主项目里连续大改安全得多。
## 【最后上线】
应用在本地运行，只代表我自己能访问。
只有部署之后，其他人才可以通过网址打开。
我的发布链路是：
本地编辑器：开发应用
GitHub：保存代码
Vercel：自动构建并发布
我把 GitHub 项目导入 Vercel，再单独填写环境变量。
这里是初学者最容易踩的坑：
本地能运行，Vercel 上却报错，很多时候不是代码问题，而是环境变量没有配置。
.env 不应该上传到 GitHub。
但 Vercel 仍然需要这些变量，所以必须在项目后台单独填写。
完成部署后，我得到了一个类似下面的网址：
https://my-vibe-app.vercel.app
之后每次更新，只需要：
本地修改
创建 Commit
Push 到 GitHub
Vercel 自动重新发布
我不用重新上传压缩包，也不用手动替换服务器文件。
到这里，一个文科零基础学习者，已经完成了整套 Web 应用开发链路：
需求
设计
前端
数据库
登录
API
AI
版本管理
测试
部署
## 📌【保存清单】
零基础开始 Vibe Coding，不要一上来同时学习所有技术。
按照这个顺序走：
第 1 阶段：学会描述
明确用户、问题、功能和风格
第 2 阶段：补电脑基础
理解文件、文件夹、路径、扩展名
第 3 阶段：做单文件网页
用 HTML、CSS、JavaScript 跑通第一个作品
第 4 阶段：进入 AI 编辑器
停止反复复制代码，让 AI直接修改项目
第 5 阶段：学习版本管理
每完成一个功能就 Commit，密钥永远不上传
第 6 阶段：理解 Web 结构
知道 HTML、CSS、JavaScript、React 分别负责什么
第 7 阶段：接入数据库和登录
用 Supabase 保存数据，通过 RLS 隔离用户
第 8 阶段：接入 API 和 AI
先处理固定数据，再处理 AI生成结果
第 9 阶段：拆分任务
一次只让 AI完成一个文件或一个功能
第 10 阶段：部署上线
GitHub 保存代码，Vercel 自动发布
同时记住 5 条规则：
不要让 AI一次完成整个应用。
不要在没有 Commit 的情况下大改代码。
不要把 API 密钥上传到 GitHub。
不要只看页面效果，必须测试数据权限。
不要完全相信 AI生成的代码。
半年前，我以为做一个带登录、数据库和 AI 功能的应用，至少要先学几年编程。
15 节课后，我发现真正的门槛不是会不会背代码，而是能不能定义问题、拆分任务、判断结果。
你不需要先成为程序员再开始开发，你可以从今天打开 Gemini，输入一句“我想做一个什么应用”开始。
下一篇，我会把这套流程压缩成一份可以直接复制的 Vibe Coding 项目启动提示词。
## 相关链接
- [路飞 AI 研究员](https://x.com/0xluffy_eth)
- [@0xluffy_eth](https://x.com/0xluffy_eth)
- [1.1K](https://x.com/0xluffy_eth/status/2079832613611860424/analytics)
- [https://api.open-meteo.com/v1/forecast?latitude=35.689&longitude=139.691¤t_weather=true](https://api.open-meteo.com/v1/forecast?latitude=35.689&longitude=139.691¤t_weather=true)
- [https://my-vibe-app.vercel.app](https://my-vibe-app.vercel.app/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [3:35 PM · Jul 22, 2026](https://x.com/0xluffy_eth/status/2079832613611860424)
- [1,116 Views](https://x.com/0xluffy_eth/status/2079832613611860424/analytics)
---
*导出时间: 2026/7/22 16:10:32*