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 2026-10-14 10:21:46 +08:00
1 parent 053a6a6723
commit d9445b5888
126 files changed
+10345 -1401

No files matched your search

+17 -16
View File
@@ -2,7 +2,7 @@
# oil-ui-pro
An interface design workflow for AI agents: explore distinct directions side by side, choose one, then refine it against real screenshots. Use it for websites, apps, dashboards, and components, or ask for a design review.
An interface design method for AI agents. It explores a few genuinely different directions side by side, lets you choose one, then refines it against real screenshots. It works for websites, apps, dashboards, and components, and it can also just review a design.
See more designs at [ui.oiloil.org](https://ui.oiloil.org).
@@ -14,13 +14,9 @@ Send this to your agent:
Install Oil UI Pro for me: run npx github:oil-oil/oil-cli install oil-ui-pro
```
You can also run the command in your terminal. On first install, a browser opens. Sign in with the oiloil account you used to purchase it and click “Allow.” The design workflow is ready to use after installation, with no extra configuration or other skills. Installing with the command requires Node.js 18 or later. With Oil UI Pro installed, you don't need Oil UI (open source); installing both makes them compete for the same requests.
You can also run the command in your terminal yourself. The first install opens a browser: sign in with the oiloil account you used to purchase it and click “Allow.”
Using this skill triggers a version check, at most once every 10 minutes. If the server takes longer than 2 seconds, the check is skipped so it never slows down your task. Failed checks retry later when you use the skill again. The check only reads the public version list on ui.oiloil.org and does not upload project content. Offline checks cannot discover new versions, so they produce no reminder.
Automatic updates need Python 3 and Node.js 18 or later. When a new version is found, the skill tries to update itself. If dependencies are missing, authorization has expired, or there is no purchase record, the agent ends its reply with recovery steps and a command containing the current installation's absolute path: `npx github:oil-oil/oil-cli update oil-ui-pro --path "<installation path>"`. Network errors stay silent and retry later. Set `OIL_NO_AUTO_UPDATE=1` for reminders without automatic updates, or `OIL_NO_UPDATE_CHECK=1` to disable checks entirely.
Python 3 can run as `python3` or `python`, or as `py -3` on Windows. If Python 3 is missing, the agent reminds you once and continues the design task.
It's ready to use right after installation, with nothing to configure. When a new version is out, your agent mentions it at the end of a reply; ask it to update whenever you like. With Oil UI Pro installed, you don't need the open-source Oil UI. Installing both makes them compete for the same requests.
## Usage
@@ -32,23 +28,28 @@ Tell your agent what you need, for example:
- “Polish this page using the project’s existing design guidelines.”
- “Review these interfaces and explain what to change and how. Leave the files untouched.”
Share any brand assets, screenshots, or existing project you have. It can start without references and only asks questions when the deliverable is unclear.
Share any brand assets, screenshots, or existing project you have. It can start without references and only asks you questions when the deliverable is unclear.
## How it works
- **Explore distinct directions, then let you choose.** Identify the product category, study its best examples, and develop a tone and concrete directions from the product itself. Decide the first screen before writing copy, then check that the directions really differ. Compare the previews on one page, choose a direction, and say what you like and dislike.
- **Create a memorable moment.** Focus on one or two details: the response to a tap, a successful payment, AI at work, or a 404 page.
- **Polish a single component to the extreme.** It first creates a visual anchor, such as a realistic product render, takes the palette from it, and picks one graphic motif to carry throughout. From two or three sketches it deepens just one: every state gets its own visual, the main interaction acts directly on the anchor so results appear as you drag, and review rounds check it up close. It finishes with a showcase image and a short screen recording.
- **Refine against real screenshots.** Check desktop and mobile views. An independent reviewer who has not seen the work in progress identifies issues and scores the result. Revise and review again, aiming for 9/10 within three rounds. With several directions, a cross-review catches sections that look alike; for new interfaces, the reviewer also completes real tasks on the page.
- **Start an existing project by working out what you want.** If it looks dated, it first decides whether the current design system is worth keeping, then offers options from a light cleanup to a full reshape. If it is hard to use, it walks the real task, finds why the extra steps exist, and fixes the structure instead of adding hints. For a new feature, it reads the product’s existing habits and proposes genuinely different ways to do the job, keeping the current visual system. Changes land in shared components and design tokens. Small changes, such as a single button, go straight to implementation.
- **Explore distinct directions, then let you choose.** It first works out what the product is and how the best products in its category handle it, then derives a tone from the product itself and develops a few concrete directions. Each direction settles its first-screen layout before any copy is written, and it checks that the directions really differ. The previews go on one comparison page; you choose one and say what you like and dislike.
- **Leave one moment people remember.** Instead of pushing every part of the page, it makes one or two details exceptional, such as the response to a tap, a successful payment, AI at work, or a 404 page. Everything else stays quiet.
- **Refine against real screenshots.** It checks the result at desktop and mobile sizes, then brings in a reviewer who hasn't seen the work in progress to find problems and give a score. It revises and reviews again, aiming for 9/10 within three rounds. With several directions, a side-by-side review catches sections that look alike; for new interfaces, the reviewer actually completes real tasks on the page.
- **Make interfaces easy to use.** Interactions and states, forms, dialogs and popovers, and desktop and mobile layouts each come with concrete practices. For dashboards and tools, it picks a workspace layout that fits what the product handles, and carries the style from the first screen all the way down.
- **Polish a single component to the extreme.** It starts with a visual anchor, such as a realistic product render, takes the palette from it, and picks one graphic motif to carry throughout. From two or three sketches it develops just one: every state gets its own visual, and the main interaction acts directly on the anchor, so results appear as you drag. Review rounds check it up close, and it finishes with a showcase image and a short screen recording.
- **Start an existing project by working out what you want.** If it looks dated, it first decides whether the current design system is worth keeping, then offers options from a light cleanup to a full reshape. If it's hard to use, it walks through the real task itself, finds out why the extra steps exist, and fixes the structure instead of adding a hint. For a new feature, it learns the product's existing habits first, then proposes genuinely different ways to do the job while keeping the current visual system. Changes go into shared components and design tokens; something as small as a single button gets changed directly.
The workflow covers visual hierarchy, typography, color, spacing, interactions and states, layout and responsive behavior, imagery, motion, scroll storytelling, and effects such as light trails, dot patterns, and flowing gradients. Designs vary by product; generated images, animation, and effects are used where they help.
There are methods for visual hierarchy, typography, color, spacing, imagery, motion, scroll storytelling, and effects such as light trails, dot patterns, and flowing gradients. It won't push every product into the same style, and it won't add generated images, animation, or effects to every page. It uses them only where they help.
## Built-in style comparison page
Compare designs side by side as HTML files, images, or running development pages. Put the current version first as a baseline. Switch between desktop and mobile sizes, open previews at actual size, browse with arrow keys, and add notes. Click “Select” on your choice, then paste the copied sentence into your agent to continue.
When you want to compare designs, it puts them side by side on one page. They can be HTML files, images, or running development pages, and the current version can go first as a baseline. You can switch between desktop and mobile sizes, open each one at actual size, and browse with the arrow keys. Click “Select” on the one you like, paste the copied sentence into your agent, and it carries on from there.
## Version checks
Each time it is used, the Skill checks for a newer version, going online at most once every 10 minutes. It only reads the public version list at ui.oiloil.org and uploads nothing from your project. By default it only tells you about an update; it downloads and replaces nothing unless you explicitly ask it to update. Results are cached in `~/.local/state/oil/` (or `XDG_STATE_HOME` when set; `%LOCALAPPDATA%\oil\` on Windows). It needs Python 3. Set `OIL_NO_UPDATE_CHECK=1` to turn it off.
## Use with
- [draw-ui](https://github.com/oil-oil/draw-ui): Generate design images first, choose one, then build from it. Try this when code-based iterations keep falling short and your agent can generate images.
- [oil-motion](https://github.com/oil-oil/oil-motion): Turn generated videos or frame sequences into web animation controlled by scrolling or dragging, such as product teardowns or camera fly-throughs. Use it for a striking opening animation.
- [oil-tone](https://github.com/oil-oil/oil-tone): Rewrites headings, descriptions and intro copy so they read naturally and clearly, in Chinese or English. Use it when the copy feels machine-written or awkward.