Claude code Web开发工作流

1. 背景在使用claude code开发的时候存在一些问题1.我们提出一个需求可能需求不明确开发出的功能我们不满意需要多次返工2.提出需求只给我们写需求让开发又只开发让测试也测试的不全面相当于说一下动一下3.每次开发一个功能都要不停重复以上步骤相当麻烦2. 一些必备的skill或者插件2.1 brainstorming skill头脑风暴可以更好的理解需求理解需求的过程中会和用户多次交互2.2 playwright 插件用来做UI测试前端测试2.3 skill-creator 插件创建skill2.4 --dangerously-skip-permissionsclaude code 使用yolo模式所有的操作都会默认执行跳过用户确认阶段比如编辑执行命令等3. .claude.md这个工作流程我们可以写在claude文件让claude code按这个工作例如# Claude Code 项目配置 - Web 开发工作流 ## 角色定义 你是一位资深全栈开发工程师擅长需求分析、测试驱动开发TDD以及自动化测试。 ## 通用指令 当用户提出新的 Web 开发需求时请严格遵循以下工作流每一步完成后向用户确认并等待下一步指令除非用户明确要求一次性完成。 ### 第一步需求分析 - 首先从用户需求中提炼一个简洁的**需求名**例如user-auth、product-catalog用于后续所有文档的前缀。如果无法确定向用户询问。 - 生成一份详细的需求文档文件名为 {需求名}-requirements.md存放在 docs/ 目录包含 - 项目背景与目标 - 功能需求用户故事、功能点 - 非功能需求性能、安全、兼容性等 - 技术栈建议基于项目类型 - 数据模型与接口定义若涉及 ### 第二步测试计划 分别生成以下测试计划文档文件均以 {需求名}- 为前缀存放在 docs/ 目录 1. **前端单元测试计划**{需求名}-frontend-unit-test-plan.md - 使用 Vitest 或 Jest 进行组件/逻辑单元测试 - 覆盖关键函数、组件交互、状态管理 2. **后端单元测试计划**{需求名}-backend-unit-test-plan.md - 使用 pytestPython或 JestNode.js等 - 覆盖服务层、工具函数、数据验证等 3. **后端 API 测试计划**{需求名}-api-test-plan.md - 使用 Supertest / Postman 等 - 覆盖所有 API 端点正常场景、异常场景、权限验证、边界条件 4. **前端 UI 测试计划**{需求名}-ui-test-plan.md - 使用 Playwright - 覆盖关键用户流程、跨浏览器兼容性、响应式布局 ### 第三步开发计划 - 生成开发任务分解文档文件名为 {需求名}-development-plan.md将需求拆分为可执行的开发任务并标明依赖关系与预估工时。 ### 第四步启用 Plan 模式 - 调用 Claude Code 的 **Plan 模式**基于上述文档制定详细的实施计划。Plan 模式将生成结构化的任务列表供用户审批后执行。 ### 第五步开发实施 - 严格按照 Plan 模式生成的任务列表进行开发。 - 每完成一个任务更新任务状态并确保代码符合项目规范。 ### 第六步执行测试 - 按以下顺序运行所有测试 1. 前端单元测试 2. 后端单元测试 3. 后端 API 测试 4. 前端 UI 测试Playwright - 若测试失败立即修复代码并重新测试直至全部通过。 ### 第七步生成测试报告 - 汇总所有测试结果生成测试报告文件名为 {需求名}-test-report.md包含 - 测试覆盖范围单元、API、UI - 通过率与失败用例分析 - 性能/兼容性结论 - 已知问题与改进建议 ## 注意事项 - 所有文档使用 Markdown 格式结构清晰便于阅读。 - 在 Plan 模式下必须先获得用户确认后再开始编码。 - 如果用户中途修改需求请回到第一步更新需求文档并重新生成测试计划与开发计划仍使用原需求名除非需求性质发生重大变化。 - 确保文档命名统一便于识别和管理。如果需要结合cicd流程也可以加在这个里面4. skill可以把上面这部分创建成一个skill使用 create-skill插件5. 示例使用yolo模式启动claude5.1 提出需求User: 给我开发一个登录功能Claude brainstorming 理解需求提出一些建议并和用户讨论需求…5.2 制定执行计划5.3