Oil UI — Push AI's UI Design Capability to the Limit

How to use

1. 1Identify the category and study the best competitors — Name what kind of product this is, find 2-3 competitors with the most distinctive styles, analyze how and why they design the way they do, then decide what to keep and what to change.
2. 2Define the design tone — Derive five scales from the subject, audience, and brand voice: energy, finish, density, weight, and seriousness. Translate vague words like 'premium' or 'minimal' into visible decisions: typography, whitespace, color proportions.
3. 3Start from something concrete — Each direction starts from a specific engine: a material plus an environment, a scene, a character, or an entire visual language from another field. Find content from the product itself, not from adjectives like 'simple' or 'grand'.
4. 4Design the first screen for the right audience — For content, browsing, or work pages, the first screen IS the first row of content itself. For persuasive pages, choose a first-screen skeleton, wireframe, then write copy. Skeletons must differ across directions; left-right split appears at most once.
5. 5Check differentiation between directions — Across skeleton, typography, color, and key visual, any two directions share at most one element. After making mockups, view them side by side and squint at the light-dark blocks of the first screen — if too similar, reselect the skeleton.
6. 6Leave one memorable moment — Don't try to make the whole page impressive — push just one or two moments to the extreme: a tap feedback, the payment success moment, the AI working process, a 404 page. Keep everything else quiet.
7. 7You decide the taste — Put mockups in the same comparison page, you pick, then explain specifically what you like and dislike.
8. 8Judge by the actual screen — Open the page at desktop and mobile sizes, screenshot and inspect. Have an independent reviewer who hasn't seen the process take a look. Finally, subtract: one page has one protagonist; delete text that doesn't affect understanding, redundant lines, and unnecessary containers.