最近看到一个有意思的词，叫「Vibe Coding」。这是前OpenAI AI研究总监Andrej Karpathy在2025年提出的一个概念。
什么是Vibe Coding
简单说，就是一种用自然语言写代码的方式。
传统写代码是这样的：你有个想法，然后打开编辑器，一行一行敲代码，调试，改bug，再调试。
Vibe Coding是这样的：你有个想法，然后跟AI对话，告诉它你要什么，让它帮你写代码。你不需要自己敲键盘，主要是"说"和"看"。
Karpathy的原话是："fully give in to the vibes, embrace exponentials, and forget that the code even exists"。大意就是：完全跟着感觉走，接受指数级增长，忘记代码本身的存在。
听着挺玄乎，但实际用起来其实很简单。
我用Vibe Coding做了「花卷面试题」
之前做的「花卷面试题」项目，就是用这种方式完整做出来的。对比一下传统开发方式和Vibe Coding的区别：
传统开发周期
传统做一个刷题小程序，大概是这样的流程：
- 需求分析（1-2天）：想清楚要什么功能，怎么设计
- 技术选型（半天）：选框架、选数据库、选服务器
- 原型设计（2-3天）：画原型图，设计页面交互
- 前端开发（1-2周）：写页面，写逻辑，调接口
- 后端开发（1-2周）：写接口，设计数据库
- 联调测试（3-5天）：前后端联调，改bug
- 部署上线（1-2天）：部署到服务器，配置域名
算下来，一个完整项目至少要1-2个月。
Vibe Coding方式
用Vibe Coding是这样的：
1. 项目构思
我告诉AI：我想做一个面试题刷题小程序，类似题库应用，用户可以按分类看题、收藏、看历史记录。支持H5和小程序。
AI问了我几个问题：要什么分类？要不要用户系统？要不要搜索功能？要不要深色模式？
我回答了这些问题，AI就生成了一个初步的功能清单。
2. 原型设计
我让AI帮我设计页面结构。AI直接给了我一个页面清单和跳转关系：
- 首页（分类展示）
- 题目列表页
- 题目详情页
- 搜索页
- 个人中心
- 收藏页
- 浏览记录页
还给我画了每个页面的布局说明，比如首页顶部是搜索框，下面是分类网格。
3. 技术选型
我问AI用什么技术栈比较好。考虑到要同时支持H5和小程序，AI推荐了uni-app + Vue3 + TypeScript。
理由是：
- uni-app可以一套代码编译到多端
- Vue3生态好，上手快
- TypeScript类型安全，减少bug
我同意了，AI就帮我生成了项目脚手架。
4. 开发过程
开发的时候，我基本上是这样和AI配合的：
写首页：
我：帮我写一个首页，顶部是搜索框，下面显示所有一级分类，每个分类是一个卡片，显示图标和名称。支持下拉刷新。
AI：给我生成了首页的Vue组件，包含了布局、数据请求、刷新逻辑。
我看了一下，觉得样式不太好看，就告诉AI：卡片样式改一下，加个阴影，间距调大一点。
AI很快就调整好了。
写题目详情页：
我：题目详情页需要显示题目内容和答案，用Markdown渲染。如果用户未激活，答案部分要折叠，点击才能展开。
AI：写了一个详情页，用了Markdown渲染组件，还加了权限判断。
我测试了一下，发现Markdown里的代码块没有高亮。我把这个问题丢给AI，AI很快就加上了代码高亮。
5. Bug修复
开发过程中遇到bug，我是这样处理的：
有次列表页报错了，我把错误信息复制给AI。AI看了之后说是因为数据格式不对，告诉我需要加个数据转换，还直接给了修改后的代码。
还有次小程序真机调试没问题，但H5版有跨域问题。我问AI，AI告诉我要配置代理，还给了具体的配置代码。
基本上遇到的问题，丢给AI都能快速解决。
整个项目从0到上线，大概用了2-3周时间。比传统方式快了很多。
Vibe Coding存在的问题
虽然Vibe Coding能提高效率，但也确实有一些问题需要面对。
1. AI的上下文问题
这是最常见的问题。
AI的上下文窗口是有限的，对话太长之后，AI会"忘记"之前的内容。
会导致什么问题？
比如你让AI写了一个组件，过了很久又让它改另一个相关的组件。AI可能忘了第一个组件是怎么写的，导致两个组件的风格不统一，或者接口对不上。
我有次让AI写了题目列表页的接口，后来又让它写详情页。结果AI忘了列表页用的字段名，详情页用了不一样的命名，导致数据对不上。
怎么解决？
- 把重要的设计决策记下来，比如API字段定义、组件接口规范
- 每次开始新任务前，把相关背景信息简单说一下
- 把项目分成几个小的上下文，比如前端、后端、配置，分别处理
- 用支持项目记忆的AI工具（比如Claude的Projects功能）
2. 提示词问题
提示词写得好不好，直接影响AI输出的质量。
提示词不规范会导致什么问题？
问题一：理解偏差
我一开始说"帮我写个列表"，AI写了个很简单的东西。后来我才明白，应该说"帮我写一个题目列表页面，包含标题、分类标签、收藏按钮，支持下拉刷新和上拉加载，每页显示20条数据"。
说得越具体，AI写得越准。
问题二：缺少边界条件
有次我让AI写搜索功能，只说了"要支持关键词搜索"。结果AI写了个前端搜索，数据量一大就卡了。
后来我补充了："搜索要调用后端接口，支持防抖，搜索结果高亮关键词"，AI就写对了。
问题三：风格不统一
不同时候问AI，它可能用不同的代码风格。有时候用箭头函数，有时候用普通函数。有时候用async/await，有时候用Promise。
怎么解决？
- 提示词要具体：说明输入、输出、边界条件
- 建立规范：告诉AI你的代码风格要求
- 提供示例：给AI看一个类似的代码，让它照着写
- 及时反馈：AI写得不满意，直接告诉它哪里要改
如何结合Vibe Coding提高开发效率
根据我的经验，这几个方法能让Vibe Coding更高效：
1. 把项目拆成小任务
不要一口气让AI做整个项目。拆成小的、独立的任务，一步步来。
比如做题目列表页，可以拆成：
- 先写UI布局
- 再加数据请求
- 然后加刷新加载
- 最后加收藏功能
这样每个任务都能在一个对话里完成，上下文更清晰。
2. 先让AI出方案，再让它实现
写代码前，先让AI给出设计方案。比如：
"我要做一个题目列表页，你帮我设计一下页面结构和数据流"
AI会给你一个方案，你看看合不合理，不合适就让AI改。确定了再让它写代码。
这样可以避免写到一半发现设计有问题，推倒重来。
3. 建立项目规范
一开始就告诉AI你的规范：
- 代码风格：用2空格缩进，用箭头函数
- 命名规范：组件用PascalCase，变量用camelCase
- 文件组织：页面放在pages目录，组件放在components目录
- 注释要求：复杂逻辑要加注释
这样AI写的代码会更统一，后面维护也方便。
4. 要会看代码，不要完全依赖AI
虽然AI能写代码，但你至少要能看懂。
要知道AI写的是什么，有没有问题，符不符合你的需求。完全看不懂的话，AI写错了你也发现不了。
我其实对Vue和uni-app都不算特别熟，但基本的编程概念是懂的。AI写的代码我能看个大概，有问题也能指出来。
5. 善用AI的解释功能
遇到看不懂的代码，直接让AI解释。
"这段代码是什么意思？为什么要这样写？"
AI会告诉你代码的逻辑和设计思路。不仅能解决问题，还能学到东西。
6. 保留重要的对话记录
AI给出的重要的设计决策、接口定义、配置代码，最好保存下来。
可以建一个文档，记录这些关键信息。下次对话的时候，把这些信息告诉AI，保持上下文一致。
最后
Vibe Coding不是说要取代程序员，而是提供了一种新的方式。
它的本质是：你负责"想"和"判断"，AI负责"写"和"实现"。
适合中小项目，或者想快速验证想法的时候。大型复杂项目可能还是需要专业开发团队。
如果你想做个什么东西，不妨试试这种方式。就像我做「花卷面试题」，一开始我也不相信自己能做出来。但一步步和AI配合，最后还真成了。
当然，这种方式还在早期阶段，会有各种问题。但整体来说，确实能让更多人把想法变成现实。
这就够了。
