L09. 编写工业级 Spec (上)：画出你的蓝图

Vibe Coding 宣言：只有能在纸上画出来的东西，才能在代码里跑起来。

0. 为什么这一课至关重要？ (Why It Matters)

• 避免返工：90% 的 Bug 是因为想得不清楚，而不是写得不清楚。先想清楚再动手，能省下无数个修 Bug 的夜晚。
• AI 的设计图：你给 Claude 一张清晰的流程图，它能一次把代码写对。你给它一堆废话，它只能给你一堆垃圾。
• 专业范儿：学会画流程图，你就不是码农，是架构师。

1. 目标 (Goal)

学会写标准的 用户故事 (User Stories)，并用 Mermaid 语法画出清晰的业务流程图。

2. 核心概念/装备/指令 (The Core)

2.1 用户故事 (The Story)

标准的句式：

As a [角色] (作为...) I want to [动作] (我想要...) So that [价值] (以便...)

例子：作为一名穷学生，我想要输入商品链接就能看到历史最低价，以便我不被商家坑。

2.2 Mermaid (The Blueprint)

Mermaid 是一种用文字画图的语言。Trae 和 Claude 都原生支持它。

• Flowchart (流程图)：graph TD (从上到下)
• Sequence Diagram (时序图)：sequenceDiagram (交互过程)

3. 实战演练 (Action)

Step 1: 编写核心故事

把你上一课选出来的 3 个功能，写成 User Story。 告诉 Claude：

# Context
核心功能：比价查询。

# Task
请帮我把这个功能写成标准的 User Story，包含 Acceptance Criteria (验收标准)。

Step 2: 绘制流程图 (Flowchart)

让 Claude 帮你画图：

# Task
请用 Mermaid 语法画出[用户查询比价]的流程图。
包含：用户输入 -> 校验 -> 爬虫抓取 -> 数据清洗 -> 存入数据库 -> 返回前端。
考虑异常情况（如抓取失败）。

Step 3: 在 Markdown 里预览

把 Claude 给你的代码块复制到 Markdown 文件里，看看效果。

graph TD
    A[用户输入URL] --> B{校验URL有效性}
    B -- 有效 --> C[启动爬虫]
    B -- 无效 --> D[返回错误提示]
    C --> E{抓取成功?}
    E -- 是 --> F[解析价格]
    E -- 否 --> G[重试/报错]
    F --> H[存入数据库]
    H --> I[展示给用户]

4. 常见问题 (FAQ - Vibe Style)

Q: 我不会 Mermaid 语法怎么办？ A: 不用会！ 只需要看懂大概逻辑。具体的语法细节全交给 Claude 写。你负责审查逻辑对不对。

Q: 流程图要画多细？ A: 颗粒度适中。 别画具体的函数调用，画业务逻辑节点。每个节点代表一个独立的步骤。

Q: User Story 有什么用？ A: 这是给 AI 的验收标准。 后面写测试用例的时候，直接把 User Story 喂给 Claude，它就知道怎么测了。

5. 验收标准 (Definition of Done)

1. 你有一个 Markdown 文件 (spec.md)。
2. 里面包含至少 3 个核心功能的 User Story。
3. 包含一个清晰的 Mermaid 流程图，逻辑闭环（没有死胡同）。

---

Next Mission: L10. 编写工业级 Spec (下)：定义数据的灵魂