上期回顾

上一章我们通过AI工具完成了完整的UI/UX设计：

• ChatGPT设计了界面布局：清晰的信息层级和功能区域划分
• Claude设计了交互流程：从新手引导到日常使用的完整路径
• Gemini制定了视觉规范：色彩、字体、图标、动效的统一标准

Figma AI生成了原型：快速制作出可交互的界面原型

现在我们有了清晰的产品定位、完整的功能设计、详细的PRD文档，以及可视化的界面原型。接下来就要进入开发环节了。

但是！先别急着写代码。

第五章：项目规划与开发管理，让AI帮我们制定开发计划

为什么要先做项目规划？

说实话，我以前做产品经常犯一个错误：觉得规划太麻烦，直接开始干。结果呢？

• 做着做着发现之前的功能没考虑清楚，要推倒重来
• 不知道先做什么后做什么，开发顺序乱七八糟
• 时间估算全靠拍脑袋，最后总是延期
• 团队成员不知道各自要做什么，经常撞车

后来我学乖了：磨刀不误砍柴工。花几天时间做好项目规划，能省下几周的返工时间。

特别是我们这次要用AI工具辅助开发，更需要清晰的项目结构和开发流程。不然AI也会被你搞晕。

第一步：学习CCPM项目管理方法

在开始规划之前，我先研究了一个很棒的开源项目：github.com/automazeio/ccpm

这个项目提供了一套标准化的项目管理框架，特别适合AI辅助开发的场景。

我为什么选择CCPM？

传统项目管理的问题：

• 文档散落各处，找起来麻烦
• 需求、设计、开发脱节，沟通成本高
• 没有统一的模板和规范，每次都要重新组织
• 不适合AI工具参与，AI看不懂你的项目结构

CCPM的优势：

• 标准化的目录结构：所有项目文档都有固定位置
• 清晰的文件命名：一看文件名就知道是什么
• 模板化的文档：需求、设计、任务都有标准模板
• AI友好：结构化的信息便于AI理解和参与

CCPM的核心理念

我研究了CCPM项目后，总结了几个核心理念：

1. 一切皆文件 所有的需求、设计、任务、记录都用Markdown文件管理，简单、可追溯、易协作。

2. 结构化组织 固定的目录结构，每个阶段的产出物都有明确位置：

• /docs - 所有文档
• /docs/requirements - 需求文档
• /docs/design - 设计文档
• /docs/tasks - 任务清单
• /docs/logs - 工作日志

3. 模板化管理 提供标准模板，降低思考成本：

• 需求文档模板
• 设计方案模板
• 任务卡片模板
• 会议记录模板

4. 可追溯性 每个决策、每次修改都有记录，出了问题能快速定位原因。

第二步：让Claude帮我们搭建项目结构

理解了CCPM的理念后，我让Claude帮我为我们的Chrome插件项目搭建标准化的项目结构。

我问Claude的话

我要开始开发Chrome插件了，需要建立一个标准化的项目结构。我学习了CCPM项目管理方法，希望应用到这个项目中。

项目信息：
- 产品名称：智能英文写作助手
- 项目类型：Chrome Extension
- 开发方式：AI辅助开发（主要使用Claude Code）
- 团队规模：1-2人
- 开发周期：预计4-6周

请帮我设计：
1. 完整的项目目录结构
2. 每个目录的作用和应该放什么内容
3. 必要的配置文件和说明文档
4. 如何组织需求、设计、开发文档
5. 如何让这个结构适合AI工具使用

我希望这个结构清晰易懂，既满足开发需求，又方便后续维护和协作。

Claude设计的项目结构

【项目根目录结构】

smart-writing-assistant/
├── docs/                    # 所有项目文档
├── src/                     # 源代码目录
├── tests/                   # 测试文件
├── assets/                  # 静态资源
├── scripts/                 # 构建和工具脚本
├── .github/                 # GitHub相关配置
├── README.md               # 项目说明
├── CHANGELOG.md            # 版本更新日志
└── package.json            # 项目配置

【docs文档目录详细结构】

