不写代码也能做 App?Vibe Coding 从零搭建到实战全指南

有人不会写代码，一周做了个能用的 App。不是吹牛，他用的方法叫 Vibe Coding。

听起来像又一个蹭热度的概念？我一开始也这么想。直到我用一个下午，从零搭出了环境，跑通了一个完整的小工具——全程没写过一行代码，只跟 AI 聊了十几轮对话。那一刻我理解了为什么有人会说，编程这件事正在变。

这篇文章要做的事很具体：带你从零搭建一个 Vibe Coding 环境，然后用一个真实示例跑通「描述需求 → AI 生成代码 → 运行验证 → 迭代优化」的完整闭环。读完你就能动手。

什么是 Vibe Coding

2025 年 2 月，Andrej Karpathy 发了一条推文。他是 OpenAI 的联合创始人、前 Tesla AI 总监，说的话自带分量。原文是这样的：

There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.

翻译过来大意是：有一种新编程方式，我叫它「氛围编程」——你完全交给氛围，拥抱指数级增长，忘掉代码的存在。

这不是让你真的忘掉代码。Karpathy 想表达的是：你的角色变了。过去你是编码者，一行一行写逻辑；现在你是需求描述者和质量审核者，用自然语言告诉 AI 你要什么，AI 写代码，你跑起来看效果、发现问题再让它改。

核心口诀只有三个字：见 → 说 → 跑。看到需求，说出来，跑起来看。不满意？再说，再跑。循环往复。

Vibe Coding 不等于「AI 辅助写代码」

很多人第一次听到 Vibe Coding，觉得不就是 Copilot 补全代码嘛。不是。

AI 辅助编码，你还是主导者。你写大部分代码，AI 帮你补 snippet、修语法。Vibe Coding 是范式切换：意图优先于语法，迭代优先于规划。你的输入是自然语言描述，输出是可运行的程序，中间的代码你可能根本不看。

用一个类比：传统编程像是你亲手盖房子，AI 辅助是你盖房子时有人递砖；Vibe Coding 是你画了个草图说「我要这样的房子」，施工队盖完了你进去住，墙不平你让他们修。

也不等于 No-Code。No-Code 平台用可视化组件拖拽，功能被平台限制。Vibe Coding 生成的代码是真实的、可修改的、不受平台约束的——你只是用自然语言代替了键盘敲击。

光谱模型：你站在哪一端？

Vibe Coding 不是一刀切的事，它是一条光谱。根据你和代码的互动深度，大概分四个位置：

多数人刚上手会从「纯 Vibe」开始——好玩、快、门槛低。但如果你想做个靠谱的产品，至少要走到「监督 Vibe」，重要的代码得扫一眼。

这不丢人。2025 年 Stack Overflow 开发者调查显示，65% 的开发者每周至少用一次 AI 编程工具。Collins 词典把「vibe coding」评为 2025 年度词汇。ACM（计算机协会）专门出了 TechBrief 讨论 Vibe Coding 对软件工程的影响。这不是边缘玩法，这是正在发生的主流变化。

环境搭建

理论讲完了，动手。这一章带你从零搭建 Vibe Coding 环境。

选工具

市面上的 AI 编程工具已经不少了，选哪个看你的需求和预算：

入门推荐：Cursor 免费版或 Windsurf。理由很简单——它们是 AI-native IDE，不是在传统编辑器上贴一层 AI，而是从交互设计开始就以 AI 为中心。免费额度够你体验完整流程，上手门槛低。

如果你是 CLI 重度用户、喜欢在终端里操作一切，Claude Code 是另一个好选择。它直接在终端里工作，不需要打开任何 GUI 编辑器。

下面以 Cursor 为例走一遍安装流程。如果你选了 Windsurf，步骤几乎一样。

安装 Cursor

第一步：下载。

