AI 写完整个电商系统：11 天、9 个 Git Tag 跑通 AI 原生研发全流程

📈 难度：★★☆☆☆　⏱️ 阅读时间：15 分钟　🧠 前置知识：模块一~六

说明：从本章开始，AI Native Engineering 从方法论进入实战。我们将用一个标准电商系统（NovaMart）作为主线项目，从一张 SSD 规格文档出发，经过 9 个 Git tag、11 天开发周期，串联起此前全部方法论。本章是这个实战系列的全局导航。

⚠️ 教学演示声明：NovaMart 项目及其开发数据（含效率指标、代码量、交付周期）为教学设定的示范场景，旨在展示方法论在可控条件下的运转方式。所有效率数字均为"设定值"而非真实项目实测，读者在参考时应代入自身团队参数重新估算，不宜直接作为投资回报论证的依据。

行业映射：Multi-Module Project Architecture · Git Tag-Driven Development · Technical Debt Prevention

排他职责：主线项目全局视图——完整架构说明、Git tag 索引、各实战篇对应的方法论模块、三条阅读路径、技术栈决策说明。

导流去向：

• 方法论章节自行回看 → 对应篇章（按实战篇标注的具体索引）
• 实战起点（必通关）→ 第 28 篇（SSD 规格定义与任务拆解）

一句话理解：不是看 10 个 Demo，是 1 个电商项目跑通全链路。

🎯 本文产出

• 主线项目架构图（7 大模块依赖关系 + 分层结构）
• Git tag 索引表（9 个 tag × 对应内容 × 建议工期）
• 技术栈决策说明（含 5 条 ADR 摘要，覆盖选型权衡全过程）

💰 商业价值

一个 10 人以内研发团队，从 0 搭建标准电商系统的常规周期是 40-60 天。按本系列方法 + 11 天实战链路，首版可运行代码的交付窗口可以压缩到 11-15 天——省出来的不是编码时间，而是「需求反复澄清→技术选型争论→集成时发现不兼容」这三类典型浪费。11 天跑通全链路的实战记录本身就是这个系列方法论有效性的证明。

“方法论我都看了，但从哪里开始？”

这是 AI Native Engineering 系列开场至今最常收到的读者反馈。00-26 章构建了一个完整的理论体系：从工具选型到需求规格、从编码 Agent 到三闸门、从知识工程到最小修复原则——18 篇方法论覆盖了 AI 辅助开发的全流程。但方法论是散装的零件，缺一个把它们组装成整车的总装手册。

本章就是那本总装手册。

接下来 11 篇主线实战文章会完整记录一个电商系统的开发过程：从 SSD 规格文档起步，经过 9 个 Git tag、11 天开发周期，跑通从 proposal 到部署的全链路。本章只做三件事：告诉你为什么选这个项目、整个系统长什么样、以及接下来怎么读。

一、为什么是电商系统

选一个贯穿全系列的主线项目时，有三个硬性要求。

第一，功能复杂度要适中且典型。 太简单体现不出 AI Native Engineering 的优势——一个 CRUD 后台十分钟就写完，犯不着上全套方法论。太复杂又会把读者的注意力从「AI 开发流程」拉到「业务规则理解」。电商系统恰好落在黄金分界线上：它是 CRUD + 业务规则 + 状态机的典型代表。订单状态流转、库存扣减并发、支付退款流程——这些场景足够展示 AI Agent 在多模块协作时的真实表现，又不至于让读者花太多时间理解业务。

第二，方法论覆盖度要全。 项目要能形成从需求到部署的完整 SDLC 闭环。对比一下电商系统和其他常见项目类型对 AI Native Engineering 各环节的覆盖：

电商是唯一能覆盖所有方法论模块的项目类型。不是说其他项目不能用——但它们都有方法论断层，每个断层就意味着有一篇文章看完了用不上。

第三，读者群体要共鸣。 电商的逻辑链（选商品→加购物车→下单→支付→等收货→评价）是每个技术人都熟悉的。不需要额外解释业务背景，读者可以集中在「AI 是怎么把这套逻辑编码出来的」上。

