让AI帮我把前端页面画得更好看

发表于 分类于 Waline：

前端用 AI，不只是让它写代码。更有价值的是让它帮我们看页面、拆问题、定风格、验收效果。

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

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

所以我现在更倾向于把 AI 当成一个前端页面助手来用。
先让它分析，再让它动手。

我常用的几个 skill

下面这些是我觉得前端比较值得用的方向。
有些是 Codex 官方能力，有些是我本地安装的 skill。这里要说清楚一点：本地 skill 不代表没有线上来源，只是运行时主要读本地文件，可离线使用为主。

名称 链接 我主要怎么用
Codex Skills 官方文档 了解 skill 是什么，怎么让 AI 按固定规则做事
Codex Plugins 插件文档 想把自己的 skill、MCP、工具打包成插件时看这个
Codex Browser 浏览器能力 改完页面后，让 AI 打开页面检查错位、溢出、空白
Figma + Codex 前端 UI 实战 从 Figma 还原页面，或者对照设计稿改前端
Playwright 官网 自动化检查页面、截图、测试不同宽度
impeccable 官网 本地 UI/UX skill，偏设计执行流程、质量规则和页面验收，也有更新入口
ui-ux-pro-max 官网 本地设计知识库 skill，偏风格、配色、字体和案例参考，主要读本地数据
vue-admin-template-dev 本地 skill 按自己的 Vue 后台模板规范写页面，不乱改目录和组件

所以更准确的说法是：impeccable、ui-ux-pro-max 都是本地安装、可离线使用为主，同时有线上主页或上游来源。
区别是 impeccable 更像“设计执行流程 + 质量规则 + live 工具”，ui-ux-pro-max 更像“本地设计知识库搜索器”。

如果只是普通写代码，不一定要用 skill。
但是如果要做页面效果、设计风格、响应式、交互体验，用 skill 会稳定很多。

我一般怎么问

不要一上来就让 AI 改代码。

我会先这样问：

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

等 AI 分析完，我再决定哪些要改。
这样比直接“帮我美化”靠谱很多。

后台页面要特别加约束

后台系统不是官网。
后台页面更重要的是清楚、稳定、好操作。

我一般会补一段约束：

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

这个约束很重要。
不然 AI 很容易把一个普通列表页改成宣传页。

改完以后一定要验收

前端页面不能只看代码。
我现在一般会让 AI 改完以后继续检查：

1
2
3
改完以后打开浏览器检查页面。
检查 1440px、768px、375px 三个宽度。
重点看文本溢出、按钮错位、弹窗遮挡和异常空白。

这一步很有用。
很多 AI 写出来的页面，代码看起来没问题，但是浏览器一打开就能看到问题。

我的使用习惯

简单说就是：

  1. 新页面先定风格。
  2. 旧页面先评审问题。
  3. Vue 后台项目先套项目规范。
  4. 改完一定要让浏览器验收。

一句总结

前端用 AI，重点不是让它多写几行 CSS。

而是让它按这个流程来：

1
分析页面 -> 确认方向 -> 加约束 -> 分模块修改 -> 浏览器验收

skill 的作用，就是让 AI 在某个领域更稳定。
比如做 UI 时像设计师，写 Vue 后台时像项目成员，验收页面时像测试。

这样用下来，AI 才是真的在提高前端开发能力，而不是只是在帮我们堆代码。

-------------本文结束感谢您的阅读-------------