打开 cursor.com，点下载按钮。它提供 Windows、macOS、Linux 版本，选你对应的系统。Cursor 基于 VS Code，所以你看到的界面和 VS Code 基本一致——如果你用过 VS Code，上手零成本。

第二步：安装。

Windows 用户双击 .exe 安装包，一路默认就行。macOS 用户拖到 Applications 文件夹。Linux 用户解压后运行即可。

第三步：首次启动。

打开 Cursor，它会引导你登录。可以用 GitHub 账号或邮箱注册。登录后你就有免费额度了——免费版每月有一定数量的 AI 补全和对话请求，够日常体验。

第四步：基础配置。

Cursor 继承了 VS Code 的全部设置体系。你可以在 Settings 里调整字体、主题、快捷键。对 Vibe Coding 来说，最重要的一个配置是快捷键绑定——确保你能快速唤出 AI 对话面板。默认是 Ctrl+I（Composer 模式）和 Ctrl+L（Chat 模式），Mac 用户换成 Cmd。记住这两个键，后面会频繁用到。

第五步：验证环境。

打开 Cursor，新建一个文件叫 hello.py，输入：

print("Hello, Vibe Coding!")

按 Ctrl+L 打开 Chat 面板，输入「运行这个 Python 文件」。Cursor 会告诉你怎么在终端里跑它。你在 Cursor 内置终端执行：

python hello.py

看到 Hello, Vibe Coding! 打印出来，环境就通了。如果提示找不到 Python，说明你还没装 Python——往下看。

配置项目上下文

Vibe Coding 的效率很大程度上取决于 AI 对你项目的理解深度。纯靠对话描述太低效了，你需要一个项目级配置文件，让 AI 每次对话都能自动知道项目背景、技术栈、代码风格。

Cursor 使用 .cursorrules 文件，Claude Code 使用 CLAUDE.md。原理一样：放在项目根目录，AI 每次启动都会自动读取。

新建一个项目文件夹，比如 my-todo-app，在根目录创建 .cursorrules 文件：

# 项目背景
这是一个待办事项管理工具，目标是提供简洁的任务增删改查功能。

# 技术栈
- 后端：Python + FastAPI
- 数据库：SQLite
- 前端：HTML + CSS + JavaScript（纯原生，不引入框架）

# 代码风格
- Python：类型注解、docstring、PEP 8
- 函数命名：动词开头（add_task, delete_task）
- 注释用中文
- 错误处理：每个 API 都要有明确的异常捕获和返回

# 项目结构
- app/main.py：入口
- app/routes.py：API 路由
- app/models.py：数据模型
- app/database.py：数据库连接和初始化
- static/：前端静态文件

这段配置文件做了三件事：告诉 AI 项目是什么、用什么技术栈、代码怎么写。有了它，你后面跟 AI 对话不需要每次重复说「我用 Python FastAPI SQLite」——它自动知道。

技术栈选择：为什么 Python 是 Vibe Coding 最佳语言

不是偏见，是数据说话。

AI 的训练数据里，Python 的占比是最高的。GitHub 上 Python 仓库数量庞大，Stack Overflow 上 Python 问题最多，教程文档最丰富。这意味着 AI 对 Python 的理解最深、生成代码的质量最稳定。

Python 本身接近伪代码，可读性高，你就算不看代码只看逻辑也能大致理解。它的生态也足够丰富——Web 开发用 FastAPI/Flask，数据处理用 pandas，自动化脚本标准库就能搞定。

推荐组合：Python + FastAPI + SQLite。

FastAPI 是目前 Python Web 框架里性能最好、API 设计最现代的，自动生成文档，写起来简洁。SQLite 是零配置数据库，一个文件搞定，不需要安装数据库服务器。这个组合适合 Vibe Coding 的原因只有一个字：少。依赖少、配置少、出错少，AI 生成的代码跑起来成功率最高。

如果你需要前端，HTML + CSS + JavaScript（原生）就够了。React/Vue 等框架加进来会增加复杂度，等你有需要再说。

