UI设计Skills到底有没有用，我拿Codex跑了一遍

事情是这样的。

之前分享了用 Figma 配合 Codex 做 UI 这个工作流，实际效果还挺出乎意料的。

现在AI写UI，让我已不再硬凹审美了

但我同时也在想 UI Skills 的效果又会如何？

于是我测试了在 Codex 中跑 UI Skills 的流程，这个测评不会有花里胡哨的 benchmark，没有复杂到看不懂的评分表，仅限我本人的真实感受。

我会先用 Codex 做一个非常简单的记账 App，然后分别用 UI Ux Pro Max 和 Frontend Design 这两个 skill 去改 UI，再和 Figma、Stitch 这种更成熟的 UI agent 做个体感对比。

顺带给大家做一个直观的参考。

首先大部分人用 Codex、Claude Code 做界面，不是要做什么惊天动地的产品。更多时候就是一个记账 App，一个后台页面，一个工具面板，一个表单，一个列表页。

不好看，但能跑，能跑，但不想给别人看。

这才是最真实的需求。

所以今天这篇我不想写成单纯测评，我更想把它写成一个小教程，顺便聊聊我自己的判断。

如果你想用 Codex 或 Claude Code 做 UI，别一上来就问哪个 skill 最强。

你应该先问，自己是否能跑通整个流程，会卡在哪一步。所以整个文章就以最初的流程开始：

1、先装 skill，别把这事想复杂

UI Ux Pro Max 和 Frontend Design 的安装方式都不复杂。

你找到 GitHub 仓库，然后直接对 Codex 或 Claude Code 说，帮我安装这个 skill。

UI Ux Pro Max 是 nextlevelbuilder 的那个仓库，Frontend Design 是 Anthropic skills 里面的 frontend-design。

UI Ux Pro Max：

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Frontend Design：

https://github.com/anthropics/skills/tree/main/skills/frontend-design

等它装完以后，基本就能在对话里直接调用了。

很多朋友可能不知道，skill 这玩意其实有点像给 Codex 加了一套「专业工作习惯」。

不是换了一个更聪明的大脑，而是给它塞了一本更懂 UI 的工作手册。

所以你不要期待它一键变成 Figma 设计师附体。

它更像一个会提醒 Codex，按钮要有状态，间距要成体系，页面不要像后端临时糊出来的实习作品。

这已经很有用了。

2、先让 Codex 搭框架

这一步很重要。

不要一开始就让 skill 自由发挥。

可以先让 Codex 做一个能运行的基础版本，比如我让 Codex 开发的是记账 App，功能很简单，账单总览，记账，系统级基础简洁 UI。

为什么要先做普通版本？

因为 UI skills 最擅长的不是凭空理解你的商业宇宙，它擅长的是在一个已有页面上，把信息层级、布局、控件、视觉密度重新整理一遍。

我自己的感受是，和 Codex 协作做 UI，最舒服的方式不是「帮我做一个惊艳的产品」，而是「这是现在的页面，它很丑，帮我按真实使用场景改到能交付」。

听起来没那么燃。

但真的有用。

3、调用 skill 出设计方案

我们直接在 Codex 的对话框中 @ skill 的名称就能调用 skill，让它先出设计方案。

方案出来后不要急着点实施，你要看它有没有理解页面的目标。

比如记账 App，最重要的不是做一个大横幅，也不是塞一堆渐变卡片。

它应该让用户一眼看到这个月花了多少，哪里花得多，最近账单是什么，记账入口在哪里。

如果 skill 给你的方案上来就是一个巨大的 hero 区，一堆宣传文案，下面再放几个漂亮卡片，那你就要警惕了。

不是哥们，我只是想记账，不是要融资路演，这也是我觉得用 skill 做 UI 时最容易踩的坑。

很多时候它不是审美不行，而是太想表现自己，你得把它按回产品场景里。

可以这样给指令：不要做营销页，把它当成每天打开三次的记账工具。信息密度要适中，主操作明显，移动端不要拥挤，颜色克制一点。

你看，这种要求就比「帮我美化一下」强很多。

因为它给了审美方向，也给了使用场景。

4、点实施计划，但要盯细节

点击实施计划以后，很快就能得到设计好的新 UI。

这就是 skills 最大的爽点，它不是只给你一段设计建议，然后让你自己慢慢改，它可以直接落到代码里。

我先测试的是UI Ux Pro Max 。

两个 skill 的使用流程都是一样的，不再重复说明 Frontend Design 的使用流程，我们直接跳到最终的效果。

但这里有个很现实的问题，落地之后一定要看细节。比如按钮里的字有没有挤压，卡片是不是套卡片，移动端有没有溢出，图标是不是乱用，颜色是不是整个页面都一个色系，空状态有没有处理，表单有没有焦点态。

如果间距差一点，字号差一点，按钮状态差一点，页面气质就从「产品」掉回「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设计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 的价值，就是把那些「差一点」磨平一点。

不神奇，但很实用。

既然已经看到了这里，正好也对 AI 感兴趣，不如点一个关注🌟哇，有趣有料的AI一手掌握，也欢迎点赞👍、转发🫴和推荐❤️～