Repolode
Submit
oil-oil

oil-oil/oil-ui

An interface design skill for AI agents that explores distinct design directions, compares them side by side, and refines them against real screenshots.

View on GitHubWebsite
Stars
1,821
Forks
98
Open issues
0
Last commit
2 days ago

What is it?

Oil UI is an open-source skill for agents such as Claude Code and Codex. When asked to design a website, app, dashboard, or component, it first identifies the product category and looks at comparable products, then sets a tone and turns it into concrete choices in typography, spacing, and color.

It generates several visually distinct directions and places them on one comparison page, where the user can switch between desktop and mobile views and pick a favorite. The chosen direction is then refined, opened at desktop and mobile sizes, and checked through screenshots before the work is considered finished.

Installation is done with npx skills add, and it needs Python 3 for an optional version check. An optional Pro edition adds usability work, polish checks, and existing-project redesign.

Key features

  • 01Explores several visually distinct design directions for the same product.
  • 02Puts directions side by side on a comparison page with desktop and mobile views.
  • 03Refines the chosen direction based on your feedback.
  • 04Checks finished pages through desktop and mobile screenshots.
  • 05Can recreate a page from a screenshot, including a mobile layout.

Use cases

  • Exploring visual directions for a new website or app before committing to one.
  • Redesigning a landing page or dashboard with an AI coding agent.
  • Recreating an existing page from a screenshot with a mobile layout added.

Quick start

  1. 1

    Install the skill

    npx skills add oil-oil/oil-ui
  2. 2

    Ask your agent to explore design directions for your product

Things to know

  • The open-source version omits Pro features such as usability checks, dashboard layouts, and effects.
  • Running the version check needs Python 3 and reads the public version list online, unless disabled with OIL_NO_UPDATE_CHECK=1.

Topics

#agent-skills#ui-design#claude-code#codex#frontend#ux-design#ai-design#claude-skills

FAQ

What is oil-ui?
An interface design skill for AI agents that explores distinct design directions, compares them side by side, and refines them against real screenshots. Oil UI is an open-source skill for agents such as Claude Code and Codex. When asked to design a website, app, dashboard, or component, it first identifies the product category and looks at comparable products, then sets a tone and turns it into concrete choices in typography, spacing, and color.
Is oil-ui free to use? What license does it have?
oil-ui is open source under the MIT license. Check the license terms before using it in commercial products.
Is oil-ui still maintained?
Actively maintained. The last commit to oil-ui was on Oct 18, 2026.
What can I use oil-ui for?
Exploring visual directions for a new website or app before committing to one. Redesigning a landing page or dashboard with an AI coding agent. Recreating an existing page from a screenshot with a mobile layout added.
How do I install oil-ui?
Install the skill: npx skills add oil-oil/oil-ui Ask your agent to explore design directions for your product
Where can I get oil-ui?
The source code and installation instructions are on GitHub: https://github.com/oil-oil/oil-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects