oil-ui 开源 AI 设计 Skill：UI 设计不再抛硬币

让 AI 帮你做个页面，最怕它交来一版「说不出哪不对，但就是记不住」的默认模板：左边一个大标题、右边一小段说明、满屏圆角卡片，好看是好看，换掉 logo 谁都能用。

GitHub 上有个叫 oil-oil/oil-ui 的项目，把「让 AI 做 UI」这件事推到了另一个方向：不追求一次就出完美页面，而是先拉开几种真正不同的设计方向让你挑，再照着真实画面打磨。写这篇时它 1094 个 star、60 个 fork，MIT 协议，仓库语言标的是 Python。

一句讲清它干嘛用：它是一套给 AI Agent 用的界面设计 Skill，帮 Agent 把一个页面从「五花八门的想法」逐步收拢成「你一版一版挑出来的成品」。 网站、App、后台、组件都能做，作者叫 oil-oil。

先横向看看，平时大家怎么让 AI 出页面

在掏出 oil-ui 之前，先摆一下市面上现有的做法，跟它都不是一回事。

做法	怎么看	卡在哪
直接让通用 Agent 出页面	说一句「做一个高级的落地页」，等它直接交 HTML	形容词落不到画面上，出来的多是默认模板
问 AI 要「3 个方案」	让 Agent 一次给三版	三个往往只是换个颜色，骨架同一个，没得选
用文生图工具出设计图	画一张漂亮的效果图	图不能点、不能滚动，落到真实页面就崩
找人外包/自己做	从零到一画线框、调字体配色	慢、贵，改一版要半天

共同毛病很明显：要么形容词翻译不成具体决定，要么「多方案」只是做样子，要么效果图跟真实页面脱节。 oil-ui 的办法是给「做 UI」套上一层流程：先出风格卡片你挑风格，再出版式方案你挑方向，最后照着真实截图返工，每一步都留给你拍板。

它是什么：一套给 AI Agent 的「设计方法 + 工具包」

oil-ui 不是你能直接用的设计软件，是一个 Skill。这个词要解释一下：它不是一段单独的程序，而是一整套「给 AI Agent 看的说明书 + 参考资料 + 辅助脚本」，装进 Agent 之后，Agent 就按这套方法来给你做设计。

仓库里能点进去看到的东西，大概分三层：

• SKILL.md：整套方法的主文件，用一段话描述——「设计、改进、评审网站、App、后台和组件的界面」，只管设计判断，不管业务逻辑
• references/：十几份方法细则，比如怎么定设计方向、怎么写文案、怎么做动效、评审怎么打分
• scripts/：辅助脚本，比如出风格卡片、生成对比页、自动截图和探测动效

这套东西的安装方式简单到可以复读：把 https://github.com/oil-oil/oil-ui 这个地址交给支持装 Skill 的 Agent，或者终端跑一句 npx skills add oil-oil/oil-ui。装好不用额外配置，直接告诉 Agent 你要什么就行。

它怎么做事：一套「先拉开、再挑选」的流程

oil-ui 的做法写在 README 里，一共八步，核心就一条：别让 AI 猜你心里那个「高级」长什么样，而是让它把几种可能摊开给你选。

开头两步最值得细看。

第一步，把「高级」「简洁」翻译成具体决定。 这是整个项目的灵魂。它认定形容词是设计里最没用的词——高级、精致、克制、简洁，人人都会说，却落不到画面上。做法是先定调性，再一步步翻成看得见的选项：

模糊词	翻译成什么
高级	先说是哪一种高级，再定字体的对比、分隔方式、间距尺度和颜色数量
精致	公差：字距怎么调、对齐到几像素、阴影最多几级
克制	饱和度预算，比如强调色不超过画面 10%
简洁	密度档位，以及删掉什么、为什么删

翻译不出具体决定的词，直接从理由里删掉。这一条放在任何设计团队里都能当规矩用。

第二步，把「设计方向」做成能挑的东西，而不是形容词。 它不让你对着空气说「来个简约的」，而是先用脚本生成 4–6 张风格卡片——每张是一套配色、字体、圆角和版式示意，并排放进同一个对比页里给你看。你挑中一张，定了调性、配色和字体；下一轮它再基于这张卡片出 2–3 个版式方案，还是放进对比页，再挑一次，最后才做完整页。

