刚开始用 AI 写代码时，我的体验是这样的：

生成 → 不能用 → 改 prompt → 再生成 → 还是不对 → 手动改 → 勉强能用

成功率大概 40%。很多时候改 prompt 的时间比自己写还长。

后来我发现问题出在一个习惯上：我总是让 AI “从零开始写”，而不是"照着范例写"。

两种方式的区别

下面是两种代码生成方式的对比流程图：

方式一：描述式生成（成功率 40%）
┌─────────────────────────────────┐
│ 你的描述（200字）                 │
│ → AI 脑补项目风格                │
│ → AI 脑补组件用法                │
│ → AI 脑补导入方式                │
│ → 生成"大致对但细节全错"的代码    │
└─────────────────────────────────┘

方式二：范例式生成（成功率 90%）
┌─────────────────────────────────┐
│ 范例文件（200行真实代码）          │
│ → AI 学习项目风格 ✅             │
│ → AI 学习组件用法 ✅             │
│ → AI 学习导入方式 ✅             │
│ → 生成"风格一致只需改业务"的代码  │
└─────────────────────────────────┘

为什么范例比描述有效

一个范例文件包含了大量你没有显式描述的信息：

一个 200 行的范例文件隐含的信息：
├── 导入方式（相对路径？别名？）
├── 组件结构（怎么拆分的？）
├── hooks 用法（状态怎么管理？）
├── service 调用方式（怎么引入？怎么调用？）
├── 错误处理模式（try-catch？interceptor？）
├── loading 状态管理（useState？model？）
├── 样式写法（className 怎么用？）
├── 类型定义位置（同文件？单独文件？）
└── 注释风格（JSDoc？行内？）

用文字描述这些信息需要：500+ 字
用范例文件传递这些信息需要：一个 @ 引用

我的"范例库"

我在项目里标记了几个"标准范例"：

# 范例索引

| 场景 | 范例文件 | 特点 |
|------|---------|------|
| 列表页（简单） | src/view/marketing/CouponList/index.tsx | ProTable + 搜索 |
| 列表页（复杂） | src/view/delivery/RuleList/index.tsx | 多Tab + 批量操作 |
| 创建/编辑页 | src/view/marketing/CouponCreate/index.tsx | StepsForm |
| 详情页 | src/view/member/MemberDetail/index.tsx | Descriptions |
| Service | src/services/marketing/coupon.ts | CRUD 接口 |
| Model | src/models/marketing/couponList.ts | 列表页状态 |

使用方式

每次开发新页面只需要两步：

Step 1：确定页面类型 → 找到范例

这是一个列表页 → 范例是 CouponList

Step 2：告诉 AI 业务差异

参考 @src/view/marketing/CouponList/index.tsx，
写一个会员等级管理的列表页。

差异点：
- 搜索字段：等级名称、状态
- 表格列：等级名称、所需积分、权益数量、状态、操作
- 操作：编辑、启用/禁用
- 接口：getGradeList, updateGradeStatus

AI 生成的代码跟项目里其他页面风格完全一致。

可直接抄走的 Prompt 模板

```mermaid
graph TD
    Start[开始范例式代码生成] --> Template[使用Prompt模板]
    
    Template --> Same[与范例相同的部分<br/>AI自动学习]
    Same --> S1[组件结构]
    Same --> S2[导入方式]
    Same --> S3[状态管理]
    Same --> S4[样式写法]
    Same --> S5[错误处理]
    
    Template --> Diff[与范例不同的部分<br/>只描述差异]
    Diff --> D1[页面名称]
    Diff --> D2[搜索字段]
    Diff --> D3[表格列/表单字段]
    Diff --> D4[操作按钮]
    Diff --> D5[接口]
    Diff --> D6[特殊逻辑]
    
    Template --> Ignore[不需要处理的部分]
    Ignore --> I1[路由注册]
    Ignore --> I2[其他自定义配置]
    
    Same & Diff & Ignore --> Result[AI生成风格一致的代码]
    Result --> Success[开发效率提升]

范例式代码生成

参考 @[范例文件路径] 的代码结构和写法，
帮我生成一个新的 [页面/组件/service]。

与范例相同的部分（AI 自动学习，不需要描述）

• 组件结构、导入方式、状态管理、样式写法、错误处理

与范例不同的部分（只描述差异）

• 页面名称：[xxx]
• 搜索字段：[列出]
• 表格列/表单字段：[列出]
• 操作按钮：[列出]
• 接口：[列出]
• 特殊逻辑：[如果有]

不需要处理的

• [路由注册我自己加]
• [xxx]

---

**一句话总结：不要让 AI "从零创造"，让它"照着范例改"。一个好范例比 100 条规则都有效。**

---
💬 你们项目里有没有"标准范例"？还是每个人写的风格都不一样？