Side-by-Side HTML Style Comparison vs. One-Shot UI Prompting
Asking an AI agent for a single interface draft is like asking a designer for only one sketch—you have no way to judge whether a different typographic scale, spatial rhythm or surface tone would serve the product better. A core habit in Oil UI is generating a side-by-side HTML comparison board with 3 to 4 genuinely distinct directions using your real product copy before building out full application states.
Key takeaways
- Good taste requires comparison: viewing 3 distinct directions side by side at 1440px or 390px makes strong hierarchy and weak habits obvious immediately.
- Real directions differ in spatial composition, typographic voice, surface brightness and focal controls—not just button color swaps.
- Once you choose a winning direction, commit to its system wholeheartedly instead of splicing incompatible fragments from rejected options.
- The gallery includes complete multi-direction series built from identical briefs—including nine Orvo pages, three Atelier Volders pages and three Fonderie Mercier pages.
npx skills add oil-oil/oil-uiThe built-in side-by-side HTML comparison board works for both desktop and mobile viewports in the free skill.
Why Single-Draft Prompting Traps You in Local Maxima
When an agent generates only one screen, it naturally picks the safest statistical average. If you reply "make it bolder" or "try dark mode," the agent merely patches the same underlying skeleton, often muddying spacing and contrast along the way.
Generating a side-by-side comparison board first opens up the design space before you invest tokens in secondary states. Every candidate direction uses your actual product name, real pricing tiers and real interactive subject matter rather than placeholder lorem ipsum.
| Product & shared brief | Direction A | Direction B | Direction C & further variations |
|---|---|---|---|
| Orvo (AI website builder; $0 / $24.99 / $34.99 monthly; human expert guidance) | Launch Garden (orvo-garden): bright lime canvas with modular cultivation pacing | Tandem (orvo-tandem): warm editorial paper emphasizing human partnership | Coastal Workshop (orvo-coast), Open Creative Studio (orvo-studio), The Launch Line (orvo-launch) and 4 more |
| Atelier Volders (Ghent woodshop making one 3-legged oak stool in 24-unit batches) | Grain & Tenon (volders-grain): centered on 3-year air-dried timber rings and joinery | River Timber (volders-hearth): warm hearthside scale and Korenlei workshop story | The Wedged Oak (volders-wedge): technical joinery cross-sections and specification table |
| Fonderie Mercier (Family bronze bell foundry casting 18 bells per month) | Bronze, with a Voice (mercier-voice): interactive overtone auditioning takes center stage | Eighteen Bells (mercier-pour): organized around monthly furnace batches and inscriptions | The Tuning Sheet (mercier-bell): restrained acoustic ledger and frequency notation |
What Makes Three Directions Truly Distinct
Left unchecked, a model may hand you the exact same three-column grid painted blue, green and purple. Oil UI pushes directions apart across four structural axes (and Oil UI Pro adds an explicit direction-overlap check):
- Different first-screen composition and entry point
- Direction 1 might lead with assertive editorial type and an inline calculator; Direction 2 opens directly into an interactive workbench; Direction 3 uses an asymmetric split.
- Different typographic voice and scale ratio
- Pair a high-contrast editorial serif in one candidate against a crisp grotesque + monospace tabular system in another.
- Different surface brightness and density
- Test how your real content reads on warm paper, crisp daylight white or a focused dark surface appropriate to the category.
- Strict single-winner discipline after selection
- Treat the comparison board as a clean selection step. Once you pick Direction B, build all subsequent states inside Direction B’s rules without Frankensteining widgets from Direction A.
Prompt Template to Trigger a Side-by-Side Comparison Board
Use this prompt whenever you start a new website, app flow or flagship screen redesign:
Use Oil UI to explore design directions for [product name & category].
- Real product content: [Include your headline, 3 core capabilities, exact pricing or key domain fields]
- Target viewport: [1440×900 desktop / 390×844 mobile]
Before building the full production states, generate a side-by-side comparison board with 3 genuinely distinct visual directions. Pull them apart in hero composition, typographic pairing and surface tone while using our real product content. Once I pick a winner, we will refine the full flow.Supported out of the box in both the free Oil UI skill and Oil UI Pro.
Working gallery examples & prompts
Open the live demos at 1440px or 390px to inspect how the model and prompt shaped the final interface.
Atelier Volders · Grain & Tenon
Handcrafted furniture workshop website
The website of Atelier Volders, a two-person woodworking workshop at Korenlei 14 in Ghent, Belgium (from 1440×900, responsive down to 390 wide), with an English interface. They make only one object: De Drievoet, a three-legged solid oak stool turned and wedged by hand from timber air-dried for three years, produced in a single monthly batch of 24 stools. It comes in three heights (32 cm low hearth stool €240, 45 cm dining & desk stool €270, 62 cm counter stool with ash foot-ring €310) and three finishes (soap-scrubbed raw oak, fumed dark oak, boiled linseed oil & beeswax). Visitors can switch height and finish in real time, explore the six-week making process, underside hot-iron batch stamp and Saturday open hours, and reserve a stool from the current batch. No product photos are provided.
Inspect work & prompt →
Atelier Volders · River Timber
Handcrafted furniture workshop website
The website of Atelier Volders, a two-person woodworking workshop at Korenlei 14 in Ghent, Belgium (from 1440×900, responsive down to 390 wide), with an English interface. They make only one object: De Drievoet, a three-legged solid oak stool turned and wedged by hand from timber air-dried for three years, produced in a single monthly batch of 24 stools. It comes in three heights (32 cm low hearth stool €240, 45 cm dining & desk stool €270, 62 cm counter stool with ash foot-ring €310) and three finishes (soap-scrubbed raw oak, fumed dark oak, boiled linseed oil & beeswax). Visitors can switch height and finish in real time, explore the six-week making process, underside hot-iron batch stamp and Saturday open hours, and reserve a stool from the current batch. No product photos are provided.
Inspect work & prompt →
Atelier Volders · The Wedged Oak
Handcrafted furniture workshop website
The website of Atelier Volders, a two-person woodworking workshop at Korenlei 14 in Ghent, Belgium (from 1440×900, responsive down to 390 wide), with an English interface. They make only one object: De Drievoet, a three-legged solid oak stool turned and wedged by hand from timber air-dried for three years, produced in a single monthly batch of 24 stools. It comes in three heights (32 cm low hearth stool €240, 45 cm dining & desk stool €270, 62 cm counter stool with ash foot-ring €310) and three finishes (soap-scrubbed raw oak, fumed dark oak, boiled linseed oil & beeswax). Visitors can switch height and finish in real time, explore the six-week making process, underside hot-iron batch stamp and Saturday open hours, and reserve a stool from the current batch. No product photos are provided.
Inspect work & prompt →
Fonderie Mercier · Bronze, with a Voice
Family bronze bell foundry website
The website of Fonderie Mercier, a third-generation family bell foundry at Quai Saint-Vincent 28 on the Saône river quay in Lyon (from 1440×900, responsive down to 390 wide), with an English interface. They cast a single signature object in 78% copper / 22% tin bell bronze using rammed river-sand moulds: Le Bourdon de Table, lathe-tuned to a precise musical pitch and poured once a month in a fixed lot of 18 bells. It comes in three sizes and pitches (Ø 72 mm desk bell A4 440Hz €180, Ø 96 mm courtyard bell F#4 370Hz €240, Ø 124 mm wall bell with forged iron bracket D4 293.7Hz €340) and three patinas (raw lathe-turned bronze, smoked bronze, verdigris). Visitors can listen to each pitch, switch size and patina, explore the five-stage pouring process, cold-stamped crown record and Friday open hours, and prepare a reservation slip for the next monthly pour. No product photos are provided.
Inspect work & prompt →Oil UI Pro: Direction overlap checks & multi-perspective review
Oil UI Pro adds automated direction-overlap checks (preventing superficial palette swaps) and blind subagent evaluations to help you stress-test candidate directions before scaling to full screens.
npx github:oil-oil/oil-cli install oil-ui-proCommon questions
Is the side-by-side HTML comparison board included in the free open-source skill?
Yes. The free Oil UI skill includes the side-by-side comparison board for both desktop and mobile viewports. Install it via npx skills add oil-oil/oil-ui and ask your agent to propose distinct design directions.
How many directions should I compare at once?
Three to four is the sweet spot. Two options often feel too binary, while more than four dilutes the craft spent on each candidate.
Can I combine the palette from Direction A with the layout of Direction B?
You can swap a cohesive color palette onto a winning layout skeleton, but avoid mixing individual card styles or typography scales from different directions. Ask the agent to apply Direction A’s surface palette cleanly onto Direction B’s layout and re-verify contrast.
Which gallery pieces best demonstrate multi-direction exploration?
Open the nine Orvo landing pages, the three Atelier Volders workshop sites, the three Fonderie Mercier bell foundry sites, or the paired Vesper, Sonar, Archon and Tempo pieces. Each group shares a brief while taking a distinct visual path.