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.
npx skills add agentskillexchange/skills --skill compare-ui-design-directions-and-refine-the-selected-page-with-oil-ui
Use Oil UI when a coding agent must explore alternative visual directions for a new interface before implementing a complete page. Supply the product brief, audience, target viewport, real content and any brand assets. The agent examines the product category and relevant visual references, then proposes three direction cards describing layout, typography, color and imagery. If the user requests rendered comparisons, it creates three distinct first-screen previews using the same content and assembles them into a comparison page.
What this skill actually does
Invoke this workflow when design choices need visible comparison and a recorded selection inside an agent session. After the user selects a direction, the agent develops that direction and checks the rendered result at desktop and mobile sizes. The useful deliverables are the comparison page, selected direction and rationale, implementation or prototype files, and screenshot evidence with remaining limitations.
Install and invoke
Upstream documents npx skills add oil-oil/oil-ui. Install the complete skill, including its references, scripts and assets, into a supported skills-compatible agent. Then request: “Use oil-ui to compare three distinct first-screen designs for this course booking product, put them on a comparison page, and wait for my selection before building the full page.” The upstream workflow starts with written directions unless rendered comparisons have been requested. For existing brand constraints, keep those constraints across the alternatives.
The optional comparison-page generator uses Python 3.10 or later and its standard library; its output opens in a modern browser. The bundled screenshot tooling uses Node.js 22 and Chrome, Chromium or Edge. A host browser tool can supply equivalent evidence when those dependencies are unavailable. Inspect the installed references/tools.md and references/style-explorer.md for the documented commands. Visual acceptance requires an agent that can inspect images, and interaction acceptance requires a running page.
Scope and acceptance
This entry covers the open-source skill’s direction exploration, first-screen comparison, selected-direction refinement and rendered evidence. It does not include Oil UI Pro features or general backend implementation. Keep task outputs in the project task directory. In review-only tasks, return findings without changing project files. Do not report visual or interaction verification when the relevant capability was unavailable.
Accept the handoff when each candidate has a visibly distinct composition, the comparison opens at the intended viewport, the selected direction is recorded, and screenshots of the refined result have actually been inspected. Name any incomplete interactions, generated assets or unverified states.
Compatibility and metadata
The upstream skill explicitly describes its core text workflow as host and model neutral and documents Claude Code, Codex and other agents. Multi-Framework therefore reflects the invocation model. Exact upstream metadata was checked on October 23, 2026: oil-oil/oil-ui had 2,059 GitHub stars and 114 forks, was created September 30, 2026, and was last pushed October 23, 2026. No package download or independent trend count is asserted. Metadata verification does not constitute a security review or an executed installation test. Upstream also includes update checks and Pro recommendations; this catalog entry does not require a purchase.