这三个条件叠加，选择电商系统不是偏好，是必然。

二、技术栈决策的 5 条 ADR

技术栈选型不是拍脑袋，每条决策都有明确的上下文和替代方案。以下是主线项目中最重要的 5 条架构决策记录：

#mermaid-svg-GMtjM3Pz0vGh2NxH{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-GMtjM3Pz0vGh2NxH .error-icon{fill:#552222;}#mermaid-svg-GMtjM3Pz0vGh2NxH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GMtjM3Pz0vGh2NxH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .marker.cross{stroke:#333333;}#mermaid-svg-GMtjM3Pz0vGh2NxH svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GMtjM3Pz0vGh2NxH p{margin:0;}#mermaid-svg-GMtjM3Pz0vGh2NxH .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster-label text{fill:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster-label span{color:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster-label span p{background-color:transparent;}#mermaid-svg-GMtjM3Pz0vGh2NxH .label text,#mermaid-svg-GMtjM3Pz0vGh2NxH span{fill:#333;color:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .node rect,#mermaid-svg-GMtjM3Pz0vGh2NxH .node circle,#mermaid-svg-GMtjM3Pz0vGh2NxH .node ellipse,#mermaid-svg-GMtjM3Pz0vGh2NxH .node polygon,#mermaid-svg-GMtjM3Pz0vGh2NxH .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .rough-node .label text,#mermaid-svg-GMtjM3Pz0vGh2NxH .node .label text,#mermaid-svg-GMtjM3Pz0vGh2NxH .image-shape .label,#mermaid-svg-GMtjM3Pz0vGh2NxH .icon-shape .label{text-anchor:middle;}#mermaid-svg-GMtjM3Pz0vGh2NxH .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .rough-node .label,#mermaid-svg-GMtjM3Pz0vGh2NxH .node .label,#mermaid-svg-GMtjM3Pz0vGh2NxH .image-shape .label,#mermaid-svg-GMtjM3Pz0vGh2NxH .icon-shape .label{text-align:center;}#mermaid-svg-GMtjM3Pz0vGh2NxH .node.clickable{cursor:pointer;}#mermaid-svg-GMtjM3Pz0vGh2NxH .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .arrowheadPath{fill:#333333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GMtjM3Pz0vGh2NxH .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-GMtjM3Pz0vGh2NxH .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GMtjM3Pz0vGh2NxH .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster text{fill:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH .cluster span{color:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-GMtjM3Pz0vGh2NxH .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-GMtjM3Pz0vGh2NxH rect.text{fill:none;stroke-width:0;}#mermaid-svg-GMtjM3Pz0vGh2NxH .icon-shape,#mermaid-svg-GMtjM3Pz0vGh2NxH .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GMtjM3Pz0vGh2NxH .icon-shape p,#mermaid-svg-GMtjM3Pz0vGh2NxH .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-GMtjM3Pz0vGh2NxH .icon-shape .label rect,#mermaid-svg-GMtjM3Pz0vGh2NxH .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GMtjM3Pz0vGh2NxH .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-GMtjM3Pz0vGh2NxH .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-GMtjM3Pz0vGh2NxH :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

后端 Spring Boot 3.2.5

虚拟线程高并发订单接口

Jakarta EE 命名空间迁移

AOT 预留GraalVM 兼容

数据库 MySQL 8.0

Snowflake ID替代自增主键

RC 隔离级别避免间隙锁

前端 Vue 3.4.x

Composition APIAI D2C 友好

Vite HMRAgent 闭环提速

ADR 1：Spring Boot 3.2.5 而非 2.7.x

选用 Spring Boot 3.x 的核心原因是虚拟线程（Project Loom，JDK 21 起可用，Spring Boot 3.2 起可通过 spring.threads.virtual.enabled=true 一键开启，📄 官方文档）。电商高并发场景下，订单和支付接口的吞吐量是核心指标。虚拟线程将 Java 的并发模型从「线程池 + 阻塞」降到「轻量级虚拟线程 + 挂起」，在 I/O 密集型场景下同硬件配置的吞吐量有明显提升空间（💡 推断，具体倍数因业务而异，不宜套用固定数字）。代价是必须从 javax.* 迁移到 jakarta.*命名空间（Jakarta EE 9 起的规范变更，📄 官方文档）——这是一次性的迁移成本，但对老项目来说不可忽视。项目中已全部完成迁移。

