一个让我警醒的瞬间
上周组会，实习生小王展示了他用 Cursor 做的项目：一个完整的后台管理系统，页面精美、交互流畅、代码规范。
"花了多久？" 我问。
"两天，AI 写了 80% 的代码。"
会后我偷偷看了他的代码，确实不错。那一刻我突然意识到：如果前端工作只是"写页面"，那我和实习生的差距还剩多少？
这个问题让我焦虑了好几天。但后来我发现，答案不是"防御 AI"，而是"学会用 AI"。
过去一个月，我重新调整了工作方式，今天分享一些实践经验。
第一步：把 AI 变成你的"初级搭档"
我的第一个改变是：把 AI 当作一个随时待命的实习生。
从"随便写"到"精确指挥"
一个月前，我的提问是这样的：
"帮我写一个登录表单"
AI 给出的代码能跑，但问题一堆：
- 没有表单验证
- 样式混乱
- 没考虑响应式
- 用户体验差
现在我学会了这样提问：
角色：你是资深 React 开发专家
任务：实现一个登录表单组件
技术栈：React 18 + TypeScript + Tailwind CSS
功能要求：
- 包含邮箱和密码输入框
- 实时表单验证（邮箱格式、密码长度 ≥ 8）
- 错误提示显示在输入框下方
- 提交时显示 loading 状态
- 支持键盘回车提交
性能优化：
- 使用 useCallback 避免不必要的重渲染
- 防抖处理邮箱格式验证
代码规范：
- 遵循 Airbnb 规范
- 添加完整的 TypeScript 类型定义
- 添加详细注释
这次 AI 生成的代码质量完全不同，基本可以直接使用。
我的发现：前端开发中，90% 的代码问题源于需求不清晰。
建立你的 Prompt 工作流
我整理了一套前端常用的 Prompt 模板：
【组件开发】
角色 + 技术栈 + 功能 + 样式 + 性能 + 可访问性
【代码审查】
审查以下代码的：
1. 性能问题（重渲染、内存泄漏）
2. 安全问题（XSS、注入）
3. 可访问性（A11y）
4. 代码规范
【Bug 排查】
错误信息：[完整错误堆栈]
代码上下文：[相关代码]
期望行为：[应该怎样]
实际行为：[现在怎样]
有了这些模板，我的开发效率至少提升了 40%。
第二步：聚焦 AI 做不到的事
但很快我发现，效率提升不等于价值提升。
真实案例：一个活动页面的故事
上个月做个双十一活动页面。我让 AI 生成了布局、动画、倒计时等所有代码，两个小时就完成了。
第二天产品找我："用户点击率不到 5%，远低于预期。"
我重新看了页面，技术实现没问题，但：
- 主按钮不够突出
- 优惠信息看不懂（"满 300 减 50" 不如 "省 50 元"）
- 倒计时反而制造焦虑
- 页面太长，核心信息被淹没
我意识到：AI 可以写出完美的代码，但它不理解用户心理。
后来我做了几个改动：
- 主按钮放大 1.5 倍，从蓝色改成红色
- 文案从"满减"改成"到手价"
- 去掉倒计时，加上"限量 100 份"
- 折叠次要信息，首屏只留核心卖点
点击率立刻涨到 18%。
这个经历让我明白：前端工程师的价值不在于写页面，而在于理解用户、理解业务、做出正确决策。
你的新角色定位
现在我把自己定位为三个角色：
1. 用户体验的守护者
产品说："加个弹窗提示用户优惠。"
我会问：
- 什么场景下弹？（进入页面？停留 5 秒？）
- 怎么弹？（全屏遮罩？右下角提示？）
- 用户能关闭吗？关闭后还会出现吗？
- 对用户体验的影响？
AI 能写弹窗代码，但这些决策必须我来做。
2. 技术架构的设计者
最近团队接了个大项目，需要选技术方案。我问 AI："Next.js 还是 Remix？"
AI 给了一长串对比。但最终决策考虑的是：
- 团队对 SSR 的熟悉程度
- SEO 的重要性
- 部署成本
- 未来 3 年的技术趋势
这些权衡，只有我最了解。
3. 代码质量的守门员
现在我每天要审查大量 AI 生成的代码。我的 checklist：
- ✅ 性能：有没有不必要的重渲染？
- ✅ 安全：用户输入有没有做转义？
- ✅ 可访问性：键盘能操作吗？屏幕阅读器能读吗？
- ✅ 兼容性：Safari 能正常显示吗？
- ✅ 边界情况：断网了怎么办？数据为空怎么展示？
有次 AI 给我写了个无限滚动列表，代码很漂亮，但我发现：
- 没做防抖，滚动卡顿
- 没清理事件监听，内存泄漏
- 没考虑 Safari 的滚动事件差异
这些问题，需要丰富的实战经验才能发现。
第三步：建立你的能力矩阵
一个月的实践，我总结出前端工程师需要的能力矩阵：
基础层（可被 AI 辅助）
- 写标准化组件
- 实现基础交互
- 调用 API
- 写单元测试
策略：这些交给 AI，节省时间
核心层（需要深度理解）
- 性能优化
- 复杂状态管理
- 工程化配置
- 浏览器兼容性
策略：理解原理，用 AI 加速实现
高价值层（AI 难以替代）
- 用户体验设计
- 技术架构决策
- 业务理解和抽象
- 跨团队协作
策略：这是你的护城河，持续深耕
我的实践方法
1. 每周复盘一个线上问题
上周线上出现白屏，我花了半天定位：
- 原因：第三方 JS 加载失败
- 为什么没发现：本地环境网络正常
- 如何避免：添加资源加载监控 + 降级方案
这个过程让我理解了前端监控的重要性，这是 AI 教不会的。
2. 主动参与产品讨论
现在每次产品评审，我都会：
- 画出用户使用流程图
- 指出可能的体验问题
- 提出技术方案的优劣
上次我提出："这个功能入口太深，用户根本找不到。"产品采纳后，使用率从 3% 涨到 15%。
3. 深度学习一个领域
今年我选了"性能优化"作为深度学习方向：
- 读了《Web Performance in Action》
- 优化了 3 个线上项目
- 在团队做了 2 次分享
- 写了 5 篇技术文章
现在团队有性能问题，大家会来找我。这是我的专业护城河。
一个月后的变化
现在回看，这一个月最大的变化不是效率提升，而是心态转变。
之前：
- 担心 AI 取代自己
- 拼命学新框架、新工具
- 觉得写代码越快越牛
现在：
- 把 AI 当工具，专注更高价值的事
- 深耕业务理解和用户体验
- 觉得做出正确决策才是核心能力
一个具体的对比：
之前做需求：接到 PRD → 开始写代码 → 提交代码 → 完成
现在做需求：
- 理解需求（为什么做？用户价值？）
- 设计方案（架构、交互、数据流）
- AI 辅助实现
- 审查优化（性能、安全、体验）
- 数据验证（用户反馈、埋点数据）
时间没少花，但产出的质量和影响力完全不同。
给前端同行的建议
如果你也在思考如何应对 AI，我的建议是：
1. 立即开始用 AI 不要等，不要怕。选一个工具（Copilot、Cursor、Claude），今天就集成到工作流。
2. 改变工作重心 从"写代码"转向"做决策"。多问为什么，多思考方案，多理解业务。
3. 建立一个深度领域 选一个方向（性能优化、可视化、动画、工程化...），深耕下去，成为专家。
4. 提升软技能 学会和产品沟通、和设计协作、和后端联调。这些能力，AI 永远替代不了。
写在最后
前端这个职业不会消失，但一定会分化。
被淘汰的： 只会按 PRD 写页面的"页面仔" 被成就的： 理解用户、理解业务、会用工具的"产品工程师"
AI 不是威胁，而是筛选器。它筛掉了那些只会重复劳动的人，留下了那些真正创造价值的人。
你的选择是什么？
你在前端工作中是如何使用 AI 的？有什么心得或困惑？欢迎评论区交流~
