oil-oil/oil-ui

What it solves

Oil UI provides a structured design methodology and a set of tools (delivered as an Agent Skill) to push the boundaries of AI-generated user interface design. It solves the problem of generic, bland, or repetitive AI-generated layouts by enforcing a rigorous process of category analysis, tone setting, and visual differentiation to create high-quality, professional-grade UI designs.

How it works

The project is implemented as a "Skill" that can be installed into an AI Agent. It guides the Agent through an 8-step design process:

1. Category Analysis: Analyzing top competitors to decide what to adopt or change.
2. Tone Setting: Translating abstract terms like "premium" into concrete decisions regarding typography, whitespace, and color.
3. Concrete Starting Points: Using specific materials, environments, or characters rather than vague adjectives.
4. First-Screen Strategy: Tailoring the initial view based on whether the page is for browsing, working, or persuading.
5. Differentiation Check: Ensuring diverse directions by comparing skeleton, font, color, and visuals.
6. Memorable Moments: Focusing effort on one or two high-impact interactions or pages.
7. User Selection: Presenting multiple options in a comparison page for the user to choose from.
8. Final Refinement: Performing a "subtraction" phase to remove redundant elements.

Who it’s for

It is designed for users working with AI Agents to build websites, apps, and digital products who want professional UI/UX results without manually doing all the design work.

Highlights

• Agent-Integrated: Installed via npx skills add to enhance an AI Agent's design capabilities.
• Style Comparison Pages: Generates side-by-side previews of different design directions (HTML or images) for easy selection.
• Multi-Device Preview: Supports switching between desktop and mobile views to check actual layout sizes.
• Comprehensive Design Logic: Covers everything from screenshot restoration to brand-aligned polishing and independent review cycles.