🤖 为什么Claude总是"理解错"你的需求？

• Claude写了一堆看起来很像的界面

• 但点击按钮没反应

• 数据逻辑一团糟

• 边界情况完全没考虑

• 按钮点击后应该发生什么

• 数据从哪里来，要存到哪里去

• 出错了该怎么处理

• 不同用户状态下的行为差异

🎯 一个真实的翻车现场

小张的任务管理App：

帮我实现这个任务管理界面，要能添加任务和标记完成

• ✅ 界面完全一样

• ✅ 可以添加任务

• ✅ 可以点击完成

• ❌ 刷新页面数据就丢了

• ❌ 任务没有优先级排序

• ❌ 不能编辑已添加的任务

• ❌ 没有任务分类功能

• ❌ 完成的任务无法撤销

📋 AI友好的需求文档结构

模板结构：

1. 产品概述：一句话说清楚要做什么

2. 用户流程：详细的步骤拆解

3. 数据结构：信息如何组织和存储

4. 交互逻辑：每个操作的具体行为

5. 状态管理：不同情况下的界面表现

6. 错误处理：异常情况的应对方案

7. 技术要求：实现的技术细节

🏗 第一部分：产品概述

❌ 错误写法：

✅ 正确写法：

产品名称：个人任务管理器
核心价值：帮助用户快速记录、分类和追踪日常任务的完成情况
目标用户：需要管理个人待办事项的上班族和学生
使用场景：工作中记录临时任务，生活中管理个人事务

成功标准：
- 用户能在10秒内添加一个新任务
- 用户能快速找到未完成的重要任务
- 数据在浏览器关闭后仍然保存

• Claude能理解产品的边界和重点

• 明确了功能的优先级

• 给出了可衡量的标准

🔄 第二部分：用户流程详解

❌ 错误写法：

✅ 正确写法：

主要用户流程：

流程1：添加新任务
1. 用户点击"添加任务"按钮
2. 弹出输入框，包含：
   - 任务标题（必填）
   - 任务描述（可选）
   - 优先级选择（高/中/低，默认中）
   - 截止日期（可选）
3. 用户填写完成后点击"保存"
4. 系统验证输入（标题不能为空）
5. 新任务出现在任务列表顶部
6. 输入框自动清空并关闭

流程2：标记任务完成
1. 用户点击任务左侧的复选框
2. 任务标题显示删除线效果
3. 任务卡片背景变为灰色
4. 任务自动移动到列表底部
5. 系统显示完成提示："任务已完成！"
6. 提供"撤销"按钮（5秒后自动消失）

流程3：编辑现有任务
1. 用户双击任务标题
2. 标题变为可编辑状态
3. 用户修改后按Enter保存，或按Esc取消
4. 保存后显示确认提示："任务已更新"

• Claude知道每一步的具体操作

• 包含了用户反馈和状态变化

• 考虑了取消和撤销操作

🗃 第三部分：数据结构设计

❌ 错误写法：

✅ 正确写法：

数据结构设计：

Task对象结构：
{
  id: string,           // 唯一标识符，使用时间戳生成
  title: string,        // 任务标题，最长100字符
  description?: string, // 任务描述，可选，最长500字符
  priority: 'high' | 'medium' | 'low', // 优先级，默认medium
  completed: boolean,   // 完成状态，默认false
  createdAt: Date,      // 创建时间
  completedAt?: Date,   // 完成时间，可选
  dueDate?: Date        // 截止日期，可选
}

存储方案：
- 使用localStorage存储任务数组
- 存储key：'taskManager_tasks'
- 数据格式：Task[]
- 每次操作后自动保存到localStorage

数据操作：
- 添加任务：push到数组末尾，重新排序
- 删除任务：根据id过滤数组
- 更新任务：根据id找到对象并更新属性
- 排序规则：未完成任务在前，按优先级和创建时间排序

• Claude知道如何组织代码结构

• 避免数据类型错误

• 明确了存储和操作逻辑

