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.
At a Glance
Open-source UI design skill for AI agents, MIT licensed.
Engagement
Available On
Listed Oct 2026
About Oil UI
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.
Community Discussions
Be the first to start a conversation about Oil UI
Share your experience with Oil UI, ask questions, or help others learn from your insights.
Pricing
Oil UI (open source)
Open-source UI design skill for AI agents, MIT licensed.
- Design directions: identify category, set tone, diverge directions, style comparison page
- Visual: hierarchy, typography, color, whitespace, imagery and motion
- Memorable moments and scroll storytelling
- Screenshot recreation
- Independent review: scores and lists issues
Capabilities
Key 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
