小白AI编程

Appearance

做第一个小网页 ​

跟着做，10分钟做出一个小网页，体验"告诉AI想做什么，它帮你写代码"的感觉。

你会学到什么 ​

  • 怎么用AI帮你写代码
  • 怎么保存代码文件
  • 怎么在浏览器里看效果

最终效果 ​

做完后，你会得到一个这样的网页：

（这里应该有截图，展示最终网页效果）

网页上会有：

  • 一个标题
  • 一段文字介绍
  • 一个按钮，点击会弹出"欢迎"

准备工作 ​

第一步：新建一个文件夹 ​

  1. 在桌面（或其他你喜欢的地方）新建一个文件夹
  2. 名字叫 my-first-page
  3. 打开 VS Code
  4. 点左上角"文件" → "打开文件夹"
  5. 选择你刚建的 my-first-page 文件夹

第二步：打开 OpenClaw ​

  1. 在 VS Code 里，按 Ctrl+Shift+P（Windows）或 Cmd+Shift+P（Mac）
  2. 输入 "OpenClaw"
  3. 选择 "OpenClaw: New Chat" 或类似的选项

这时候应该会弹出一个聊天窗口。

第三步：告诉AI你想做什么 ​

在聊天框里输入：

帮我写一个个人介绍网页，包含：
- 标题：我的个人主页
- 我的名字（先用"小明"代替）
- 一段自我介绍
- 一个按钮，点击弹出一个"欢迎"的提示

按回车发送。

第四步：等待AI写代码 ​

AI会思考几秒钟，然后给你一段代码。

看起来大概是这样的：

html
<!DOCTYPE html>
<html>
<head>
  <title>我的个人主页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    button {
      background-color: #4a90d9;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #3a80c9;
    }
  </style>
</head>
<body>
  <h1>我的个人主页</h1>
  <p>我是小明，很高兴认识你！</p>
  <button onclick="sayHello()">点我</button>
  
  <script>
    function sayHello() {
      alert('欢迎！');
    }
  </script>
</body>
</html>

第五步：保存代码 ​

  1. 在 VS Code 里，按 Ctrl+S（Windows）或 Cmd+S（Mac）
  2. 点"文件" → "另存为"
  3. 文件名输入 index.html
  4. 保存类型选"HTML"
  5. 保存到 my-first-page 文件夹

第六步：打开网页看效果 ​

  1. 打开 my-first-page 文件夹
  2. 双击打开 index.html
  3. 它会在浏览器里打开
  4. 你就能看到你做的网页了！
  5. 点一下按钮，会弹出"欢迎"

恭喜你！ ​

你完成了第一个AI编程项目！

接下来可以 ​

  • 修改网页内容，换成你自己的名字和介绍
  • 尝试让AI帮你添加更多功能
  • 试试看效果？

遇到问题了？ ​

Q: AI给的代码报错了？

A: 把报错信息复制下来，去报错怎么办找答案。

Q: 网页显示不正常？

A: 检查：1. HTML文件是否保存成功；2. 文件后缀是 .html 而不是 .txt

Q: 按钮点了没反应？

A: 检查AI给的代码里有没有 <script> 部分，可能是被漏掉了。

下一步看什么 ​

👉 下一步看什么
继续探索这个网站 →去报错怎么办看看 →
🤔 遇到问题了？
Q: AI给的代码太长了，我看不懂
A: 没关系，你不需要看懂每一行。只需要知道：代码是一行一行组成的，改哪里点哪里就行。
Q: 我不知道这个代码是什么意思
A: 你不需要知道！AI编程就是让你不用懂代码也能做出东西。慢慢来。
Q: 我想让网页更好看一点怎么办
A: 告诉AI！比如“帮我把这个按钮改成红色”或“帮我加一个背景图”。