Vibe session · Learning mode阅读、尝试、提问都留在同一个工作区
Course Map
练习进度 0/55
Learning Guide
Build session

你的第一个 Vibe 项目 — 从需求到指令

warmup · 8-12 min · 步骤 1/3

你的第一条指令,决定了后面 30 分钟的效率

先说一个我观察到的现象。很多人第一次用 Vibe Coding 工具,打开 Cursor 或者 Bolt.new 之后,第一句话是这样的:

上下文决定 AI 输出质量——差提示词 vs 好提示词的差异一目了然
"帮我做一个网站。"

然后 AI 就真的帮你做了一个"网站"。一个非常泛的、像模板的、没有任何个人特色的网站。你看了一眼觉得不对,又说:"好看一点。"AI 改了改,还是不对。你又说:"再好看一点。"AI 再改改,你开始烦躁了:"不是这样的!我想要的是……"

问题出在哪?出在你的第一条指令就错了。不是 AI 不行,是你没给它足够的信息

初学者最常犯的五个错误——信息过载、上下文缺失、目标不清晰、忽略格式、不设约束

你就把 AI 想象成一个能力超强、但完全不了解你的新同事。这个同事刚入职第一天,你跟他说"帮我做个方案",他能做出来——但做出来的一定不是你想要的,因为他不知道这个方案给谁看、什么场景用、有什么约束条件、你之前试过什么方案觉得不好。

所以在 Vibe Coding 里,你的第一条指令不是越短越好,而是越具体越好

一条好指令长什么样?

一条好的 Vibe Coding 指令,不需要是完美的 PRD 文档,但至少要包含五个要素。我管它叫 "WCSTF 五要素"——What(做什么)、Content(放什么内容)、Style(什么风格)、Tech(用什么技术)、First(第一版先做到什么程度)。

为什么需要框架——把开放式问题变成填空题,减少认知负担

我拿一个真实场景来说明。假设你想做一个个人主页,下面是同一个需求的两种写法:

烂指令

帮我做一个个人主页,好看一点。

这条指令缺了 Content(你是谁?放什么?)、缺了 Style(什么叫"好看"?)、缺了 Tech(用什么技术栈?)、缺了 First(第一版要做到什么程度?)。AI 只能靠猜,猜出来的东西当然不是你想要的。

好指令

帮我做一个个人主页。

关于我:
- 名字:张伟
- 身份:Junior 全栈开发者,正在找工作
- 一句话介绍:会写 React,正在学 AI 编程,想做独立开发者
- 兴趣:开源、写技术博客、打篮球

页面结构:
- 首屏:头像 + 名字 + 一句话介绍 + 社交链接(GitHub、LinkedIn)
- 第二屏:技能列表(React、TypeScript、Node.js、Python)
- 第三屏:最近 3 个项目卡片(项目名 + 一句话描述 + 链接)
- 底部:联系方式

风格要求:
- 深色主题,主色调用蓝色
- 简约风格,不要太花哨
- 字体要清晰,间距要舒服
- 要适配手机端

技术栈:
- HTML + CSS + JavaScript 就行,不需要框架
- 单文件 index.html,方便直接部署到 GitHub Pages

第一版要求:
- 先把结构和内容做出来
- 不需要动画效果
- 不需要后端
- 先做桌面版,移动端后面再调

你看出区别了吗?第二条指令长得多,但它不是在"啰嗦"——它在提供 AI 做决策时需要的信息。你给的信息越多,AI 需要"猜"的就越少,猜得越少,结果就越接近你想要的。

用框架写第一个 Prompt——从项目启动卡转化为结构化 AI 指令

下面就是一条好指令实际跑出来的效果——用 Vibe Coding 工具生成的个人主页,结构清晰、内容完整:

一条好指令的实际产出——用 Vibe Coding 工具生成的个人主页效果

一个很容易犯的错误:指令里写太多"怎么做"

有的人走另一个极端:

帮我做一个个人主页。用 div 嵌套,外层 div 用 flex 布局,
内层每个 section 用 padding: 40px 20px,背景色用 #1a1a2e,
文字颜色 #e0e0e0,标题用 h1 标签 font-size: 2.5rem,
子标题用 h2 标签 font-size: 1.5rem margin-bottom: 24px...

等等,你这不是又回到自己写代码了吗?Commander 思维的核心就是——告诉 AI 你想要什么效果(What),而不是告诉它怎么实现(How)

从 Coder 到 Commander——2025 年编程世界的转变,你不需要写代码也能做软件

你应该说"深色主题,主色调蓝色,简约风格",而不是"background-color: #1a1a2e"。AI 自己会选合适的颜色值。你不信?它选的可能比你自己配色还好看——因为它见过几百万个网站的配色方案。

当然,有些时候你确实需要指定具体的实现细节——比如你的公司有严格的品牌色要求("必须用 #FF5757"),或者你要和已有的代码库保持一致。这种情况下写具体值是对的。但如果你没有这种硬性约束,就让 AI 自己发挥。

填空式起步法

如果你实在不知道怎么组织第一条指令,这里有一个填空模板你可以直接用:

万能提示词模板——七要素结构,覆盖面广怎么填都不会太差
我想做一个 ______(什么东西)。

关于我 / 关于这个项目:
- ______

页面上需要有:
- ______
- ______
- ______

风格要求:
- ______

技术要求:
- ______

第一版先做到:
- ______
- 不需要 ______

你可能会觉得"我连这个都填不出来"。但你仔细想想——如果你连"做什么"、"给谁用"、"要什么效果"这些都说不清楚,那问题不在 AI 工具,而在你还没想清楚自己要做什么。在这种情况下,你可以先跟 AI 聊聊你的想法,让它帮你梳理需求。你跟它说"我想做一个个人主页但不知道该放什么",它会问你一堆问题,回答完这些问题你的需求自然就清楚了。

话说回来,第一条指令不需要完美。你的目标不是写出一份无懈可击的需求文档,而是写出一条"够好"的指令,让 AI 先给你一个"够用"的第一版。看到第一版之后,你才知道哪里要改、哪里要加。这就是 Vibe Coding 的核心循环:说 → 看 → 改 → 再说

迭代对话的基本模式——第一轮看方向,第二轮改问题,第三轮磨细节Vibe Coding 经验分享全景图——核心策略:架构师思维 + AI 杠杆

所以现在,轮到你动手了。

Vibe Workspace
Live build context

从"帮我做一个网站"到一条能执行的指令

同样是跟 AI 说话,为什么有的人三分钟出成品,有的人三小时在兜圈子

自动保存在此设备
学会把模糊的想法转化为 AI 能执行的具体指令理解一条好指令和一条烂指令之间的差距写出自己的第一条 Vibe Coding 指令并获得 AI 反馈
Home| Vibe Lab
草稿自动保存