Oil UI Skill Installation & AI UI Design Guide
Oil UI is a UI design skill for AI agents. It gives the model a design method: start with the task and real content, explore distinct directions, then refine the working interface. Gallery examples include their AI model and original brief, so you can inspect the result before trying the workflow on your own project.
1. Install the free open-source skill
Run this command in your terminal and follow the installer to choose your agent and installation scope. You can also send the command to your agent for help. Skill loading differs between agents; confirm that yours can read Oil UI after installation. The open-source repository has the full instructions.
npx skills add oil-oil/oil-ui2. Give the agent a real task
Explain the product, its audience and the task people need to complete. Provide real content, page scope and technical constraints. For an existing project, identify the business behavior that must stay intact. A clear brief is more useful than a long list of style adjectives.
Use Oil UI to design the home page for my booking tool. Customers of small studios need to pick a service, find an available time and book. Show me distinct design directions first. Keep the existing stack and booking flow.3. Compare directions before refining
Ask your agent to show the directions side by side. Compare hierarchy, typography, layout and the primary action with real content, then choose a direction to refine. Gallery prompts can serve as references, but adapt them to your own product and constraints.
All examples →4. Open the page and complete the task
Check the first screen, long content, mobile layouts and key actions in the working page. Cover the loading, empty and error states your task actually needs. Screenshots help compare visual details; clicking and typing confirm whether the interaction works. Report the specific page, action and result to your agent.
5. Explore Pro when you need the full method
Oil UI Pro covers interactions and states, responsive layouts, existing-project refreshes, reviews from multiple perspectives and task walkthroughs. Buy on the Pro page, or ask your agent to run the installer and help with sign-in, payment and installation. Results still depend on the model, so try the free skill on a real task first.
npx github:oil-oil/oil-cli install oil-ui-proCommon questions
Is Oil UI a component library or template?
It is a design skill that an agent reads for methods and workflows. It does not require a fixed component library or template. The agent implements the interface within your project constraints.
Why do results vary with the same skill?
Examples use different briefs, models and rounds of refinement. Each lists the production model and original prompt. The skill helps a model use its existing ability; it cannot guarantee the same design quality across models.
Can I improve an existing product?
Start with a specific page or task. Identify business flows to preserve, real data and technical constraints, then ask for design directions. After choosing one, verify the complete task, especially existing forms, navigation and state feedback.
Do I need the free skill if I already have Pro?
No. Pro includes the open-source design method. Installing both can make them compete for the same requests, so use Pro on its own if you already have it.
How do I buy, install and update Pro?
The English edition currently costs $9.99 as a one-time purchase with lifetime updates. After buying, install or download from your account, or ask your agent to use the CLI command above. Check the Pro page for current pricing and payment methods.