---
title: "4.2.2 生成静态页面"
order: 3
---


![04-practice-0-to-1_4.2-build-page_4.2.2-generate-static.png](/images/Basic/04-practice-0-to-1_4.2-build-page_4.2.2-generate-static.png)
# 4.2.2 生成静态页面

> **本步目标**：把 Prompt 发送给 AI，获得第一版静态页面

## 发送 Prompt

现在，把你在上一步准备好的 Prompt 发送给 AI IDE。

还记得 4.1.2 节介绍的界面布局吗？找到 **对话区**，把 Prompt 粘贴进去，按回车发送。

不同 AI IDE 的对话区位置可能略有不同，但都很好找：

- 通常在界面底部或侧边栏
- 可能标注着 "Chat"、"AI"、"Composer"、"Cascade" 等字样
- 有些工具可以用快捷键打开（如 Cursor 的 `Cmd/Ctrl + L`）

::: tip 找不到对话区？
回顾 [4.1.2 准备你的 AI IDE](../4.1-before-start/4.1.2-prepare-ai-ide.md) 中的界面布局说明。如果你使用的工具不在常见列表中，可以查看 [1.3.1 AI 编程工具全景图](../../01-awakening/1.3-tools-guide/1.3.1-tool-overview.md) 获取更多工具信息。
:::

发送后，等待 AI 生成代码。通常需要 10-30 秒。

## 你应该看到什么

AI 生成完成后，你应该能看到一个待办清单页面，包含以下结构：

```
┌─────────────────────────────────────┐
│                                     │
│        我的待办清单                  │  ← 标题区
│                                     │
├─────────────────────────────────────┤
│  ┌─────────────────────┐ ┌────┐    │
│  │ 输入新任务...        │ │添加│    │  ← 输入区
│  └─────────────────────┘ └────┘    │
├─────────────────────────────────────┤
│                                     │
│  □ 完成项目报告      [完成] [删除]  │  ← 任务列表区
│  □ 买牛奶            [完成] [删除]  │    （假数据）
│  □ 给妈妈打电话      [完成] [删除]  │
│                                     │
└─────────────────────────────────────┘
```

具体检查这些元素是否存在：

- [ ] 页面有标题"我的待办清单"
- [ ] 有一个输入框
- [ ] 有一个"添加"按钮
- [ ] 有任务列表，显示几条假数据
- [ ] 每个任务有"完成"和"删除"按钮
- [ ] 整体布局居中，看起来比较整齐

## 五种可能的情况及处理

第一次生成的结果可能会有差异。根据你看到的情况，选择对应的处理方式：

### 情况一：完美符合预期

**现象**：页面布局、样式、元素都符合预期。

**处理**：太棒了！直接跳到 [4.2.4 阶段性成果检查](./4.2.4-checkpoint.md)。

### 情况二：结构对，但样式不满意

**现象**：所有元素都在，但颜色太暗、按钮太小、间距不够等。

**处理**：进入 [4.2.3 调整样式与布局](./4.2.3-adjust-style.md)，用迭代对话调整。

### 情况三：缺少某些元素

**现象**：比如没有"完成"按钮，或者没有假数据。

**处理**：发送追加说明：

```
页面整体不错，请补充以下内容：
- 每个任务需要有"完成"按钮和"删除"按钮
- 任务列表先用 3 条假数据展示样式
```

### 情况四：页面空白

**现象**：浏览器显示空白页面，什么都没有。

**处理**：这通常是文件保存或预览问题，按以下顺序排查：

1. **确认文件已保存**：在 AI IDE 中按 `Ctrl+S`（Mac 用 `Cmd+S`）
2. **刷新预览**：按 `Ctrl+Shift+R`（Mac 用 `Cmd+Shift+R`）强制刷新
3. **检查文件位置**：确认 HTML 文件保存在正确的位置
4. **查看控制台**：按 `F12` 打开开发者工具，看是否有红色错误

如果以上都不行，让 AI 帮你检查：

```
页面显示空白，请帮我检查代码是否有问题。
如果有问题，请修复并给我完整的正确代码。
```

### 情况五：代码报错

**现象**：浏览器控制台显示红色错误信息。

**处理**：跳到 [4.5.2 用 AI 帮你修 AI 的代码](../4.5-debug/4.5.2-fix-with-ai.md)，学习如何让 AI 帮你修复。

## 理解 AI 生成的代码结构

你不需要完全理解代码，但了解大致结构会帮助你后续调整。AI 生成的 HTML 文件通常是这样的：

```html
<!DOCTYPE html>
<html>
<head>
    <!-- 页面标题和设置 -->
    <title>我的待办清单</title>
    <style>
        /* 
         * 这里是 CSS 样式代码
         * 控制页面的颜色、大小、布局
         */
    </style>
</head>
<body>
    <!-- 这里是页面内容 -->
    
    <div class="container">
        <!-- 标题 -->
        <h1>我的待办清单</h1>
        
        <!-- 输入区域 -->
        <div class="input-area">
            <input type="text" placeholder="输入新任务...">
            <button>添加</button>
        </div>
        
        <!-- 任务列表 -->
        <ul class="task-list">
            <li>
                <span>完成项目报告</span>
                <button>完成</button>
                <button>删除</button>
            </li>
            <!-- 更多任务... -->
        </ul>
    </div>
</body>
</html>
```

简单理解：

| 代码部分 | 作用 |
|---------|------|
| `<head>...</head>` | 页面的"幕后设置"，包括标题和样式 |
| `<style>...</style>` | CSS 样式，控制外观 |
| `<body>...</body>` | 页面的"正文内容"，用户看到的部分 |
| `<div>` | 一个容器，用来分组和布局 |
| `<input>` | 输入框 |
| `<button>` | 按钮 |
| `<ul>` 和 `<li>` | 列表和列表项 |

::: info 不需要记住这些
这只是帮助你理解代码结构。在 Vibe Coding 中，你不需要自己写这些代码——只需要告诉 AI 你想要什么，它会帮你写。
:::

## 点击按钮没反应？

如果你尝试点击"添加"按钮，发现什么都没发生——这是**完全正常的**。

现在的页面只是一个"壳"，还没有任何功能代码。就像一辆车的模型，看起来像车，但还不能开动。

在 4.3 节，我们会让这些按钮"活"起来。

## 常见问题速查

| 问题 | 可能原因 | 解决方法 |
|-----|---------|---------|
| 页面完全空白 | 文件未保存或未正确预览 | 保存文件，刷新浏览器 |
| 样式看起来很丑 | AI 的默认样式不符合你的审美 | 进入 4.2.3 调整 |
| 只有文字没有样式 | CSS 未正确引入 | 让 AI 检查代码结构 |
| 页面在手机上显示异常 | 缺少响应式设置 | 要求 AI 添加响应式样式 |
| 按钮点击无反应 | 正常！静态页面没有功能 | 4.3 节会添加功能 |

## 本步检查点

继续之前，确认：

- [ ] AI 已经生成了代码
- [ ] 能在浏览器中看到页面
- [ ] 页面包含标题、输入框、按钮、任务列表

如果样式不满意，进入下一步调整。如果已经满意，可以直接跳到 [4.2.4 阶段性成果检查](./4.2.4-checkpoint.md)。

→ [4.2.3 调整样式与布局](./4.2.3-adjust-style.md)