⚡ 第四部分：交互逻辑详述

❌ 错误写法：

✅ 正确写法：

交互逻辑详述：

1. 添加任务按钮
   - 默认状态：蓝色背景，白色文字"+ 添加任务"
   - 悬停状态：背景色加深10%
   - 点击后：弹出模态框，按钮变为不可点击状态
   - 模态框打开时：自动聚焦到标题输入框

2. 任务复选框
   - 未完成状态：空心圆圈，边框为灰色
   - 悬停状态：边框变为蓝色
   - 已完成状态：蓝色背景，白色对勾图标
   - 点击动画：0.2秒的渐变过渡效果

3. 优先级显示
   - 高优先级：红色圆点 + "高"
   - 中优先级：黄色圆点 + "中"
   - 低优先级：绿色圆点 + "低"
   - 位置：任务标题右侧

4. 任务卡片状态
   - 普通状态：白色背景，浅灰色边框
   - 悬停状态：浅蓝色背景，蓝色边框
   - 已完成状态：浅灰色背景，删除线文字
   - 过期状态：浅红色背景，红色边框

5. 排序和筛选
   - 默认排序：未完成在前，按优先级(高→中→低)，然后按创建时间(新→旧)
   - 已完成任务：显示在列表底部，按完成时间倒序
   - 筛选选项：全部/未完成/已完成/高优先级

• Claude能生成准确的CSS样式

• 交互效果更专业

• 用户体验更流畅

🔄 第五部分：状态管理

❌ 错误写法：

✅ 正确写法：

状态管理方案：

应用状态：
- tasks: Task[]              // 所有任务列表
- filter: FilterType         // 当前筛选条件
- isLoading: boolean         // 加载状态
- isModalOpen: boolean       // 添加任务模态框状态
- editingTaskId: string | null // 正在编辑的任务ID

状态更新场景：

1. 添加任务：
   - 点击"添加任务" → isModalOpen = true
   - 提交表单 → 新任务添加到tasks，isModalOpen = false
   - 取消操作 → isModalOpen = false

2. 完成任务：
   - 点击复选框 → 目标任务的completed状态切换
   - 自动重新排序任务列表
   - 显示撤销提示，5秒后自动消失

3. 编辑任务：
   - 双击标题 → editingTaskId = 任务ID
   - 保存编辑 → 更新任务信息，editingTaskId = null
   - 取消编辑 → editingTaskId = null

4. 筛选变更：
   - 点击筛选按钮 → filter状态更新
   - 任务列表根据新筛选条件重新渲染

数据持久化：
- 每次tasks状态变更后，自动保存到localStorage
- 页面加载时，从localStorage恢复任务数据
- 如果localStorage为空，初始化为空数组

🚨 第六部分：错误处理

❌ 错误写法：

✅ 正确写法：

错误处理方案：

1. 输入验证错误：
   - 任务标题为空：显示红色提示"请输入任务标题"
   - 标题超过100字符：显示"标题不能超过100字符"
   - 描述超过500字符：显示"描述不能超过500字符"
   - 截止日期早于今天：显示"截止日期不能早于今天"

2. 存储错误：
   - localStorage写入失败：显示提示"保存失败，请检查浏览器设置"
   - localStorage已满：显示"存储空间不足，请清理浏览器数据"
   - 数据读取失败：使用默认空数组，显示"数据加载失败，已重置"

3. 操作错误：
   - 重复提交：防抖处理，按钮点击后0.5秒内不可再次点击
   - 网络中断：所有操作基于本地存储，不受网络影响
   - 页面刷新：数据从localStorage恢复，无数据丢失

4. 用户体验优化：
   - 所有错误信息3秒后自动消失
   - 错误提示使用红色背景，成功提示使用绿色背景
   - 关键操作提供撤销功能
   - 长时间无操作后提醒用户保存

错误信息设计：
- 位置：页面顶部固定位置
- 样式：圆角矩形，图标+文字
- 动画：从顶部滑入，淡出消失
- 可关闭：提供×按钮手动关闭

