Vibe Vibe

主题

4.2.2 生成静态页面 ​

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

发送 Prompt ​

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

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

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

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

找不到对话区？

回顾 4.1.2 准备你的 AI IDE 中的界面布局说明。如果你使用的工具不在常见列表中，可以查看 1.4.1 AI 编程工具全景图 获取更多工具信息。

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

你应该看到什么 ​

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

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

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

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

五种可能的情况及处理 ​

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

情况一：完美符合预期 ​

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

处理：太棒了！直接跳到 4.2.4 阶段性成果检查。

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

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

处理：进入 4.2.3 调整样式与布局，用迭代对话调整。

情况三：缺少某些元素 ​

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

处理：发送追加说明：

页面整体不错，请补充以下内容：
- 每个任务需要有"完成"按钮和"删除"按钮
- 任务列表先用 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 的代码，学习如何让 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>列表和列表项

不需要记住这些

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

点击按钮没反应？ ​

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

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

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

常见问题速查 ​

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

本步检查点 ​

继续之前，确认：

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

如果样式不满意，进入下一步调整。如果已经满意，可以直接跳到 4.2.4 阶段性成果检查。

→ 4.2.3 调整样式与布局