---
title: "4.2 第一轮：搭建页面框架"
order: 1
---


![04-practice-0-to-1_4.2-build-page_index.png](/images/Basic/04-practice-0-to-1_4.2-build-page_index.png)
# 4.2 第一轮：搭建页面框架

> **本轮目标**：用 AI 生成待办清单的静态页面，先把"脸"做出来

## 经过本节学习，你将获得

- 一个可以在浏览器中打开的待办清单页面
- 包含标题、输入框、按钮和任务列表的完整布局
- 简洁美观的视觉设计
- 在手机和电脑上都能正常显示的响应式页面

> **[配图建议]**
> 画面内容：本轮结束后的待办清单页面预览图，展示标题、输入区、假数据列表
> Prompt: warm illustration of a simple todo list webpage preview, friendly and approachable style, soft rounded shapes, pastel colors with coral accents, minimal text, clean white background, high quality, 8k --ar 16:9

## 什么是"静态页面"？

静态页面就是只有外观、还没有功能的页面。

想象你在装修新房：

```
毛坯房 → 刷白墙、铺地板（先看整体效果）→ 装电器、接水管（让它能用）→ 入住
```

我们现在要做的，就是"刷白墙"这一步——**先把界面搭出来，看看整体效果对不对**。

这样做有三个好处：

| 好处 | 说明 |
|------|------|
| 快速看到成果 | 5-10 分钟就能看到页面，建立信心 |
| 及早发现问题 | 布局不对、风格不满意，现在改成本最低 |
| 避免返工 | 如果做了很多功能后才发现方向错了，改起来很痛苦 |

## 本轮的工作流程

```
第二章的思考成果 → 用第三章框架写 Prompt → AI 生成静态页面 → 调整样式 → 检查确认
```

我们会用到 4.1 节整理的「项目启动卡」和第三章学的 S.C.A.F.F. 框架。

## 章节导航

| 小节 | 你要做的事 | 预计时间 |
|------|-----------|---------|
| [4.2.1](./4.2.1-first-prompt.md) | 把项目启动卡转化为 Prompt | 5 分钟 |
| [4.2.2](./4.2.2-generate-static.md) | 发送给 AI，生成第一版页面 | 5 分钟 |
| [4.2.3](./4.2.3-adjust-style.md) | 调整颜色、布局、细节 | 8 分钟 |
| [4.2.4](./4.2.4-checkpoint.md) | 检查成果，确认可以进入下一轮 | 2 分钟 |
| [4.2.5](./4.2.5-prompt-log.md) | 回顾完整对话记录 | 2 分钟 |

**预计总时间：约 20 分钟**

::: tip 开始之前
确保你已经完成了 4.1 节的准备工作，AI IDE 已经打开并可以正常使用。
:::

→ [4.2.1 用第三章框架写第一个 Prompt](./4.2.1-first-prompt.md)