首次运行验证

装 Python。去 python.org 下载最新稳定版（3.12+），安装时勾选「Add Python to PATH」。装完在终端验证：

python --version

看到版本号就行。然后装 FastAPI 和 Uvicorn（FastAPI 的运行服务器）：

pip install fastapi uvicorn

新建 main.py，输入最简验证代码：

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
defroot():
return {"message": "Hello, Vibe Coding!"}

终端运行：

uvicorn main:app --reload

浏览器打开 http://127.0.0.1:8000，看到 JSON 响应 {"message": "Hello, Vibe Coding!"}。环境搭建完成，开始实战。

实战示例：用 Vibe Coding 做一个待办事项工具

为什么选待办事项？三个理由：功能明确（增删改查），技术栈通用（Python 后端 + 简单前端），难度适中但结果可视化。你做完能直观看到效果，不是一堆终端输出。

我们先做命令行版，再迭代到 Web 版。这正是 Vibe Coding 的节奏——先跑通最小闭环，再一步步加。

定义需求

不用写 PRD，用自然语言说清楚你要什么就行。我给 AI 的描述是这样的：

我要一个命令行待办事项工具。功能：

1. 添加任务（输入任务描述）
2. 删除任务（输入任务编号）
3. 标记完成（输入任务编号）
4. 列出所有任务（显示编号、描述、完成状态）
5. 数据用 SQLite 存储，重启程序后任务不丢失

给 AI 下指令

在 Cursor 里按 Ctrl+I 打开 Composer 模式，输入完整提示词：

请帮我创建一个命令行待办事项工具，技术栈为 Python + SQLite。

功能要求：
- 添加任务：用户输入任务描述，保存到数据库
- 删除任务：用户输入任务编号，从数据库删除
- 标记完成：用户输入任务编号，将状态改为已完成
- 列出所有任务：显示编号、描述、是否完成

交互方式：命令行菜单循环，用户输入选项编号执行对应功能。

数据库要求：
- 使用 SQLite，文件名 todo.db
- 表 tasks，字段：id（整数主键自增）、description（文本）、completed（布尔默认 False）

代码要求：
- 类型注解
- 中文注释
- 错误处理：数据库操作要捕获异常

请生成完整代码，文件名为 todo_cli.py，放在项目根目录。

注意提示词的结构：先说技术栈，再说功能，再说交互方式，再说数据库设计，最后说代码风格要求。层次清晰，AI 一次就能生成你想要的代码，不用来回改。

AI 生成的代码

以下是核心代码片段（不是完整粘贴，选关键部分让你理解结构）：

数据库初始化：

import sqlite3

definit_db() -> None:
"""初始化数据库，创建 tasks 表"""
    conn = sqlite3.connect("todo.db")
    cursor = conn.cursor()
    cursor.execute("""
        CREATE TABLE IF NOT EXISTS tasks (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            description TEXT NOT NULL,
            completed BOOLEAN DEFAULT 0
        )
    """)
    conn.commit()
    conn.close()

添加任务：

defadd_task(description: str) -> None:
"""添加新任务到数据库"""
try:
        conn = sqlite3.connect("todo.db")
        cursor = conn.cursor()
        cursor.execute(
"INSERT INTO tasks (description) VALUES (?)",
            (description,)
        )
        conn.commit()
        print(f"任务已添加：{description}")
except sqlite3.Error as e:
        print(f"添加失败：{e}")
finally:
        conn.close()

主循环菜单：

defmain() -> None:
    init_db()
whileTrue:
        print("\n=== 待办事项工具 ===")
        print("1. 添加任务")
        print("2. 删除任务")
        print("3. 标记完成")
        print("4. 列出所有任务")
        print("5. 退出")
        choice = input("请选择：")
# ... 根据选择调用对应函数

AI 生成的完整代码大概 80 行，逻辑清晰、错误处理到位、注释齐全。直接在终端运行：

