这个刚开源一周的 Skill 极大的提升了 AI 的 UI 设计能力！八步设计法绝了！

油（oil-oil）是个老朋友了。之前他做过 beautify-github-readme，教 AI 把 GitHub README 排版成画廊级别；还有 oiloil-ui-ux-guide，一套风格中性的 UI/UX 咨询 Skill，教 AI 学会 CRAP 原则、Fitts’s law 这些硬规则。

但这些都是给 AI 当「老师」的，教它「什么是好的设计」。

这一次，他换了个思路。不再给 AI 灌设计理论，而是给它一套可以直接执行的设计方法论——像给设计师一张施工图纸，每一步都有具体的动作指引，从认品类到定稿，八步走完，出来的东西从骨架到调性到细节，全不一样。

这个项目叫 oil-ui，一个给 AI Agent 用的 UI 设计 Skill。

项目简介

先说清楚：oil-ui 不是一个独立的设计工具，也不是 Figma 插件。它是一个 Agent Skill —— 装在 Claude Code、Cursor、Codex 这些 AI 编程助手里，给它们「加一个 UI 设计的脑子」。

装完之后，你只需要像平时一样跟 AI 提需求：「给这个课程预约产品探索三种设计方向，做成可以预览的页面」。

但这次它不会直接吐一堆 Tailwind 类名出来，而是先问你：这是什么品类？同类产品里你欣赏哪两家？这次设计的能量级别是高还是低？

等它把这些问题的答案消化完，才开始动手。

oil-ui 的核心是那 八步设计方法，每一步都有明确的「要做什么」和「不做什么」，没有半句空话：

1. 先认品类，看同类最好的产品。

2. 先定调性。

3. 从具体的东西出发。

4. 先问首屏是给谁看的。

5. 检查方向之间的差别。

6. 留一处让人记住的地方。

7. 品味由你来定。

8. 以实际画面为准。

这八步看起来像一个资深设计师的工作流笔记，但真正厉害的是：它能被 AI Agent 直接执行。没有模糊地带，每个步骤都有可落地的判断标准和输出物。

02

PART

解决了什么问题？

oil-ui 解决的是当下 AI 生成界面的三个核心痛点：

痛点一：AI 不知道「好」是什么

传统的 prompt 工程告诉你「加阴影、用圆角、保持一致」，但 AI 还是会给你一个蓝白相间的 Dashboard，因为它见过的 UI 大部分都是这个样子。

oil-ui 的做法是先让 AI 跳出模板思维 —— 先看同类产品，先定调性，从具体材质出发。

痛点二：单一方向风险大

一次只生成一个设计方案，要么过要么不过，效率低。

oil-ui 默认一次出多个方向，每个方向在骨架、字体、色彩、主视觉上都不同，让你在对比中选，而不是盲猜。

痛点三：AI 默认审美是懒的

AI 倾向于选最安全的方案 —— Inter + Tailwind 默认调色板 + 8px 圆角 + 一层淡阴影。

oil-ui 通过「从具体的东西出发」和「检查方向之间的差别」两步，强制 AI 跳出舒适区。

03

PART

核心亮点

🎨 自带风格对比页

oil-ui 会自动把多个设计方向排在一起做成对比页，支持电脑和手机尺寸切换，可以点开看实际大小，用方向键翻看。

看中了点「选择」，它会把复制出来的一句话粘贴给 Agent，Agent 就接着往下做。

🎯 五种调性刻度

能量高还是低？完成度够不够？密度是疏松还是紧凑？分量感是轻还是重？严肃度是轻松还是正式？

这五个刻度是 oil-ui 方法论的精华 —— 把模糊的审美形容词翻译成 AI 能理解的数字。

🖼️ 52 个实作案例

ui.oiloil.org 上目前展示了 52 个作品，从音乐年度报告到胶片相机 App，从硬件官网到项目管理工具，每种品类都有两三个不同的方向。

值得注意的是，这些作品是用 GPT 6.1 Sol、GPT 6 Luna、Claude Opus 5.5、Claude Sonnet 5.5 等不同模型生成的 —— oil-ui 不是绑定某个模型，而是给任何模型的 Agent 都装一套方法论。

🔄 老项目也能救

如果你手里已经有一个跑起来但长得不太行的老项目，oil-ui 也有办法。

它会先分清：你是要优化 UI、改流程还是加新功能？然后给现有规范做个体检，按推翻程度出方案 —— 可以小改，也可以重做，还可以按产品负责人、设计师、用户三种立场出不同做法。

04

PART

怎么装？怎么用？

安装

两种方式，选你顺手的：

方式一：命令行（推荐）

npx skills add oil-oil/oil-ui


需要 Node.js 18 以上。如果你已经装了 Oil UI Pro，就不用再装开源版了，两个同时装会抢着接同一类请求。

方式二：用自然语言告诉 Agent

请帮我安装这个 Skill：https://github.com/oil-oil/oil-ui


让 Agent 自己判断用什么方式装，它会搞定。

关于版本检查

oil-ui 会在使用时触发版本检查，最多每 10 分钟联网一次，超过 2 秒没响应就跳过，不会拖慢你的任务。检查只读公开版本列表，不上传你的项目内容。

版本检查需要 Python 3（python3 或 python，Windows 用 py -3），没有 Python 3 只会提醒一次，设计任务照常继续。

想关掉版本检查？在环境变量里设 OIL_NO_UPDATE_CHECK=1 就行。

快速上手

装完之后直接提需求，不需要额外配置：

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


有品牌资料、截图或现成项目，一起交给它。没有参考也能开始，只有不清楚要交付什么时它才会问你。

///

LAST

写在最后

AI 写 UI 这件事，真正的瓶颈从来不是代码生成能力。

让它学会用 Tailwind 写出能用的组件不难，难的是让它知道为什么这个页面应该用衬线字体而不是无衬线，为什么那块区域应该留白而不是放图标。

oil-ui 没有教 AI 怎么审美，而是教它 怎么工作 —— 一套从认品类到定稿的完整工作流。

AI 执行这套流程，出来的东西从骨架到调性到细节，自然就跳出了模板思维。

项目地址：https://github.com/oil-oil/oil-ui

作品画廊：https://ui.oiloil.org