docs/
├── 01-planning/            # 项目规划阶段
│   ├── product-concept.md  # 产品概念
│   ├── market-research.md  # 市场调研
│   └── project-charter.md  # 项目章程
│
├── 02-requirements/        # 需求阶段
│   ├── user-research.md    # 用户调研报告
│   ├── user-personas.md    # 用户画像
│   ├── user-stories.md     # 用户故事
│   └── prd.md             # 产品需求文档
│
├── 03-design/             # 设计阶段
│   ├── architecture.md     # 技术架构
│   ├── ui-design.md        # 界面设计规范
│   ├── api-design.md       # API设计
│   └── database-design.md  # 数据结构设计
│
├── 04-development/        # 开发阶段
│   ├── tasks/             # 开发任务
│   │   ├── sprint-01.md   # 第一轮冲刺
│   │   ├── sprint-02.md   # 第二轮冲刺
│   │   └── backlog.md     # 任务积压
│   ├── tech-decisions.md  # 技术决策记录
│   └── coding-standards.md # 编码规范
│
├── 05-testing/            # 测试阶段
│   ├── test-plan.md       # 测试计划
│   ├── test-cases.md      # 测试用例
│   └── bug-reports.md     # Bug记录
│
├── 06-deployment/         # 部署阶段
│   ├── deployment-guide.md # 部署指南
│   ├── release-notes.md    # 发布说明
│   └── operations.md       # 运维文档
│
└── 99-misc/               # 其他文档
    ├── meeting-notes/     # 会议记录
    ├── decisions/         # 重要决策记录
    └── lessons-learned.md # 经验总结

Claude对每个目录的说明

为什么这样组织？

1. 按阶段划分顶层目录

• 清晰的时间线：从规划到部署
• 便于查找：知道要找什么阶段的文档就去对应目录
• 适合AI：AI可以根据阶段加载相关上下文

2. 统一的命名规范

• 目录用两位数字编号：01、02、03...
• 文件名用小写加连字符：user-research.md
• 时间倒序排列：最新的内容在最前面

3. 文档模板化 每个阶段都有标准的文档模板，不用每次重新思考要写什么。

4. 任务可视化 开发任务按Sprint组织，一个Sprint一个文件，清晰明了。

第三步：让ChatGPT帮我们制定开发计划

有了项目结构，接下来要制定具体的开发计划：什么时候做什么，怎么做，谁来做。

我问ChatGPT的话

基于前面的PRD和设计方案，我需要制定详细的开发计划。

项目基本情况：
- 产品功能：智能翻译、场景识别、个性化学习、高级语言工具
- 技术栈：Chrome Extension、翻译API、云存储
- 开发周期：4-6周
- 团队：1-2人（主要靠AI辅助）

请帮我：
1. 将功能拆分成可开发的任务模块
2. 评估每个任务的工作量（用时间估算）
3. 设计合理的开发顺序和依赖关系
4. 制定Sprint计划（每个Sprint 1-2周）
5. 定义每个Sprint的目标和验收标准

我希望开发计划务实可行，考虑到AI辅助开发的特点，以及可能遇到的风险。

ChatGPT的开发计划

【项目里程碑】

MVP版本（4周）：

• Sprint 1（Week 1-2）：基础架构 + 核心翻译功能
• Sprint 2（Week 3-4）：场景识别 + 基础UI

V1.0版本（6周）：

• Sprint 3（Week 5）：个性化学习 + 数据同步
• Sprint 4（Week 6）：测试优化 + 发布准备

【Sprint 1详细计划（Week 1-2）】

目标： 搭建基础架构，实现核心翻译功能

任务清单：

第1周：基础架构

1. 搭建Chrome Extension基础框架（1天）
   • 创建manifest.json配置
   • 设置popup页面和content script
   • 配置权限和资源
2. 集成翻译API（2天）
   • 研究Google Translate API和DeepL API
   • 实现翻译引擎模块
   • 处理API调用和错误处理
   • 实现结果缓存机制
3. 实现快捷键监听（1天）
   • 监听全局快捷键
   • 处理快捷键冲突检测
   • 实现文本选取和替换
