# Oil UI

> An open-source UI design skill for AI agents that explores distinct design directions, compares them side by side, and refines against real screenshots.

Oil UI is an interface design Skill for AI agents, published by oil-oil under the MIT license. It has the agent propose several genuinely different design directions, lets the user pick one in a comparison page, and then refines the result against real screenshots. It covers websites, apps, dashboards and components, and the latest listed release is v0.16.4.

## What It Is

Oil UI is an agent skill installed with `npx skills add oil-oil/oil-ui` or by asking a skill-capable agent to install the repository. It needs no extra configuration after install. Users give the agent a task, such as exploring design directions for a product, polishing a page, reviewing a homepage without editing files, or recreating a page from a screenshot. Brand materials, screenshots or an existing project can be supplied as input.

## How the Design Process Works

The README describes a sequence of steps:

- Identify the product category and study the most distinctive products in it.
- Translate vague words like "premium" or "minimal" into concrete choices of typography, whitespace and color.
- Start each direction from a concrete reference such as a material, scene or character.
- Make directions differ from each other in layout, type, color and key visual, with any two sharing at most one of these.
- Build one or two memorable moments, such as feedback on press or a payment-success state.
- Verify the result by screenshotting at desktop and mobile sizes, optionally with an independent reviewer, then simplify.

## Style Comparison Page

The skill places several designs side by side in one page. Entries can be HTML files, images or a running dev page, and the current version can be placed first as a baseline. Users can switch between desktop and mobile sizes, view actual size and navigate with arrow keys. Clicking "select" copies a sentence to send to the agent so it continues from that choice.

## Open-Source Version and Pro

The open-source version covers design direction, visual hierarchy, typography, color, motion, scroll storytelling, screenshot recreation and scored review. The separate Oil UI Pro adds refinement checklists, usability guidance for interactions, forms and layouts, admin and tool workspaces, legacy-project workflows, component polish, card prototypes and effects such as flowing light and dot matrices. The project also points to companion skills draw-ui and oil-motion.

## Features
- Explores multiple distinct design directions
- Side-by-side style comparison page
- Desktop and mobile screenshot verification
- Screenshot-to-page recreation
- Independent design review with scoring
- Scroll storytelling and motion design
- Works for websites, apps, dashboards and components
- Brand-aware tone and typography decisions

## Integrations
Claude Code, Codex, draw-ui, oil-motion

## Platforms
WEB, API, CLI

## Pricing
Open Source

## Version
v0.16.4

## Links
- Website: https://ui.oiloil.org
- Documentation: https://github.com/oil-oil/oil-ui
- Repository: https://github.com/oil-oil/oil-ui
- EveryDev.ai: https://www.everydev.ai/tools/oil-ui