替代方案评估：Spring Boot 2.7.x 生态更成熟、第三方库兼容性好，但缺少虚拟线程支持，且社区支持窗口已收窄。选 3.2.5 是面向未来的决策。

ADR 2：Snowflake ID 而非自增主键

自增主键在单库单表下性能最好，但电商系统天然需要分库分表——订单数据按时间分片、用户数据按 ID 取模——自增主键在分片场景下会有冲突。Snowflake ID 在应用层生成全局唯一 ID，不依赖数据库自增能力，天然支持分片。代价是 ID 长度更长（64 位 BigInt），以及需要引入 ID 生成器组件。本项目中 ID 生成器是一个轻量的单例，使用默认数据中心的机器 ID 配置。

替代方案评估：UUID 也可以全局唯一，但 36 字符的字符串作为主键对索引性能影响明显，尤其在订单表千万级数据量时排序和分组查询会变慢。

ADR 3：MySQL RC 隔离级别而非 RR

MySQL 默认隔离级别是 REPEATABLE READ（RR），电商场景推荐切换到 READ COMMITTED（RC），原因只有一条：间隙锁。RR 级别下，InnoDB 会在索引记录之间加间隙锁防止幻读，电商系统高频交易场景间隙锁容易引发死锁。切换到 RC 级别后，间隙锁消除，死锁概率明显下降。代价是需要接受不可重复读——但在金融级支付以外的大多数电商场景中，不可重复读不是一个致命问题。

替代方案评估：完全不用间隙锁意味着在分布式场景下可能需要乐观锁或应用层重试补偿，本项目已在订单模块中通过状态机处理这类场景。

ADR 4：Vue 3 Composition API 而非 Options API

选 Composition API 不只是版本升级，它是 AI 友好度的选择。Composition API 允许按逻辑组织代码（比如把所有和「购物车」相关的状态、计算属性、方法聚合在一个 useCart() 函数里），AI Agent 在生成这类代码时，上下文更集中、约束更明确。对比 Options API 下 data/methods/computed 分散在三个块中，AI 需要跨块理解完整逻辑才能准确生成代码。

Vue 3 的 Proxy 响应式机制在处理多层嵌套对象时比 Vue 2 的 Object.defineProperty 开销更小（📄 Vue 官方文档），配合 Vite HMR，AI 生成代码后的即时反馈循环更短。

ADR 5：单体架构而非微服务

这是一个教学决策而非技术决策。单体架构足够承载电商系统的 7 个模块，还能让读者专注于理解「Agent 交互逻辑」而非「服务发现和配置中心」。微服务引入的分布式事务、服务调用链追踪、配置中心等复杂性，会稀释 AI Native Engineering 的教学目标。

如果你在实际项目中需要微服务，本系列（支付集成与物流集成）展示的 Temporal 工作流编排可以作为拆微服务的起点——这些模块已经是按照微服务边界设计的。

三、七大模块架构总览

整个电商系统由 7 个业务模块组成，以下图展示它们的依赖关系：

