品牌独立站复刻｜Bellroy · Aesop 全栈商城
参照 Bellroy、Aesop 官网，一个人复刻两套可运行的品牌独立站：前台浏览、SKU、购物车与结算，到订单、库存和内容后台全流程跑通。
- 周期
- 2026.10
- 角色
- 结构拆解、数据整理、对照验收
- 规模
- Bellroy 16 款商品 / 65 个 SKU · Aesop 12 款商品
- 验收
- 两站各 14 项接口测试通过 · 375 宽无横向溢出
- 技术
- React · Vite · Express · SQLite（sql.js）
我的职责与分工
本人负责 6/6 个环节 · 结构拆解、数据整理…
- 我的职责
- 结构拆解数据整理对照验收
- 环节分工 · 本人负责 6/6
- 需求本人完成
- 设计本人完成
- 开发本人主导，AI 辅助
- 测试本人完成
- 发布本人主导，AI 辅助
- 迭代本人完成
- AI 参与
- 代码由 AI 编程助手按我写的任务书实现；官网结构拆解、商品与规格数据整理、逐屏对照与验收由我完成。
- 工具
- CodexClaude
- 时间
- 2026.10 – 至今
核心功能
前台 → 交易 → 后台
01 前台前台
分类筛选、搜索排序、颜色 / 容量规格切换、购物车、配送选择、账户与订单。
02 交易交易
服务端计算价格与运费；本地模拟支付支持成功与拒付；成功下单在事务内扣库存，取消订单返还库存。
03 后台后台
商品上下架、SKU 价格与库存、订单发货 / 取消、文章与首页配置；管理员、编辑、顾客三种权限。
技术与 AI 分工
4 层 · AI：代码由 AI 编程助手按我写的任…
| 层 | 用什么 | 做什么 |
|---|---|---|
| 前台 | React + Vite | 品牌前台与管理后台界面 |
| 服务 | Express | 接口、权限与交易逻辑 |
| 数据 | SQLite（sql.js） | 商品、SKU、订单、用户与文章 |
| 账户 | scrypt + HttpOnly 会话 | 密码哈希与服务端角色权限 |
AI 参与：代码由 AI 编程助手按我写的任务书实现；官网结构拆解、商品与规格数据整理、逐屏对照与验收由我完成。
为什么做
看懂品牌站怎么卖货 → 逐屏复刻两种风格的 DTC 品牌
跨境运营离不开独立站：看懂一个品牌站怎么组织商品、讲卖点、引导下单，才能做好 Listing 和转化。我挑了两种风格的 DTC 品牌——功能型的 Bellroy（包袋）和调性型的 Aesop（护肤），从首页到下单逐屏对照复刻。
我的工作
拆结构 → 整理数据 → 两轮全站检查
我拆解官网的导航、商品与规格结构，整理 28 款商品、规格与详情数据，逐屏对照验收。两轮全站检查修掉 10 余处会影响购买或管理的问题，例如删除规格后取消旧订单会让下架规格重新可买、新建规格默认价格为 0 可能误售为免费。
Bellroy 首页
Bellroy 商品详情：规格与材质
Bellroy 模拟付款完成
Bellroy 后台订单管理
Aesop 视频首屏
Aesop 商品详情：容量切换
1 / 6
边界与说明
学习复刻 · 非官方 · 仅本机演示
品牌官网的视觉与商品素材仅用于学习复刻，这不是官方网站、不对外销售，只在本机演示；后台与 Journal 文章为原创实现，支付为本地模拟。与官网仍有差距：目录只收 28 款商品，部分首页模块和长图文详情做了简化。面试时可现场打开本机演示下单与后台。
本人完成本人主导，AI 辅助他人负责