前段时间我开源了界面设计 Skill Oil UI，目前仓库已经积累了 1200 多个 Star，同时我也上线了配套的作品画廊（ui.oiloil.org）和付费版 Oil UI Pro。很多朋友安装之后好奇怎样才能发挥出它的最佳效果，这次我用一个简短的狼人杀介绍页需求，完整跑一遍从安装、多方向同屏对比到子 Agent 自动评审迭代的实际流程。
开源版与 Pro 版的安装流程
开源版 Oil UI 的安装非常直接。复制仓库里的安装命令，在本地终端或任意 AI Agent 会话里执行，脚本就会从 GitHub 拉取 Skill 文件。像 Codex、Cursor 这类采用通用规范的工具默认直接生效；如果要安装到 Claude Code 或 OpenClaw 等工具中，只需在终端交互列表里按空格勾选对应客户端，再按回车即可完成配置。
如果使用的是付费版 Oil UI Pro，同样先把安装命令粘贴给任意 AI Agent。Agent 执行命令后会自动在浏览器里拉起登录授权页，输入邮箱并填入收到的邮件验证码，页面就会生成一个 CLI 授权认证码（尚未订阅的账号会在此处先跳转至购买页面）。点击「允许」完成授权后，终端会提示 Oil UI Pro 安装成功，随后在对话输入框里敲入 /oil-ui-pro 就能直接调用。
从一句自然语言到三版视觉方向同屏对比
调用 Oil UI 处理新建页面或旧页面重构时，不需要编写冗长专业的提示词，像日常对话一样说出需求即可。在这次演示中，我只给 Agent 发送了一句话：「帮我做一个狼人杀的页面介绍这个游戏，我喜欢黑暗风格的。」
收到需求后，Agent 没有立刻埋头堆砌代码，而是先顺着 Skill 的引导流程，用文字拆解出三个截然不同的视觉意象：
- 方向一「一夜」：模拟守在村口熬一整夜的氛围，采用夜靛底色搭配窗灯琥珀色，页面随纵向滚动从天黑推进到天亮。
- 方向二「审判」：做成贴在广场木桩上的 16 世纪欧洲木刻审判告示，炭黑底色配骨纸色大字，并用血红色墨迹划掉被放逐的名字。
- 方向三「牌桌」：采用黑色毛毡牌桌的俯视视角，顶光只照亮桌面与围坐的七张身份牌。
如果在文字阶段就已经明确看中了某一个方向，可以直接让 Agent 顺着该方案深入实现。但如果拿不准哪种版式实际落地更好看，可以让它把三个方向的首屏都做出来。
随后 Agent 会生成一个可视化对比页面（style-explorer.html），把三版首屏并排放在一起：第一版是雪夜村庄与「天黑请闭眼」的宋体系排版，第二版是带有木刻狼头与超大号「谁是狼」字样的海报版式，第三版则是居中聚光的暗色牌桌。在浏览器里直观对比后，我觉得前两版效果都不错，最终挑了更有中式木刻海报张力的第二版「审判」。点击卡片下方的「选择」按钮复制指令并粘贴回 Agent 会话，它就会锁定这个方向继续完成整页设计，并按 Skill 的配图规范一次性生成风格统一的五张角色插图，再自动裁切嵌入页面。
如果是基于现有项目新增功能页面，Skill 则会走另一条分支：先读取并梳理项目已有的设计规范，然后在保持同一套视觉风格的前提下，一次性生成弹窗、抽屉、独立详情页等 3 种不同的 UX 交互方案供同屏对比。
无上下文子 Agent 的独立视觉走查
当主 Agent 完成了狼人杀介绍页的初版开发后，我先在浏览器里滚了一遍未优化的版本：整页采用了很大胆的巨型文字排版，在滚到「女巫」「天亮了」等环节时加入了黑白昼夜反转、黑白线条滤镜以及点击投票放逐的交互，底部还设计了可一键复制发到群里的「召集令」。但初版也暴露出几个明显的毛病，比如角色介绍展开时的动画一顿一顿不够丝滑，部分滚动过渡区域存在留白断层。
这时不需要我手动截图去挨个指出毛病。主 Agent 判断初稿写完后，会自动调用 Skill 内置的整页截图与动效帧对比脚本（免去了模型自己消耗 Token 临时编写截图工具的步骤），并启动一个不携带此前对话上下文的独立子 Agent，专门对着真实渲染出来的页面截图做挑刺评审。
在第一轮评审报告里，子 Agent 直接列出了三类硬伤：固定导航栏没有背景底色导致滚动时与正文互相叠字、第三节进出场存在纯黑死屏与 250px 的断层空白、淡色大数字与角色插图互相遮挡冲突；同时还从精致度、设计感和动效三个维度给出了提升清单。
更有意思的是第二轮评审。当上下文变长以后，不少模型在执行修改时容易偷懒或遗漏，这次主 Agent 就只修了一部分问题。无上下文的子 Agent 在复查截图后，毫不客气地只给打了 7 分（满分 10 分），逐条指出它的间距调整没做到位、设计感和动效优化漏了一半，甚至因为改动引入了新的排版瑕疵。被子 Agent 拦下后，主 Agent 只能继续自我迭代，最终把卡顿的展开动画、桌面布局和胜负判词排版全部修顺。
为什么不建议用弱模型直接调用
从上面的流程可以看出，Oil UI 给到 Agent 的不仅仅是一份审美知识文档，更像是一套带工具脚本、对比模板与验收闭环的完整产品。它不拘泥于某一种固定视觉风格，目标是激发模型原本的设计潜力与自我修正能力。
市面上有些设计类 Skill 声称能让能力很弱的模型也做出漂亮页面，通常是因为它们在 Skill 里塞满了某一种特定风格的现成代码模板，一旦离开那个风格就不再适用。而想要既保持跨场景通用、又能做深度视觉迭代，Skill 内部必然包含多步流程路由与多份细分规范文档。
这也决定了调用 Oil UI 时存在明确的模型能力边界：我不建议使用能力偏弱的轻量模型（例如 Claude Haiku 或 GPT Luna）直接运行这套 Skill。弱模型的问题往往不在于缺乏创意，而是在读完入口文件后，无法稳定路由去读取落地页、配图或评审等下游规范文件；即便启动了子 Agent，到了长上下文修改阶段也经常缺斤少两。
在实际开发中，我更推荐用中档及以上的模型——例如国产模型里的 GLM 5.3、千问 3.8 Max、Kimi K3，或者海外模型里的 GPT-6.1 Sol（画廊里很多作品就是用它生成的）、Claude Sonnet 与 Opus——来调用 Oil UI 完成前期的风格探索与核心页面打底。等视觉基调与设计规范确立好之后，再把后续常规业务页面的搭建交给成本更低的模型去执行。