Compare UI Design Directions Side by Side with Oil UI

Asking an agent for "a clean, modern landing page" gets you the one look every model defaults to. Oil UI — a 2k-star interface design skill published on the same oil-oil account as oil-motion — refuses to start from adjectives. It explores a few genuinely different design directions, puts them side by side for you to choose, and only then refines the winner against real screenshots. Websites, apps, dashboards, and components are all in scope.

Why This Skill Matters

The README's design method is eight rules, and the distinctive ones are about difference. Before drawing anything, the skill names the product category and studies two or three peers with the most distinctive styles. Each direction starts from something concrete — a material, a scene, a character, or the visual language of another field — never from words like "minimal" or "bold". And the difference is a hard rule: of layout, typography, color, and key imagery, any two directions may share at most one. When two previews look alike, it changes the layout instead of swapping the color.

The other half of the method is about who decides. The previews land on one comparison page, you pick one and say what you like and dislike, and it tightens the design around your feedback. "Premium" and "clean" get translated into visible choices — which typefaces, how much white space, how much of the page uses color. Pages people browse, shop, or work in put the content itself on the first screen; only pages meant to persuade get a designed opening layout, settled before the copy is written. And a finished page is verified against the real screen: opened at desktop and mobile sizes, screenshotted, optionally reviewed by someone who has not seen the work in progress, then put through a round of subtraction — one focal point per page, no copy, lines, or boxes that do not help understanding.

Installation

Send this to an agent that can install skills:

Install this skill for me: run npx skills add oil-oil/oil-ui

Or run it in your terminal:

npx skills add oil-oil/oil-ui

It works right after installation with nothing to configure. When a new version ships, your agent mentions it at the end of a reply and updates when you ask. One warning from the README: if you already have Oil UI Pro, do not install the open-source version too — the two compete for the same requests.

Real Workflow: Three Directions for One Product

1. Give the agent a task like the README's example:

"Use oil-ui to explore a few design directions for this course booking product and build pages I can preview."

2. The skill sets the tone from the subject, audience, and brand voice — lively or calm, polished or raw, dense or airy — and builds the directions from concrete starting points. You can hand over brand assets, screenshots, or an existing project; it can also start with no references and only asks questions when the deliverable is unclear.
3. Open the built-in style comparison page. It lines up the candidates — HTML files, images, or running development pages — and your current version can go first as a baseline. Switch between desktop and mobile sizes, open any at actual size, browse with the arrow keys.
4. Click "Select" on the one you like and paste the copied sentence back into your agent; it carries on from your choice, tightening the design around what you said you liked and disliked.
5. Let the verification pass run: screenshots at both sizes, an independent reviewer on request, and the subtraction round before you call it done.

Tips

• The README's usage examples double as a menu of working modes: explore directions for a new product, create three designs differing in typography, color, and composition, polish an existing page against its design guidelines, review a homepage without touching files, or recreate a page from a screenshot and add the mobile layout the reference lacks.
• The open-source edition takes a new page from a blank start to a good-looking design. Making interfaces more usable, improving existing projects, effects such as light trails and dot patterns, and stricter 9/10-aimed review loops are Oil UI Pro territory — the README's table marks the difference row by row, and Pro is a one-time purchase.
• The skill checks for newer versions when used, going online at most once every 10 minutes; it reads only the public version list at ui.oiloil.org, uploads nothing from your project, and only tells you about an update unless you explicitly ask. Set OIL_NO_UPDATE_CHECK=1 to turn the check off (it needs Python 3).
• Pair it with the sibling skills published under the same account: Oil Motion turns generated video or frame sequences into web animation driven by scrolling or dragging — use it for a striking opening animation — and oil-tone rewrites headings, descriptions, and intro copy so they read naturally and clearly, in Chinese or English; use it when copy feels machine-written or awkward.

When Not to Use This

Two boundaries come straight from the README. Usability work on a shipped interface and reworking an existing project are Oil UI Pro territory — the free edition only tells you which of the three approaches (a UI refresh, a flow fix, or a new feature) you need. And when the ask is scroll- or drag-driven web animation built from generated video or frames — the striking-opening case — Oil Motion is the pipeline for that job, not Oil UI.

See the leaderboard for more skills.