用 Oil UI 把多个 UI 设计方向并排摆在一起挑

让 agent 做「干净现代的落地页」，得到的是所有模型默认的那一种长相。Oil UI——与 oil-motion 同属 oil-oil 账号名下的 2k 星界面设计 skill——拒绝从形容词出发。它先探索几个真正不同的设计方向，并排摆出来让你挑，然后才照真实截图打磨选中的那版。网站、App、后台和组件都覆盖。

为什么这个 Skill 重要

README 的设计方法是 8 条规则，其中最有辨识度的几条都关于「不一样」。动手之前，skill 先说出产品属于哪个品类，再研究两三家同类里风格最鲜明的同行。每个方向都从一样具体的东西出发——一种材质、一个场景、一个角色，或者另一个领域的整套视觉语言——绝不从「简约」「大胆」这类词出发。而且「不一样」是条硬规则：版式、字体、配色、主视觉这四样里，任意两个方向最多只能有一项相同。两张小样长得像时，它改版式，而不是换个颜色。

方法的另一半关于谁来拍板。小样放进同一个风格对比页，你挑一个、说说喜欢和不喜欢哪里，它按你的意见收紧。「高级」「简洁」会被翻译成看得见的选择——用什么字体、留多少白、页面上颜色占多大面积。用来看、买、干活的页面，首屏就放内容本身；只有要说服别人的页面才需要先设计开场版式，并且要在写文案之前定下来。完成的页面以真实画面为准：在电脑和手机两个尺寸下打开页面、截图检查，也可以请一位没看过制作过程的评审来看，最后做一轮减法——一页只留一个主角，删掉无助于理解的文字、线和框。

安装

把这句话交给支持安装 skill 的 agent：

Install this skill for me: run npx skills add oil-oil/oil-ui

或者在终端运行：

npx skills add oil-oil/oil-ui

装好即用，不需要任何配置。有新版本时，agent 会在回复末尾提醒你，你让它更新才更新。README 有一条警告：已经装了 Oil UI Pro 的，不要再装开源版——两个会抢着接同一类请求。

实战：同一个产品的三个方向

1. 给 agent 一条 README 示例那样的任务：

"Use oil-ui to explore a few design directions for this course booking product and build pages I can preview."

2. skill 从题材、受众和品牌语气定调——热闹还是安静、精致还是粗粝、信息密还是疏——再从具体的起点做方向。品牌资料、截图、现成项目都可以一起给；没有参考也能开工，只有交付物不明确时它才会发问。
3. 打开自带的风格对比页。候选并排摆放——HTML 文件、图片、或正在运行的开发页面——你现在这版可以放第一个当对照。切换电脑和手机尺寸，点开看实际大小，用方向键翻看。
4. 看中的那份点「选择」，把复制出来的一句话粘回给 agent；它接着往下做，按你说的好坏收紧设计。
5. 让验证环节跑完：两个尺寸的截图、按需请独立评审、最后一轮减法，然后再收工。

技巧

• README 的用法示例本身就是一张工作模式菜单：给新产品探索方向、做三种字体配色构图都不同的设计、按项目现有规范润色页面、只评审首页不动文件、按截图还原页面并补上参考图里没有的手机布局。
• 开源版管的是把一个新页面从零做到好看。让界面更好用、改造老项目、流光和点阵这类特效、以 9 分为目标的更严格评审循环，属于 Oil UI Pro——README 的表格逐行标了差异，Pro 是一次买断。
• skill 使用时会检查新版本，最多每 10 分钟联网一次；只读取 ui.oiloil.org 的公开版本列表，不上传项目内容，默认只提示，不下载、不替换任何文件，除非你明确要求更新。设 OIL_NO_UPDATE_CHECK=1 可以关掉检查（需要 Python 3）。
• 和同一账号名下的姊妹 skill 搭配：Oil Motion 把生成的视频或序列帧变成由滚动和拖动驱动的网页动画——首屏要有很强的开场动画时用它；oil-tone 把标题、说明和介绍改得自然、清楚，中英文都行——文案读着像机器写的或别扭时用它。

何时不用这个 Skill

两条边界直接来自 README。给已上线的界面做好用性改造、改造老项目属于 Oil UI Pro 的范围——开源版只帮你分清需要三种做法（优化 UI、改流程、加新功能）中的哪一种。另外，要的是用生成的视频或序列帧做由滚动、拖动驱动的网页动画——也就是很强的开场——这类活该走 Oil Motion 的流水线，而不是 Oil UI。

查看 排行榜 了解更多 skill。