UX/UI Agent Skills vs Top Design

Standalone skill · wondelai

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.

UX/UI Agent Skills3/5
After: Tally landing page, made with UX/UI Agent Skills
Top Design3/5
After: Tally landing page, made with Top Design (wondelai)

Scroll either page; the other follows.

UX/UI Agent Skills

3/5

Once loaded, UX/UI Agent Skills pulls three of its skills (design-screen, design-doctrine, data-dashboard) and produces a careful, well-reasoned version of the default: Newsreader serif, ink green and ochre, and a dashboard that explains pace and what is unassigned. Solid work, though it still reads as the familiar cream-and-green look.

Top Design (wondelai)

3/5

Top Design treats Tally like a printed ledger: warm paper, a very large Fraunces headline ("Every dollar, accounted for.") with a red tally mark that draws itself, and the same mark as the logo. The dashboard sets "$640." huge in Instrument Serif over a single split bar, with one persimmon accent. It is elegant and has a clear idea, though the warm paper and serif are near the default. Pick it for premium, editorial product pages.

Side by side

FieldUX/UI Agent SkillsTop Design (wondelai)
Fonts
  • Newsreader
  • Instrument Sans
  • Fraunces (dashboard)
  • Fraunces (landing)
  • Instrument Serif (dashboard)
  • Geist
  • Geist Mono
Colors
  • #F5F0E6 paper
  • #255A45 green
  • #C4882A ochre
  • #9A4A30 clay
  • dashboard #C4592B terracotta
  • #f3eee4 paper
  • #17150f ink
  • #e5482a persimmon red
  • #1d2a22 moss
  • #efe9dc chalk
  • #5b7a5f sage
Pick it for
  • personal finance
  • consumer SaaS dashboards
  • household or shared-money apps
  • premium consumer products
  • editorial landing pages
  • brand-led startups
  • calm dashboards
Skip it for
  • brands that need to look unlike other AI-made pages
  • dark-first apps
  • bold youth brands
  • dense admin tools
  • playful brands
  • dark-mode products
Observations
  • landing hero: the "Rent due Friday" note covers the Household amount on the phone mockup
  • dashboard chart: the value labels above the first two bars crowd into each other
  • landing and dashboard stay in the baseline's paper and green family
  • the warm paper and big serif are close to the default look; the red tally mark is what sets it apart

How the brief works

Install UX/UI Agent Skills

1 Run in your terminal

/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills

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

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

Plugin install is 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 Top Design (wondelai)

1 Run in your terminal

npx degit wondelai/skills/plugins/ux-design/skills/top-design#main .claude/skills/top-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.

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

Check the source for the latest instructions.