python todo_cli.py

菜单出来了，添加几个任务试试，列出看看，标记完成一个，删除一个。功能跑通了。

运行与迭代：发现问题，让 AI 修

第一次跑不可能完美。我跑完发现一个问题：删除任务时，输入不存在的编号会直接报错而不是友好提示。

回到 Cursor Chat 面板，输入：

删除功能有个问题：用户输入不存在的任务编号时，程序直接报错而不是给出友好提示。请修改 delete_task 函数，先检查编号是否存在，不存在则提示"任务不存在"，存在才删除。

AI 改了代码，加了存在性检查。我再跑一遍，输入一个不存在的编号，看到「任务不存在」。修好了。

这就是 Vibe Coding 的迭代节奏：跑起来 → 发现问题 → 描述问题 → AI 修复 → 再跑。每轮对话几分钟，比你自己读报错日志、定位 bug、手写修复快得多。

你可能还会发现其他问题：比如标记完成后列表里完成状态显示的是 0/1 而不是「已完成/未完成」。同样的方式，告诉 AI：

列出任务时，完成状态显示的是 0 和 1，不够直观。请改为显示"已完成"和"未完成"。

几秒钟修好。Vibe Coding 的迭代是连续的、低成本的，你不需要停下手头的事去研究代码。

加功能：从 CLI 版迭代到 Web 版

命令行版跑通了，现在加一个 Web 界面。你不需要重写，只需要告诉 AI 在现有代码基础上加一层。

在 Composer 模式输入：

请基于现有的 todo_cli.py 的数据库逻辑，创建一个 Web 版待办事项工具。

技术要求：
- 使用 FastAPI 作为后端框架
- 前端用 HTML + CSS + JavaScript（纯原生，不引入框架）
- 数据库继续用 todo.db，复用现有的表结构
- API 路由：GET /tasks（列表）、POST /tasks（添加）、DELETE /tasks/{id}（删除）、PUT /tasks/{id}（标记完成）

前端要求：
- 单页面，显示任务列表，每个任务有删除和完成按钮
- 顶部有输入框和添加按钮
- 操作后自动刷新列表
- 样式简洁现代，浅色背景、卡片式任务项

请生成以下文件：
- app/main.py：FastAPI 入口
- app/routes.py：API 路由
- app/database.py：数据库操作函数（从 todo_cli.py 迁移逻辑）
- static/index.html：前端页面（含 CSS 和 JS）

AI 生成了四个文件。你运行：

uvicorn app.main:app --reload

浏览器打开 http://127.0.0.1:8000，看到一个有输入框、任务列表、操作按钮的 Web 页面。添加任务、标记完成、删除——都能用。从 CLI 到 Web，你没写一行代码，只跟 AI 聊了两轮。

这就是 Vibe Coding 的力量：不是一次做完所有功能，而是从一个最小可用版本开始，每一步都跑通、都验证、都迭代。CLI 版是第一步，Web 版是第二步，后面你还可以加用户登录、任务分类、截止日期——每一步都是一个「见 → 说 → 跑」的循环。

结尾

回到 Karpathy 那句话：「忘掉代码的存在」。这不是让你真的忘掉——是让你换一种视角看编程这件事。

Vibe Coding 降低了编程语法的门槛。你的输入是自然语言——你脑子里想什么就说什么，AI 把你的话变成可运行的代码。你不需要学语法，只需要学会描述需求和判断结果。

核心心法还是那三个字：见 → 说 → 跑。见到一个需求或问题，用自然语言说出来，跑起来看结果。不满意就再说、再跑。循环往复，直到效果符合你的预期。

Vibe Coding 不是取代编程。它会让更多人能做东西——产品经理可以快速验证想法，创业者可以用一个下午做出 MVP，学生可以不用啃语法书就理解编程逻辑。它也会让专业开发者更高效——把重复性的编码交给 AI，把精力放在架构设计和质量把关上。