Oil UI Skill 技能

技能简介

Oil UI 是一个给 AI 代理用的界面设计技能。它不会一上来就给你一版看着还凑合的页面，而是先并排探索几个真正不同的设计方向，让你挑一个，然后对着真实截图一轮轮收紧。网站、应用、仪表盘、组件都能用，MIT 许可，装上就能用，无需配置。

核心能力

• 多方向并排探索：版面、字体、颜色、主视觉四项里，任意两个方向最多只能共用一项。预览做出来后会把首屏的明暗块并排眯眼看，两个方向太像就改版面，而不是换颜色糊过去。
• 把高级感、干净这类空话翻译成具体决策：先从题材、受众、品牌语气定出基调，是活泼还是沉静，是精致还是粗粝，是密集还是留白，再落成字号、留白比例和彩色占比。
• 从实物起手：每个方向都从具体参照出发，一种材质、一个场景、一个角色，或者另一个领域的视觉语言，而不是从极简、大胆这类形容词出发。
• 首屏归属判断：浏览、购物、办事类页面，首屏就该是内容本身；只有说服型页面才需要先设计一个开场版式。
• 内置对比页：三个方向放在同一页，可以切桌面与手机尺寸、按实际尺寸打开、用方向键浏览；点一下复制一句话贴回代理，它就从那个方向继续做。
• 留一个记忆点：不做全局堆料，只让一两个细节超标，比如点按反馈、支付成功、AI 工作的状态、404 页面，其余保持安静。
• 真实屏幕验收：做完在桌面和手机尺寸各打开一次看截图，还能拉一个没看过过程的人来评审，最后做一轮减法，每页一个焦点，删掉所有不帮助理解的文案、线和框。
• 截图复刻：给一张截图就能重建成页面，并补上移动端布局。

安装配置

1. 让能装技能的代理自己装：告诉它安装这个技能，运行 npx skills add oil-oil/oil-ui。
2. 或者直接在终端执行 npx skills add oil-oil/oil-ui，装完即用，不需要任何配置。
3. 用 DeepSeek Harness 的话装原生插件：dsh plugin --profile web add github:oil-oil/dsh-oil-ui，它内置免费版，也会自动识别本地是否装了 Pro。
4. 已经有 Pro 就不必再装开源版，两个都装会互相抢同一个请求。

使用步骤

1. 把需求说清楚，比如让它为这个课程预约产品探索几个设计方向，并搭出能预览的页面。
2. 想要对比就明说：出三个字体、配色和构图都不同的方案，放在同一页对比页上让我挑。
3. 有品牌素材、截图或现有项目就一起给它；没有也能开始，只在交付物不明确时才追问。
4. 在对比页里挑一个方向，把喜欢和不喜欢的点讲清楚，它据此继续收紧。
5. 要改现有页面就说用项目现有设计规范润色这个页面；只想听意见就加一句不要动文件。

适用场景

• 新产品落地页与官网首屏：从零开始搭出一版有辨识度的设计。
• 已有项目改版：它先判断你需要的是界面刷新、流程修复还是加新功能，再按对应路径做。
• 仪表盘与工具型界面：按产品类型选工作区版式，并保持整站一种风格。
• 小程序与轻量游戏：节奏、手感、生成素材与实时三维效果。
• 设计评审：只出评审意见与改造方案，不落文件。

适用人群

独立开发者、全栈工程师、没有专职设计师的创业团队、接外包的前端，以及想快速拿到可讨论方案的产品经理。

工作原理

它把一套人类设计师的工作方法写成可执行步骤：理解产品，定基调，转成可见决策，并排探索，让人挑，对着真实截图验收，最后做减法。每次使用时它会检查是否有新版本，最多每十分钟联网一次，只读取官方站点的公开版本列表，不上传项目里的任何内容；默认只提示不自动替换，除非你明确要求更新。结果缓存在用户目录的本地状态文件夹里，需要 Python 3，设置环境变量 OIL_NO_UPDATE_CHECK=1 可以关掉检查。

开源版与 Pro

开源版负责把一张新页面从空白做到好看。Pro 是一次性买断、终身更新的付费版，在此之上补可用性，包括交互与状态、表单、弹层、桌面与移动布局；另外还有既有项目改造路径、独立评审的反复打磨、十九个带代码的卡片原型、光轨与点阵等效果，以及小游戏场景布局。

官方链接

• GitHub：https://github.com/oil-oil/oil-ui
• 设计画廊：https://ui.oiloil.org
• 许可：MIT