4. 搭建本地存储（1天）
   • 设计数据存储结构
   • 实现chrome.storage操作封装
   • 实现基础的读写功能

第2周：核心功能 5. 实现翻译替换功能（2天）

• DOM操作实现文本替换
• 支持各种输入框类型
• 实现撤销功能（Ctrl+Z）
• 处理不同网站的兼容性

6. 实现基础UI界面（2天）
   • popup主界面开发
   • 翻译状态显示
   • 简单的设置页面
7. 测试和修复（1天）
   • 在常用网站测试（GitHub、Reddit）
   • 修复发现的bug
   • 优化性能

Sprint 1验收标准：

• ✓ 用户可以在任意网站输入中文
• ✓ 按快捷键能成功翻译成英文
• ✓ 翻译结果能正确替换原文
• ✓ 支持撤销操作
• ✓ 在GitHub和Reddit上测试通过

【Sprint 2详细计划（Week 3-4）】

目标： 实现场景识别，完善UI交互

任务清单：

第3周：场景识别

1. 实现网站类型识别（1天）
   • URL模式匹配
   • 支持GitHub、Reddit、Gmail等主流网站
   • 可配置的网站规则
2. 实现场景感知翻译（2天）
   • 技术、商务、社交三种场景模式
   • 不同场景的翻译策略
   • 场景自动切换逻辑
3. 实现右键菜单功能（1天）
   • 右键快捷翻译
   • 场景模式快速切换
   • 与快捷键功能整合
4. 优化翻译质量（1天）
   • 调整翻译参数
   • 处理特殊字符和格式
   • 改进错误处理

第4周：UI完善 5. 完善popup界面（2天）

• 场景模式切换UI
• 翻译历史列表
• 状态指示优化

6. 开发设置页面（2天）
   • 快捷键自定义
   • 翻译引擎选择
   • 场景规则配置
7. 新用户引导（1天）
   • 首次使用引导流程
   • 帮助文档
   • 示例演示

Sprint 2验收标准：

• ✓ 能自动识别不同网站类型
• ✓ 不同场景的翻译风格有明显差异
• ✓ UI界面友好易用
• ✓ 新用户能快速上手

【Sprint 3和Sprint 4概览】

Sprint 3重点：

• 个人词典功能
• 翻译历史记录
• 云端数据同步
• 个性化学习基础

Sprint 4重点：

• 全面测试和bug修复
• 性能优化
• 准备应用商店发布材料
• 用户文档完善

ChatGPT的工作量估算说明

时间估算原则：

1. 基于AI辅助效率：有AI帮忙，代码编写速度提升50%
2. 保留调试时间：实际开发中调试占40%时间
3. 预留缓冲时间：每个Sprint预留20%的缓冲

风险提示：

• 第一次使用AI辅助开发，需要适应磨合
• 翻译API可能遇到配额或质量问题
• 不同网站的兼容性可能比预期复杂
• Chrome商店审核时间不可控

第四步：让Gemini帮我们设计任务管理方法

有了开发计划，还需要一套管理方法来追踪进度、记录问题、做出决策。

我问Gemini的话

我需要一套适合小团队和AI协作的任务管理方法。

项目特点：
- 1-2人团队，没有专职的项目经理
- 大量使用AI工具辅助开发
- 需要快速迭代，灵活调整
- 要保持文档和代码的同步

请帮我设计：
1. 任务卡片的标准格式（包含哪些信息）
2. 任务状态的流转规则（从创建到完成）
3. 每日工作日志的记录方法
4. 重要决策的记录规范
5. 如何让AI更好地理解和参与任务

我希望方法简单实用，不要太繁琐，但要确保关键信息不丢失。

Gemini的任务管理方案

【任务卡片标准格式】

每个任务用一个Markdown文件记录，文件名格式：TASK-序号-简短描述.md

任务卡片模板：

# TASK-001: 搭建Chrome Extension基础框架

## 基本信息
- **状态**：进行中
- **优先级**：高
- **预计时间**：1天
- **实际时间**：
- **负责人**：张三
- **Sprint**：Sprint-01

