---
title: "1.5.2 Step by Step 操作"
---


![01-awakening_1.5-hello-world_1.5.2-step-by-step.png](/images/Basic/01-awakening_1.5-hello-world_1.5.2-step-by-step.png)
# 1.5.2 Step by Step 操作

接下来的每一步，我都会告诉你：
1. **做什么** - 具体的操作
2. **看到什么** - 你应该看到的结果
3. **检查点** - 确认你做对了

跟着走就行。


## Step 1：打开工具（30 秒）

**做什么：**

打开浏览器，访问 [bolt.new](https://bolt.new)（国内用户可用 [豆包 AI 编程](https://www.doubao.com/chat/coding)）

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

**你应该看到：**

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

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

**检查点：**

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

::: warning 如果遇到问题
- **页面加载很慢？** Bolt.new 在国内需要科学上网。建议国内用户使用 [豆包 AI 编程](https://www.doubao.com/chat/coding)，访问更流畅
- **需要登录？** 大部分工具可以免费试用，用 Google 账号或手机号登录即可
:::


## Step 2：输入 Prompt（30 秒）

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

**做什么：**

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

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

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

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

**你应该看到：**

AI 开始工作了！

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

整个过程大概 10-30 秒。

**检查点：**

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

::: tip 小技巧
不用紧盯着代码看。看不懂很正常——你只需要看最终的预览效果就行。
:::


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

**做什么：**

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

**你应该看到：**

一个漂亮的网页，上面显示着：
- 一句励志名言（可能是"千里之行，始于足下"，也可能是 AI 自己选的其他名言）
- 作者名字
- 好看的背景色

**检查点：**

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

::: info 恭喜！
如果你看到了上面这些，你已经成功做出了你的第一个 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。**