oil-oil/oil-ui · 上手攻略
- 仓库：oil-oil/oil-ui
- 链接：https://github.com/oil-oil/oil-ui
- 分类：AI 工具 · 设计工作流
- 作者：Tom
- 更新：2026-10-06
这是什么
oil-ui 是一个 AI 原生 UI 设计方法论框架，本质上是一套结构化设计流程（不是 Figma 插件，也不是代码库），通过一套明确的步骤让 AI Agent 生成高质量、可交付的网页或 App 界面设计。
它以 Claude Code Skill（或兼容 npx skills 的 Agent）的形式分发，安装后直接把设计任务交给 Agent，Agent 按照 oil-ui 的方法论执行：定调性 → 探索方向 → 对比选择 → 精修交付。不需要手动在设计工具里拖拽，AI 替你完成整个设计流程。
⚠️ 开源版（Oil-ui）和付费版（oil-ui Pro，69 元买断）并行存在，核心流程方法相同，Pro 版额外提供交互状态、后台布局、流光/点阵特效等高级场景。
解决什么问题
- AI 生成 UI 质量不稳定：纯 prompt 驱动生成的页面往往风格模糊、细节缺失、无法交付。oil-ui 提供了一套系统化的设计工作流，把"生成"变成"先探索再确定"的迭代过程。
- AI 和设计师之间的协作障碍：传统方式下 AI 生成的图需要人工还原成代码，而 oil-ui 让 AI 直接在代码层面生成可运行的页面（或 HTML 片段）。
- 非设计师也能做出专业界面：方法论把设计判断分解成可执行的步骤，降低了"设计品味"的门槛。
- 设计决策有据可查：每轮产出都有对比页和独立评审记录，交付物清晰可追溯。
快速安装
方式一：直接告诉 Agent 安装（最简单）
把这句话发给支持 Skill 的 Agent（Claude Code 等）：
请帮我安装这个 Skill：https://github.com/oil-oil/oil-ui
方式二：命令行安装
npx skills add oil-oil/oil-ui
⚠️ 需要 Node.js 18 以上。如果环境同时有 Python 3，版本检查功能可用（最多每 10 分钟联网一次，2 秒超时，不影响任务执行）。
验证安装
# 安装后直接使用，无需额外配置
# 可选：检查更新
python <安装路径>/scripts/check_update.py
⚠️ <安装路径> 在 npx 安装模式下通常位于 ~/.npm/_npx/ 或项目本地 node_modules/.bin/，具体路径可用 npx which oil-oil/oil-ui 或查看安装日志确认。
核心用法
基础使用流程
安装好后，直接用自然语言描述设计任务，Agent 会按 oil-ui 方法论执行。示例：
用 oil-ui 给这个课程预约产品探索三种设计方向，做成可以预览的 HTML 页面。
（附上产品描述或截图）
方法论核心七步
第一步：认品类——说出产品是什么，找出同类中风格最鲜明的两三个产品，拆解它们的设计逻辑，决定哪些沿用、哪些改变。
第二步：定调性——从题材、受众和品牌语气推导出五个刻度：能量、完成度、密度、分量、严肃度。把"高级""简洁"这类形容词翻译成具体可见的决策：用哪些字体、留多少白、颜色占多大面积。
第三步：从具体出发——每个方向从一个具体的引擎开始：一种材质加一个环境、一个场景、一个角色，或者另一个领域的整套表现形式。内容从产品本身找，不从"简约""大气"这类形容词出发。
第四步：首屏判断——来看内容/挑东西/干活的页面，首屏就是第一排内容本身；要说服人的页面，才去选首屏骨架。同一轮里骨架互不相同，左右分栏布局最多出现一次。
第五步：方向差异性检查——骨架、字体、色彩、主视觉四项中，任意两个方向最多共享一项。把小样并排，眯眼看首屏明暗块面，太像就重选骨架。
第六步：留一处记忆点——不求整页都用力，只把一两处做到极致：一次点按的反馈、付款成功的那一刻、AI 干活的过程、一个 404 页面。其余保持安静。
第七步：以实际画面为准——在电脑和手机尺寸下截图检查，可请未看过制作过程的独立评审看一轮。最后做减法：一页只有一个主角，删掉不影响理解的文字、重复的线和多余的容器。
典型使用场景命令
# 探索多种设计方向，做成对比页
"用 oil-ui 给这个课程预约产品探索几种设计方向，做成可以预览的页面。"
# 多方向对比选择
"做三种字体、配色和构图都不同的设计，放在对比页里让我选。"
# 润色已有界面
"帮我润色这个页面，按项目现有的设计规范来。"
# 设计评审
"只评审这个首页，告诉我哪里要改、怎么改，不要动文件。"
# 按截图还原（含响应式）
"按这张截图还原页面，参考图里没有的手机布局也补上。"
Oil UI Pro 进阶能力（付费）
| 能力 | 开源版 | Pro 版 |
|---|---|---|
| 定调性、拉开方向、定骨架、检查差异 | ✅ | ✅ |
| 风格对比页 | ✅ | ✅ |
| 独立评审（9 分目标 / 三轮修改） | ❌ | ✅ |
| 交互和状态 | ❌ | ✅ |
| 后台和工具类页面布局 | ❌ | ✅ |
| 流光、点阵、流动渐变 SVG 特效 | ❌ | ✅ |
| 老项目改造方法论 | ❌ | ✅ |
典型适用场景
| 场景 | 适合程度 | 说明 |
|---|---|---|
| AI Agent 直接生成可交付页面 | ★★★★★ | 核心设计目标 |
| 非设计师快速出设计稿 | ★★★★ | 方法论降低门槛 |
| 多方向并行探索与对比 | ★★★★ | 对比页机制成熟 |
| 现有项目设计评审与润色 | ★★★★ | 按规范评审，不乱改 |
| 复杂交互 / 后台系统设计 | ★★ | Pro 版才完整支持 |
| 高保真运营设计（流光特效等） | ★★ | 需要 Pro 版 |
坑与注意
-
开源版 ≠ 完整功能：Pro 版（69 元）才是全功能版本，开源版覆盖基础流程，但交互、状态、后台布局、流光特效等均缺失，购买前先确认需求落在哪一版。
-
版本检查可能触发网络：默认每 10 分钟最多一次版本检查，2 秒超时，网络波动时不阻塞但无法提示新版本。离线环境需设
OIL_NO_UPDATE_CHECK=1关闭检查。 -
Skill 路径依赖 npm / npx：没有 Node.js 18+ 环境则命令行安装方式失效，但"告诉 Agent 安装"的技能安装方式仍可能通过 Agent 的内置能力解决（⚠️ 取决于具体 Agent 实现）。
-
输出是代码/HTML，非设计稿文件：oil-ui 最终交付的是可运行的页面或代码片段，不是 Figma/Sketch 文件。如果团队工作流必须用设计软件交付，需要额外转换步骤。
-
对比页依赖人工判断：方法论提供了方向差异性检查工具，但"哪个方向更好"的最终决策需要人来拍板，不适合完全无人工介入的自动化场景。
-
Windows / Linux 桌面端实测不足：README 明确说明只在 macOS 做了实机验证，Windows 和 Linux 尚未测试，命令行安装可能遇到路径或环境兼容问题（⚠️）。
-
Pro 版购买渠道：Pro 版在 ui.oiloil.org/pro 购买，一次买断永久更新，暂无开源替代。
与同类对比
| 工具 | 类型 | AI 集成方式 | 输出格式 | 定价 |
|---|---|---|---|---|
| oil-ui | 方法论框架 | Claude Code Skill | HTML / 代码 | 开源免费 / Pro 69 元 |
| Figma AI | 设计工具插件 | 内嵌生成 | .figma 文件 | 订阅制 |
| Galadriel | AI 设计助手 | 独立平台 | 设计稿 + 代码 | 订阅制 |
| Locofy | AI 代码转换 | Figma 插件 | 前端代码 | 订阅制 |
| Maze | AI 原型 | 独立平台 | 可交互原型 | 订阅制 |
| draw-ui（同一团队） | 生成式设计 | 生图→代码 | 设计图 → 实现 | 开源 |
结论：oil-ui 的差异化在于"方法论优先"——不追求一键出图，而是让 AI 按设计专业逻辑一步步探索，特别适合需要交付代码而非设计稿的 AI 应用开发流程。相比纯生成工具，它更可控、更可解释。
一句话推荐结论
oil-ui 是目前把结构化设计方法论封装得最完整的 AI Skill，适合需要 AI 生成可交付代码页面的开发者；追求高质量 Figma 稿的项目建议用 Figma AI 或 Locofy。