Interface Design vs Oil UI

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Print Romantic way: cream paper, serif headlines, nothing shouting. Both are best for: visual direction, landing pages.

Interface Design3/5
After: Tally landing page, made with Interface Design
Oil UI3/5
After: Tally landing page, made with Oil UI

Scroll either page; the other follows.

Interface Design

3/5

Interface Design gives the default a ledger-and-pencil feel with Newsreader and IBM Plex Mono, and adds envelope icons to the dashboard. It's careful work, but you'd still take it for the baseline at a glance.

Oil UI

3/5

Loaded at last, oil-ui spent longest of the five (7.5 min on the landing page) sketching three hero ideas and built a polished kitchen-table envelope page: fanned envelopes that fill as you scroll and pricing drawn as envelopes. The craft is good, but the colors and type are the default's, and the mobile dashboard scrolls sideways.

Side by side

FieldInterface DesignOil UI
Fonts
  • Newsreader
  • Instrument Sans
  • IBM Plex Mono
  • Fraunces (dashboard)
  • Fraunces
  • Figtree
  • Instrument Sans (dashboard)
Colors
  • #F5F0E6 paper
  • #2E6A4E ledger green
  • #B4472F pencil red
  • #D9C3A0 kraft
  • #F3EEE4 paper
  • #1E4D3A spruce
  • #E8D9BC envelope kraft
  • #B8401F marker red
  • dashboard #B4442B over budget
Pick it for
  • personal finance
  • accounting-flavored consumer apps
  • small business bookkeeping
  • personal finance marketing
  • consumer app landing pages
  • brands with a physical metaphor to show
Skip it for
  • bold brands
  • dark-first apps
  • youth products
  • brands that need to look unlike other AI-made pages
  • dense pro dashboards
  • dark-first apps
Observations
  • dashboard: the chart's "avg" label overlaps the "3.18k" value
  • dashboard mobile: 425 px wide on a 390 px screen, so the page scrolls sideways and the Envelopes card is cut at the right edge
  • landing: the headline ("Give every dollar an envelope."), paper and green are the baseline's
  • landing: the scroll-driven hero leaves a long empty band in a full-page capture, and the closing "Payday is coming" card is low contrast

How the brief works

Install Interface Design

1 Run in your terminal

npx degit dammyjay93/interface-design/.claude/skills/interface-design#main .claude/skills/interface-design

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Taken from the project README. Check the source for the latest instructions.

Install Oil UI

1 Run in your terminal

npx skills add oil-oil/oil-ui

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

Taken from the project README. Check the source for the latest instructions.