一、项目定位与最终成果这是一个企业级前后端分离电商平台从截图可以看到它已经完整运行用户localhost:3000——第一张截图展示的就是用户前台首页。顶部蓝色导航栏包含首页、全部商品、购物车、登录四个入口中间是蓝色渐变的 Hero Banner写着欢迎来到电商平台 / 品质生活从这里开始下方分为两个区域分类导航电子产品、服装鞋帽、食品饮料、家居用品、图书音像五个一级分类和推荐商品网格8 个商品卡片展示封面图、名称、红色价格标签。管理后台localhost:3001——第二张截图是管理后台的数据大盘。左侧导航包含数据大盘、用户管理、商品管理、分类管理、订单管理、系统配置、日志查看七个功能模块。主区域顶部是五个指标卡片总用户数 6、上架商品 22、今日订单 0、今日销售额 ¥0、待处理订单 0中间是近30天订单趋势折线图使用 ECharts 渲染蓝色柱状图表示订单数、绿色折线表示金额底部是热销商品 TOP10表格。二、开发方法论superpower SDD TDD整个项目的核心开发理念是用 superpower 工具约束 AI Agent 按照规范化流程工作。superpower 底层集成了两套开发规范SDDSpecification-Driven Development规格驱动开发——先写清楚做什么再动手写代码。项目中体现为 docs/superpowers/specs/ 下的设计规格文档它定义了数据库模型、API 接口、业务流程、安全策略等所有契约Agent 编码时必须严格遵守这份规格。TDDTest-Driven Development测试驱动开发——每个业务模块都配有测试目录。从实施计划可以看到users 模块有 test_auth.py、test_profile.py、test_address.pygoods 模块有 test_category.py、test_goods.py、test_search.pyorder 模块有 test_order.py、test_tasks.py。Agent 在实现功能的同时必须编写对应测试。三、十步开发流程详解第 1 步头脑风暴brainstorming skill与 Agent 进行多轮对话逐步确认以下关键决策技术架构确定采用前后端分离方案后端提供 RESTful API前端通过 Axios 调用技术栈选型后端 Django 5.x DRF SimpleJWT Celery前端 Vue 3Composition API Vite Pinia Element Plus数据库开发用 SQLite、生产用 PostgreSQL缓存和消息队列用 Redis模块划分用户users、商品goods、购物车cart、订单order、管理后台admin_dashboard五大模块功能确认每个模块的具体功能点比如订单模块需要支持下单、支付、取消、确认收货、超时自动关单等这一步的产出是双方对要做什么达成共识。第 2 步编写设计规格文档writing-plan skill → spec产出文件docs/superpowers/specs/2026-07-29-ecommerce-platform-design.md这份 322 行的设计文档是整个项目的宪法内容极其详尽数据库模型定义了 8 张表的完整字段设计——user继承 AbstractUser、user_address、goods_category支持二级分类自关联、goods含 recommend_weight 推荐权重、goods_image轮播图、cartusergoods 唯一约束、order_info含 address JSON 快照、order_item含商品名称和封面快照API 接口设计6 大模块约 30 个端点统一响应格式 {code: 200, message: success, data: {...}}核心业务流程下单流程select_for_update 行锁 → 库存检查 → 创建订单 → 清购物车 → 启动 Celery 延迟任务、支付流程策略模式AlipayStrategy / WechatStrategy、超时关单流程30 分钟 ETA Celery Beat 兜底扫描安全设计JWT 认证、接口权限隔离、支付签名验证、OSS 服务端签名直传、CORS 白名单部署架构Nginx 反向代理 Gunicorn Redis Celery Worker PostgreSQL 阿里云 OSS第 3 步编写实施计划writing-plan skill → plan这份文档将设计规格拆解为可逐步执行的 Task 清单使用 checkbox 语法- [ ]跟踪进度。每个 Task 明确标注需要创建/修改的文件列表接口契约Produces / Consumes具体的代码实现步骤含完整代码片段全局约束Python 3.14、Node.js v24、中文文本、Mock 模式支付等例如 Task 1 是后端项目脚手架搭建精确到要创建哪些目录、requirements 里写哪些依赖及版本范围、settings/base.py 的完整配置内容。第 4 步执行计划开始编码execute-plan skillAgent 按照实施计划逐 Task 执行。从项目实际代码可以看到执行结果后端——backend/apps/ 下五个完整的 Django App每个都有 models.py、serializers.py、views.py、urls.py。以订单模块为例OrderInfo 模型实现了四种状态pending/paid/completed/cancelled、唯一订单号生成器时间戳UUID、JSON 地址快照、双索引优化OrderItem 保存了下单时的价格和商品名称快照确保历史订单不受商品后续修改影响。前端用户端——12 个页面组件Home、Login、Register、GoodsList、GoodsDetail、Cart、OrderConfirm、OrderList、OrderDetail、Pay、Profile、AddressManage路由使用懒加载购物车/订单/个人中心等页面设置了 requiresAuth 路由守卫。首页 Home.vue 通过 Promise.all 并发请求分类和推荐商品数据使用 Element Plus 的 el-row/el-col 实现响应式网格布局。管理后台——8 个页面Dashboard、UserManage、GoodsManage、CategoryManage、OrderManage、SystemConfig、LogViewer、LoginDashboard 使用 vue-echarts 渲染订单趋势图通过 Promise.all 并发拉取统计数据、趋势数据、热销排行三组 API。第 5 步编辑项目配置backend/config/settings/ 下分了三套配置base.py公共配置——INSTALLED_APPS 注册五个业务 App 和第三方库、CORS 设置、DRF 全局配置、JWT 参数、时区设为 Asia/Shanghai、语言设为 zh-hans、自定义用户模型 AUTH_USER_MODEL users.Userdev.py开发环境——DEBUGTrue、SQLite 数据库、CORS_ALLOW_ALL_ORIGINSprod.py生产环境——DEBUGFalse、PostgreSQL、Gunicorn、CORS 白名单此外还有 docker-compose.yml 编排了 Redis、Django 后端、Celery Worker 三个服务容器。第 6 步初始化数据init_db.py这是一个 322 行的完整初始化脚本支持三种运行模式完整初始化 / 只迁移 / 只导数据执行以下操作创建 3 个用户admin管理员、demo测试用户、user1普通用户密码使用 Django PBKDF2 哈希创建 5 个一级分类 12 个二级分类的树形结构创建 22 个示例商品覆盖所有子分类每个商品有真实的名称、价格、库存、销量、描述和 picsum.photos 占位图为 demo 用户创建一个默认收货地址使用 transaction.atomic 保证数据一致性get_or_create 保证幂等性重复运行不会报错从管理后台截图可以看到初始化结果总用户数 6、上架商品 22与脚本设计完全吻合。第 7 步启动测试与错误修复启动三个服务Django 8000、用户前端 3000、管理后台 3001遇到报错让 Agent 诊断修复。这个过程是迭代式的——Agent 提示代码修改方案修复后重新验证直到所有服务正常运行、页面正确渲染。第 8 步编写启动脚本start.sh产出一个 196 行的一键启动脚本功能非常完善端口冲突检测启动前检查 8000/3000/3001 是否被占用虚拟环境自动激活source venv/Scripts/activate依赖自动安装检测 node_modules 是否存在健康检查轮询curl 探测各服务是否就绪最多等 15 秒彩色日志输出不同服务用不同颜色标识进程管理和优雅退出trap SIGINT/SIGTERM统一 kill 所有子进程启动完成后打印汇总信息访问地址 测试账号第 9 步同步规范到 Agent 管理文件将项目约定编码风格、API 响应格式、命名规范、架构边界等写入 AGENTS.md / CLAUDE.md这样 Agent 在后续迭代中会自动加载这些约束不需要每次重复交代。第 10 步逐步推进基础框架稳定后进入持续迭代阶段——逐步检查各模块功能完整性、补充边界情况、优化性能、完善 UI 细节。四、技术架构亮点从源码中可以提炼出几个值得注意的设计商品模型的推荐机制——Goods 表有 recommend_weight 字段首页推荐商品按此字段降序排列初始化时直接用销量作为权重实现了卖得越好越靠前的效果。订单的数据快照设计——OrderInfo 用 JSONField 存储下单时的完整地址快照OrderItem 保存商品名称和封面快照。这意味着即使用户后来修改了地址、商品改了名字或下架了历史订单展示的信息依然准确。前端路由守卫——购物车、订单、个人中心等需要登录的页面统一通过 meta.requiresAuth 标记router.beforeEach 全局守卫检查 localStorage 中的 JWT token未登录自动跳转登录页。管理后台的数据可视化——Dashboard 使用 ECharts 双 Y 轴图表左轴订单数用柱状图、右轴金额用折线图配合 StatCard 组件和 el-table构成了完整的运营数据看板。五、总结这个项目的价值不仅在于最终产出了一个功能完整的电商平台更在于它展示了一套可复用的 AI 协作开发方法论先用头脑风暴对齐认知再用规格文档锁定契约然后用实施计划拆解任务最后让 Agent 在约束下高效执行。superpower 工具在整个过程中扮演了技术总监的角色确保 Agent 不会跳过设计直接写代码、不会偏离规格随意发挥、不会遗漏测试。这种 SDD TDD 的工作流对于任何中大型项目都有参考意义。
一、项目定位与最终成果这是一个企业级前后端分离电商平台从截图可以看到它已经完整运行用户localhost:3000——第一张截图展示的就是用户前台首页。顶部蓝色导航栏包含首页、全部商品、购物车、登录四个入口中间是蓝色渐变的 Hero Banner写着欢迎来到电商平台 / 品质生活从这里开始下方分为两个区域分类导航电子产品、服装鞋帽、食品饮料、家居用品、图书音像五个一级分类和推荐商品网格8 个商品卡片展示封面图、名称、红色价格标签。管理后台localhost:3001——第二张截图是管理后台的数据大盘。左侧导航包含数据大盘、用户管理、商品管理、分类管理、订单管理、系统配置、日志查看七个功能模块。主区域顶部是五个指标卡片总用户数 6、上架商品 22、今日订单 0、今日销售额 ¥0、待处理订单 0中间是近30天订单趋势折线图使用 ECharts 渲染蓝色柱状图表示订单数、绿色折线表示金额底部是热销商品 TOP10表格。二、开发方法论superpower SDD TDD整个项目的核心开发理念是用 superpower 工具约束 AI Agent 按照规范化流程工作。superpower 底层集成了两套开发规范SDDSpecification-Driven Development规格驱动开发——先写清楚做什么再动手写代码。项目中体现为 docs/superpowers/specs/ 下的设计规格文档它定义了数据库模型、API 接口、业务流程、安全策略等所有契约Agent 编码时必须严格遵守这份规格。TDDTest-Driven Development测试驱动开发——每个业务模块都配有测试目录。从实施计划可以看到users 模块有 test_auth.py、test_profile.py、test_address.pygoods 模块有 test_category.py、test_goods.py、test_search.pyorder 模块有 test_order.py、test_tasks.py。Agent 在实现功能的同时必须编写对应测试。三、十步开发流程详解第 1 步头脑风暴brainstorming skill与 Agent 进行多轮对话逐步确认以下关键决策技术架构确定采用前后端分离方案后端提供 RESTful API前端通过 Axios 调用技术栈选型后端 Django 5.x DRF SimpleJWT Celery前端 Vue 3Composition API Vite Pinia Element Plus数据库开发用 SQLite、生产用 PostgreSQL缓存和消息队列用 Redis模块划分用户users、商品goods、购物车cart、订单order、管理后台admin_dashboard五大模块功能确认每个模块的具体功能点比如订单模块需要支持下单、支付、取消、确认收货、超时自动关单等这一步的产出是双方对要做什么达成共识。第 2 步编写设计规格文档writing-plan skill → spec产出文件docs/superpowers/specs/2026-07-29-ecommerce-platform-design.md这份 322 行的设计文档是整个项目的宪法内容极其详尽数据库模型定义了 8 张表的完整字段设计——user继承 AbstractUser、user_address、goods_category支持二级分类自关联、goods含 recommend_weight 推荐权重、goods_image轮播图、cartusergoods 唯一约束、order_info含 address JSON 快照、order_item含商品名称和封面快照API 接口设计6 大模块约 30 个端点统一响应格式 {code: 200, message: success, data: {...}}核心业务流程下单流程select_for_update 行锁 → 库存检查 → 创建订单 → 清购物车 → 启动 Celery 延迟任务、支付流程策略模式AlipayStrategy / WechatStrategy、超时关单流程30 分钟 ETA Celery Beat 兜底扫描安全设计JWT 认证、接口权限隔离、支付签名验证、OSS 服务端签名直传、CORS 白名单部署架构Nginx 反向代理 Gunicorn Redis Celery Worker PostgreSQL 阿里云 OSS第 3 步编写实施计划writing-plan skill → plan这份文档将设计规格拆解为可逐步执行的 Task 清单使用 checkbox 语法- [ ]跟踪进度。每个 Task 明确标注需要创建/修改的文件列表接口契约Produces / Consumes具体的代码实现步骤含完整代码片段全局约束Python 3.14、Node.js v24、中文文本、Mock 模式支付等例如 Task 1 是后端项目脚手架搭建精确到要创建哪些目录、requirements 里写哪些依赖及版本范围、settings/base.py 的完整配置内容。第 4 步执行计划开始编码execute-plan skillAgent 按照实施计划逐 Task 执行。从项目实际代码可以看到执行结果后端——backend/apps/ 下五个完整的 Django App每个都有 models.py、serializers.py、views.py、urls.py。以订单模块为例OrderInfo 模型实现了四种状态pending/paid/completed/cancelled、唯一订单号生成器时间戳UUID、JSON 地址快照、双索引优化OrderItem 保存了下单时的价格和商品名称快照确保历史订单不受商品后续修改影响。前端用户端——12 个页面组件Home、Login、Register、GoodsList、GoodsDetail、Cart、OrderConfirm、OrderList、OrderDetail、Pay、Profile、AddressManage路由使用懒加载购物车/订单/个人中心等页面设置了 requiresAuth 路由守卫。首页 Home.vue 通过 Promise.all 并发请求分类和推荐商品数据使用 Element Plus 的 el-row/el-col 实现响应式网格布局。管理后台——8 个页面Dashboard、UserManage、GoodsManage、CategoryManage、OrderManage、SystemConfig、LogViewer、LoginDashboard 使用 vue-echarts 渲染订单趋势图通过 Promise.all 并发拉取统计数据、趋势数据、热销排行三组 API。第 5 步编辑项目配置backend/config/settings/ 下分了三套配置base.py公共配置——INSTALLED_APPS 注册五个业务 App 和第三方库、CORS 设置、DRF 全局配置、JWT 参数、时区设为 Asia/Shanghai、语言设为 zh-hans、自定义用户模型 AUTH_USER_MODEL users.Userdev.py开发环境——DEBUGTrue、SQLite 数据库、CORS_ALLOW_ALL_ORIGINSprod.py生产环境——DEBUGFalse、PostgreSQL、Gunicorn、CORS 白名单此外还有 docker-compose.yml 编排了 Redis、Django 后端、Celery Worker 三个服务容器。第 6 步初始化数据init_db.py这是一个 322 行的完整初始化脚本支持三种运行模式完整初始化 / 只迁移 / 只导数据执行以下操作创建 3 个用户admin管理员、demo测试用户、user1普通用户密码使用 Django PBKDF2 哈希创建 5 个一级分类 12 个二级分类的树形结构创建 22 个示例商品覆盖所有子分类每个商品有真实的名称、价格、库存、销量、描述和 picsum.photos 占位图为 demo 用户创建一个默认收货地址使用 transaction.atomic 保证数据一致性get_or_create 保证幂等性重复运行不会报错从管理后台截图可以看到初始化结果总用户数 6、上架商品 22与脚本设计完全吻合。第 7 步启动测试与错误修复启动三个服务Django 8000、用户前端 3000、管理后台 3001遇到报错让 Agent 诊断修复。这个过程是迭代式的——Agent 提示代码修改方案修复后重新验证直到所有服务正常运行、页面正确渲染。第 8 步编写启动脚本start.sh产出一个 196 行的一键启动脚本功能非常完善端口冲突检测启动前检查 8000/3000/3001 是否被占用虚拟环境自动激活source venv/Scripts/activate依赖自动安装检测 node_modules 是否存在健康检查轮询curl 探测各服务是否就绪最多等 15 秒彩色日志输出不同服务用不同颜色标识进程管理和优雅退出trap SIGINT/SIGTERM统一 kill 所有子进程启动完成后打印汇总信息访问地址 测试账号第 9 步同步规范到 Agent 管理文件将项目约定编码风格、API 响应格式、命名规范、架构边界等写入 AGENTS.md / CLAUDE.md这样 Agent 在后续迭代中会自动加载这些约束不需要每次重复交代。第 10 步逐步推进基础框架稳定后进入持续迭代阶段——逐步检查各模块功能完整性、补充边界情况、优化性能、完善 UI 细节。四、技术架构亮点从源码中可以提炼出几个值得注意的设计商品模型的推荐机制——Goods 表有 recommend_weight 字段首页推荐商品按此字段降序排列初始化时直接用销量作为权重实现了卖得越好越靠前的效果。订单的数据快照设计——OrderInfo 用 JSONField 存储下单时的完整地址快照OrderItem 保存商品名称和封面快照。这意味着即使用户后来修改了地址、商品改了名字或下架了历史订单展示的信息依然准确。前端路由守卫——购物车、订单、个人中心等需要登录的页面统一通过 meta.requiresAuth 标记router.beforeEach 全局守卫检查 localStorage 中的 JWT token未登录自动跳转登录页。管理后台的数据可视化——Dashboard 使用 ECharts 双 Y 轴图表左轴订单数用柱状图、右轴金额用折线图配合 StatCard 组件和 el-table构成了完整的运营数据看板。五、总结这个项目的价值不仅在于最终产出了一个功能完整的电商平台更在于它展示了一套可复用的 AI 协作开发方法论先用头脑风暴对齐认知再用规格文档锁定契约然后用实施计划拆解任务最后让 Agent 在约束下高效执行。superpower 工具在整个过程中扮演了技术总监的角色确保 Agent 不会跳过设计直接写代码、不会偏离规格随意发挥、不会遗漏测试。这种 SDD TDD 的工作流对于任何中大型项目都有参考意义。
