Oil UI: Make Claude Design Your App Three Really Different Ways, Then Pick One
A free, open-source design skill for Claude Code. It explores a few genuinely different directions side by side, you pick one, and it refines that design against real laptop and phone screenshots
Ask Claude for a website and you tend to get the same safe layout every time. Oil UI is a skill that changes how Claude designs: it makes a few really different directions first, puts them on one comparison page, and lets you choose before it builds further. It works for websites, apps, dashboards and components.
What it does, step by step (from the README)
- Understands the product first: names its category and looks at two or three peers with the most distinctive styles.
- Turns words like "premium" and "clean" into real choices: typefaces, white space, how much of the page uses colour.
- Starts each direction from something concrete: a material, a scene, a character, or the visual language of another field (an old newspaper, a painting).
- Makes the directions truly different: of layout, typography, colour and key imagery, any two may share at most one. If two look alike, it changes the layout instead of swapping colours.
- Leaves one moment people remember (a tap, a successful payment, a 404 page) and keeps the rest quiet.
- You pick: every direction goes on one comparison page. Click "Select", paste the copied sentence into Claude, and it carries on from that design.
- Checks the real screen: it opens the finished page at desktop and mobile sizes and checks the screenshots, then removes anything that doesn't help.
Keep reading
Free, for an email.
Unlocks 3 more sections, 1 copy-paste prompt, the document version, and every other guide on the site, for free. Enter your email once to keep reading.
45,000+ follow where these guides come from.No spam. Unsubscribe in one click.