Oil UI

Oil UI is an open-source interface design skill by oil-oil. It explores a few genuinely different design directions for a website, app, dashboard or component, puts them side by side so you can choose, then refines the one you pick against real screenshots. How it designs - Names the product category and studies a few peers with distinctive styles before drawing anything - Turns words like "premium" or "clean" into concrete choices: typefaces, white space and how much of the page uses colour - Writes three distinct directions first, then asks whether to build one or compare all three as first screens - Puts candidates on one comparison page with desktop and mobile sizes; you click Select on the one you like - Checks finished pages in screenshots at desktop and mobile sizes, and can bring in a reviewer who hasn't seen the work in progress - Ends with a round of subtraction: one focal point per page What you can ask for - New designs from a blank start - Polish using a project's existing design guidelines - A review that explains what to change and leaves files untouched - A recreation of a page from a screenshot, with a mobile layout How it installs - Run npx skills add oil-oil/oil-ui. It's ready right after install, with nothing to configure. - Working files, screenshots and media caches go in a .oil-ui folder in your project. Final code is written back to your project, following its conventions. Good to know - The skill's instructions are written in Chinese; it replies in the language you use. - Each time it runs it checks ui.oiloil.org for a newer version (at most every 10 minutes), uploads nothing from your project and updates only when you ask. It needs Python 3 for this; set OIL_NO_UPDATE_CHECK=1 to turn it off. - An optional image script uses paid oiloil image credits. The core workflow doesn't need it. - A paid Oil UI Pro edition adds usability, existing-project and polish work. Don't install both, since they compete for the same requests. - MIT license.

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

  Copy

• “Create three designs with different typography, colors, and compositions. Put them on a comparison page so I can choose.”

  Copy

• “Polish this page using the project's existing design guidelines.”

  Copy

• “Review this homepage and explain what to change and how. Leave the files untouched.”

  Copy

• “Recreate this page from the screenshot and add a mobile layout too.”

  Copy