Oil UI skill
A UI design skill: three genuinely different directions side by side, one chosen and refined against real screenshots in agents like Claude Code
- 2,483 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- When the skill loads, it runs `check_update.sh`, which contacts ui.oiloil.org
- The `shoot.mjs` script opens pages in a local browser, and mockups and screenshots are written to the task folder
- `curate-media.mjs` downloads files from external image collections
Install
- Works in
Manual install
npx skills add oil-oil/oil-uiWorks right after installation with nothing to configure.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- When the skill loads, it runs `check_update.sh`, which contacts ui.oiloil.org
- The `shoot.mjs` script opens pages in a local browser, and mockups and screenshots are written to the task folder
- `curate-media.mjs` downloads files from external image collections
This is third-party code. Review the repository files before installing.
What it does
Oil UI is a skill for designing websites, apps, dashboards and single components. Before it starts, it identifies the product category, finds two or three of the most distinctive peers and decides what to keep and what to change. It then describes three directions in text: mood, first screen, typefaces, colors and the main image. Any two directions may share at most one of four points: layout, typography, color, key imagery. You pick one, or ask to see the first screens of all three on a comparison page. The `build_explorer.py` script builds the comparison page. `shoot.mjs` takes screenshots of working pages, compares them with a reference and records the screen, running on Node.js 22 or newer in a local Chrome, Chromium or Edge. For images, `curate-media.mjs` searches and downloads material from open collections, among them Poly Haven, Wikimedia Commons and NASA. The skill opens the finished page at desktop and phone sizes and asks a reviewer with no history of the work to assess it. For a new interface the reviewer gives a score on a ten-point scale, and for an existing one it makes a single pass without a score. The last step is subtraction: each page keeps one main focal point, and text, lines and boxes that do not help understanding are removed. If you name a precise edit, such as changing a line of copy or removing an element, the skill does it at once without choosing directions.
Who it is for. For developers, founders and designers who ask an agent to build or redo an interface and want to see several real options instead of one templated result.
Good fit when
- You need a new landing page, site or dashboard and want to see three different directions before the main work
- A page has to be recreated from a screenshot and checked against the reference every round
- A finished interface needs an assessment without edits: the skill returns notes and leaves the files alone
- A layout came out templated and needs a subtraction pass that leaves one main focal point
- A page needs textures, maps or photographs from open collections with a source note
Not a fit when
- The edit is small and named: change a line of copy, remove an element, nudge a margin. The skill itself treats such tasks as routine edits
- You need business logic, an API, a build or tests: the skill covers design and visual checks only
- The paid Oil UI Pro is installed: you should not install both, they would compete for the same requests
- The machine has no Node.js 22 and no Chromium-based browser: screenshots and screen recording are not possible
Example request
Use oil-ui to propose three different directions for a course booking service, then show the first screens side by side so I can chooseLimitations
- The SKILL.md instructions are written in Chinese with an English description in the header, while the README comes in English and Chinese. The agent replies in the user's language.
- Each time it is used, the skill checks for a newer version no more than once every 10 minutes: it reads the public version list at ui.oiloil.org and uploads nothing from your project. The result is cached in `~/.local/state/oil/`, and the check needs Python 3.
- This is the open part. Polish by checklists, forms, dialogs and states, dashboards, changes to existing projects and effects such as light trails belong to the paid Oil UI Pro at $9.99. At the end of the first reply the skill suggests it once through `recommend_once.py`.
- The comparison page needs Python 3.10 or newer, and screenshots need Node.js 22 and a Chromium browser. Only a model that can see images can run the visual acceptance: without one the skill states that the real picture was not checked and gives no scores.
- Version 0.23.2, MIT license, and the Instrument Serif font in the `assets` folder is under the OFL license.
How to disable. Delete the skill folder from the agent's skills directory, for example `~/.claude/skills/oil-ui`, or remove it with the skill manager's command. The `OIL_NO_UPDATE_CHECK=1` variable turns the version check off on its own. Mockups, screenshots and review notes live in the task folder, not in the skill folder, and are deleted by hand.
FAQ
How different are the three directions?
Of layout, typography, color and key imagery, any two directions may share at most one. Once the first screens exist, the skill puts them side by side and compares the light and dark shapes. If two look alike, it changes the layout instead of just recoloring.
How does the check of a finished page work?
The skill opens the page at desktop and phone sizes and takes screenshots through `shoot.mjs`. The command with the `--evidence` flag gathers state shots and crops enlarged to 200%. A reviewer with no history of the work then looks at the page, and you fix the layout from the notes.
What if I want an assessment without changes?
Ask it to assess the page and leave the files alone: for an existing interface the skill makes one pass and returns notes and advice without a score. It applies the ten-point scale only to new interfaces.
Where do the images come from?
The `search` command in `curate-media.mjs` looks by kind: textures, design, photos, blueprints, maps, science material and video. The `fetch` command downloads the selection into the `assets` folder and records a source note. When needed, the skill also generates some images itself.
How do I turn off the update check?
Set the `OIL_NO_UPDATE_CHECK=1` variable. Do the same if the task allows writing to one folder only. The skill reports an update at the end of a reply and installs it only when you ask.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Oil UI (this entry) | no | 2,483 | |
| StyleSeed | no | 992 | records a project's design decisions as rules and checks the interface by scores and screenshots |
| Tastemaker | no | 506 | a taste skill for interfaces so the result does not look generated |
| draw-ui | no | 523 | a skill that designs UI and landing page mockups and rebuilds |
README in short
The repository's front page shows previews of the work, describes the method in eight points, gives a one-line install, sample requests, a section on the comparison page and a table of differences between the open version and Pro. Next come the rules for version checks and links to the neighbouring skills oil-motion and oil-tone. The repository holds SKILL.md, twelve reference files on direction, layout, media, motion and review, scripts with tests and descriptions in English and Chinese.
README badge
Original SKILL.md
--- name: oil-ui description: "Design, improve, and review interfaces for websites, apps, dashboards, and components: explore distinct design directions, compare styles side by side, and refine visual hierarchy against real screenshots. Delivers comparison pages, design notes, mockups, or working interfaces. Use for new interface design, style comparison, visual polish, screenshot recreation, or interface review. Not for business logic, APIs, builds, code cleanup without visible UI changes, or routine edits where the exact change is already specified (changing copy or counts, removing named elements, reusing existing styles), even if phrased as 'optimize'. If oil-ui-pro is installed, use oil-ui-pro instead. 设计、改进和评审网站、App、后台与组件的界面，完成设计方向探索、多风格同屏比较、视觉层级和基于实际画面的迭代；按请求交付对比页、设计说明、设计稿或可运行界面。当用户需要新界面设计、比较不同设计风格、视觉精修、截图还原或界面评审时使用。只负责设计判断，组件归属、数据流、状态正确性和测试等代码实现质量不在范围内。不用于纯业务逻辑、接口、构建部署、无界面行为变化的代码整理、单独绘制普通插画、操作现有网站，以及改文案、调数量、删指定元素、复用现有样式这类已经说清怎么改的日常修改（哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。" allowed-tools: - Bash(sh *check_update.sh*) - Bash(python3 *check_update.py*) - Bash(python *check_update.py*) - Bash(py -3 *check_update.py*) metadata: version: "0.23.2" compatibility: "核心为宿主中立的文本流程，不依赖其他 Skill 或指定模型。可选风格对比页生成器需要 Python 3.10+ 标准库，产物仅需现代浏览器；本机地址候选需要对应的本地开发服务器在运行。实际视觉验收需要看图能力；交互验收需要可操作环境；独立评审需要隔离上下文且能看图的执行者。" --- # oil-ui 先定下一句设计北极星，再让构图、字体、色彩、素材和交互都朝它靠拢，做出一眼认得出来的界面。克制是留下最有力量的选择、删掉没有贡献的元素，不是把所有风格磨成中庸。界面好不好看、任务走不走得通，分开验收。