Frontend Design vs UI Designer

mager · Conrad

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.

Frontend Design3/5
After: Tally landing page, made with Frontend Design (mager)
UI Designer3/5
After: Tally landing page, made with UI Designer (Conrad)

Scroll either page; the other follows.

mager's Frontend Design gives Tally a paper-ledger landing: Fraunces headlines with tomato-red italics, JetBrains Mono labels, a stack of tilted mustard, sage and plum envelopes with hard offset shadows, and a black marquee strip of italic feature names. The dashboard keeps the paper, Fraunces and mono figures under a double-ruled masthead, but swaps the tomato for forest green and looks much like the default. The landing has real character, yet the cream and serif base still sits close to plain Opus, and the phone dashboard scrolls sideways. Pick it for warm consumer products that want a tactile, hand-made feel.

Conrad's UI Designer gives Tally a kraft-paper landing page: tight Fraunces headlines with an italic red 'a place', a stack of colored paper envelopes under a rotating '$0' rubber stamp, a ledger-row feature list and a red featured pricing envelope on a dark green band. The dashboard moves to Young Serif and Bricolage Grotesque with a forest green sidebar, envelope-shaped cards and a striped over-budget state. The details are crafted, but the palette stays in the cream, serif and forest green family of the default, a reminder card covers an envelope amount, and the phone landing page scrolls sideways. Pick it for warm consumer brands that want handmade touches.

Side by side

FieldFrontend Design (mager)UI Designer (Conrad)
Fonts
  • Fraunces
  • Outfit
  • JetBrains Mono
  • Fraunces
  • Figtree
  • Young Serif
  • JetBrains Mono
Colors
  • #f4eee2 paper
  • #1d1a16 ink
  • #d9472b tomato
  • #e0a526 mustard
  • #5d7a5a sage
  • #2f5d46 forest (dashboard)
  • #f4ecdc kraft cream
  • #16302b ink green
  • #d8482f stamp red
  • #d9c39a kraft
  • #9fd3b5 mint
  • #d9a32b mustard
Pick it for
  • warm consumer apps
  • personal finance with personality
  • editorial product pages
  • warm consumer brands
  • crafted, handmade looks
  • personal finance apps
Skip it for
  • dark or technical products
  • brands that must look unlike the default
  • dense pro tools
  • dark interfaces
  • technical tools
  • a look far from the default
Observations
  • the phone dashboard scrolls sideways
  • the dashboard is close to the default cream, serif and green look
  • the cream background and Fraunces carry over from the baseline
  • the phone landing page scrolls sideways
  • a reminder card covers an envelope amount in the hero
  • the palette stays close to the default cream and forest green

How the brief works

Install Frontend Design (mager)

1 Run in your terminal

npx degit mager/frontend-design#main .claude/skills/frontend-design-mager

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.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install UI Designer (Conrad)

1 Run in your terminal

npx degit daniel-dan-conrad/ui-designer-skill#main .claude/skills/ui-designer

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.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.