企业官网建设流程全解析

产品经理（PM）通过 Claude Code CLI 等 AI 工具直接参与软件开发，是目前“AI 辅助编程”时代非常典型且前沿的尝试。
你遇到的“Bug 多、流程跑不通”的问题，其根本原因在于：AI 编写代码时缺乏“全局架构观”和“严密的生命周期约束”。当项目规模扩大时，AI 容易陷入“头痛医头、脚痛医脚”的局部优化陷阱，导致引入新的 Bug。
要解决这个问题，你需要将企业级软件开发生命周期（SDLC）的工程规范，转化为约束 AI 的规则和流程。以下为你梳理标准的开发阶段，并提供具体的提升路径、技术手段和 AI 协同方案。

第一阶段：让 AI 帮你“打地基”（解决测试框架问题）

要引入 Jest/Playwright，但 PM 不需要自己去配环境。你只需要把下面这段话直接复制发给 Claude Code CLI，让它帮你把“基建”搭好。

👉 复制发给 AI 的 Prompt 1（初始化基建）：

“我是一名产品经理，不懂底层配置。请帮我在当前目录初始化一个标准的 Node.js + TypeScript 项目。
并且，请帮我安装并配置好Vitest（用于单元测试）和Playwright（用于端到端测试）。
完成后，请在package.json中配置好test:unit和test:e2e脚本。最后，请运行一次测试，向我证明环境已经就绪。”

架构师解析：这一步完成后，你的项目就有了“质检流水线”。以后 AI 写的代码，都要过这条流水线。

第二阶段：给 AI 戴上“紧箍咒”（建立约束文件）

在 Claude Code 中必须且只能命名为CLAUDE.md，并放在项目最外层（根目录）。只要这个文件存在，AI 每次写代码前都会自动读取它。

👉 操作步骤：
让 AI 帮你创建这个文件。
复制发给 AI 的 Prompt 2：

"请在项目根目录创建一个CLAUDE.md文件，写入以下企业级开发规范，你必须严格遵守：

项目宪法 (CLAUDE.md)

1. 契约优先：写任何业务代码前，必须先输出 API 接口定义（JSON 格式）和数据结构，等我确认后再写代码。
2. 测试先行 (TDD)：必须先写 Vitest 单元测试，运行并确认测试失败（红灯），然后再写业务代码让测试通过（绿灯）。
3. 防御性编程：所有函数必须处理异常（如网络断开、空数据），严禁使用any类型。
4. 闭环验证：每次修改代码后，必须自动在终端运行npm run test:unit，如果报错，请自行修复，直到测试全绿再向我汇报。"

第三阶段：保姆级实战演练（SDD 规格驱动开发 4 步闭环）

现在，我们要开发一个“添加待办事项”的功能。请严格按照以下 4 步与 AI 对话，这就是企业级开发的全生命周期缩影。

Step 1: 需求与领域建模（你写 Spec，AI 确认）

不要直接说“帮我写个添加待办事项的功能”。你要用Gherkin (Given-When-Then)语法写一个 Spec 文件。

👉 你的操作：在项目里新建一个specs/add-todo.md文件，填入以下内容（你可以让 AI 帮你建）：

# Spec: 添加待办事项 ## 1. 业务目标 用户可以输入文本，创建一个新的待办事项，并显示在列表中。 ## 2. 行为驱动 (BDD / Gherkin) Scenario: 成功添加待办事项 Given 用户在首页，且当前列表为空 When 用户在输入框输入 "买牛奶" 并点击 "添加" 按钮 Then 列表中出现 "买牛奶" And 输入框被清空 Scenario: 异常处理 - 输入为空 Given 用户在首页 When 用户不输入任何内容，直接点击 "添加" 按钮 Then 系统提示 "内容不能为空" And 列表不发生变化

Step 2: 架构与接口设计（API 优先）

让 AI 根据 Spec 设计数据结构，此时坚决不让它写业务代码。

👉 复制发给 AI 的 Prompt 3：

“请阅读specs/add-todo.md。
现在处于【架构设计阶段】。请不要写任何实现代码。
请帮我设计这个功能需要的数据结构（TypeScript Interface），以及如果这是一个后端 API，它的请求和响应 JSON 格式是什么样的？
请输出设计文档，等我确认。”

(AI 会输出一段 Interface 和 JSON，你看一下字段名是不是你想要的，比如id,title,isCompleted。确认没问题后，回复：“设计通过，进入测试阶段”。)

Step 3: 测试先行（TDD 红灯阶段）

这是防止 Bug 的核心！让 AI 先把“质检标准”写出来。

👉 复制发给 AI 的 Prompt 4：

“设计已确认。现在进入【TDD 测试先行阶段】。
请根据 Spec 中的两个 Scenario，使用 Vitest 编写单元测试用例。
注意：此时业务代码还没写，所以测试必须是失败的。
写完后，请执行npm run test:unit，把报错（红灯）结果展示给我看。”

(AI 会写出测试代码，并运行。你会看到终端里一片红，提示addTodo is not a function之类的错误。这就对了！这说明“质检机器”已经架好了。)

Step 4: 编码实现与闭环（TDD 绿灯阶段）

最后，让 AI 去写代码，并通过它自己架设的质检机器。

👉 复制发给 AI 的 Prompt 5：

“测试用例已就绪。现在进入【编码实现阶段】。
请编写最少的业务代码，让刚才的 Vitest 测试全部通过。
必须处理 Spec 中提到的“输入为空”的异常情况。
代码写完后，请自动运行npm run test:unit。如果测试失败，请你自己分析错误并修改代码，直到所有测试变绿（通过），然后再向我汇报。”

(此时，你会看到 AI 写代码 -> 运行测试 -> 发现有个边界条件没处理导致报错 -> AI 自己修改代码 -> 再次运行测试 -> 全绿。这就是企业级开发中的“闭环”！)

第四阶段：PM 的“防翻车”日常口诀

“防御性工作流”，对于小白 PM 来说，不需要去写 Shell 脚本。你只需要记住并在日常开发中频繁使用以下3 个“咒语”（直接发给 AI）：

1. 当 AI 说“我写完了”时，不要信，用咒语 1：

   “请运行全量测试npm run test:unit，并告诉我通过率。如果有任何失败，请自行修复。”
   (永远让 AI 自己面对测试的毒打，而不是你肉眼看代码。)

2. 当 AI 修改了一个旧 Bug 时，用咒语 2（回归测试）：

   “你刚才修改了代码，请运行所有测试，确保你的修改没有破坏以前已经通过的功能（回归测试）。”
   (这就是 “严禁破坏已有功能”。)

3. 当 AI 给出的方案太复杂时，用咒语 3（YAGNI 原则）：

   “这个设计过度工程化了。请遵循 YAGNI (You Aren’t Gonna Need It) 原则，给我最简单、最能跑通的 MVP（最小可行性产品）实现方案。”

总结：你的角色转变

通过这套流程，你其实已经不再是传统意义上“画原型、写文档”的 PM 了，你变成了AI 研发团队的“技术总监（Tech Lead）”。

• 你的产出：不再是干瘪的 PRD，而是带有 Given-When-Then 的Spec 文件。
• 你的验收：不再是手动点鼠标看页面，而是看Vitest 测试是否全绿。
• 你的管理：不再是催进度，而是通过CLAUDE.md制定规则，让 AI 自我约束。

今晚的作业：
打开你的 Claude Code CLI，把第一阶段的 Prompt 1发给它，让它帮你把 Vitest 环境搭起来。迈出这第一步，你就正式跨入了“AI 驱动的企业级开发”的大门！