来源：https://github.com/datawhalechina/vibe-vibe

接下来的每一步，我都会告诉你：

1. 做什么 - 具体的操作
2. 看到什么 - 你应该看到的结果
3. 检查点 - 确认你做对了

跟着走就行。

Step 1：打开工具（30 秒）

做什么：

打开浏览器，访问 bolt.new（国内用户可用 豆包 AI 编程）

（或者你选择的其他工具）

你应该看到：

一个简洁的界面，中间有一个输入框，让你描述想要做什么。

类似于 ChatGPT 的对话界面，但它专门用来生成网页和应用。

检查点：

界面已经加载完成
你能看到输入框

Step 2：输入 Prompt（30 秒）

现在，最关键的一步来了。

做什么：

在输入框里，输入下面这段话（可以直接复制）：

帮我做一个简单的网页，显示一句励志名言。

要求：
1. 页面正中央显示一句名言，比如"千里之行，始于足下"
2. 名言下方显示作者名字
3. 页面背景用浅色渐变，看起来舒服一点
4. 整体风格简洁大方

然后按回车（或点击发送按钮）。

你应该看到：

AI 开始工作了！

它会：

• 思考一下你的需求
• 开始生成代码
• 在右边（或下方）实时显示预览效果

整个过程大概 10-30 秒。

检查点：

AI 正在生成内容
你能看到预览画面在变化

Step 3：查看结果（1 分钟）

做什么：

等 AI 生成完毕后，看看预览窗口里的效果。

你应该看到：

一个漂亮的网页，上面显示着：

• 一句励志名言（可能是"千里之行，始于足下"，也可能是 AI 自己选的其他名言）
• 作者名字
• 好看的背景色

检查点：

页面正常显示，没有报错
能看到名言和作者
背景颜色是渐变的

Step 4：尝试修改（1 分钟）

做出来不满意？没关系，改它。

做什么：

在对话框里继续输入你的修改意见。比如：

把名言换成"Stay hungry, stay foolish. —— Steve Jobs"

或者：

背景颜色改成深色系，字体颜色改成白色

或者：

加一个按钮，点击可以切换到下一句名言

你应该看到：

AI 会根据你的要求，修改代码，预览窗口也会实时更新。

检查点：

修改生效了
页面按你说的方式变化了

完整的 Prompt 参考

如果你想要一个更完整的版本，可以试试这个：

帮我做一个"每日一句"励志名言网页。

功能：
1. 页面正中央显示一句名言和作者
2. 有一个"换一句"按钮，点击可以随机切换名言
3. 预设 5-10 句名言供切换

样式：
1. 背景用柔和的渐变色（比如浅蓝到浅紫）
2. 名言用大字体，居中显示
3. 作者名用小一点的字体，显示在名言下方
4. 按钮要好看，有悬停效果
5. 整体风格现代、简洁

请用 HTML + CSS + JavaScript 实现。

这个版本加入了交互功能（按钮切换），你可以试试。

小结

你刚刚完成了什么？

1. 打开工具 - 30 秒
2. 输入需求 - 30 秒
3. 等待生成 - 30 秒
4. 查看结果 - 30 秒
5. 尝试修改 - 1 分钟

总共：3 分钟。

你用自然语言"写"了一个网页。

没有学任何编程语言。

没有写一行代码。

这就是 Vibe Coding。