🛠 第七部分：技术实现要求

❌ 错误写法：

✅ 正确写法：

技术实现要求：

前端框架：
- React 18 + TypeScript
- 使用函数组件和Hooks
- 状态管理使用useState和useReducer
- 副作用处理使用useEffect

样式方案：
- Tailwind CSS 3.x
- 响应式设计，支持手机和桌面端
- 深色模式支持（可选）
- 平滑过渡动画使用transition-all

组件结构：
App
├── TaskList (任务列表容器)
│   ├── TaskItem (单个任务组件)
│   └── TaskFilter (筛选组件)
├── AddTaskModal (添加任务模态框)
└── Toast (提示消息组件)

数据处理：
- 使用localStorage API进行数据持久化
- 封装storage操作为自定义Hook：useTaskStorage
- 任务排序逻辑封装为工具函数
- 日期处理使用原生Date对象

性能优化：
- 使用React.memo优化TaskItem组件
- 使用useMemo缓存排序后的任务列表
- 使用useCallback缓存事件处理函数
- 大列表使用虚拟滚动（任务超过100个时）

浏览器兼容：
- 支持Chrome 80+, Firefox 75+, Safari 13+
- 使用Babel进行ES6+语法转换
- localStorage降级方案：不支持时使用内存存储

这里也是，如果不懂可以让模型帮忙生成一个标准方案，而不是自己瞎写

📄 完整的需求文档模板

项目：个人任务管理器 v1.0

=== 产品概述 ===
[产品概述内容]

=== 用户流程 ===
[详细的用户流程]

=== 数据结构 ===
[数据结构和存储方案]

=== 交互逻辑 ===
[每个交互的详细描述]

=== 状态管理 ===
[状态定义和更新逻辑]

=== 错误处理 ===
[各种错误场景的处理]

=== 技术要求 ===
[实现的技术细节]

=== 开发优先级 ===
Phase 1 (MVP)：
- 添加任务功能
- 标记完成功能
- 本地存储功能

Phase 2 (增强)：
- 编辑任务功能
- 优先级设置
- 筛选功能

Phase 3 (优化)：
- 响应式设计
- 动画效果
- 性能优化

=== 验收标准 ===
- [ ] 用户能在10秒内添加新任务
- [ ] 任务数据在页面刷新后保持
- [ ] 所有交互都有视觉反馈
- [ ] 错误情况有友好提示
- [ ] 移动端体验良好

🎯 给Claude的最终提示词

我要开发一个个人任务管理器，已经完成了详细的需求分析和原型设计。

需求文档：[附上完整的需求文档]
原型链接：[你的原型链接]

请按照需求文档的技术要求，实现Phase 1的核心功能：
1. 添加任务功能
2. 标记完成功能  
3. 本地存储功能

请从App组件开始，逐步实现所有相关组件。代码要包含：
- 完整的TypeScript类型定义
- 详细的注释说明
- 错误处理逻辑
- 基本的样式实现

实现完成后，我会进行测试并给出反馈进行调整。

💡 写需求文档的5个技巧

1. 用用户的视角描述：不要说"系统做什么"，要说"用户看到什么"

2. 包含边界情况：正常流程 + 异常流程都要考虑

3. 提供具体示例：抽象描述 + 具体例子

4. 定义清晰的验收标准：什么情况下算是完成了

5. 分阶段实施：MVP + 增强功能 + 优化改进

📝 今天的作业

必做作业：

1. 使用模板：按照7个部分的结构写需求文档

2. 详细描述：至少包含3个主要用户流程

3. 考虑边界情况：每个功能至少考虑2种异常情况

4. 技术要求：明确框架、样式、存储方案

加分作业：

5. 给Claude测试：用你的需求文档让Claude生成代码

6. 对比结果：记录Claude的理解准确度

7. 迭代优化：根据Claude的反馈优化需求文档