workbuddy_skills/oil-ui-pro/README.md

中文 · [English](README.en.md)

# oil-ui-pro

给 AI Agent 用的界面设计方法：先拉开几种真正不同的方向放在一起让你挑，再照着真实画面反复打磨。网站、App、后台和组件都能做，也可以只请它做评审。

想看更多设计效果，可以去 [ui.oiloil.org](https://ui.oiloil.org)。

## 安装

把这句话发给你的 Agent：

```text
帮我安装 Oil UI Pro：运行 npx github:oil-oil/oil-cli install oil-ui-pro
```

也可以自己在终端运行这行命令。第一次安装会打开浏览器，用购买时的 oiloil 账号登录，点“允许”就行。

装好就能用，不需要额外配置。有新版本时，Agent 会在回复末尾提醒你，想更新直接让它更新就行。装了 Oil UI Pro 就不用再装开源版 Oil UI，两个同时装会抢着接同一类请求。

## 使用

直接把任务告诉 Agent，例如：

- “用 oil-ui-pro 给这个课程预约产品探索几种设计方向，做成可以预览的页面。”
- “做三种字体、配色和构图都不同的设计，放在对比页里让我选。”
- “保留现在的品牌和布局，把这个表单的层级、报错和手机上的操作改好。”
- “帮我润色这个页面，按项目现有的设计规范来。”
- “只评审这些界面，告诉我哪里要改、怎么改，不要动文件。”

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

## 它怎么做

- **先拉开方向，再由你来挑。** 它会先弄清这是什么产品、同类里做得最好的几家是怎么做的，再从产品本身推出调性，拉开几个具体的方向。每个方向先定首屏的版式再写文案，并检查几个方向是不是真的不一样。小样放进同一个对比页，由你选定，再说说喜欢和不喜欢哪里。
- **留一处让人记住的地方。** 不求整页都用力，只把一两处做到极致，比如点按时的反馈、付款成功的那一下、AI 干活的过程，或者一个 404 页面，其余地方保持安静。
- **照着真实画面反复改。** 做完会在电脑和手机尺寸下截图检查，再请一位没看过制作过程的评审来挑问题、打分。改完再评，目标是 9 分，最多三轮。有好几个方向时，还会横向比一次，找出彼此雷同的区块；做新界面时，评审会真的按任务把页面用一遍。
- **把界面做得好用。** 交互和状态、表单、弹窗和浮层、电脑和手机上的布局，都有具体的做法。后台和工具类产品会按它处理的对象挑合适的工作区布局，让风格从首屏一直贯穿到页面底部。
- **一个组件也能打磨到极致。** 先做出一个视觉主角，比如一张写实的产品渲染图，从它取色，再定一个贯穿始终的图形母题。接着出两三张草图，只挑一张深化：每个状态都做出画面，主操作直接作用在主视觉上，拖动时结果当场出现。然后一轮轮放大检查，最后附上一张作品图和一段操作录屏。
- **老项目先弄清你要什么。** 嫌不好看，它会先判断现有的设计规范值不值得保留，再按改动大小给你几个方案，从“整理一下”到“重塑”。嫌难用，它会亲手把任务走一遍，找出步骤为什么变多，从结构上改，而不是加一行提示了事。要加新功能，它会先读懂产品原有的习惯，再给出几种真正不同的做法，视觉沿用现有的系统。改动都落在共享的组件和设计变量上；只改一个按钮这样的小事，就直接改。

视觉层级、字体、配色、留白、配图、动效、滚动叙事，以及流光、点阵、流动渐变这类特效，都有对应的方法。它不会把所有产品做成同一种风格，也不会每个页面都去生图、加动画或加特效，只在用得上的地方才用。

## 自带的风格对比页

想比较几份设计时，它会把它们并排放进同一个页面。放进去的可以是 HTML 文件、图片，也可以是正在运行的开发页面，现在的版本可以放在第一个当对照。你可以切换电脑和手机尺寸、点开看实际大小、用方向键翻看。看中哪一份就点“选择”，把复制出来的一句话发给 Agent，它会接着往下做。

## 版本检查

每次使用时，Skill 会检查一次有没有新版本，最多每 10 分钟联网一次。它只读取 ui.oiloil.org 公开的版本列表，不上传项目内容；默认只提示，不下载、不替换任何文件，只有你明确要求更新时才更新。检查结果缓存在 `~/.local/state/oil/`（设置了 `XDG_STATE_HOME` 时用它，Windows 在 `%LOCALAPPDATA%\oil\`）。需要 Python 3；不想检查时设置环境变量 `OIL_NO_UPDATE_CHECK=1`。

## 搭配使用

- [oil-motion](https://github.com/oil-oil/oil-motion)：用生成的视频或序列帧做随滚动、拖动变化的网页动画，比如产品拆解、镜头穿越。想要很强的首屏动画时用它。
- [oil-tone](https://github.com/oil-oil/oil-tone)：把页面上的标题、说明和介绍改得自然、清楚、好读，中文和英文都能用。觉得文案像 AI 写的、读着不顺时用它。