workbuddy_skills/oil-ui-pro

中文 · English

oil-ui-pro

An interface design workflow for AI agents: explore distinct directions side by side, choose one, then refine it against real screenshots. Use it for websites, apps, dashboards, and components, or ask for a design review.

See more designs at ui.oiloil.org.

Installation

Send this to your agent:

Install Oil UI Pro for me: run npx github:oil-oil/oil-cli install oil-ui-pro

You can also run the command in your terminal. On first install, a browser opens. Sign in with the oiloil account you used to purchase it and click “Allow.” The design workflow is ready to use after installation, with no extra configuration or other skills. Installing with the command requires Node.js 18 or later. With Oil UI Pro installed, you don't need Oil UI (open source); installing both makes them compete for the same requests.

Using this skill triggers a version check, at most once every 10 minutes. If the server takes longer than 2 seconds, the check is skipped so it never slows down your task. Failed checks retry later when you use the skill again. The check only reads the public version list on ui.oiloil.org and does not upload project content. Offline checks cannot discover new versions, so they produce no reminder.

Automatic updates need Python 3 and Node.js 18 or later. When a new version is found, the skill tries to update itself. If dependencies are missing, authorization has expired, or there is no purchase record, the agent ends its reply with recovery steps and a command containing the current installation's absolute path: npx github:oil-oil/oil-cli update oil-ui-pro --path "<installation path>". Network errors stay silent and retry later. Set OIL_NO_AUTO_UPDATE=1 for reminders without automatic updates, or OIL_NO_UPDATE_CHECK=1 to disable checks entirely.

Python 3 can run as python3 or python, or as py -3 on Windows. If Python 3 is missing, the agent reminds you once and continues the design task.

Usage

Tell your agent what you need, for example:

• “Use oil-ui-pro to explore a few design directions for this course booking product and build pages I can preview.”
• “Create three designs with different typography, colors, and compositions. Put them on a comparison page so I can choose.”
• “Keep the current brand and layout. Improve this form’s hierarchy, error messages, and mobile experience.”
• “Polish this page using the project’s existing design guidelines.”
• “Review these interfaces and explain what to change and how. Leave the files untouched.”

Share any brand assets, screenshots, or existing project you have. It can start without references and only asks questions when the deliverable is unclear.

How it works

• Explore distinct directions, then let you choose. Identify the product category, study its best examples, and develop a tone and concrete directions from the product itself. Decide the first screen before writing copy, then check that the directions really differ. Compare the previews on one page, choose a direction, and say what you like and dislike.
• Create a memorable moment. Focus on one or two details: the response to a tap, a successful payment, AI at work, or a 404 page.
• Polish a single component to the extreme. It first creates a visual anchor, such as a realistic product render, takes the palette from it, and picks one graphic motif to carry throughout. From two or three sketches it deepens just one: every state gets its own visual, the main interaction acts directly on the anchor so results appear as you drag, and review rounds check it up close. It finishes with a showcase image and a short screen recording.
• Refine against real screenshots. Check desktop and mobile views. An independent reviewer who has not seen the work in progress identifies issues and scores the result. Revise and review again, aiming for 9/10 within three rounds. With several directions, a cross-review catches sections that look alike; for new interfaces, the reviewer also completes real tasks on the page.
• Start an existing project by working out what you want. If it looks dated, it first decides whether the current design system is worth keeping, then offers options from a light cleanup to a full reshape. If it is hard to use, it walks the real task, finds why the extra steps exist, and fixes the structure instead of adding hints. For a new feature, it reads the product’s existing habits and proposes genuinely different ways to do the job, keeping the current visual system. Changes land in shared components and design tokens. Small changes, such as a single button, go straight to implementation.

The workflow covers visual hierarchy, typography, color, spacing, interactions and states, layout and responsive behavior, imagery, motion, scroll storytelling, and effects such as light trails, dot patterns, and flowing gradients. Designs vary by product; generated images, animation, and effects are used where they help.

Built-in style comparison page

Compare designs side by side as HTML files, images, or running development pages. Put the current version first as a baseline. Switch between desktop and mobile sizes, open previews at actual size, browse with arrow keys, and add notes. Click “Select” on your choice, then paste the copied sentence into your agent to continue.

Use with

• draw-ui: Generate design images first, choose one, then build from it. Try this when code-based iterations keep falling short and your agent can generate images.
• oil-motion: Turn generated videos or frame sequences into web animation controlled by scrolling or dragging, such as product teardowns or camera fly-throughs. Use it for a striking opening animation.