闪学it-普通人玩转 Vibe Coding 实战课

0 阅读6分钟

一、什么是 Vibe Coding

Vibe Coding 的核心是:你不再逐行写代码,而是用自然语言描述你想要什么,让 AI 生成、修改、调试,你只负责判断结果对不对。

传统编程的循环是:想清楚 → 写代码 → 运行 → 调试 → 重复。

Vibe Coding 的循环是:描述意图 → 让 AI 生成 → 看效果 → 说"不对,改成这样" → 重复。

关键区别不在于"用不用 AI",而在于你的注意力放在哪里。传统编程你关注语法、结构、边界条件;Vibe Coding 你关注意图、行为、结果。

这带来一个根本性变化:你的瓶颈从"写代码的速度"变成了"描述需求的清晰度"和"判断结果的能力"。

二、工具链现状

Vibe Coding 不是某一个工具,而是一种工作方式。当前主流工具分为几类:

  • AI 原生编辑器:Cursor、Windsurf、Trae。深度集成 AI,能理解整个代码库,支持多文件修改。
  • 命令行 Agent:Claude Code、Aider、OpenAI Codex CLI。在终端里对话,直接操作文件系统。
  • IDE 插件:GitHub Copilot、Cline、Continue。在现有编辑器里增强。
  • Web 生成器:v0、Bolt、Lovable。一句话生成完整应用,适合原型。

选哪个不重要,重要的是你是否真正把"写代码"的动作交给了 AI。

三、实战工作流:从想法到上线

第一步:把想法说清楚

Vibe Coding 最容易翻车的地方,是一上来就说"帮我做个电商网站"。这种描述太模糊,AI 只能靠猜。

好的做法是分层描述:

  1. 目标:这个产品解决什么问题?
  2. 用户:谁用?怎么用?
  3. 核心流程:用户从进入到完成目标,经历哪几步?
  4. 约束:技术栈、部署环境、性能要求。

不需要写文档,但需要想清楚。你说得越具体,AI 猜得越少。

第二步:从最小可运行版本开始

不要一次性描述整个产品。先让 AI 生成一个能跑起来的最小版本,哪怕只有一页。

比如做一个"每日待办"应用,第一句话可以是:

text

用 Next.js 做一个单页应用,页面上有一个输入框和一个列表。
输入内容按回车,内容加到列表末尾。列表项可以点击删除。
数据存在 localStorage 里。样式用 Tailwind,简洁风格。

这句话包含了技术栈、功能、交互、存储、样式。AI 一次就能生成可运行的代码。

第三步:迭代式修改

有了能跑的基础版本,接下来就是不断说"改这里"。

  • "输入框改成按回车和点按钮都能提交。"
  • "列表项加一个勾选完成的状态,完成的项目文字变灰加删除线。"
  • "加一个筛选:全部、未完成、已完成。"
  • "顶部加一个统计:还有几项未完成。"

每一次修改都是小步的、具体的、可验证的。这就是 Vibe Coding 的节奏。

第四步:让 AI 自己调试

遇到报错,直接把错误信息贴给 AI:

text

运行时报错:Cannot read properties of undefined (reading 'map')

AI 会定位问题、修改代码。你不需要读懂每一行,只需要确认修好了。

这是 Vibe Coding 最反直觉的地方:你可以不懂代码,但你必须懂"什么是对的"。

四、少量代码:Vibe Coding 的"胶水"

Vibe Coding 不意味着完全不写代码。有些场景你仍然需要动手,比如:

  • 定义接口契约:告诉 AI 数据结构长什么样
  • 写配置:环境变量、部署参数
  • 写 Prompt 模板:如果产品本身涉及 AI 调用

下面是一个典型场景:你需要让 AI 生成一个调用大模型的功能,但先定义好输入输出,避免它自由发挥。

python

# schema.py — 先定义契约,再让 AI 填实现
from pydantic import BaseModel

class ChatRequest(BaseModel):
    message: str
    history: list[dict] = []

class ChatResponse(BaseModel):
    reply: str
    tokens_used: int

你写好这个 schema,然后对 AI 说:"基于这个 schema,用 FastAPI 实现一个 /chat 接口,调用 OpenAI,带上历史对话。"

这几十行代码不是"编程",而是"沟通工具"。 它把你的意图固化下来,让 AI 在正确的框架里工作。

五、什么适合 Vibe Coding,什么不适合

适合的场景:

  • 原型验证、MVP 开发
  • 内部工具、脚本、自动化
  • 前端界面、CRUD 应用
  • 一次性数据处理任务
  • 学习新技术时的探索

不适合的场景:

  • 核心金融、医疗、安全系统
  • 高性能、低延迟的底层系统
  • 需要长期维护、多人协作的大型代码库
  • 有严格合规要求的场景

判断标准很简单:出错的代价有多大? 如果错了改一下就行,放手让 AI 干;如果错了要赔钱、要担责,还是自己盯着。

六、五个实战技巧

1. 用"角色+任务+约束"三段式描述

不要说"做个登录页",要说"你是一个前端工程师,帮我做一个登录页,用 React + Tailwind,包含邮箱密码输入、记住我、忘记密码链接,样式参考 Linear 的极简风格"。

2. 让 AI 先解释再动手

复杂改动前,先问"你打算怎么改?",确认思路对了再让它写。这能避免它朝着错误方向狂奔。

3. 小步提交,随时可回滚

每完成一个小功能就 commit。Vibe Coding 的迭代速度快,出错也快,Git 是你的安全网。

4. 看不懂的代码要追问

AI 生成的代码如果有你不理解的部分,直接问"这段为什么这么写?"。不是为了学会写代码,而是为了在出问题时能判断。

5. 保留人工审查的关键节点

数据库结构、权限逻辑、支付流程、数据删除——这些地方必须人工确认。AI 可以写,但你不能不看。

七、Vibe Coding 改变了什么

它改变的不是"要不要懂技术",而是懂技术的定义。

过去,懂技术意味着能写出正确的代码。现在,懂技术意味着能判断什么是正确的、能描述清楚要什么、能识别 AI 哪里错了、能在关键节点做出决策。

这对不同的人意味着不同的机会:

  • 产品经理:可以自己把想法变成可点击的原型,不再依赖排期。
  • 设计师:可以把设计稿直接变成可交互的页面。
  • 创业者:可以用极低成本验证想法,快速试错。
  • 工程师:可以从重复劳动中解放,专注于架构和难题。

但同时,它也淘汰一类人:只会照着需求写代码,不会判断代码好坏的人。

结语

Vibe Coding 不是"不用学编程了",而是编程的门槛从"会写"变成了"会想" 。

工具会越来越强,模型会越来越聪明。但有一件事不会变:你得知道自己要什么,并且能判断拿到的东西对不对。