为了逼出「真的不一样」，它还立了一条硬规矩：版式、字体、配色、主视觉这四样里，任意两个方向最多只能有一项相同，而且不按明暗分方向（一个亮一个暗一个暖是最典型的偷懒）。对比页里可以切电脑/手机尺寸、点开看实际大小、用方向键翻看，看中哪份就点「选择」。

关键：它怎么证明「好看」，而不是 AI 自卖自夸

设计这行最说服不了人的，就是「我觉得好看」。oil-ui 在这里用上了最接近测试工程的手段——独立评审 + 证据链。

页面做完，主 Agent 会派一个独立的子 Agent 来评审。这个评审者被刻意做得「没有历史包袱」：不给它看源代码、不给它看作者的思考过程、不给它看之前打过的分数，保证它每次都是盲审。它的打分锚点非常严苛：

• 10 分：挑不出可观察的缺陷，且至少一处是品类里没见过的好做法
• 7 分：方向成立，但有一处会让人丢数据、走错、卡住，或首屏仍带明显的「模型默认模板」
• 5–6 分：能看出方向，但骨架是模型默认模板
• 1–4 分：主任务走不通，或有重叠、裁切、看不清这种基本错误

评审手册里那句「不要因为自己是 AI 就给出友善的虚高分数」，可能是整份文档里最难能可贵的态度。

动效的验证更是严格到像在做验收测试。三处基本动效（主操作反馈、一次状态切换、首次进入的出场）各要交一段录屏，或开始、中间、结束三帧；动效证据分三档写明缺口：没做（页面上确实没有）、没交（有但没给证据）、工具没拍到（动画被探测漏了）。三种在补齐之前，总分一律不超过 8 分。 只有静态截图，绝不允许声称动效已经通过。

仓库自带的截图脚本 shoot.mjs 就是这个证据系统的生产工具：--states 拍多个状态、--mask 遮字、--zoom 放大、--motion 探测动效、--record 录屏，每个都自动检查控制台错误和横向溢出，明细写在 report.json 里。

测试开发视角，最值得借走的是什么

站在测试的立场，oil-ui 整份仓库里最耐琢磨的不是设计，是它的评审协议——那套说法，跟测试开发天天在做的事是一模一样的。

传统测试最头疼的验收口径是「功能是不是做对了」。oil-ui 把同一套思路搬进了「界面好不好看」这种主观判断，靠三个设计把它做成可操作的：

一是盲审。 评审者不碰源代码、不碰制作过程，只看真实画面。这等于给「好看」加了对照组——武断的「我觉得可以」失效了，只有画面自己说话。做测试的都知道，开发者自测自己代码最不可信，原因就是太熟、太会替自己找补；这里用隔离子 Agent 治的正是这个病。

二是打分明码标价。 分数不是感觉分，是一套锚点：丢数据、走错、卡住比视觉问题更优先扣分，模型默认模板有专门的扣分档。这就是把「验收标准」从形容词翻译成了可观察的行为——和「别把形容词当验收」是同一个道理。

三是证据三档 + 扣分封顶。 「没做」「没交」「工具没拍到」三种缺口分得清清楚楚，补齐之前总分不超过 8 分。动效没录屏 = 没交证据，按缺陷扣；只有静态截图不许说过动效。这套证据链思维，落到业务侧就是现成的门禁意识：界面交付不是凭一句「做得挺好看」，而是要能交出让第三方照单检验的证据。

落到测试开发日常，有几个当场能借的点：

• 评审也要隔离：给任何「评审」类的 Agent 或人工环节划一条线，不喂过程信息，逼它只看产物
• 形容词进验收单就删：把上面那套模糊词翻成字距、网格、色相数量等可量化的项，翻译不出来的直接踢出标准
• 证据缺口要分级：是没做、没交还是工具漏检，堵死不写「未验证」就放行

它值不值得装，取决于认不认这个前提：「好看」跟「好用」一样，是能被验证的，只要不把形容词当验收。 如果认，oil-ui 给的不只是一套设计流程，更是把主观审美拆成可检验指标的一组示范。作者还把进阶能力做成了 69 元一次买断的 Pro 版，但把新页面做到好看、再带独立评审打分，开源版已经够用了。

仓库地址：https://github.com/oil-oil/oil-ui

#AI设计 #UI设计 #Agent #Skill #开源项目 #测试开发 #设计评审