《60天AI学习计划启动 | Day 51: 第二个综合实战项目选型与需求拆解》

Day 51：第二个综合实战项目选型与需求拆解

学习目标

• 确定 一个明确的「前端 + AI」实战场景（第二个完整项目）
• 写清楚 用户故事、核心功能、约束条件
• 画出 粗粒度的数据流/架构草图，给 Day 52–55 实现打底

---

核心内容（示例场景：前端代码助手）

• 1. 场景选型（示例）

  • 「前端代码助手」：
    • 输入：问题 + 代码片段 / 错误信息
    • 输出：解释、修复建议、重构方案、测试用例等
  • 也可以换成你更感兴趣的：UI 评审助手 / PR Review 助手 / 需求评审助手 等

• 2. 用户故事（以代码助手为例）

  • 作为前端开发：
    • 我希望把一段报错信息贴进去，AI 帮我定位可能原因和解决方案
    • 我希望给一段组件代码，让 AI 帮我做性能/可维护性建议
    • 我希望让 AI 帮我根据这段 Hook 写单元测试

• 3. 核心功能清单

  • 聊天区：类 ChatGPT 的会话（已有能力可复用）
  • 代码输入区：支持粘贴代码、高亮显示；可从文件/编辑器导入（后续再加）
  • 模式选择：解释 / 修复 / 重构 / 生成测试，各对应不同 Prompt 模板
  • 历史记录：记住最近 N 次会话，方便回看和继续追问

• 4. 粗粒度架构草图（前端视角）

  • CodeAssistantPage
    • ModeSelector（解释/修复/重构/测试）
    • CodeInput（文本域 + 语言选择）
    • ChatWindow（复用前面的 useChat/useStreamingChat）
    • PromptDebugPanel（可选：显示实际使用的 Prompt 模板）

---

明日学习计划预告（Day 52）

• 主题：信息架构 & 交互设计（原型/流程图）
• 方向：
  • 用简单的组件树 / 流程图画出 Code Assistant 的完整页面结构
  • 明确每个操作（选择模式/发送问题/粘贴代码）触发哪些前端/后端事件