我用AI一周写了4个小程序页面，然后把经验沉淀成了组件库
上周五下午5点，产品经理丢过来一份PRD："海外商超小程序，下周三要能演示。"
我数了一下，核心页面4个：登录注册、首页、商品列表、购物车。后端接口已经定义好了，就差前端。
4天4个页面，还要能演示。如果是以前，这个时间有点紧。但现在我不太慌了。
因为这次我打算全程让Cursor来写，我的角色从"写代码的人"变成"review代码的人"。
最终结果：周三上午演示顺利通过，周四我做了一件事——把这4个页面里可以复用的部分抽成了组件库。
这篇文章把整个过程拆开讲，重点不在"AI有多厉害"，而在"怎么把一次性的项目交付变成可复用的技术资产"。
Day1（周六）：搭骨架
我不会一上来就让AI写页面。先搭好项目骨架和基础规范，后面才不会乱。
打开Cursor，新建了一个Taro + React项目。然后在项目根目录建了一个cursor-context.md：
# 项目：海外商超小程序
# 技术栈
- 框架：Taro 3.x + React
- UI组件库：TDesign 小程序版
- 状态管理：Zustand
- 请求：Taro.request，统一封装在 utils/request.js
# 目录结构
- src/pages/ 页面
- src/components/ 公共组件
- src/store/ 状态管理
- src/utils/ 工具函数
- src/api/ 接口定义
# 命名规范
- 页面文件夹：kebab-case（如 product-list）
- 组件文件：PascalCase（如 ProductCard）
- 工具函数：camelCase（如 formatDate）
# 接口规范
- 基础路径：https://api.example.com
- 响应格式：{ code: number, data: T, message: string }
- 错误码：401未登录 403无权限 500服务端错误
- Token放在Header里，key为 Authorization
# 已有组件（会持续更新）
（这个区域留给后续沉淀的组件）
这个文件是整个项目里最重要的东西。每次新开Cursor对话，第一件事就是把这段内容丢进去。
然后告诉Cursor：
"帮我初始化项目骨架。按上面的目录结构建好所有文件夹和基础文件，包括：request封装、store初始化、全局样式变量。不要写具体页面，先把基础设施搭好。"
Cursor花了几分钟，项目骨架搭好了。我检查了一下目录结构和代码风格，没大问题，改了两个小细节。
Day2（周日）：登录注册模块
这个模块看起来简单，但坑不少。手机号+验证码登录、邮箱注册、忘记密码、用户协议弹窗，涉及表单验证、接口对接、状态管理。
我给Cursor的指令是这样的：
"现在开始做登录注册模块，包含3个页面：
- 登录页：手机号+验证码登录 / 邮箱+密码登录，Tab切换
- 注册页：邮箱注册，含用户协议勾选
- 找回密码页：邮箱验证 → 设置新密码
要求：
- 使用TDesign的Form、Input、Button组件
- 表单验证要完整（手机号格式、邮箱格式、密码长度）
- 验证码倒计时60秒
- 登录成功后把token存到storage，更新store
- 每个页面先给设计方案，我确认后再写代码"
Cursor先给了一份设计方案，列出了每个页面的字段、组件选择、状态流转。我看了下没什么问题，让它开始写。
大概40分钟后，三个页面写完了。
我的review重点：
- 表单验证逻辑：检查了边界情况（空值、特殊字符、超长输入）
- Token存储：确认用了Taro.setStorageSync，并且设置了过期时间
- 错误处理：检查了网络异常、接口超时的处理
发现一个问题：Cursor写的验证码倒计时有个bug——切换到后台再切回来，倒计时没有暂停，直接变成负数了。我用Taro.onAppHide和Taro.onAppShow加了暂停/恢复逻辑，改了大概10行代码。
这一天的工作量，以前大概要一天半。这次加上review和修bug，大概用了4个小时。
Day3（周一）：首页 + 商品列表
这两个页面同时做，因为它们有共享的组件需求（卡片、轮播图、空状态）。
先给Cursor丢了一份简化版的UI设计图（截图，不是Figma链接，因为Cursor看不了Figma），然后描述需求：
"首页需要：
- 顶部搜索栏（不接搜索功能，先放个占位）
- 轮播图（接口返回图片列表）
- 分类入口（横向滚动的图标+文字）
- 推荐商品列表（2列网格布局）
商品列表页需要：
- 顶部分类Tab（全部/水果/蔬菜/零食...）
- 商品卡片（图片+名称+价格+加入购物车按钮）
- 下拉刷新 + 上拉加载更多
- 空状态展示"
Cursor写的时候，我注意到一个有意思的事：它在写商品列表的时候，自动把商品卡片抽成了一个独立组件ProductCard。
我没有让它这么做。
但这恰恰是我想要的。因为商品卡片在首页和列表页都要用，如果不抽成组件，就是两份重复代码。
这里有个经验：如果你在cursor-context.md里写了组件命名规范和"已有组件"列表，Cursor在写新代码的时候会倾向于复用和抽象。你不一定需要显式告诉它"这里要抽组件"，它自己会判断。
这一天review的时候我主要做了几件事：
- 检查图片加载：加了
lazy-load属性和加载失败兜底图 - 检查下拉刷新/上拉加载的交互逻辑
- 调整了一下卡片间距和字体大小
用了大概5个小时，两个页面搞定。
Day4（周二）：购物车
购物车是4个页面里最复杂的。涉及列表渲染、数量编辑、单选/全选、价格计算、结算跳转。
"购物车页面需求：
- 商品列表（图片+名称+规格+单价+数量编辑+删除）
- 左侧复选框（单选+全选）
- 底部结算栏（已选数量+总价+结算按钮）
- 空购物车状态
- 编辑模式（批量删除）
买过之后store里缓存一份购物车数据，下次打开小程序直接展示"
这个页面Cursor写了大概50分钟，代码量比前三个页面加起来还多。
review的时候我发现三个问题：
-
数量编辑没有做防抖。用户快速点击+/-按钮会连续发接口请求，可能造成数量不一致。加了500ms的防抖。
-
价格计算有浮点数精度问题。
0.1 + 0.2这种经典JS坑。引入了一个简单的金额计算工具函数，用整数运算代替浮点数。 -
删除商品后，如果当前页商品全部删完，没有自动返回列表页。加了一个判断。
修完这三个问题，购物车页面算完成了。
Day5（周三）：演示 + 沉淀组件库
周三上午产品演示，4个页面跑通了，没有大问题。提了几个小优化意见，当天改完。
然后我做了这次最有价值的事：把4个页面的公共部分抽出来，做成了一个组件库。
我在review那4天代码的时候，已经在心里有数了。哪些组件被多次使用、哪些逻辑可以复用：
| 组件 | 来源页面 | 功能 | 复用场景 |
|---|---|---|---|
FormInput | 登录/注册/找回密码 | 带验证的手机号/邮箱/密码输入框 | 所有表单页面 |
CountdownBtn | 登录页 | 验证码倒计时按钮 | 任何需要验证码的场景 |
ProductCard | 首页/商品列表 | 商品信息卡片 | 任何商品展示 |
CartBar | 购物车 | 底部结算栏 | 订单确认、收藏夹等 |
EmptyState | 多个页面 | 空状态占位 | 通用 |
PriceText | 商品/购物车 | 金额展示（处理精度） | 所有涉及价格的地方 |
ImageLoader | 多个页面 | 带loading和兜底图的图片 | 任何图片展示 |
然后我让Cursor做了一件事：
"基于上面这些组件的使用情况，帮我：
- 把它们统一放到 src/components/ 目录
- 每个组件写一个README，说明props和使用示例
- 写一份组件库总览文档，列出所有组件和用法
- 给每个组件加上基本的单元测试（用Jest）"
Cursor花了一个多小时，把组件整理好了，文档和测试也写了。我过了一遍，调整了几个API设计不太统一的地方（比如有的组件用onClick，有的用onPress，统一成了小程序习惯的onClick）。
最后，把这个组件库的信息更新到了cursor-context.md的"已有组件"区域。这样下次开新对话，Cursor就知道有哪些组件可以直接用了。
经验总结
先搭规范，再写业务
如果你直接让AI写页面，不给它上下文，它会按自己的理解来——变量命名可能跟你项目不一致、组件结构可能跟你的习惯不同、代码风格可能不统一。花10分钟写好cursor-context.md，后面能省很多review的时间。
分模块推进，不要一口气全做完
我可以一次性让Cursor写完4个页面，但我没有。每做完一个模块就review，问题及时纠正，不会积累到后面。而且上下文不会太长，Cursor的处理质量也更稳定。
让AI主动抽象组件，但你要把关
这次最有意思的发现：Cursor会自己判断哪些东西该抽成组件。ProductCard和EmptyState都是它主动抽象的，我没让它这么做。但不是所有抽象都对。有时候它会把只用了一次的样式也抽成组件，这种情况你得把它合并回去。
我的原则：至少在两个地方使用，才值得抽。
组件库不是终点，是起点
抽出组件库之后，最大的收益是团队其他人也能用，新项目可以直接复制这套组件启动更快。而且你在做抽象的过程中，对项目架构的理解也会更深。
总结
| 阶段 | 耗时 | AI产出 | 人工调整 |
|---|---|---|---|
| 项目骨架 | 1h | 目录结构+基础文件 | 改了2个小细节 |
| 登录注册 | 4h | 3个完整页面 | 修了倒计时bug |
| 首页+商品列表 | 5h | 2个完整页面 | 调样式和交互 |
| 购物车 | 4h | 1个完整页面 | 修了3个逻辑问题 |
| 组件库沉淀 | 2h | 7个组件+文档+测试 | 调整API设计 |
| 总计 | 16h |
16个小时完成4个页面+一个组件库。如果不用AI，光写页面大概需要40-50个小时，组件库沉淀另外还要10-15个小时。
省下来的时间，我用来做了产品演示的准备和代码review。质量没有打折扣。
这篇文章不是要证明AI能替代程序员。恰恰相反——整个过程里我最花时间的事是review和架构决策，这些是AI做不了的。
AI帮我省了写代码的时间，让我有更多精力做真正需要思考的事。这才是它最大的价值。