#mermaid-svg-WUTK4OlJK9BVZJ52{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-WUTK4OlJK9BVZJ52 .error-icon{fill:#552222;}#mermaid-svg-WUTK4OlJK9BVZJ52 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WUTK4OlJK9BVZJ52 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .marker.cross{stroke:#333333;}#mermaid-svg-WUTK4OlJK9BVZJ52 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WUTK4OlJK9BVZJ52 p{margin:0;}#mermaid-svg-WUTK4OlJK9BVZJ52 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster-label text{fill:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster-label span{color:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster-label span p{background-color:transparent;}#mermaid-svg-WUTK4OlJK9BVZJ52 .label text,#mermaid-svg-WUTK4OlJK9BVZJ52 span{fill:#333;color:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .node rect,#mermaid-svg-WUTK4OlJK9BVZJ52 .node circle,#mermaid-svg-WUTK4OlJK9BVZJ52 .node ellipse,#mermaid-svg-WUTK4OlJK9BVZJ52 .node polygon,#mermaid-svg-WUTK4OlJK9BVZJ52 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .rough-node .label text,#mermaid-svg-WUTK4OlJK9BVZJ52 .node .label text,#mermaid-svg-WUTK4OlJK9BVZJ52 .image-shape .label,#mermaid-svg-WUTK4OlJK9BVZJ52 .icon-shape .label{text-anchor:middle;}#mermaid-svg-WUTK4OlJK9BVZJ52 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .rough-node .label,#mermaid-svg-WUTK4OlJK9BVZJ52 .node .label,#mermaid-svg-WUTK4OlJK9BVZJ52 .image-shape .label,#mermaid-svg-WUTK4OlJK9BVZJ52 .icon-shape .label{text-align:center;}#mermaid-svg-WUTK4OlJK9BVZJ52 .node.clickable{cursor:pointer;}#mermaid-svg-WUTK4OlJK9BVZJ52 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .arrowheadPath{fill:#333333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WUTK4OlJK9BVZJ52 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-WUTK4OlJK9BVZJ52 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WUTK4OlJK9BVZJ52 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster text{fill:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 .cluster span{color:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WUTK4OlJK9BVZJ52 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-WUTK4OlJK9BVZJ52 rect.text{fill:none;stroke-width:0;}#mermaid-svg-WUTK4OlJK9BVZJ52 .icon-shape,#mermaid-svg-WUTK4OlJK9BVZJ52 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WUTK4OlJK9BVZJ52 .icon-shape p,#mermaid-svg-WUTK4OlJK9BVZJ52 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-WUTK4OlJK9BVZJ52 .icon-shape .label rect,#mermaid-svg-WUTK4OlJK9BVZJ52 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WUTK4OlJK9BVZJ52 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-WUTK4OlJK9BVZJ52 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-WUTK4OlJK9BVZJ52 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

M01 商品管理

M03 购物车

M04 订单管理

M07 评价系统

M02 用户认证

M05 支付对接

M06 物流跟踪

层次说明：

• 基础层（绿色）：商品（M01）和用户（M02）是业务基座，不依赖其他模块。这两个模块在 AI 编译修复的最小修复原则、主线项目索引与架构总览、主线一：规格驱动 这三章完成。
• 交叉层（橙色）：购物车（M03）依赖商品和用户。通过 Redis 缓存购物车数据是典型的缓存套数据库模式。
• 核心层（红色）：订单（M04）是系统的交通枢纽，依赖商品、用户、购物车。订单状态机在主线三：前端模块 + D2C 生成、主线四：AI 安全合规落地 这两章完整实现。
• 外围层（蓝色）：支付（M05）、物流（M06）、评价（M07）都依赖订单，彼此独立。

数据库关系（核心表）是理解这个架构的另一条线索。user → cart → cart_item 形成购物车链，order → order_item 形成订单链。order 同时关联 payment、shipping 和 order_log。product 作为商品实体，同时被 cart_item 和 order_item 引用——这是订单数据快照的关键设计：订单生成时复制商品的当前价格信息，而不是实时查询价格。

四、9 个 Git tag 与 11 天工期映射

每个 Git tag 对应一个可独立运行的代码里程碑。Tag 的编号方式遵循 v<主版本>.<次版本>-<模块> 模式，方便按模块 checkout。