## 任务描述
搭建Chrome插件的基础框架，包括manifest配置、popup页面和content script的基础结构。

## 验收标准
- [ ] manifest.json配置完成
- [ ] popup.html页面能正常打开
- [ ] content script能成功注入网页
- [ ] 能在Chrome开发者模式下加载插件

## 技术要点
- 使用Manifest V3标准
- 配置必要的权限：storage、activeTab、scripting
- 处理跨域问题

## 依赖关系
- 无前置依赖
- 后续任务：TASK-002（集成翻译API）

## 执行记录
### 2025-01-15
- 创建了基础目录结构
- 完成manifest.json配置
- 问题：权限配置不太清楚，查询了文档

### 2025-01-16  
- 完成popup和content script
- 测试通过，任务完成

## AI辅助记录
- 使用Claude生成了manifest.json的基础配置
- 使用ChatGPT解决了权限配置问题
- 参考了GitHub上的示例项目

## 相关文档
- [Chrome Extension开发文档](链接)
- [Manifest V3指南](链接)

【任务状态流转】

状态定义：

• 待开始：任务已创建，等待开始
• 进行中：正在开发
• 待测试：开发完成，等待测试
• 已完成：测试通过，任务关闭
• 已搁置：暂时停止，记录原因

流转规则：

待开始 → 进行中 → 待测试 → 已完成
   ↓                    ↓
已搁置 ←───────────────┘

【每日工作日志】

在docs/04-development/daily-logs/目录下，每天一个日志文件。

日志模板：

# 工作日志 2025-01-15

## 今日目标
- 完成TASK-001：搭建基础框架
- 开始TASK-002：集成翻译API

## 完成情况
### TASK-001: 搭建Chrome Extension基础框架 ✓
- 完成了manifest配置
- 完成了popup和content script
- 测试通过

### TASK-002: 集成翻译API 50%
- 调研了Google Translate API
- 实现了基础的API调用
- 明天继续完成错误处理

## 遇到的问题
1. **Chrome权限配置不清楚**
   - 解决方案：查询官方文档，使用ChatGPT解答
   - 用时：30分钟

2. **翻译API的调用限制**
   - 问题：免费额度有限
   - 临时方案：先用测试数据
   - 需要决策：是否购买付费版本

## AI辅助情况
- Claude帮我生成了80%的基础代码
- ChatGPT帮我解决了3个技术问题
- 整体效率提升约60%

## 明日计划
- 完成TASK-002的错误处理
- 开始TASK-003：快捷键监听
- 评估翻译API的成本

## 工作时长
- 实际开发：5小时
- 问题调研：1.5小时
- 文档整理：0.5小时

【重要决策记录】

在docs/99-misc/decisions/目录下记录所有重要决策。

决策记录模板：

# DECISION-001: 选择Google Translate作为主要翻译引擎

## 决策日期
2025-01-16

## 决策背景
需要为插件选择翻译API服务，主要候选：Google Translate、DeepL、百度翻译。

## 考虑因素
1. **翻译质量**：DeepL > Google > 百度
2. **价格**：百度 < Google < DeepL
3. **API稳定性**：Google > DeepL > 百度
4. **调用限制**：都有免费额度，付费版本差异不大

## 决策内容
选择Google Translate作为主要翻译引擎，DeepL作为备用。

## 决策理由
1. Google Translate性价比最高
2. API文档完善，社区支持好
3. DeepL作为备用保证翻译质量
4. 可以后期根据用户反馈切换

## 影响范围
- 影响架构设计：需要支持多引擎切换
- 影响成本：预计每月API费用100-200元
- 影响质量：需要优化翻译策略

## 后续行动
- [ ] 申请Google Translate API密钥
- [ ] 实现多引擎切换功能
- [ ] 设置API调用监控

## 相关人员
- 决策者：张三
- 参与讨论：AI (Claude、ChatGPT)

【让AI更好参与的技巧】

1. 结构化的信息组织

• 使用统一的Markdown格式
• 清晰的标题层级
• 一致的命名规范

