Skip to content
Oil UI

Oil UISkill

by oil-oil
Released
v0.19.1
MIT
Repository Docs
markdown Design & Creative

Summary

Interface-design skill that explores several distinct visual directions side by side, then refines the chosen one against real screenshots.

Features

  • Three distinct design directions compared side by side
  • Competitor research before designing
  • Desktop and mobile screenshot-based refinement
  • Screenshot recreation and interface review
  • MIT licensed, no configuration needed

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

---
name: oil-ui
description: Design, improve and review interfaces for websites, apps, dashboards and components. Explore distinct design directions, compare styles side by side, and refine visual hierarchy against real screenshots.
---

# Oil UI (summary)

Use for new interface design, style comparison, visual polish, screenshot recreation and interface review. Not for business logic, APIs, builds or code cleanup without visible UI changes.

## Workflow
1. Set a design north star from the product category, first-screen focus and brand, not from default templates.
2. For new interfaces, build three visually distinct first-screen directions in a comparison page; the user picks one.
3. Build the full visual and interaction structure.
4. Capture desktop and mobile screenshots of key states.
5. Run an independent review where available, then a reduction pass that removes unnecessary elements.
6. Deliver design notes: direction, changes, evidence.

Full skill: https://github.com/oil-oil/oil-ui

Usage Instructions

Learn how to use this skill with different AI agents.

Generic Instructions

Install with npx skills add oil-oil/oil-ui, or ask a skill-capable agent to install https://github.com/oil-oil/oil-ui. No extra configuration is required.

Example Usage

Design a landing page for a developer-tools startup: show me three distinct directions first.

Description

Oil UI is an open-source (MIT) interface-design skill for AI coding agents. Instead of producing one generic layout, it first identifies the product category and studies its most distinctive competitors, then turns vague style words into concrete choices about typography, whitespace and colour density.

For a new interface it builds three visually different first-screen directions in a built-in comparison page, requiring any two directions to share at most one of layout, typography, colour or hero visual. You pick a direction, give feedback, and the agent builds the full page, concentrating polish on one or two memorable moments and keeping the rest restrained.

The result is verified with desktop and mobile screenshots, an optional independent review, and a final reduction pass that strips anything unnecessary. It also handles screenshot recreation, visual polish and interface review. It covers design judgment only; business logic, APIs and builds are out of scope. Works with Claude Code, Codex and other agents that support the SKILL.md format. A separate paid Pro edition exists; the open-source version is fully usable on its own.

Related Skills

Skill: Stitch: Generate Design

by Google Labs (Stitch)

Featured

Google's official Stitch skill for generating and editing UI screens from text or images — with a mandatory prompt-enhancement pipeline before every call.

Design & Creative
9 views

Skill: fal.ai genmedia CLI

by fal.ai community

Featured

Foundational fal.ai skill that drives the genmedia CLI across 1200+ hosted generative model endpoints — smart routing, schema inspection, async queues and agent-parseable JSON.

DevelopmentDesign & Creative
70 views
Browse all skills →