Refined vs shadcn

Awesome Design Skills · Awesome Design Skills

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 Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

Refined3/5
After: Tally landing page, made with Refined (Awesome Design Skills)
shadcn3/5
After: Tally landing page, made with shadcn (Awesome Design Skills)

Scroll either page; the other follows.

Refined (Awesome Design Skills)

3/5

Refined gives Tally a quiet editorial page: Playfair Display headlines, JetBrains Mono figures, white and warm off-white with thin lines and one deep blue accent. The dashboard uses Playfair for big numbers and keeps color to blue and red. It is clean and calm, though it is a familiar look. Pick it for understated premium products.

shadcn (Awesome Design Skills)

3/5

shadcn gives Tally the familiar shadcn/ui look: Geist type, thin zinc borders, black buttons, Fira Code numbers and a solid black Plus card. The dashboard has a sidebar with the household switcher and color only for status. It is clean and correct, but it is what many AI-built apps already look like. Pick it if you build on shadcn/ui and want pages that match.

Side by side

FieldRefined (Awesome Design Skills)shadcn (Awesome Design Skills)
Fonts
  • Playfair Display
  • JetBrains Mono
  • Inter (dashboard)
  • Geist
  • Fira Code
Colors
  • #ffffff white
  • #f8f7f4 off-white
  • #1d4ed8 deep blue
  • #3b82f6 blue
  • #111827 ink
  • #e5e3de hairline
  • #ffffff white
  • #fafafa sidebar
  • #000000 black
  • #e4e4e7 zinc border
  • #52525b zinc text
  • #16a34a green
Pick it for
  • premium SaaS
  • personal-finance apps
  • editorial landing pages
  • calm dashboards
  • shadcn/ui projects
  • SaaS dashboards
  • developer tools
  • admin panels
Skip it for
  • playful brands
  • dark-mode products
  • dense admin tools
  • brands that want to stand out
  • consumer apps that need warmth
  • editorial sites
Observations
  • close to many serif-plus-blue templates
  • looks like a stock shadcn template

How the brief works

Install Refined (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/refined#main .claude/skills/refined

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 shadcn (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/shadcn#main .claude/skills/shadcn

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.