#mermaid-svg-M7UnLNGA3z4jxh7l{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-M7UnLNGA3z4jxh7l .error-icon{fill:#552222;}#mermaid-svg-M7UnLNGA3z4jxh7l .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-M7UnLNGA3z4jxh7l .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-M7UnLNGA3z4jxh7l .marker{fill:#333333;stroke:#333333;}#mermaid-svg-M7UnLNGA3z4jxh7l .marker.cross{stroke:#333333;}#mermaid-svg-M7UnLNGA3z4jxh7l svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-M7UnLNGA3z4jxh7l p{margin:0;}#mermaid-svg-M7UnLNGA3z4jxh7l .mermaid-main-font{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-M7UnLNGA3z4jxh7l .exclude-range{fill:#eeeeee;}#mermaid-svg-M7UnLNGA3z4jxh7l .section{stroke:none;opacity:0.2;}#mermaid-svg-M7UnLNGA3z4jxh7l .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-M7UnLNGA3z4jxh7l .section2{fill:#fff400;}#mermaid-svg-M7UnLNGA3z4jxh7l .section1,#mermaid-svg-M7UnLNGA3z4jxh7l .section3{fill:white;opacity:0.2;}#mermaid-svg-M7UnLNGA3z4jxh7l .sectionTitle0{fill:#333;}#mermaid-svg-M7UnLNGA3z4jxh7l .sectionTitle1{fill:#333;}#mermaid-svg-M7UnLNGA3z4jxh7l .sectionTitle2{fill:#333;}#mermaid-svg-M7UnLNGA3z4jxh7l .sectionTitle3{fill:#333;}#mermaid-svg-M7UnLNGA3z4jxh7l .sectionTitle{text-anchor:start;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-M7UnLNGA3z4jxh7l .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-M7UnLNGA3z4jxh7l .grid .tick text{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;fill:#333;}#mermaid-svg-M7UnLNGA3z4jxh7l .grid path{stroke-width:0;}#mermaid-svg-M7UnLNGA3z4jxh7l .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-M7UnLNGA3z4jxh7l .task{stroke-width:2;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskText{text-anchor:middle;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutsideRight{fill:black;text-anchor:start;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-M7UnLNGA3z4jxh7l .task.clickable{cursor:pointer;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskText0,#mermaid-svg-M7UnLNGA3z4jxh7l .taskText1,#mermaid-svg-M7UnLNGA3z4jxh7l .taskText2,#mermaid-svg-M7UnLNGA3z4jxh7l .taskText3{fill:white;}#mermaid-svg-M7UnLNGA3z4jxh7l .task0,#mermaid-svg-M7UnLNGA3z4jxh7l .task1,#mermaid-svg-M7UnLNGA3z4jxh7l .task2,#mermaid-svg-M7UnLNGA3z4jxh7l .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutside0,#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutside2{fill:black;}#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutside1,#mermaid-svg-M7UnLNGA3z4jxh7l .taskTextOutside3{fill:black;}#mermaid-svg-M7UnLNGA3z4jxh7l .active0,#mermaid-svg-M7UnLNGA3z4jxh7l .active1,#mermaid-svg-M7UnLNGA3z4jxh7l .active2,#mermaid-svg-M7UnLNGA3z4jxh7l .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-M7UnLNGA3z4jxh7l .activeText0,#mermaid-svg-M7UnLNGA3z4jxh7l .activeText1,#mermaid-svg-M7UnLNGA3z4jxh7l .activeText2,#mermaid-svg-M7UnLNGA3z4jxh7l .activeText3{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .done0,#mermaid-svg-M7UnLNGA3z4jxh7l .done1,#mermaid-svg-M7UnLNGA3z4jxh7l .done2,#mermaid-svg-M7UnLNGA3z4jxh7l .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-M7UnLNGA3z4jxh7l .doneText0,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText1,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText2,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText3{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .doneText0.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText0.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText1.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText1.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText2.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText2.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText3.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .crit0,#mermaid-svg-M7UnLNGA3z4jxh7l .crit1,#mermaid-svg-M7UnLNGA3z4jxh7l .crit2,#mermaid-svg-M7UnLNGA3z4jxh7l .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-M7UnLNGA3z4jxh7l .activeCrit0,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCrit1,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCrit2,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-M7UnLNGA3z4jxh7l .doneCrit0,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCrit1,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCrit2,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-M7UnLNGA3z4jxh7l .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-M7UnLNGA3z4jxh7l .milestoneText{font-style:italic;}#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText0,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText1,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText2,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText3{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText0.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText0.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText1.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText1.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText2.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText2.taskTextOutsideRight,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText3.taskTextOutsideLeft,#mermaid-svg-M7UnLNGA3z4jxh7l .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .vert{stroke:navy;}#mermaid-svg-M7UnLNGA3z4jxh7l .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .activeCritText0,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCritText1,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCritText2,#mermaid-svg-M7UnLNGA3z4jxh7l .activeCritText3{fill:black!important;}#mermaid-svg-M7UnLNGA3z4jxh7l .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-M7UnLNGA3z4jxh7l :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

