让 AI 做界面的正确姿势：先定方向，再并排挑，最后照真实截图磨

刷抖音刷到一个给 AI 用的 UI 设计 skill，叫 oil-ui。它那条「探索几种设计方向、并排摆出来让你挑、再照着真实截图打磨」的流程，确实解决了以前让 AI 做界面那种「直接给你一套 AI 味默认模板」的老问题。为了写这篇，我没只停在文档上，把它本地真跑了一遍，拿三个不同风格的图片工具首页喂进去，下面这些结论都是我自己跑出来的。

它到底在解决什么

一句话说清 oil-ui 的定位：它是一个「设计判断」的 skill，干的不是「生成 HTML」这种活。你让 AI 写个页面，通常它直接给你一套「左边大标题 + 右边说明图、处处圆角卡片、几个等宽指标卡」的东西。oil-ui 做的事是先不急着画，而是从产品本身推方向。

我读它的 SKILL.md，动手前它先逼着回答三件事：这是什么品类，用户来首屏看什么、做什么，同类最好的产品首屏和控件是怎么做的。方向只在这之上偏离，而且偏离必须能说出「来自这个产品的理由」。这套东西翻译成人话，它不让你从「简约」「大气」这种形容词出发，逼你从产品本身长出来。

再往下是那句让我印象很深的话：几个方向要真的不一样。版式、字体、配色和主视觉这几样里，任意两个方向最多只能有一样相同。小样做出来并排放着，眯起眼睛看首屏明暗，太像了就重新定版式，不靠换个颜色敷衍。

我一开始只用了它的一小半

抖音上演示的、我第一轮试出来的，基本是这条主线：探索方向，生成对比页，再照着真实截图打磨。这套流程已经能解决「整体用户体验」的问题了。但我在 references 目录里翻到一个清单，才发现它藏了不少没被演示过的功能。

截图还原：丢张图进去，它还你一个页面

这是我最想试的。README 里用法示例就写着「按这张截图还原页面，参考图里没有的手机布局也补上」。它不单纯照抄，拿参考图当视觉基线，确定参考视口和布局约束后再做，还带一个 --compare 参数，每轮改完拿生成结果和原图并排比对。对那种「我有一张很喜欢的设计稿，但不知道怎么写出来」的场景，这条命令比什么都实在。

只评审，不碰文件

README 里有这么一句用法：「只评审这个首页，告诉我哪里要改、怎么改，不要动文件」。这条我一开始完全没注意。它对应的是一个独立的评审模式，派一个「没看过制作过程」的子 Agent，只看当前画面、任务和约束，给你一份诊断报告，文件一个字节都不改。想让它干活还得另说，想让它挑毛病，它只挑。

一条命令出一整套证据

它的截图工具 shoot.mjs 有个 --evidence 参数。这一条命令能把状态图、并排图、遮字图、200% 放大图连同录屏一次全出齐。遮字图这个东西我得单独讲一下，它把首屏缩到 480px 宽看三秒，再把文字遮掉看三秒，逼你判断「这页面去掉文字还认不认得出来」。这是它评审手册里三秒测试的落地方案。

从博物馆和 NASA 搜素材

这个最意外。它带了一个 curate-media.mjs，信源包括材质库、欧美和日本的博物馆、图书馆馆藏，还有 NASA。搜出来的东西它标清楚哪些能放进页面（CC BY 署名）、哪些只能当参考。做复古风、展览页、科技感页面的时候，这比去图库搜「高级感背景图」靠谱得多。

我真跑了一遍：三个首页，喂进去就出对比页

说一百句不如跑一次。我在本机装了它，自己手写了三个不同风格的「图片压缩」首页当候选——一个极简留白、一个杂志编辑、一个深色工具风——然后用它自带的 build_explorer.py 把三个候选组装成对比页。一条命令，三个 HTML 变成一个 251KB 的自包含离线页面。

python3 scripts/build_explorer.py candidates --output style-explorer.html
# 返回：{"candidates": 3, "bytes": 251835}

接着用它的截图工具 shoot.mjs 给三个候选出并排图和遮字图。这一跑，我最意外的事发生了：截图工具不只是截图，它还自己检查页面，报出一堆「默认做法提示」。

它给我的三个候选各报了几条，而且精确到元素和数值：极简版那个「眉标 PICWORK · 图片工具」和「或点击选择文件」两处文字对比度只有 2.85:1、2.32:1，不达标；三个候选都被它点出「标题上方有眉标」这种模型默认做法。这不是我提前告诉它的，是它截图后自己算出来的。

对比页本身我也打开了，顶部有「并排 / 单张」和「桌面 1280 / 手机 390」两组切换，三个候选并排排开，每个下面都有一个「选择」按钮。点它会复制出一句「选 01 极简留白风」之类的话，你把它粘回给 Agent，它就接着那个方向往下做。整条链路是通的。

这里我要诚实交代一句边界。我能亲手跑的是这三个可执行的脚本——对比页生成、截图、遮字、素材检索。但「设计判断」本身（比如「这个品类首屏该放什么」「这两个方向撞不撞脸」）不是脚本，是 skill 里那一堆方法论文档，得靠宿主 Agent 有没有看图能力去执行。我在本机这个环境里，能把脚本部分完整验证，方法论部分只能读到、没法替你的 Agent 打包票。

源码里能挖到的细节

光看 README 会漏掉它真正的结构。SKILL.md 里有一段「选择范围」的表，把任务分成小改动、新界面、单组件打磨、存量改造、截图还原、UI 评审这几档，每档走不同的流程。小改动直接改，交付时一两句话带过；新界面才走完整的方向探索。这个分流我觉得是它最聪明的地方，很多 AI 设计工具不分青红皂白一上来就大动干戈。

工作区的约定也写得很清楚：任务里的候选、截图、素材缓存默认放项目里的 .oil-ui 目录，正式代码和线上资产仍写回项目，项目已有目录约定优先。也就是说它不会污染你的项目结构，中间产物自己收好。

还有版本检查，每次用之前先查一次有没有新版，最多每 10 分钟联网一次，只读 ui.oiloil.org 的公开版本列表，不上传你项目的内容。不想查就设 OIL_NO_UPDATE_CHECK=1。这种「默认只提示、不擅自下载替换」的边界，在同类 skill 里不多见。

它值不值得装，以及什么时候别用它

值。只要你是「想让 AI 做界面」的人，它几乎是目前这个方向上思路最完整的一套。但有几条边界得说清楚，也是它自己写在能力边界里的。

还有一层要摊开讲：它是开源版 + Pro 版的结构。开源版做「从空白到好看」，Pro 版（69 元买断）才覆盖交互状态、表单、弹窗、后台工作区、老项目改造、把单个组件打磨到极致这些。交互和响应式的实现规则，SKILL.md 里明说「不在本 Skill 内」。所以你拿它做纯展示页很爽，要做能点能填、状态齐全的产品页，它会在结尾提醒你去买 Pro。

这一点我其实挺认同。免费的部分把「设计判断」这件事做得很透，商业化的部分收钱，路线清楚，没有把开源版阉割到不能用。而且它配了两个兄弟项目，oil-motion 做滚动驱动的网页动画，oil-tone 把页面上像 AI 写的文案改得自然，正好补它不碰的两块。

一个 skill 把「先定方向再画」「并排对比挑」「照着真实截图磨」这三件事串成一条流程，还能拿截图还原、只评审不动手、一条命令出全套证据。你如果只把它当成「生成漂亮页面」的工具，其实亏了。