Oil UI

Oil UI是一个专门给 AI Agent 用的界面设计 Skill。它的核心目标很明确：先拉开几种真正不同的设计方向放在一起让你挑，再照着真实画面打磨。网站、App、后台、组件都能做。

目前已有 1.1k+ Star，MIT 开源，安装即用，适合 Claude Code、Codex、Cursor 等支持 Skill 的 Agent。

Oil UI 网站截图

它怎么设计？

Oil UI 不是简单让 AI「随便画个好看页面」，而是有一套可复现的设计方法：

1. 先看清产品：动手前先明确品类，找出同类中风格最鲜明的 2-3 个竞品，分析它们怎么做、为什么这么做，再决定哪些沿用、哪些换掉。
2. 把抽象词落地：「高级」「简洁」这些词人人会说，却很难落到画面。它会从题材、受众、品牌语气定下调性（热闹还是安静、精致还是粗粝、信息密还是疏），再翻译成具体选择：字体、留白、颜色占比。
3. 方向真正拉开：每个方向从具体灵感出发（材质、场景、角色，或跨领域整套表现），而不是从「简约」「大气」出发。版式、字体、配色、主视觉这四样里，任意两个方向最多只能有一样相同。小样并排放好，眯眼看首屏明暗分布，太像就重新定版式。
4. 首屏逻辑清晰：内容页、电商页、工具页，首屏就应该是内容本身；说服型页面才先定版式再写文案。
5. 留一处让人记住：不求整页都用力，只把一两处做到极致（按钮反馈、付款成功瞬间、AI 工作过程、404 页等），其余保持安静。
6. 以真实画面为准：做完会在电脑和手机尺寸下截图检查，也可以请独立评审挑问题。最后做减法：一页只留一个主角，删掉不影响理解的文字、重复的线和多余的框。

它还自带风格对比页：把多份设计（HTML、图片或正在运行的开发页面）并排放在一起，可切换桌面/手机尺寸、实际大小预览、方向键翻看。选中喜欢的那份，复制一句话发给 Agent，它就接着往下做。

安装与使用（超简单）

方式一：直接对支持安装 Skill 的 Agent 说
「请帮我安装这个 Skill：https://github.com/oil-oil/oil-ui」

方式二：终端一行命令

npx skills add oil-oil/oil-ui

装好就能用，无需额外配置。有新版本时 Agent 会在回复末尾提醒，想更新直接让它更新即可。注意：如果已经装了 Oil UI Pro，就不用再装开源版，两个同时装会抢同一类请求。

使用示例：

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

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

开源版 vs Pro

开源版已经能把一个新页面从头做到好看，覆盖设计方向、视觉层级、字体配色、留白、配图、动效、截图还原、小游戏节奏与实时 3D 等。

Pro 版（69 元一次买断，永久更新）在此基础上更进一步：更严格的独立评审（以 9 分为目标反复修改）、交互与状态打磨、表单/弹窗/浮层、后台工作区布局、老项目改造、组件极致打磨、流光/点阵/流动渐变特效等。适合对可用性和细节要求更高的项目。

写在最后

在 AI 写代码越来越快的今天，界面真正「好看又好用」反而成了瓶颈。Oil UI 把「探索方向 → 并排对比 → 真实截图打磨」这条流程固化成 Skill，让 Agent 不再只会生成千篇一律的 AI 味页面，而是能输出有性格、有记忆点的设计。