06-01

06-02

06-03

06-04

06-05

06-06

06-07

06-08

06-09

06-10

06-11

06-12

v0.1-spec (SSD + 48 任务)

v0.2-product (商品模块)

v0.3-user (用户认证 + JWT)

v0.4-cart (购物车 + Redis)

v0.5-order (订单状态机)

v0.6-payment (支付对接)

v0.7-shipping (物流跟踪)

v0.8-review (评价系统)

v1.0-final (集成 + 部署)

设计期

核心编码

业务编码

集成编码

收尾

电商实战 11 天工期

Tag 速查表

方法论→实战映射

每个 Git tag 背后都对应具体的方法论落地。这是本系列和其他电商教程的核心区别：

核心逻辑：阅读每个实战篇之前，先看一眼这个映射表——你在实战中看到的每一个 Agent 操作，都会在前面的方法论篇章中找到它的设计初衷。

五、三条阅读路径

不是所有读者都需要从头读到尾。根据你的角色和目标，选择对应路径：

路径 B 注意事项：技术管理者时间紧迫，想快速看到 AI 编码的效果。但请务必不要跳过 Rules 编写方法论 + Prompt Eval——它是所有实战篇的规格基础，48 个原子任务的拆解方法不读通，后面的 Agent 编码根本不知道 Context 是怎么喂给 AI 的。

路径 C 注意事项：如果你只关注订单模块（主线三：前端模块 + D2C 生成、主线四：AI 安全合规落地），至少先读 Rules 编写方法论 + Prompt Eval 了解 SSD 和任务拆解方法，再 git checkout 到 v0.5-order。不要试图只读代码不看方法论映射——实战篇的代码是「方法论的具象化」，不是自我解释的。

六、六类陷阱与规避

陷阱 1：跳过方法论直接看实战

后果：看不懂 Agent 交互逻辑，把 AI 生成代码的过程误读为「AI 在乱写」。比如没读过 13-14 章就去读 AI 编译修复的最小修复原则 的商品模块编码，你看不到 Prompt 是如何构造的、上下文是如何传递给编码 Agent 的——你只看到结果，但不理解为什么 AI 能产出这个结果。

规避：每篇实战文章的开头都有一个「前置方法论清单」边栏，标注了阅读前必须回看的方法论篇章。请按清单操作。

陷阱 2：不 checkout 对应 tag

后果：代码状态不同步导致测试失败。比如读到主线四：AI 安全合规落地 订单状态机时，本地还在 v0.2-product 的代码上——缺少购物车实体和用户认证，订单接口 401 或数据缺失。读者以为是代码有问题，实际是没切换到正确 tag。

规避：每篇文章的第一个代码块一定是 git checkout -f v0.x。不习惯 Git tag 操作的读者可以先在 v0.1 上把 tag 操作流程跑通。

陷阱 3：误解「AI 翻车现场」

后果：实战篇刻意保留了 AI 出错及修正过程，这是为了展示方法论（特别是 17-18 章的修复 Agent 和最小修复原则）。首次阅读的读者可能误判为「这个 AI 也不行」或「作者的代码有 Bug」。

规避：文中标注了「AI 翻车现场」的段落，旁边会附带标注：此处是 AI 生成的原始错误，通过 XX 方法论引导后修正。区分两个版本看，理解方法论的干预效果。

陷阱 4：按非电商场景抵触

