'

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 秒)

做什么:

打开浏览器,访问 Moss

(或者你选择的其他工具)

你应该看到:

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

的对话界面,但它可以用来生成网页、小程序、各类报告文档。

检查点:

Step 2:输入 Prompt(30 秒)

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

做什么:

在输入框里,输入下面这段话(可以直接复制):

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

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

然后按回车(或点击发送按钮)。

你应该看到:

AI 开始工作了!

它会:

整个过程大概 10-30 秒。

检查点:

小技巧

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

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。

`