oil-ui-pro 0.15.4 → 0.22.2（上游 ui.oiloil.org 正式包）＋ 记 P0-98 跨盘 rename 坑
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
This commit is contained in:
admin committed
1 parent
053a6a6723
commit
d9445b5888
126 files changed
+10345
-1401
No files matched your search
+17
-16
@@ -2,7 +2,7 @@
|
||||
|
||||
# oil-ui-pro
|
||||
|
||||
给 AI 用的界面设计方法：先拉开几种真正不同的方向放在一起让你挑，再照着真实画面反复打磨。网站、App、后台和组件都能做，也可以只做评审。
|
||||
给 AI Agent 用的界面设计方法：先拉开几种真正不同的方向放在一起让你挑，再照着真实画面反复打磨。网站、App、后台和组件都能做，也可以只请它做评审。
|
||||
|
||||
想看更多设计效果，可以去 [ui.oiloil.org](https://ui.oiloil.org)。
|
||||
|
||||
@@ -14,13 +14,9 @@
|
||||
帮我安装 Oil UI Pro：运行 npx github:oil-oil/oil-cli install oil-ui-pro
|
||||
```
|
||||
|
||||
也可以自己在终端运行这行命令。第一次安装会打开浏览器，登录购买时用的 oiloil 账号，点“允许”就行。装好后可以直接使用设计方法，无需额外配置，也不需要其他 Skill。命令安装需要 Node.js 18 以上。装了 Oil UI Pro 就不用再装 Oil UI 开源版，两个同时装会抢着接同一类请求。
|
||||
也可以自己在终端运行这行命令。第一次安装会打开浏览器，用购买时的 oiloil 账号登录，点“允许”就行。
|
||||
|
||||
使用这个 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 就不用再装开源版 Oil UI，两个同时装会抢着接同一类请求。
|
||||
|
||||
## 使用
|
||||
|
||||
@@ -32,23 +28,28 @@ Python 3 可以用 `python3` 或 `python` 启动，Windows 也可以用 `py -3`
|
||||
- “帮我润色这个页面，按项目现有的设计规范来。”
|
||||
- “只评审这些界面，告诉我哪里要改、怎么改，不要动文件。”
|
||||
|
||||
品牌资料、截图、现成项目都可以一起给它；什么参考都没有也能开始，它只在不清楚要交付什么时才问你。
|
||||
有品牌资料、截图或现成的项目，可以一起交给它。没有参考也能开始，只有在不清楚要交付什么的时候，它才会来问你。
|
||||
|
||||
## 它怎么做
|
||||
|
||||
- **先拉开方向，再由你挑。** 先认清品类、看同类最好的产品怎么做，再从产品本身推出调性和几个具体的方向，每个方向先定首屏骨架再写文案，并检查方向之间是否真的不同。小样放进同一个对比页，由你选定，再说说喜欢和不喜欢哪里。
|
||||
- **留一处让人记住的地方。** 不求整页都用力，只把一两处做到极致：一次点按的反馈、付款成功的那一下、AI 干活的过程、一个 404 页面。
|
||||
- **一个组件也能打磨到极致。** 先生成一个视觉主角，比如一张写实的产品渲染图，从它取色、定一个贯穿始终的图形母题；出两三张草图选一张，只深化这一张：所有状态都做出画面，主操作直接作用在主视觉上，拖动时结果当场发生；再一轮轮放大检查打磨，最后附一张作品图和一段操作录屏。
|
||||
- **照着真实画面改。** 在电脑和手机尺寸下截图检查。请一位没看过制作过程的独立评审挑问题、打分，改完再评，目标 9 分，最多三轮。几个方向之间会再比一次，找出雷同的区块；新界面还会让评审真的按任务把页面用一遍。
|
||||
- **老项目先分清你要什么。** 嫌不好看，先判断现有规范值不值得保留，再按推翻程度给你几个方案，从“整理一下”到“重塑”；嫌难用，先亲手把任务走一遍，找到步骤多出来的原因，从结构上改，不加提示了事；要加新功能，先读出产品原有的习惯，再给出几种真正不同的做法，视觉沿用现有系统。改动都落在共享的组件和设计变量上。只改一个按钮这种小事，直接改。
|
||||
- **先拉开方向，再由你来挑。** 它会先弄清这是什么产品、同类里做得最好的几家是怎么做的，再从产品本身推出调性，拉开几个具体的方向。每个方向先定首屏的版式再写文案，并检查几个方向是不是真的不一样。小样放进同一个对比页，由你选定，再说说喜欢和不喜欢哪里。
|
||||
- **留一处让人记住的地方。** 不求整页都用力，只把一两处做到极致，比如点按时的反馈、付款成功的那一下、AI 干活的过程，或者一个 404 页面，其余地方保持安静。
|
||||
- **照着真实画面反复改。** 做完会在电脑和手机尺寸下截图检查，再请一位没看过制作过程的评审来挑问题、打分。改完再评，目标是 9 分，最多三轮。有好几个方向时，还会横向比一次，找出彼此雷同的区块；做新界面时，评审会真的按任务把页面用一遍。
|
||||
- **把界面做得好用。** 交互和状态、表单、弹窗和浮层、电脑和手机上的布局，都有具体的做法。后台和工具类产品会按它处理的对象挑合适的工作区布局，让风格从首屏一直贯穿到页面底部。
|
||||
- **一个组件也能打磨到极致。** 先做出一个视觉主角，比如一张写实的产品渲染图，从它取色，再定一个贯穿始终的图形母题。接着出两三张草图，只挑一张深化：每个状态都做出画面，主操作直接作用在主视觉上，拖动时结果当场出现。然后一轮轮放大检查，最后附上一张作品图和一段操作录屏。
|
||||
- **老项目先弄清你要什么。** 嫌不好看，它会先判断现有的设计规范值不值得保留，再按改动大小给你几个方案，从“整理一下”到“重塑”。嫌难用，它会亲手把任务走一遍，找出步骤为什么变多，从结构上改，而不是加一行提示了事。要加新功能，它会先读懂产品原有的习惯，再给出几种真正不同的做法，视觉沿用现有的系统。改动都落在共享的组件和设计变量上；只改一个按钮这样的小事，就直接改。
|
||||
|
||||
方法覆盖视觉层级、字体、配色、留白、交互和状态、布局与屏幕适配、配图和动效、滚动叙事，以及流光、点阵、流动渐变这类特效。不会把所有产品做成同一种风格，也不会要求每个页面都生图、加动画或加特效。
|
||||
视觉层级、字体、配色、留白、配图、动效、滚动叙事，以及流光、点阵、流动渐变这类特效，都有对应的方法。它不会把所有产品做成同一种风格，也不会每个页面都去生图、加动画或加特效，只在用得上的地方才用。
|
||||
|
||||
## 自带的风格对比页
|
||||
|
||||
几份设计并排放在一起比，可以是 HTML 文件、图片，也可以是正在运行的开发页面；现在的版本可以放在第一个当对照。可以切换电脑和手机尺寸，点开看实际大小，用方向键翻看，写备注。看中了点“选择”，把复制出来的一句话粘贴给 Agent，它就接着做。
|
||||
想比较几份设计时，它会把它们并排放进同一个页面。放进去的可以是 HTML 文件、图片，也可以是正在运行的开发页面，现在的版本可以放在第一个当对照。你可以切换电脑和手机尺寸、点开看实际大小、用方向键翻看。看中哪一份就点“选择”，把复制出来的一句话发给 Agent，它会接着往下做。
|
||||
|
||||
## 版本检查
|
||||
|
||||
每次使用时，Skill 会检查一次有没有新版本，最多每 10 分钟联网一次。它只读取 ui.oiloil.org 公开的版本列表，不上传项目内容；默认只提示，不下载、不替换任何文件，只有你明确要求更新时才更新。检查结果缓存在 `~/.local/state/oil/`（设置了 `XDG_STATE_HOME` 时用它，Windows 在 `%LOCALAPPDATA%\oil\`）。需要 Python 3；不想检查时设置环境变量 `OIL_NO_UPDATE_CHECK=1`。
|
||||
|
||||
## 搭配使用
|
||||
|
||||
- [draw-ui](https://github.com/oil-oil/draw-ui)：先出设计图，挑中了再照图实现。代码做出来的设计反复不满意、而 Agent 又能生成图片时，换它试试。
|
||||
- [oil-motion](https://github.com/oil-oil/oil-motion)：用生成的视频或序列帧做随滚动、拖动变化的网页动画，比如产品拆解、镜头穿越。想要很强的首屏动画时用它。
|
||||
- [oil-tone](https://github.com/oil-oil/oil-tone)：把页面上的标题、说明和介绍改得自然、清楚、好读，中文和英文都能用。觉得文案像 AI 写的、读着不顺时用它。
|
||||
Reference in new issue
Block a user