Refactoring UI

refactoring-ui

Refactoring UI (Adam Wathan & Steve Schoger) is a set of tactical visual improvements that have outsized impact per minute of effort — the insight being that most "ugly" UI is ugly for 3-4 fixable reasons, not because it needs a redesign.

Qué hace esta skill

• Runs the 8 high-leverage fixes against your current design in priority order
• For each fix: names the exact problem, explains why it matters visually, gives the specific CSS or Tailwind change
• Produces a before/after description for every finding
• Outputs a "quick wins" list: 3 changes under 5 minutes each that produce the most visible improvement
• Includes specific values — not "add more padding" but "change padding from 12px to 32px"

Cuándo usarla

• The design is functional but looks amateurish or generic
• You don't have time or budget for a redesign — you need visible improvement fast
• You're building in Tailwind and want specific class substitutions
• After an initial build where you copy-pasted components and the spacing is inconsistent

Proceso

1. Share the design: Screenshots or describe the current state of the component/screen

2. Run the 8 fixes in order (ordered by visual impact):

   Fix 1 — Remove excess borders Look for: borders used to separate sections. Replace with: background color difference or box shadow. Borders add visual noise; contrast does the same job silently.

   Fix 2 — Use fewer font weights Look for: more than 2 weights in any single component. Keep: bold (700) + regular (400). Cut: medium (500), semibold (600) everywhere they appear as filler. Exception: mono code blocks.

   Fix 3 — Add whitespace aggressively Look for: any padding under 24px in a content area. Rule: double the current padding, then consider doubling again. Breathing room signals quality. Cramped spacing signals rush.

   Fix 4 — Use real content Look for: lorem ipsum, "User Name", placeholder numbers. Replace with realistic content length and values. Lorem ipsum hides hierarchy problems that will surprise you in production.

   Fix 5 — Fix low-contrast gray on white Look for: any text lighter than #595959 on a white (#ffffff) background. Minimum: 4.5:1 contrast ratio for body text. "Subtle" gray text is often actually illegible on calibrated screens and projectors.

   Fix 6 — Limit to 2 font sizes per component Look for: 3+ distinct font sizes within a single card, row, or panel. Keep: title size + body size. Any third size is competing for attention instead of creating hierarchy.

   Fix 7 — Use color to communicate, not decorate Look for: color used for "style" without a semantic job. Rule: every color should have a specific job (danger, success, primary action, secondary action). Remove colors that don't have a job description.

   Fix 8 — Align to a spacing system Look for: spacing values that aren't multiples of 4px (or 8px). If a margin is 13px, a padding is 7px, or a gap is 11px — that's a rounding error masquerading as design. Snap everything to the 4px grid.

3. For each finding: output in this format:

   FIX: <fix name>
   Found: <specific element + current value>
   Change: <specific new value or class>
   Tailwind: <old class> → <new class>
   Impact: <why this makes it look better>
   

4. Quick wins summary: Top 3 changes by impact-per-minute

5. CSS/Tailwind patch block: Ready-to-apply changes grouped by component

Ejemplo de prompt

Mi dashboard de analytics se ve genérico y poco profesional. Aquí está el screenshot. Quiero fixes específicos con las clases de Tailwind para aplicar.

Relación con otras skills