Browse · Refactoring UI

UX Design

Refactoring UI

Adam Wathan & Steve Schoger

1st ed.

You don't need to be a designer. You need a grayscale-first workflow, a constrained scale, and the willingness to add way more whitespace than feels natural.

About the book

Adam Wathan and Steve Schoger wrote the book for developers who can code a UI but can't explain why it looks amateur. It's dense with concrete, tactical fixes — work in grayscale before adding color, use a constrained spacing and type scale instead of arbitrary values, layer shadows and depth deliberately — rather than abstract design theory. The result reads less like an art class and more like a checklist you can run against any screen you're shipping.

Best used for

  • —Auditing a screen that 'looks off' for visual hierarchy, spacing, and depth issues
  • —Building a constrained design-token scale instead of picking colors and spacing ad hoc
  • —Polishing UI details and dark-mode themes before a launch

“An excellent primer on how to make simple design decisions that could greatly improve your designs.”

— Artem, Goodreads

Install this skill

Run this command in your terminal. The skill will be available in all your Claude Code projects.

mkdir -p ~/.claude/skills/refactoring-ui && curl -fsSL "https://raw.githubusercontent.com/wondelai/skills/main/refactoring-ui/SKILL.md" -o ~/.claude/skills/refactoring-ui/SKILL.md

Once installed, invoke with /refactoring-ui in Claude Code, or let Claude load it automatically when relevant.

Skill by wondelai/skills, licensed MIT.