本文已同步发布到微信公众号「码途进化论」
前言
不是标题党，真实工作流分享。
两年前我每天花 8 小时写代码，其中至少 5 小时花在重复性工作上：写表单、调接口、写类型定义、查文档、写测试...
现在我把这些重复工作交给 AI，每天 3 小时完成核心开发，剩下的时间用来学习架构、做开源、或者早点下班。
这篇文章分享 7 个我每天都在用的 AI 提效场景，每个都有具体的工具、Prompt 和代码示例。看完直接用，今天就开始早点下班。
场景 1：用 AI 生成重复性组件代码
痛点： 表单、列表、表格，写一次就够了，但每次都要重新写。
工具： Cursor / GitHub Copilot
Before：
// 手写一个表单组件，30 分钟起步
function UserForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState('');
// ... 继续写 10 个字段
return (
<form>
<input value={name} onChange={e => setName(e.target.value)} />
// ... 继续写 10 个 input
</form>
);
}
After： 在 Cursor 里输入：
创建一个用户表单组件，包含字段：name, email, age, phone, address
使用 TypeScript + React Hook Form + Ant Design
需要表单验证：name 必填，email 格式验证，age 18-100
AI 生成：
import { useForm } from 'react-hook-form';
import { Input, Form, Button } from 'antd';
interface UserFormValues {
name: string;
email: string;
age: number;
phone: string;
address: string;
}
export function UserForm() {
const { register, handleSubmit, formState: { errors } } = useForm<UserFormValues>();
const onSubmit = (data: UserFormValues) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Form.Item label="姓名" validateStatus={errors.name ? 'error' : ''}>
<Input {...register('name', { required: '姓名必填' })} />
{errors.name && <span>{errors.name.message}</span>}
</Form.Item>
<Form.Item label="邮箱" validateStatus={errors.email ? 'error' : ''}>
<Input {...register('email', {
required: '邮箱必填',
pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: '邮箱格式不正确' }
})} />
{errors.email && <span>{errors.email.message}</span>}
</Form.Item>
<Form.Item label="年龄" validateStatus={errors.age ? 'error' : ''}>
<Input type="number" {...register('age', {
required: '年龄必填',
min: { value: 18, message: '年龄必须大于 18' },
max: { value: 100, message: '年龄必须小于 100' }
})} />
{errors.age && <span>{errors.age.message}</span>}
</Form.Item>
{/* phone, address 字段类似 */}
<Button type="primary" htmlType="submit">提交</Button>
</form>
);
}
耗时： 2 分钟生成 + 3 分钟微调 = 5 分钟 节省： 30 分钟 → 5 分钟
场景 2：用 AI 写正则和工具函数
痛点： 正则表达式永远记不住，每次都要查 MDN。
工具： 任何 AI 对话框（Claude / DeepSeek / 通义千问）
Prompt：
帮我写一个正则，验证中国大陆手机号：
- 11 位数字
- 以 1 开头
- 第二位是 3-9 之间的数字
再写一个 JavaScript 函数，用于格式化手机号：
13812345678 → 138-1234-5678
AI 返回：
// 手机号正则
const phoneRegex = /^1[3-9]\d{9}$/;
// 格式化函数
function formatPhone(phone) {
return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
}
// 测试
console.log(phoneRegex.test('13812345678')); // true
console.log(formatPhone('13812345678')); // "138-1234-5678"
耗时： 1 分钟 节省： 查文档 30 分钟 → 1 分钟
场景 3：用 AI 做代码 Review 和重构建议
痛点： 自己写的代码看不出问题，等上线才发现 bug。
工具： Cursor / Claude
Prompt：
请 Review 这段 React 代码，指出：
1. 潜在的性能问题
2. 可能的 bug
3. 可以改进的写法
4. 是否符合最佳实践
[粘贴你的代码]
AI 典型反馈：
- 「这个 useEffect 缺少依赖项，可能导致闭包问题」
- 「这个状态可以用 useMemo 缓存，避免重复计算」
- 「建议把这个大组件拆分成 3 个小组件」
- 「这里有可能的 XSS 风险，建议用 DOMPurify 处理」
价值： 相当于有个免费的高级工程师帮你 Review 耗时： 2 分钟 节省： 自己排查 1 小时 + 被 bug 折磨半天
场景 4：用 AI 生成 TypeScript 类型定义
痛点： 后端接口字段几十个，手写 interface 写到手软。
工具： 任何 AI + JSON 示例
Prompt：
根据这个 JSON 示例，生成 TypeScript 的 interface 定义：
{
"id": 1,
"name": "张三",
"email": "zhangsan@example.com",
"roles": ["admin", "user"],
"profile": {
"age": 25,
"address": "北京市朝阳区"
}
}
要求：
- 所有字段都是必填
- 嵌套对象也要生成对应的 interface
AI 返回：
interface Profile {
age: number;
address: string;
}
interface User {
id: number;
name: string;
email: string;
roles: string[];
profile: Profile;
}
耗时： 2 分钟 节省： 30 分钟 → 2 分钟
场景 5：用 AI 写单元测试
痛点： 知道该写单元测试，但总觉得麻烦，一直拖着。
工具： Cursor / GitHub Copilot
Prompt：
为这个函数编写 Jest 单元测试，覆盖：
1. 正常输入的情况
2. 边界值
3. 异常输入
[粘贴你的函数代码]
AI 生成的测试用例：
describe('formatPhone', () => {
it('应该正确格式化 11 位手机号', () => {
expect(formatPhone('13812345678')).toBe('138-1234-5678');
});
it('应该拒绝非 11 位数字', () => {
expect(() => formatPhone('1381234567')).toThrow();
});
it('应该拒绝非数字输入', () => {
expect(() => formatPhone('abcdefghijk')).toThrow();
});
});
耗时： 5 分钟 节省： 1 小时 → 5 分钟
场景 6：用 AI 辅助写文档和注释
痛点： 代码写完，文档和 README 不想写，项目看起来不专业。
工具： 任何 AI
Prompt：
根据这个项目的代码结构，帮我写一个 README.md，包含：
1. 项目简介
2. 技术栈
3. 安装和启动步骤
4. 主要功能说明
5. 使用示例
[粘贴项目结构或核心代码]
AI 生成的 README：
# 项目名称
一个基于 React + TypeScript 的用户管理系统...
## 技术栈
- React 18
- TypeScript 5
- Ant Design 5
- ...
## 快速开始
npm install
npm run dev
## 功能
- 用户管理
- 权限控制
- ...
价值： 项目专业度提升，别人更容易理解你的代码 耗时： 3 分钟 节省： 1 小时 → 3 分钟
场景 7：用 AI 快速学习新技术/新库
痛点： 新库文档太长看不完，想快速上手。
工具： AI 对话 + 官方文档链接
Prompt：
我想学习 TanStack Query，请用 3 句话说清楚：
1. 它解决什么问题
2. 核心 API 有哪些
3. 给我一个最简单的使用示例
然后再给我一份「20% 核心功能覆盖 80% 场景」的学习路径。
AI 返回：
1. TanStack Query 解决的是服务端状态管理问题，
帮你处理缓存、重试、后台更新等逻辑。
2. 核心 API 就 4 个：useQuery、useMutation、
useQueryClient、useInfiniteQuery。
3. 最简单示例：
const { data } = useQuery(['todos'], fetchTodos);
学习路径：
- 第 1 天：学会 useQuery 基础用法
- 第 2 天：学会 useMutation 处理表单提交
- 第 3 天：学会缓存配置和失效策略
耗时： 15 分钟 节省： 看文档 2 小时 → 15 分钟
总结：AI 不是替代，是放大
看完这 7 个场景，你可能发现了：
AI 做的都是重复、机械、查文档的工作。
而你的时间，应该花在：
- 理解业务需求
- 设计系统架构
- 解决复杂问题
- 学习和成长
这才是 2026 年前端工程师的核心竞争力。
🎁 行动建议
今天就开始：
- 选上面 7 个场景中的 1 个
- 下次遇到类似工作时，用 AI 试试
- 记录你节省的时间
3 天后你会发现： 效率提升不是神话，是每天省下的 1 小时累积起来的。
💬 互动
你在前端开发中有哪些 AI 提效的心得？ 欢迎在评论区分享。
我会挑选 3 位读者，免费帮你 Review 一次代码。
📬 获取 Prompt 模板
文中所有 Prompt 我都整理成了模板，关注微信公众号「码途进化论」，回复关键词「AI 前端」即可获取。
包含：
- 7 大场景 20+ 模板
- 可直接复制使用
- 持续更新
如果觉得这篇文章有帮助，欢迎点赞 ❤️ 收藏 ⭐ 分享。
早点下班，多陪家人。🚀
关于作者
专注于 AI + 前端开发，帮助程序员用 AI 提效转型。
关注公众号「码途进化论」，获取更多：
- 前端 AI 提效实战
- 程序员转型指南
- 技术深耕与职业跃迁
