55 lines
5.1 KiB
Markdown
55 lines
5.1 KiB
Markdown
中文 · [English](README.en.md)
|
||
|
||
# oil-ui-pro
|
||
|
||
给 AI 用的界面设计方法：先拉开几种真正不同的方向放在一起让你挑，再照着真实画面反复打磨。网站、App、后台和组件都能做，也可以只做评审。
|
||
|
||
想看更多设计效果，可以去 [ui.oiloil.org](https://ui.oiloil.org)。
|
||
|
||
## 安装
|
||
|
||
把这句话发给你的 Agent：
|
||
|
||
```text
|
||
帮我安装 Oil UI Pro：运行 npx github:oil-oil/oil-cli install oil-ui-pro
|
||
```
|
||
|
||
也可以自己在终端运行这行命令。第一次安装会打开浏览器，登录购买时用的 oiloil 账号，点“允许”就行。装好后可以直接使用设计方法，无需额外配置，也不需要其他 Skill。命令安装需要 Node.js 18 以上。装了 Oil UI Pro 就不用再装 Oil UI 开源版，两个同时装会抢着接同一类请求。
|
||
|
||
使用这个 Skill 时会触发版本检查，最多每 10 分钟联网一次，超过 2 秒没有响应就跳过，不会拖慢任务；失败后会在后续使用时稍后重试。检查只读取 ui.oiloil.org 公开的版本列表，不上传项目内容。离线时无法得知新版本，所以不会提示。
|
||
|
||
自动更新需要 Python 3 和 Node.js 18 以上。发现新版本后会尝试自动更新；如果缺少依赖、授权失效或没有购买记录，Agent 会在回复末尾给出恢复提示，并附上带有当前安装绝对路径的命令：`npx github:oil-oil/oil-cli update oil-ui-pro --path "<安装路径>"`。网络错误保持静默，稍后重试。设置环境变量 `OIL_NO_AUTO_UPDATE=1` 只提醒不自动更新，`OIL_NO_UPDATE_CHECK=1` 完全关掉检查。
|
||
|
||
Python 3 可以用 `python3` 或 `python` 启动，Windows 也可以用 `py -3`。缺少 Python 3 时只提醒一次，设计任务照常继续。
|
||
|
||
## 使用
|
||
|
||
直接把任务告诉 Agent，例如：
|
||
|
||
- “用 oil-ui-pro 给这个课程预约产品探索几种设计方向，做成可以预览的页面。”
|
||
- “做三种字体、配色和构图都不同的设计，放在对比页里让我选。”
|
||
- “保留现在的品牌和布局，把这个表单的层级、报错和手机上的操作改好。”
|
||
- “帮我润色这个页面，按项目现有的设计规范来。”
|
||
- “只评审这些界面，告诉我哪里要改、怎么改，不要动文件。”
|
||
|
||
品牌资料、截图、现成项目都可以一起给它；什么参考都没有也能开始，它只在不清楚要交付什么时才问你。
|
||
|
||
## 它怎么做
|
||
|
||
- **先拉开方向，再由你挑。** 先认清品类、看同类最好的产品怎么做，再从产品本身推出调性和几个具体的方向，每个方向先定首屏骨架再写文案，并检查方向之间是否真的不同。小样放进同一个对比页，由你选定，再说说喜欢和不喜欢哪里。
|
||
- **留一处让人记住的地方。** 不求整页都用力，只把一两处做到极致：一次点按的反馈、付款成功的那一下、AI 干活的过程、一个 404 页面。
|
||
- **一个组件也能打磨到极致。** 先生成一个视觉主角，比如一张写实的产品渲染图，从它取色、定一个贯穿始终的图形母题；出两三张草图选一张，只深化这一张：所有状态都做出画面，主操作直接作用在主视觉上，拖动时结果当场发生；再一轮轮放大检查打磨，最后附一张作品图和一段操作录屏。
|
||
- **照着真实画面改。** 在电脑和手机尺寸下截图检查。请一位没看过制作过程的独立评审挑问题、打分，改完再评，目标 9 分，最多三轮。几个方向之间会再比一次，找出雷同的区块；新界面还会让评审真的按任务把页面用一遍。
|
||
- **老项目先分清你要什么。** 嫌不好看，先判断现有规范值不值得保留，再按推翻程度给你几个方案，从“整理一下”到“重塑”；嫌难用，先亲手把任务走一遍，找到步骤多出来的原因，从结构上改，不加提示了事；要加新功能，先读出产品原有的习惯，再给出几种真正不同的做法，视觉沿用现有系统。改动都落在共享的组件和设计变量上。只改一个按钮这种小事，直接改。
|
||
|
||
方法覆盖视觉层级、字体、配色、留白、交互和状态、布局与屏幕适配、配图和动效、滚动叙事，以及流光、点阵、流动渐变这类特效。不会把所有产品做成同一种风格，也不会要求每个页面都生图、加动画或加特效。
|
||
|
||
## 自带的风格对比页
|
||
|
||
几份设计并排放在一起比，可以是 HTML 文件、图片，也可以是正在运行的开发页面；现在的版本可以放在第一个当对照。可以切换电脑和手机尺寸，点开看实际大小，用方向键翻看，写备注。看中了点“选择”，把复制出来的一句话粘贴给 Agent，它就接着做。
|
||
|
||
## 搭配使用
|
||
|
||
- [draw-ui](https://github.com/oil-oil/draw-ui)：先出设计图，挑中了再照图实现。代码做出来的设计反复不满意、而 Agent 又能生成图片时，换它试试。
|
||
- [oil-motion](https://github.com/oil-oil/oil-motion)：用生成的视频或序列帧做随滚动、拖动变化的网页动画，比如产品拆解、镜头穿越。想要很强的首屏动画时用它。
|