Refactoring UI vs Refactoring UI Skills

s0xDk · Standalone skill

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: audit.

Refactoring UI3/5
After: Tally landing page, made with Refactoring UI (s0xDk)
Refactoring UI Skills3/5
After: Tally landing page, made with Refactoring UI Skills

Scroll either page; the other follows.

Refactoring UI (s0xDk)

3/5

Refactoring UI gave Tally a careful, systematic look: Plus Jakarta Sans, an evergreen palette with green-tinted greys and proper spacing, type and shadow scales on the landing, and an indigo app on cool grey for the dashboard. Color is used for meaning, and over-budget states get an icon and a tag as well. It is clean and well built, though the two pages use different palettes. Pick it to tighten an interface rather than to set a brand.

Refactoring UI Skills

3/5

Refactoring UI turns Tally into a clean, generic Tailwind-style SaaS: Plus Jakarta Sans, a grey scale and emerald, then Inter and slate with teal on the dashboard. Tidy, but anonymous, and the hero card still covers the balance.

Side by side

FieldRefactoring UI (s0xDk)Refactoring UI Skills
Fonts
  • Plus Jakarta Sans (landing)
  • Inter (dashboard)
  • Plus Jakarta Sans
  • Inter (dashboard)
Colors
  • #f9fbfa green-grey white
  • #0e8160 evergreen
  • #162723 dark green-grey
  • #4343d0 indigo (dashboard)
  • #f5a70a amber
  • #dd3e2c coral
  • white and grey scale #faf9f7 to #1a1816
  • emerald #0b6a46
  • dashboard slate #f7f8fa to #151922 with teal
Pick it for
  • cleaning up existing UIs
  • SaaS dashboards
  • design-system scales
  • developer-built products
  • B2B SaaS
  • admin dashboards
  • internal tools
Skip it for
  • brands that want a strong visual identity
  • editorial sites
  • playful products
  • brands that need personality
  • editorial sites
  • playful consumer apps
Observations
  • the landing is evergreen and the dashboard indigo, so the two pages do not feel like one product
  • landing hero: a notification card covers the "$1,284" balance
  • the look is generic, the same as many Tailwind templates

How the brief works

Install Refactoring UI (s0xDk)

1 Run in your terminal

npx degit s0xDk/refactoring-ui-skill#main .claude/skills/refactoring-ui

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 Refactoring UI Skills

1 Run in your terminal

cp -r .claude-plugin/* ~/.claude/plugins/refactoring-ui-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.

From PLATFORM_GUIDE.md (linked from README); run inside a clone of the repo.

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