作为一名前端工程师，我发现在日常开发中与AI协作时，精心设计的提示词能显著提升开发效率。本文将分享我在实际项目中应用由同事提出的（指令-背景-约束）框架，系统化地完成需求开发的完整流程。
核心框架：指令-背景-约束
指令：明确任务目标
指令回答的是“你想让 AI 做什么？”，需要清晰、具体地描述任务要求。一个好的指令，通常具备以下特征：
“（任务目标）请为‘用户注册’按钮编写一个React组件，（输出形式）要求返回完整的TSX代码， （质量/风格要求）并确保代码简洁并包含必要的表单验证。”
背景：提供关键上下文
背景信息为AI提供它尚未掌握或需要重视的上下文，包括项目现状、技术栈、业务逻辑等。
约束：设定技术边界
约束在于设定技术边界，让AI输出符合既定标准和场景需求，如框架版本、组件库、代码规范等。
实战案例：用户管理功能开发
### 需求说明
**数据列**：
- ID、头像、姓名、邮箱、状态(active/inactive)、注册时间
**功能需求**：
- 支持分页显示，每页显示20条数据
- 支持按姓名和邮箱进行搜索
- 支持批量操作（激活/禁用用户）
- 导出按钮：下载当前筛选结果的CSV
### 背景信息
该项目是一个企业级管理后台，使用 React 和 TypeScript 开发，组件库为 Ant Design v5。用户管理模块是系统的核心功能之一，要求界面简洁、操作便捷，数据交互高效。
### 技术约束
- React 18 + TypeScript
- 组件库：Ant Design v5
- 后端接口规范：@@ ./copilot/API.md
三步工作法：上下文 + 分步 + 半自动
第一步：需求理解与分析
## 需求背景
@@ ./copilot/background.md
## 后端接口信息
@@ ./copilot/API.md
## 任务
请仔细阅读需求背景，逐步分析并找出前端项目中需要修改的具体点。
在充分理解代码与需求后，列出所有需要修改的内容。
目标：确保AI准确理解项目上下文和具体需求，避免方向性错误。
第二步：任务拆分与规划
将复杂需求拆分为独立的、可执行的小任务：
- task-1: 用户列表表格组件实现
- task-2: 搜索功能集成
- task-3: 批量操作功能
- task-4: 数据导出功能
每个任务保存为独立的md文件，存储在 ./copilot 目录中。
第三步：分步执行与验证
## 需求背景
@@ ./copilot/background.md
## 后端接口信息
@@ ./copilot/API.md
## 工程作用
该项目是整体项目的前端部分，只负责维护页面显示逻辑。
## 任务
实现 task-1 中定义的用户列表表格组件功能。
最佳实践建议
- 适量原则：每次让AI完成适中复杂度的任务，避免信息过载
- 迭代优化：如果输出效果不理想，检查任务拆分是否合理、描述是否准确
- 人工参与：保持适当的人工审查和调整，确保代码质量
- 上下文完整：确保提供的背景信息充分且相关
参考资料：
