先说一个真实痛点：当你试图用 AI 快速搭建一个界面时，最令人崩溃的不是代码报错，而是功能跑通了，但界面丑到不敢示人。之前我们聊过 Figma 搭配 Codex 做 UI 的工作流，效果确实不错，但大家更关心的是——UI Skills 这类工具在实际开发中到底靠不靠谱？
所以这次做了一个直接、不加修饰的实测：用 Codex 生成一个简易记账 App，随后分别调用 UI Ux Pro Max 和 Frontend Design 两个 skill 来改造界面，再与 Figma、Stitch 等更成熟的 UI Agent 进行体感对比。没有复杂的评分表，也不堆砌 benchmark，更多的是真实使用中的判断与取舍，顺便也能当作一份入门教程。
大多数人在用 Codex、Claude Code 做界面时，目标从来不是打造惊天动地的产品。更多时候只是一个记账 App、一个后台页面、一个工具面板、一个表单、一个列表页。功能能用但不好看，能跑但拿不出手——这才是最真实的需求。所以这篇文章不只是一篇测评，更是一场“如何把粗糙界面一步步打磨到可交付状态”的实战记录。
1. 先安装 Skill，别把这事想复杂
UI Ux Pro Max 和 Frontend Design 的安装方式都很简单。找到对应的 GitHub 仓库，然后直接对 Codex 或 Claude Code 说“帮我安装这个 skill”即可。
UI Ux Pro Max 来自 nextlevelbuilder 仓库，Frontend Design 则来自 Anthropic skills 中的 frontend-design。装完后就能在对话中直接调用。Skill 本质上类似于给 Codex 植入一套“专业工作习惯”——并非换了一个更聪明的大脑，而是塞进一本更懂 UI 的工作手册。别期待它能一键变成 Figma 设计师附体，它更像一个能时刻提醒你“按钮要有状态、间距要成体系、页面不能像后端临时拼凑的实习作品”的助手。这已经非常实用了。
2. 先让 Codex 搭建基础框架
这一步很关键。不要一开始就让 skill 自由发挥。首先让 Codex 生成一个可运行的基础版本，比如这里的记账 App：包含账单总览、记账功能以及系统级基础简洁 UI。
为什么要先做普通版本？因为 UI Skills 最擅长的并不是凭空理解你的业务逻辑，而是在已有页面上将信息层级、布局、控件、视觉密度重新梳理一遍。从实际协作体验来看，和 Codex 做 UI 最高效的方式不是“帮我做一个惊艳的产品”，而是“这是现在的页面，它很丑，请按真实使用场景帮我改到能交付”。听起来不够燃，但确实管用。
3. 调用 Skill 生成设计方案
直接在 Codex 对话框中输入 @skill 名称即可调用，先让它输出设计方案。
方案出来后不要急着实施，先确认它是否理解了页面的目标。
比如记账 App，最重要的不是做大横幅或堆砌渐变卡片，而是让用户一眼看清本月花了多少、哪类支出最多、最近账单有哪些、记账入口在哪里。如果 skill 给出的方案一开始就放置巨大的 Hero 区和宣传文案，下面再放几个漂亮卡片，那就需要警觉了——这是使用 UI Skill 时最容易踩的坑。很多时候不是它审美不行，而是它太想表现自己，需要把它拉回到产品场景中。可以这样给出指令：“不要做成营销页面，把它当作每天打开三次的记账工具。信息密度适中，主要操作清晰可见，移动端不拥挤，颜色保持克制。”这种要求比单纯说“帮我美化一下”有效得多，因为它既明确了审美方向，也限定了使用场景。
4. 点击实施计划，但务必关注细节
点击实施计划后，很快就能得到优化后的新 UI。
这就是 skills 最大的爽点——它不只是一段设计建议，而是直接落地到代码中。先测试的是 UI Ux Pro Max。
两个 skill 的使用流程完全一致，直接跳到最终效果。
但这里有一个很现实的问题：落地之后一定要仔细检查细节。按钮内的文字是否被挤压、卡片是否套叠、移动端内容是否溢出、图标是否滥用、整体配色是否统一、空状态是否处理、表单是否有焦点状态。间距差一点、字号差一点、按钮状态差一点，页面气质就会从“产品”跌回“demo”。因此落地之后还应该多追问一句：“检查所有移动端宽度下是否有文字溢出”“减少装饰性卡片，优先提升记账操作效率”“把首页改成用户每天扫一眼就能用的工具，而不是介绍页”。这几句话，比单纯换一个 skill 更重要。
5. UI Ux Pro Max 和 Frontend Design 到底选哪个
两者效果相差不大，但 Frontend Design 在细节表现上会更胜一筹。这也容易理解——UI Ux Pro Max 从名字就能看出覆盖面更广，像一部 UI/UX 百科全书，适合需要更多风格、更多组件、更多设计维度的场景。
Frontend Design 则更像一位有审美洁癖的前端设计导师，更关注页面是否真正像一个可用的产品，而不是一张漂亮的截图。如果你想快速把一个普通工具页面变得好看，优先尝试 Frontend Design；如果想探索不同风格或做更复杂的 UI/UX 检查，再试试 UI Ux Pro Max。
6. 和 Figma 相比，Skills 的短板在哪里
从实际体验来看，与 Figma Make 这类 UI Design Agent 相比，skills 在审美和精致程度上仍有明显差距。这也可以理解：Figma Make 天生为视觉设计流程而生，画布、组件、布局、设计资产、预览体验都非常完整。而 UI Skill 运行在 Codex 或 Claude Code 中，主场是代码，因此它更适合做一件事：将代码中的界面快速提升到可用、顺眼、像个正经产品的程度。它不一定能给出最惊艳的稿子，但能以极低成本、极快速度、极贴近工程的方式优化——这就足够了。
尤其对独立开发者、小团队，或者经常想做点小工具的人来说，skills 的成本优势非常突出。Figma Make 需要实打实付费订阅，而 skills 主要消耗 Codex 中的 token。一个是设计平台路线，一个是工程协作路线。建议很简单：早期快速把页面做出来，用 Codex 或 Claude Code 配合 Frontend Design 多尝试几个风格，后期再用 UI Ux Pro Max 补充一轮。到了正式上线发布，或者需要给客户看的高精度视觉稿时，再考虑 Figma、Stitch 这类 UI Agent 精修。不要在毛坯阶段就追求米其林摆盘。
这次测评最有价值的点，并不是证明哪个 skills 天下第一，而是提醒我们：AI 写代码这件事已经进入了一个微妙的阶段。以前担心的是功能能否写出来，现在的问题是——它写出来的东西，是否像人做的、是否不显寒酸。UI Skills 正好卡在这个位置上。它不是终点，但足以把很多人的起点向前推一大截。以前可能需要懂 Tailwind、懂组件库、懂响应式、懂一些产品审美，才能把一个小工具做得像样；现在至少可以把页面丢给 Codex，然后说：按一个真实产品的标准改。它会犯错，会偶尔用力过猛，会审美跑偏。但只要你会看、会追问、会把它拉回实际使用场景，它就能帮你磨掉很多粗糙感。
普通人做产品，最难的往往不是没有想法，而是每一步都差一点：代码差一点，界面差一点，文案差一点，发布差一点。差着差着，人就放弃了。而这些 skill 的价值，就是一点点抚平那些“差一点”。不神奇，但很实用。