后果：认为「我不做电商，这套对我没用」。电商系统只是载体，其本质模式可以迁移：订单状态机等价于任何审批流（OA、工单、审核），库存并发等价于任何资源争抢（秒杀、预约、排队），支付退款等价于任何资金流转（押金、结算、赔付）。

除了状态流程的通用性之外，电商系统的每个模块本身也是一种常见业务模式的代表：商品模块是典型的内容管理，用户模块是认证授权骨架，购物车是临时聚合——这些模式可以迁移到 SaaS、企业内部系统，乃至医疗和物流行业。

陷阱 5：Java 8 / Vue 2 老团队的迁移门槛

后果：Spring Boot 3 强制从 javax.* 迁移到 jakarta.*命名空间，Vue 3 的 Composition API 是思维级差异。团队如果短期不打算升级，可能会觉得实战篇的技术栈不可直接复用。

规避方案：如果只是技术栈版本问题——「跳过语法看逻辑」。关注点放在 AI 处理业务边界的过程上，而非具体代码的 API 细节。Composition API 和 Options API 的区别不会影响对 AI 编码 Agent 工作方式的理解。

陷阱 6：最容易崩盘的关键节点——Rules 编写方法论 + Prompt Eval

这是整个实战链路上不可跳过的关口。

Rules 编写方法论 + Prompt Eval 的任务是从一个需求 Proposal 拆解出 48 个原子任务，形成完整的 SSD 规格文档。如果这章没读通、规格定义模糊，后续所有 Agent 编码都会因为上下文不足而产出垃圾代码。不是「不太好」的程度，是从根本上不可用。

判断是否读通的标准很简单：能否在本地 IDE 中完整复现 48 个任务的拆解目录。能做出来，进入 AI 编译修复的最小修复原则。做不出来，回到 Rules 编写方法论 + Prompt Eval 继续。

铁律三则

Tag 是指南针，不是装饰品。 每篇实战文章的起点都是 git checkout。不养成这个习惯，你会花一半的时间在「代码怎么跑不起来」上，而不是理解 AI Native Engineering 本身。Tag 不是写给版本管理看的，是写给后面的自己看的。

不要跳过方法论去「先跑起来」。 如果时间有限，少读两篇方法论比少读一篇实战更有价值。因为实战篇本身就是对方法论的演示——你看懂了方法论再看实战是巩固，只看实战不懂方法论是猜谜。

刻意保留翻车现场比展示完美代码更有价值。 这不是一套「看看我多厉害」的作品展示。你会在实战篇中看到 AI 写错了代码、Agent 审查没通过、修复 Agent 修出了新 Bug——这些不是意外，是 AI 辅助开发中的常态。知道 AI 在什么环节会出错，比看它写出完美代码更有实际参考价值。

现在，打开终端，git checkout v0.1-spec。下一章见。

评论区钩子：你团队目前用的技术栈是什么版本？如果是 Java 8 + Vue 2，迁移到 Spring Boot 3 最让你头疼的是什么？欢迎在评论区聊聊你的迁移经历。

本专栏的开源落地工具：IvyFlow

本专栏的整套方法论——多角色工作流、阶段守卫、OpenSpec+Superpowers 双驱动、Skill/Rule/Agent 三层分层——并非纸上谈兵。它们的落地载体是 IvyFlow，一个 AI-Native 开发工作流 CLI 工具，也是本专栏作者的开源项目。

IvyFlow 用一条命令（ivy init）在项目中部署 5 种角色（Developer / PM / QA / Architect / DevOps）共 20+ 条命令和约 30 个 Skill，将专栏中讨论的"Phase Gate、Delta Spec 反写、TDD 强制循环、SubAgent 并行扇"全部编码为脚本校验而非纯 Prompt 约定——守卫脚本会硬性拦截 AI 跳过阶段的行为，让流程纪律从"建议"变成"物理约束"。

• GitHub：github.com/jseko/IvyFlow
• 官方网站：jseko.github.io/IvyFlow
• 安装：npm install -g ivyflow-cli && ivy init

如果你读完本专栏想立刻落地，IvyFlow 就是这套体系的开箱即用入口。