用 Cursor 15 分钟做一个生日贺卡网页：我的 Vibe Coding 实践
全程手写代码不超过10行，分享一套可复用的AI编程工作流
阅读时间：约7分钟
一、背景：我为什么开始尝试“氛围编程”
先说一个最近的变化。
过去写代码，我的习惯是：先想清楚逻辑，然后打开编辑器，一行一行敲。调试、报错、改、再跑。一个简单的页面，从0到能看，少说也要半小时。
最近尝试了一种新的方式：让AI写绝大部分代码，我来做架构、调优和决策。
这种方式在国外被叫做 Vibe Coding（氛围编程）。我不太喜欢这个译名，但它的核心理念很直接：用自然语言描述需求，AI生成代码，人负责审查、迭代、把控方向。
下面用一个真实的生日贺卡网页案例，完整走一遍我的操作流程。
二、案例：15分钟做一个生日贺卡生成器
2.1 需求目标
做一个浏览器可直接打开的HTML页面：
- 用户可以输入姓名、年龄、爱好
- 点击按钮后，生成一段个性化的生日祝福语
- 祝福语以“卡片”形式展示，保留历史记录（不被新内容覆盖）
- 如果不输入任何信息，随机生成一份贺卡
- 整体视觉喜庆、适合生日氛围
2.2 我用的工具
- Cursor（内置Claude模型）
- 浏览器（实时预览）
没有写任何后端代码，没有配环境，没有装依赖。
2.3 Prompt 怎么写才不“翻车”
一开始我也试过简单粗暴地让AI“帮我写个生日贺卡网页”，结果出来的东西要么布局乱，要么功能不对。
后来摸索出一套比较稳定的Prompt结构，我把它归纳为 5个模块：
| 模块 | 说明 | 我的写法 |
|---|---|---|
| Goal | 一句话说清楚要做什么 | “开发一个生日贺卡生成网页” |
| Input | 用户能输入/选择什么 | “姓名、年龄、爱好；可留空” |
| Output | 程序输出什么 | “生成个性化祝福语 + 卡片展示” |
| Layout | 页面长什么样 | “左侧输入区，右侧卡片展示区” |
| Features | 特殊功能点 | “保留历史卡片，新卡片追加不覆盖” |
实际操作中，我会把这5点写成一个自然段落，而不是列表。AI对这种结构化描述响应更准。
2.4 完整Prompt示例（可直接复制使用）
text
请帮我写一个生日贺卡生成网页，HTML/CSS/JS合并成一个文件。
目标：用户输入信息后生成个性化生日祝福。
输入项：姓名、年龄、爱好。三个字段均可选，留空则随机生成。
输出：一段温馨的生日祝福语，以卡片形式展示在右侧区域。
布局：页面分为左右两栏。左侧是输入框和生成按钮，右侧是卡片展示区。采用暖色/喜庆配色。
特色功能：
1. 每点一次生成按钮，右侧新增一张卡片，不覆盖之前的卡片
2. 无输入时点击生成，自动填充随机姓名/年龄/爱好
3. 卡片内显示：to [姓名]，[年龄]岁生日快乐！以及根据爱好定制的祝福语
4. 页面要有滚动条，方便查看多张卡片
把这个Prompt直接粘贴到Cursor，AI会在10-20秒内输出完整代码。
2.5 迭代：不满意就继续聊
第一版代码通常不会完美。我遇到的问题是：
- 卡片背景颜色太浅，看不清文字
- 随机生成的内容不够有趣
我的做法不是手动改CSS，而是继续对AI发指令：
“把卡片背景改成渐变色，从#ff9a9e到#fecfef，文字用深灰色”
“随机祝福语再丰富一点，加一些emoji”
一般2-3轮迭代后，效果就能达到预期。
全过程手写代码不超过10行（只改了一处边距和字体大小）。
三、踩坑记录：AI编程常见的几个问题
3.1 AI“幻觉”导致功能不对
有一次我要求“保留历史卡片”，AI实现的是覆盖更新。原因是它把“保留”理解成了“保留当前这一张”。
解决：把需求写成“新卡片追加在已有卡片下方，不清除旧内容”，描述更具体。
3.2 页面布局在手机上错位
AI默认生成的CSS没有加移动端适配。直接追加指令：
“加上viewport meta标签，在屏幕宽度小于768px时，左右两栏改为上下排列”
AI自动补全了响应式代码。
3.3 一次性需求太多，AI“漏做”
如果一次Prompt包含超过7-8个功能点，AI容易遗漏。我的做法是分两次：
- 先生成基础版本（布局 + 核心逻辑）
- 再追加需求（历史记录、随机生成、样式优化）
四、一点个人体会
4.1 Vibe Coding 不意味着不需要思考
恰恰相反。AI写代码很快，但决定“写什么”依然是人的工作。
你需要想清楚：
- 这个功能真的需要吗？
- 用户会怎么用这个页面？
- 生成的内容是否符合预期？
Prompt的质量 = 你对问题的理解深度。
4.2 适合什么场景
目前比较顺手的场景：
- 快速原型 / Demo
- 内部工具 / 个人小项目
- 前端页面（HTML/CSS/JS）
暂时不太适合的场景：
- 复杂的后端业务逻辑
- 对性能有严格要求的系统
- 你不熟悉、无法审查代码的领域
4.3 这套方法的局限
- AI生成的代码有时有冗余（多余变量、未使用的函数）
- 跨文件协作需要手动组织
- 不能完全依赖AI的安全意识（SQL注入、XSS需要自己检查）
五、完整代码
由于篇幅原因，完整代码不粘贴在这里。感兴趣的话可以在评论区留言，我发出来。
或者你也可以直接用上面的Prompt跑一遍——不同AI工具生成的效果会有差异，这也是有意思的地方。
最后：这只是一个实验性的分享。Vibe Coding不是银弹，但确实让“一个人快速实现想法”这件事变得更容易了。如果你也在尝试类似的AI编程工作流，欢迎交流。
