Oil UI

Oil UI 是给 AI Agent 用的界面设计技能：它先拉开几套真正不同的设计方向放在一起让你挑，再照着真实画面一步步打磨。网站、App、后台和组件都能做，最后交付设计说明、设计稿或可运行的界面。

效果预览

适用场景

• 从零设计一个新页面、新界面
• 为同一个页面探索几种完全不同的设计方向，并排比较后挑一个
• 对已有页面做视觉精修
• 按参考截图还原页面
• 只做界面评审，不改文件

核心能力

• 先看清是什么产品再动手：先说清属于哪一类，再找出同类里风格最鲜明的两三家，判断哪些沿用、哪些换掉。
• 把「高级」「简洁」翻成具体决定：先从题材、受众和品牌语气定调性，再把调性翻成字体、留白和色彩配比这类看得见的选择。
• 每个方向都从具体的东西出发：可以是一种材质和它所在的环境、一个场景、一个角色，也可以借用另一个领域的整套表现方式。
• 先定首屏骨架再写文案：看内容、挑东西或干活的页面，首屏就是内容本身；要说服别人的页面才先定首屏版式。
• 方向之间必须真的不一样：版式、字体、配色和主视觉这四样里，任意两个方向最多只能有一样相同；太像了就重新定版式，不靠换个颜色补救。
• 留一处让人记住的地方：只把一两处做到极致，比如点按反馈、付款成功的那一下、AI 干活的过程，或者一个 404 页面。
• 以真实画面为准：在电脑和手机尺寸下打开页面截图检查，并做一轮减法——一页只留一个主角。
• 带一个风格对比页：把几份设计并排放进同一个页面切换比较。

风格对比页

想比较几份设计时，它会把它们并排放进同一个页面。放进去的可以是 HTML 文件、图片，也可以是正在运行的开发页面，现在的版本可以放在第一个当对照。你可以切换电脑和手机尺寸、点开看实际大小、用方向键翻看。看中哪一份就点「选择」，把复制出来的一句话发给 Agent，它会接着往下做。

工作方式

1. 你把任务、品牌资料、截图或现成的项目交给它；没有参考也能开始。
2. 它从产品品类、首屏主角和同类标杆推出调性，拉开几套真正不同的设计方向。
3. 几份小样放进同一个对比页，由你挑一个，并说出具体喜欢和不喜欢哪里。
4. 它按你的意见收紧方向，再往下做完整版式和视觉。
5. 做完在电脑和手机尺寸下截图核对，必要时请一位不知道制作过程的评审挑问题，最后做一轮减法。

你需要提供

• 想要什么样的界面，以及是要设计说明、设计稿还是可运行的界面
• 可选：品牌资料、参考截图、现成的项目
• 需要实际视觉验收时，宿主 Agent 需要有看图能力；需要交互验收时，需要可操作的环境

你会获得

• 方向对比页（几套设计并排，可切换电脑和手机尺寸、打开实际大小、用方向键翻看；看中哪份点「选择」会复制一句话）
• 设计说明：用户任务、主动作、选定的风格和方向、关键状态、设备约束和验收重点
• 设计稿或可运行的界面
• 界面评审时的证据与修改建议

使用示例

• 用 oil-ui 给这个课程预约产品探索几种设计方向，做成可以预览的页面。
• 做三种字体、配色和构图都不同的设计，放在对比页里让我选。
• 帮我润色这个页面，按项目现有的设计规范来。
• 只评审这个首页，告诉我哪里要改、怎么改，不要动文件。
• 按这张截图还原页面，参考图里没有的手机布局也补上。

选型说明

| 精修细节清单与减法 | | ✓ | | 交互与状态、表单、弹窗浮层、多端布局 | | ✓ | | 后台与工具类布局 | | ✓ | | 老项目改造、单个组件打磨、卡片原型与特效 | | ✓ |

已经装了 Oil UI Pro 的话不用再装开源版，两个同时装会抢着接同一类请求。Pro 的说明在 ui.oiloil.org/pro。

搭配使用：

• draw-ui：先用生图工具出设计图，挑中了再照图实现。
• oil-motion：用生成的视频或序列帧做随滚动、拖动变化的网页动画。

注意事项

• 核心流程是宿主中立的文本流程，不依赖其他 Skill 或指定模型；可选的风格对比页生成器需要 Python 3.10+ 标准库，产物用现代浏览器打开即可。
• 本机地址候选需要对应的本地开发服务器在运行。
• 实际视觉验收需要看图能力，交互验收需要可操作环境，独立评审需要隔离上下文且能看图的执行者。这些条件不满足时，它只产出设计说明或代码，并明确标注「未验证实际视觉」。
• 组件归属、数据流、状态正确性和测试等代码实现质量不在范围内；纯业务逻辑、接口、构建部署、无界面变化的代码整理也不做。
• 使用时会进行版本检查：最多每 10 分钟联网一次，只检查和提示，不自动下载或替换本目录。结果缓存在 $XDG_STATE_HOME/oil/（默认 ~/.local/state/oil/）。不希望联网时，设 OIL_NO_UPDATE_CHECK=1 跳过。
• 许可：MIT