3.2.2 S.C.A.F.F. 框架（推荐框架）
经过本节学习，你将掌握
- S.C.A.F.F. 框架的五个要素及其含义
- 如何用这个框架描述一个技术开发任务
- 框架的精简版，适合日常快速使用
- 获得可直接复制的提示词模板
框架结构
S.C.A.F.F. 是五个英文单词的首字母缩写：
| 字母 | 英文 | 中文 | 核心问题 |
|---|---|---|---|
| S | Situation | 情境 | 你在做什么项目？当前状态如何？ |
| C | Challenge | 挑战 | 当前要解决的具体问题是什么？ |
| A | Audience | 受众 | 代码/产出给谁用？谁来维护？ |
| F | Format | 格式 | 期望 AI 输出什么格式？ |
| F | Foundations | 基础 | 必须遵守的约束和原则是什么？ |
这个框架的设计逻辑是：先给背景，再说问题，然后明确对象，最后约束边界。
五要素详解
S - Situation（情境）
回答：你在做什么？当前进展如何？
填写内容：
- 项目类型和目标
- 使用的技术栈
- 当前的开发阶段
- 已有的代码结构或设计决策
填写技巧：想象你在向一个刚加入项目的同事介绍情况。
C - Challenge（挑战）
回答：当前具体要解决什么问题？
填写内容：
- 要实现的功能或要修复的问题
- 输入是什么，输出是什么
- 具体的业务逻辑
填写技巧：一句话说清楚"做完这件事，什么状态变成什么状态"。
A - Audience（受众）
回答：产出给谁用？
填写内容：
- 代码的使用者是谁（用户？其他开发者？）
- 代码的维护者是谁（你自己？团队？）
- 使用者/维护者的技术水平
填写技巧：这决定了代码复杂度和注释详细程度。
F - Format（格式）
回答：期望 AI 输出什么形式的结果？
填写内容：
- 完整代码还是代码片段
- 需要什么文件格式
- 是否需要注释
- 是否需要使用说明
填写技巧：越具体越好。"给我代码"不如"给我一个完整的 React 组件文件，包含 TypeScript 类型定义"。
F - Foundations（基础）
回答：有什么必须遵守的约束？
填写内容：
- 技术约束（必须/不能用某个库）
- 性能约束（响应时间、内存限制）
- 风格约束（命名规范、代码风格）
- 安全约束（敏感数据处理）
填写技巧：用第二章的"不做清单"思维——明确告诉 AI 什么不能做。
完整示例：登录页面
来看一个具体案例：你需要 AI 帮你实现一个登录页面。
❌ 差提示词
帮我做一个登录页面问题：AI 不知道用什么技术、什么风格、要哪些功能、有什么限制。结果大概率是一个"通用模板"，和你的项目格格不入。
✅ 用 S.C.A.F.F. 框架改写
markdown
【Situation - 情境】
我正在开发一个个人博客系统的管理后台。
技术栈：Next.js 14 + TypeScript + Tailwind CSS
当前进度：首页和文章列表页已完成，现在需要添加登录功能。
设计风格：极简风格，参考 Notion 的登录页面。
【Challenge - 挑战】
实现管理员登录页面：
- 表单包含：邮箱输入框、密码输入框、登录按钮
- 点击登录后，验证格式（邮箱格式、密码不为空）
- 格式错误时，在对应输入框下方显示红色提示
- 暂时不需要真正的后端验证，先做前端界面和交互
【Audience - 受众】
- 用户：只有我一个人（博客管理员）
- 代码维护者：我自己，React 初学者
- 请在关键逻辑处添加注释，帮助我理解
【Format - 格式】
请提供：
1. 完整的登录页面组件代码（单文件）
2. 包含 TypeScript 类型定义
3. 样式使用 Tailwind CSS
4. 文件命名：LoginPage.tsx
【Foundations - 基础约束】
- 不使用任何 UI 组件库（如 shadcn/ui、Ant Design）
- 不使用第三方表单库（如 React Hook Form）
- 状态管理用 React 原生的 useState
- 响应式设计：移动端和桌面端都要适配输出差异对比
| 方面 | 差提示词的可能输出 | S.C.A.F.F. 的可能输出 |
|---|---|---|
| 技术栈 | 可能是纯 HTML 或 Vue | 确定是 Next.js + TS + Tailwind |
| 功能范围 | 可能包含注册、忘记密码 | 只有登录，符合当前需求 |
| 代码复杂度 | 可能用了你不熟悉的库 | 用 useState，初学者友好 |
| 注释 | 可能没有 | 关键逻辑有注释 |
| 风格 | 随机风格 | 极简风格，参考 Notion |
待办清单案例：添加任务功能
延续第二章小李的项目，用 S.C.A.F.F. 框架描述"添加任务"功能：
markdown
【Situation - 情境】
我在做一个个人待办清单网页应用。
技术栈：React + TypeScript + Tailwind CSS
目标用户：像我一样容易忘事的职场新人
设计原则：极简，打开就是今日待办，添加任务 3 秒内完成
当前进度：项目刚初始化，还没有任何功能代码
【Challenge - 挑战】
实现"添加任务"功能：
- 用户在输入框输入任务内容
- 按回车键或点击添加按钮，任务添加到列表
- 添加成功后自动清空输入框并聚焦
- 空内容不能添加，输入框轻微抖动提示
【Audience - 受众】
- 用户：我自己，希望操作越简单越好
- 维护者：我自己，React 初学者
- 请解释为什么用这种实现方式
【Format - 格式】
请提供：
1. AddTask 组件代码（处理输入和添加）
2. TaskList 组件代码（展示任务列表）
3. 简单的组件使用说明
【Foundations - 基础约束】
- 任务数据暂存在组件 state，不需要持久化
- 不用任何状态管理库（Redux、Zustand 等）
- 样式用 Tailwind，保持简洁
- 每个任务只需要：内容文本 + 完成状态精简版：S.C.F. 三要素
日常快速使用时，可以只保留三个核心要素：
| 要素 | 必填原因 |
|---|---|
| S - Situation | 没有背景，AI 只能猜 |
| C - Challenge | 这是你要解决的问题 |
| F - Foundations | 约束决定了输出边界 |
精简版模板：
markdown
【背景】
[项目类型] + [技术栈] + [当前状态]
【任务】
[具体要做什么]
【约束】
- [必须遵守的限制1]
- [必须遵守的限制2]精简版示例：
markdown
【背景】
React + TS 的待办清单项目，已完成基础结构
【任务】
实现删除任务功能：点击任务右侧的删除图标，该任务从列表中移除
【约束】
- 删除前显示确认提示
- 用 Tailwind CSS
- 删除动画：淡出效果可复制的完整模板
markdown
【Situation - 情境】
项目类型：
技术栈：
当前进度：
设计风格/原则：
【Challenge - 挑战】
要实现的功能：
-
-
-
输入：
输出：
【Audience - 受众】
用户是谁：
维护者是谁：
技术水平：
【Format - 格式】
期望输出：
- [ ] 完整代码文件
- [ ] 代码片段
- [ ] 包含注释
- [ ] 包含使用说明
文件命名：
【Foundations - 基础约束】
必须：
-
-
不能：
-
-常见填写误区
| 误区 | 问题 | 正确做法 |
|---|---|---|
| Situation 写太长 | AI 会迷失在细节中 | 只写与当前任务相关的背景 |
| Challenge 不具体 | "优化代码"太模糊 | 说清楚优化什么方面 |
| 忘记写 Audience | AI 不知道代码给谁看 | 初学者要求注释，高手可以省略 |
| Format 只写"给我代码" | 输出格式随机 | 指定文件类型、是否要注释 |
| Foundations 只写"要做什么" | AI 可能"加戏" | 同时写清楚"不要什么" |
本节要点
✓ S.C.A.F.F. 五要素：Situation（情境）、Challenge（挑战）、Audience（受众）、Format（格式）、Foundations（基础）
✓ 填写逻辑：先给背景 → 再说问题 → 明确对象 → 约束边界
✓ 精简版 S.C.F.：日常快速使用，保留背景、任务、约束三要素
✓ 关键技巧："不做清单"和"做清单"同样重要
下一节，我们学习一个更轻量的框架：R.G.C.——适合快速提问和简单任务。