oil-ui：把 AI 的 UI 设计能力推到极限的开源 Skill

一、笔记原文#

最近看到 oil-ui 这个 Skill，专门用来提升 AI 的 UI 设计水平，先认清这是什么产品，找同类里风格最鲜明的两三家拆开看，再决定沿用什么、换掉什么。动手前先从能量、完成度、密度、分量、严肃度 5 个刻度定调性，「高级」「简洁」这类空词会被翻成用什么字、留多少白、颜色占多大面积。

GitHub：github.com/oil-oil/oil-ui

二、相关情报#

已抓取仓库 README 与版本记录（2026-10-07 最新 0.16.6，MIT 协议）。产品全貌：

• 定位：给 AI Agent 用的界面设计 Skill——「先拉开几种真正不同的设计方向放在一起让你挑，再照着真实画面打磨」，覆盖网站、App、后台、组件。展示页：ui.oiloil.org。
• 八步设计法（README 核心）：
  1. 先看清这是什么产品（认品类 → 找同类风格最鲜明的两三家拆解 → 决定沿用/换掉）；
  2. 把「高级」「简洁」翻成具体决定（定调性：热闹/安静、精致/粗粝、密/疏 → 转化为字体、留白、颜色面积）；
  3. 每个方向都从一样具体的东西出发（材质/场景/角色/跨域借形，不从「简约大气」出发）；
  4. 先想清首屏给谁看（看内容→首屏就是内容；说服→先定版式再写文案）；
  5. 几个方向必须真的不一样（版式/字体/配色/主视觉四项中，任意两方向最多一样相同；小样并排眯眼看明暗分布）；
  6. 留一处让人记住的地方（点按反馈、付款成功瞬间、AI 干活过程、404 页面，其余保持安静）；
  7. 好不好看由你来定（对比页挑一份，说喜欢/不喜欢哪里，再收紧）；
  8. 以真实画面为准（电脑+手机截图检查、独立评审挑问题、最后一轮做减法：一页一个主角）。
• 配套生态：draw-ui（先生图出设计图再实现——衔接「设计图对齐工作流」）、oil-motion（生成视频/序列帧做滚动动画）；Pro 版 69 元买断（含好用性、老项目改造、19 套卡片原型等）。

三、深度解读#

1. 这是「AI 设计上下文商品化」浪潮里定位最克制的一个：不卖模板、不卖组件，卖「设计决策流程」。 对比此前收集的工具（2026-10-04/1138 的 40 资源清单是「素材库」、1142 组件库是「零件」、SceneAI 是「话术」，oil-ui 是「工作方法论」）——它回答的不是「用什么」，而是「怎么决定用什么」。八步法把人类设计师的判断动作（认品类、拆对标、定调性、拉方向、挑刺、做减法）全部流程化，恰好补上 AI 生成设计最大的短板：AI 不缺美学素材，缺的是「先做排除、再做选择」的决策纪律。

2. 「5 个刻度定调性」的翻译机制值得单独记录。 「能量、完成度、密度、分量、严肃度」——这五个刻度把不可言说的审美（「高级感」）翻译成可执行的参数（字体、留白比、色彩面积）。这个「形容词 → 参数」的翻译动作是 AI 协作里最通用的能力模式：不只用于 UI，文案调性（品牌语气）、视频风格都可复制（如 huashu-art-motion 的风格卡也是同一原理）。

3. 「画多方向→并排对比→人挑」的结构解决了一个协作根本问题：验收标准。 AI 一次给一个方案时，用户说不清好坏（没有参照系）；给三个真正不同的方向 + 并排对比页，「挑一个 + 说哪里喜欢哪里不喜欢」立刻变得容易——这与「设计图对齐工作流」（1605）是完美组合：oil-ui 负责「出对的方向」，draw-ui 负责「把选中的方向画成图」，然后执行代码。

4. 与用户业务的三处接口：① 独立站迭代（Pro 版的老项目改造方法）；② 陪跑课的「落地型项目」——学员产品设计环节可直接装这个 Skill（设计决策流程成了教学内容的一部分）；③ 内容选题（「AI 做的 UI 为什么总是差口气」——八步法的通俗版讲解）。

四、标准化思路#

AI 设计协作链（三层工具·组合使用）

层	工具	作用
决策层	oil-ui（八步法 + 对比页）	认品类、定调性、拉方向、挑刺
出图层	draw-ui / 设计图对齐（1605）	把选定方向生成设计图
实现层	Coding agent（读图执行）	按图写码，验收还原度

动作项：① 安装 oil-ui 开源版试用一次真实需求（如独立站某页改版）；② 八步法摘要存入陪跑课产品设计模块；③ 「形容词 → 参数」翻译法记入内容写作工具箱。