前端AI实践

---

前端用 AI，不只是让它写代码，更重要的是给它规则，让它按项目里的 UI 规范来工作。

最近用 Codex 写前端比较多，我发现一个问题：

如果只说“帮我美化一下页面”，AI 很容易把页面改得很花。
比如加卡片、渐变、大圆角、阴影，截图看着热闹，但放到真实项目里不一定好用。

这不是 AI 不会写 CSS，而是它缺少约束。

前端页面不是单纯追求好看，还要考虑项目风格、信息层级、组件规范、响应式、空状态、错误状态、加载状态。
尤其是后台系统，重点不是像官网，而是清楚、稳定、好操作。

所以我现在更倾向于用 skill 来约束 AI。

为什么需要 skill

prompt 解决的是“这一次我要你做什么”。

skill 解决的是“以后遇到这类问题，你都应该按什么规则做”。

普通 AI 直接改 UI，常见问题是：

1. 容易过度设计。
2. 容易忽略项目已有组件。
3. 容易只看桌面端，不看移动端。
4. 容易只改样式，不管交互状态。
5. 容易把后台页面做成宣传页。

skill 就像给 AI 加了一层项目经验。
它让 AI 不只是凭感觉“美化”，而是先看业务场景，再按项目规范改，最后检查页面效果。

我常用的几个工具

名称	链接	我主要怎么用
Codex Skills	官方文档	了解 skill 怎么让 AI 按固定规则做事
Codex Plugins	插件文档	把自己的 skill、MCP、工具打包成插件
Codex Browser	浏览器能力	改完页面后打开浏览器检查效果
Figma + Codex	前端 UI 实战	从 Figma 还原页面，或对照设计稿改前端
Playwright	官网	自动化截图，检查不同宽度
impeccable	官网	本地 UI/UX skill，偏 UI 质量规则和页面验收
ui-ux-pro-max	官网	本地设计知识库 skill，偏风格、配色、字体和案例参考
vue-admin-template-dev	本地 skill	按自己的 Vue 后台模板规范写页面

更准确地说，impeccable、ui-ux-pro-max 都是本地安装、可离线使用为主，同时有线上主页、上游来源或更新入口。

这几个 skill 分别做什么

ui-ux-pro-max 负责定方向。
比如页面要更清爽、更像工具型产品，先从风格、配色、字体、布局里找参考，避免一开始方向就跑偏。

impeccable 负责看 UI 质量。
它更像一个审核清单，重点看首屏、按钮层级、间距、文案、空状态、错误状态、响应式这些问题。

vue-admin-template-dev 负责守项目规范。
后台页面不能只看单页效果，还要跟整个系统一致：目录怎么放、组件怎么拆、表格弹窗怎么写、路由菜单怎么加，都要按项目习惯来。

Browser 和 Playwright 负责验收。
AI 改完页面以后，不能只看代码，还要打开浏览器检查文本溢出、按钮错位、弹窗遮挡、移动端横向滚动这些问题。

简单说就是：

设计参考 -> UI 质量规则 -> 项目规范 -> 浏览器验收

我现在怎么用

我一般不会直接让 AI 改页面，而是先让它评审：

你先不要改代码。
先站在真实用户的角度看这个页面。
重点看首屏信息、主按钮、信息层级、布局间距、响应式和异常状态。
先列问题和修改建议，等我确认后再动手。

如果是后台页面，我会再加一句：

这是后台管理系统页面，不要做成官网风格。
保持当前项目已有组件风格。
不要加无意义装饰，不要为了好看改变业务流程。

这样做下来，AI 改前端会稳定很多。
它不只是会写代码，而是更像按前端 UI 的流程工作：先判断问题，再按项目风格修改，最后检查有没有改坏。