---
title: "4.2.1 用第三章框架写第一个 Prompt"
order: 2
---


![04-practice-0-to-1_4.2-build-page_4.2.1-first-prompt.png](/images/Basic/04-practice-0-to-1_4.2-build-page_4.2.1-first-prompt.png)
# 4.2.1 用第三章框架写第一个 Prompt

> **本步目标**：把 4.1 节的"项目启动卡"转化为 AI 能理解的 Prompt

## 从项目启动卡到 Prompt

在 4.1 节，我们整理了小李项目的「项目启动卡」。现在要把它转化为 Prompt，让 AI 帮我们生成代码。

```
项目启动卡                         Prompt
┌──────────────┐                ┌──────────────┐
│ 项目名称      │                │ Situation    │
│ 目标用户      │  ──转化──→     │ Challenge    │
│ 核心功能      │                │ Audience     │
│ 明确不做      │                │ Format       │
│ 技术约束      │                │ Foundations  │
└──────────────┘                └──────────────┘
```

转化的逻辑：

| 项目启动卡内容 | 对应 Prompt 位置 | 作用 |
|--------------|-----------------|------|
| 项目名称 + 目标用户 | Situation（情境） | 告诉 AI 你在做什么 |
| 核心功能列表 | Challenge（挑战） | 告诉 AI 当前要做什么 |
| 你是谁 | Audience（受众） | 让 AI 调整代码复杂度 |
| 期望输出格式 | Format（格式） | 让 AI 知道给你什么 |
| 明确不做 + 技术约束 | Foundations（基础） | 告诉 AI 边界在哪 |

## 三种 Prompt 版本

根据你的时间和需求，可以选择不同详细程度的 Prompt。

### 版本一：最简版（赶时间用）

如果你已经熟悉了这个流程，或者只是想快速看到效果：

```
帮我做一个待办清单网页的静态页面。
包含：标题、输入框、添加按钮、任务列表（带完成和删除按钮）。
风格简约现代，要能在手机上正常显示。
先不需要功能，只要页面样式。用 HTML + CSS，不用任何框架。
```

这个版本大约 70 字，能覆盖最核心的信息。

### 版本二：标准版（推荐日常使用）

使用第三章的 S.C.F. 精简框架：

```
【背景】
我正在做一个个人待办清单网页，帮助管理日常任务。
我是编程零基础的初学者。

【任务】
请生成待办清单的静态页面，包含以下元素：
- 页面标题："我的待办清单"
- 一个输入框，用于输入新任务
- 一个"添加"按钮
- 任务列表区域，先用 3 条假数据展示样式
- 每个任务有"完成"按钮和"删除"按钮

【约束】
- 只需要静态页面，暂时不需要任何功能
- 使用纯 HTML + CSS，不使用任何框架
- 现代简约风格，清新配色
- 响应式设计，手机上也能正常显示
- 代码加上必要的中文注释
```

### 版本三：完整版（第一次使用建议）

使用 S.C.A.F.F. 全要素框架，给 AI 最充分的上下文：

```
【Situation - 情境】
我是一个编程零基础的初学者，正在学习用 AI 做一个个人待办清单网页。
这是我的第一个 AI 编程项目。
目标用户是像我一样容易忘事的职场新人，需要一个简单的任务管理工具。

【Challenge - 挑战】
请帮我生成待办清单的静态页面，包含以下元素：
1. 页面标题："我的待办清单"
2. 输入区域：
   - 一个输入框（用于输入新任务）
   - 一个"添加"按钮
3. 任务列表区域：
   - 先用 3 条假数据展示样式（如："完成项目报告"、"买牛奶"、"给妈妈打电话"）
   - 每个任务显示任务内容
   - 每个任务右侧有"完成"按钮和"删除"按钮

【Audience - 受众】
- 代码将由我这个初学者阅读和修改
- 请保持代码简单易懂
- 在关键位置添加中文注释，帮助我理解代码结构

【Format - 格式】
请生成一个完整的 HTML 文件，包含：
- HTML 结构
- 内嵌的 CSS 样式（写在 <style> 标签里）
- 文件可以直接在浏览器中打开查看效果

【Foundations - 基础约束】
- 只做静态页面，暂时不需要 JavaScript 功能
- 不使用任何外部框架或库（如 Bootstrap、Tailwind）
- 设计风格：现代简约，参考苹果或 Notion 的设计语言
- 配色清新，主色调可以用蓝色或绿色系
- 响应式设计：在手机（宽度 375px）和电脑上都能正常显示
- 页面整体居中显示，最大宽度 500px
```

## 为什么要告诉 AI 你是初学者？

你可能注意到，每个版本都提到了"我是初学者"。这不是谦虚，而是一个重要的策略：

| 不说"初学者" | 说了"初学者" |
|-------------|-------------|
| AI 可能使用高级语法和技巧 | AI 会使用基础、直观的写法 |
| 代码可能没有注释 | AI 会主动添加解释性注释 |
| 变量名可能很简短 | AI 会使用更具描述性的命名 |
| 遇到问题你可能看不懂 | 代码更容易阅读和调试 |

这个小技巧能让 AI 生成的代码更适合你当前的水平。

## 描述方式对比：模糊 vs 具体

写 Prompt 时，越具体越好。看看这些对比：

| 方面 | 模糊描述（避免） | 具体描述（推荐） |
|-----|----------------|-----------------|
| 颜色 | 好看的颜色 | 主色调用蓝色系，如 #4F46E5 |
| 布局 | 居中显示 | 页面最大宽度 500px，水平居中 |
| 风格 | 现代风格 | 参考苹果官网的极简风格，圆角卡片 |
| 按钮 | 添加一些按钮 | 每个任务右侧有"完成"和"删除"两个按钮 |
| 数据 | 展示一些任务 | 用 3 条假数据，如"完成项目报告"等 |

为什么具体描述更好？因为 AI 面对模糊描述时只能"猜"，而具体描述让 AI 知道你到底想要什么。

## 检查你的 Prompt

在发送之前，用这个清单检查一下：

- [ ] 说明了项目背景（做什么、给谁用）？
- [ ] 列出了要包含的页面元素？
- [ ] 指定了技术约束（HTML + CSS，不用框架）？
- [ ] 说明了设计风格和配色偏好？
- [ ] 提到了响应式需求？
- [ ] 告诉 AI 你是初学者，需要注释？

## 选择哪个版本？

| 你的情况 | 建议使用 |
|---------|---------|
| 第一次跟着教程做 | **完整版**，获得最好的结果 |
| 已经做过一次，想快速复习 | 标准版 |
| 已经很熟练，想快速验证想法 | 最简版 |

::: tip 建议
如果这是你第一次做 AI 编程项目，建议使用完整版。多花 2 分钟写 Prompt，能省下后面很多调整时间。
:::

## 本步检查点

- [ ] 选择了适合自己的 Prompt 版本
- [ ] 复制好了 Prompt，准备发送给 AI

→ [4.2.2 生成静态页面](./4.2.2-generate-static.md)