Design & UX

Refactoring UI

Practical UI design system

Apply practical UI design principles without needing a design background. This skill teaches your AI agent spacing, color, typography, and layout decisions drawn from Refactoring UI — the guide trusted by thousands of developers.

Refactoring UI Adam Wathan & Steve Schoger

Refactoring UI

by Adam Wathan & Steve Schoger

View Book →
Install this skill
npx skills add wondelai/skills/refactoring-ui --global

This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.

Key Concepts

What your agent learns

Visual Hierarchy

Control emphasis with size, weight, and color instead of relying on layout position alone.

Spacing & Sizing Systems

Use a constrained spacing scale to keep layouts consistent and avoid arbitrary pixel values.

Color Palette Strategy

Define primary, neutral, and accent palettes with multiple shades for flexibility.

Typography Choices

Pick typefaces that match the personality of your product and pair them effectively.

Depth & Shadows

Layer elements using elevation cues like shadows and overlapping to add realism.

About the Author

Adam Wathan & Steve Schoger

Creator of Tailwind CSS & self-taught design educator

Adam Wathan is the creator of Tailwind CSS, used by millions of developers worldwide. Steve Schoger is a self-taught designer whose visual tips went viral and changed how developers approach UI design.

View Book →
Example Prompts

Try these with the skill installed

Redesign this settings page to have clearer visual hierarchy using refactoring-ui skill

UI cleanup

Pick a spacing scale and apply it to my card component using refactoring-ui skill

Design system

Improve the color contrast on my dashboard without changing the brand colors using refactoring-ui skill

Accessibility

Make this form feel more polished and professional using refactoring-ui skill

Form design
Related Skills

More in Design & UX

iOS HIG Design
Native iOS app design guidelines
Human Interface Guidelines — Apple
UX Heuristics
Usability evaluation and principles
Don’t Make Me Think — Steve Krug & Jakob Nielsen
Web Typography
Web typography principles and implementation
On Web Typography — Jason Santa Maria
Design of Everyday Things
Foundational design principles: affordances, signifiers, feedback
The Design of Everyday Things — Don Norman
Top Design
Award-winning 10/10 web design
Elite Agency Techniques — Locomotive, Studio Freight, AREA 17
Lean UX
Collaborative, experiment-driven UX design
Lean UX — Jeff Gothelf & Josh Seiden
Microinteractions
Designing details that delight users
Microinteractions — Dan Saffer
Steve Jobs Design Review
Jobs-style reviews: ruthless simplicity, focus, binary verdicts
Steve Jobs — Walter Isaacson
Put it to work

Guides that use this skill

Create · Website

How to Create a New Website with AI Skills

Read guide Improve · Website

How to Improve an Existing Website with AI Skills

Read guide

Install Refactoring UI

Free, open-source, and ready in 30 seconds.

npx skills add wondelai/skills/refactoring-ui --global
Browse on GitHub See All Skills

MIT Licensed · Works with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent & other agentskills.io agents · No account needed

Prove it

Don’t guess your AI engineering level.
Measure it.

25 questions · ~8 min · Free

For hands-on developers

AI Developer Scorecard

How production-grade is your AI engineering?

Twenty-five questions across the practices that separate vibe-coding from production-grade engineering. Instant score, per-section breakdown, and a 30/60/90-day playbook.

Score 0–75 · 30/60/90-day playbook Score yourself For CTOs & founders

CTO Scorecard

Is your engineering team ready for AI at scale?

Twenty-five questions on how your org adopts AI — adoption, governance, automation, and ROI. See where you sit on the path from Reactive to Strategic Leader.

Score 0–75 · Reactive → Strategic Leader Score your org