Compare Ui Design Directions And Refine The Selected Page With Oil Ui

---
name: "Compare UI design directions and refine the selected page with Oil UI"
slug: "compare-ui-design-directions-and-refine-the-selected-page-with-oil-ui"
description: "Create distinct first-screen designs, compare them in one page, then refine the chosen direction against desktop and mobile screenshots."
github_stars: 2059
verification: "security_reviewed"
source: "https://github.com/oil-oil/oil-ui"
author: "oil-oil"
publisher_type: "individual"
category: "Image & Creative Automation"
framework: "Multi-Framework"
tool_ecosystem:
  github_repo: "oil-oil/oil-ui"
  github_stars: 2059
---

# Compare UI design directions and refine the selected page with Oil UI

Create distinct first-screen designs, compare them in one page, then refine the chosen direction against desktop and mobile screenshots.

## Prerequisites

Skills-compatible coding agent; Python 3.10+ for comparison generator; modern browser; image inspection for visual checks; Node.js 22 and Chrome/Chromium/Edge for optional bundled screenshot tooling, or equivalent host browser tools

## Installation

Install or set up from the source-backed instructions:

Run npx skills add oil-oil/oil-ui using the upstream-documented installer. Install the complete skill with references, scripts and assets for a supported agent. Invoke oil-ui with the product brief and request rendered direction comparisons when needed. Consult references/tools.md and references/style-explorer.md for helper commands. No installation was executed during metadata review.

- Source: https://github.com/oil-oil/oil-ui

## Documentation

- https://github.com/oil-oil/oil-ui/blob/main/README.md

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/compare-ui-design-directions-and-refine-the-selected-page-with-oil-ui/)