Refactoring UI Design System

Refactoring-UI Designprinzipien: personality, muted color, hierarchy, spacing, type

von jaywilburn · jaywilburn/refactoring-ui-skill

Getestet · Funktioniert ★ 8.8/10

Refactoring UI Design System — Refactoring-UI Designprinzipien: personality, muted color, hierarchy, spacing, type

Was es kann

Ein 1100-line design playbook, das eine UI einem personality quadrant und domain zuordnet und dann concrete choices für color saturation, harmony, layout density, typography, spacing und shadows steuert. Wird ausgelöst, wenn Sie interfaces erstellen oder überprüfen oder nach colors, fonts, spacing, layout, responsiveness oder interface copy fragen.

Testbericht

Styling a fintech dashboard's primary CTA, my no-skill baseline reached for a full-saturation indigo gradient with a 10px radius — exactly the generic AI look this skill lists as mistake #11. Following the body I instead landed on a muted hsl(215,45%,48%) primary, a 6px radius for a formal/reserved domain, one warm accent to advance the CTA against a cool surface, und a subtle diffused shadow. The domain-to-personality-to-saturation chain produced specific, defensible values rather than decoration, und the delta was obvious side by side.

Getestet am: 2026-07-20 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/jaywilburn/refactoring-ui-skill
mkdir -p ~/.claude/skills
cd refactoring-ui-skill && cp -r skills/refactoring-ui ~/.claude/skills/refactoring-ui

Befehle & Beispiel-Prompts

/refactoring-uiRefactoring-UI Designprinzipien: personality, muted color, hierarchy, spacing, type

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

This interface looks too flat, help me fix the color and spacing
What personality quadrant fits this dashboard and how should I style it
My UI has no visual hierarchy, help me fix typography and shadows

Vollständiger Testbericht (Englisch) →