# Oil UI > Interface design for your agent: explore distinct directions side by side, pick one, then refine it against real screenshots. 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. - Type: Skill - Made by: oil-oil - Category: Design - Formats: Skills - Version: 0.25.0 - Website: https://ui.oiloil.org/en/ - Source: https://github.com/oil-oil/oil-ui - Page: https://pluginboard.ai/skills/oil-ui ## Works with - ChatGPT - Claude - Gemini - GitHub Copilot - Cursor - Claude Code - Codex - Antigravity - Gemini CLI - Replit - OpenClaw - OpenCode - Hermes Agent ## Install ### ChatGPT In ChatGPT: Download the oil-ui folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans. View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Claude In Claude (web or desktop): Download the oil-ui folder and zip the folder itself, then upload it in Customize → Skills. View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Gemini In Gemini: Download the oil-ui folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it). View the folder on GitHub: https://github.com/oil-oil/oil-ui ### GitHub Copilot Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.copilot/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Cursor Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.cursor/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Claude Code Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.claude/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Codex Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.agents/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Antigravity In Antigravity: Copy the oil-ui folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI). View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Gemini CLI Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.gemini/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Replit Run in your terminal: ```shell npx -y degit oil-oil/oil-ui .agents/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### OpenClaw Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.openclaw/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### OpenCode Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.config/opencode/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui ### Hermes Agent Run in your terminal: ```shell npx -y degit oil-oil/oil-ui ~/.hermes/skills/oil-ui ``` View the folder on GitHub: https://github.com/oil-oil/oil-ui --- From Pluginboard (https://pluginboard.ai).