2. 上下文提供 在让AI处理任务时，提供完整的上下文：

• 相关的需求文档
• 之前的设计决策
• 现有的代码结构

3. 任务分解清晰 每个任务都要有明确的：

• 输入是什么
• 输出是什么
• 验收标准是什么

4. 记录AI贡献 在任务卡片中专门记录AI的帮助：

• 使用了哪个AI
• 解决了什么问题
• 生成了哪些内容

第五步：实际建立项目环境

理论准备好了，现在要动手建立实际的项目环境。

建立项目的步骤

1. 创建GitHub仓库

• 仓库名：smart-writing-assistant
• 设置为私有仓库（开发期间）
• 添加.gitignore（忽略node_modules等）
• 添加README.md说明文档

2. 按照CCPM结构创建目录

• 手动创建所有文档目录
• 在每个目录下放一个README说明用途
• 创建必要的模板文件

3. 配置开发工具

• 安装VS Code和必要的插件
• 配置Chrome开发者模式
• 准备好AI工具的访问方式

4. 准备Claude Code环境 Claude Code是一个命令行工具，让AI能直接帮你写代码。

安装和配置：

• 按照官方文档安装Claude Code
• 配置API密钥
• 测试基础功能

使用技巧：

• 在项目根目录下使用
• 让Claude Code读取docs目录下的文档
• 清晰地描述要完成的任务

5. 初始化文档 把之前做的所有文档整理到对应目录：

• 产品概念 → docs/01-planning/product-concept.md
• 用户调研 → docs/02-requirements/user-research.md
• PRD → docs/02-requirements/prd.md
• 架构设计 → docs/03-design/architecture.md
• UI设计 → docs/03-design/ui-design.md

项目管理的实用建议

建议1：文档先行，代码跟上

很多人习惯边写代码边想功能，这样很容易乱。我的建议：

• 先把文档写清楚
• 让AI根据文档生成代码
• 代码和文档保持同步

建议2：小步快跑，频繁验证

不要一次做太多功能：

• 一个功能做完就测试
• 确保每个版本都能跑
• 发现问题立即修复

建议3：记录决策，避免重复思考

为什么要这样做？为什么不那样做？都要记录下来：

• 避免后期忘记
• 新成员快速了解背景
• AI也能理解你的思路

建议4：善用AI，但不依赖AI

AI是助手，不是替代品：

• AI生成的代码要review
• 重要决策要自己判断
• 关键逻辑要自己理解

建议5：保持灵活，允许调整

计划赶不上变化是正常的：

• 遇到新问题及时调整
• 定期review进度和计划
• 不要死磕错误的方向

本章总结

通过AI辅助的项目规划，我们建立了一套标准化的开发管理体系：

规划成果：

1. 标准化的项目结构：基于CCPM方法，清晰的目录组织
2. 详细的开发计划：按Sprint组织，任务分解明确
3. 实用的管理方法：任务卡片、工作日志、决策记录
4. AI友好的环境：结构化信息，便于AI理解和参与

关键收获：

1. 项目结构很重要：好的结构能让开发事半功倍
2. 文档是基础：清晰的文档是AI辅助的前提
3. 计划要务实：不要过度规划，保持灵活
4. 管理要简单：方法要实用，不要形式主义

最重要的是，我们现在有了一个清晰的开发路线图。知道从哪里开始，怎么一步步推进，最终达到什么目标。

下期预告：核心功能开发实战，用AI写代码

准备工作都做好了，下一章我们要开始真正的开发工作！

我们会用Claude Code和ChatGPT来完成：

1. 搭建Chrome Extension基础框架：manifest配置、popup页面、content script
2. 实现核心翻译功能：集成翻译API、文本替换、快捷键监听
3. 处理各种边界情况：错误处理、兼容性适配、性能优化
4. 实际踩坑和解决：展示真实的开发过程，包括遇到的问题

**剧透：**虽然是AI帮忙写代码，但并不是简单的"一句话生成"。我会展示如何和AI有效协作，如何review AI的代码，如何让AI理解你的意图。

这才是2025年程序开发的正确姿势！下期见！