前端用 AI 提效的五个真实场景（附提示词）

前端是 AI 收益最直接的岗位之一，因为反馈快——改完刷新就能看。但也最容易用错：让它从零写一个页面，产出经常「能看但不能用」。这篇讲的是能落到日常的用法。

场景一：把设计稿描述成结构

别指望它看图还原像素。更有效的用法是：你描述结构（几个区块、层级关系、响应式断点），让它生成骨架和样式变量。

提示词结构：这段区域有哪几块 → 每块包含什么元素 → 交互状态有哪些（hover、禁用、加载）→ 用什么布局体系。把交互状态说全，产出可用率能翻倍。

场景二：旧组件改造成新规范

「把这个组件从 class 改写成 hooks」「把 inline style 换成统一的样式变量」——这类改造规则明确、模式固定，是 AI 最稳的战场。

关键是先给一个「标准样本」：贴一个已经符合新规范的组件，说「照这个风格改」。有样本比讲十条规则有效。

场景三：样式疑难排查

布局塌陷、层级错乱、移动端错位这些，AI 排查效率很高——前提是你把上下文给全：

• 给 DOM 结构（不要只给一段 CSS）。
• 给父级的定位和尺寸约束。
• 说清「期望什么效果、实际什么效果」。
• 三者齐全，多数情况一次能定位；缺任何一个，它就开始猜。

场景四：接口联调与 mock 数据

后端没好时，让它按接口文档生成类型定义 + mock 数据 + 错误分支处理。这类代码机械但费时，交给它省下的时间很实在。

顺便让它把 loading、空状态、错误重试三种分支一起补上——这些是你赶进度时最容易漏、上线后最容易出问题的部分。

场景五：性能与体积优化

给它打包分析结果或性能面板数据，让它指出「哪几个依赖值得拆、哪些图片该压缩、哪些组件该懒加载」。

这类分析它做得比人快，但结论要自己判断——它可能建议拆一个其实很小的包。所以让它按影响大小排序，你只处理前三项。