s0xDk/refactoring-ui-skill

A Claude Code skill that applies the concrete design rules from the book Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, hierarchy through weight and color, and depth through emulated light — to building and fixing interfaces.

What it solves

It solves the problem of AI-generated user interfaces that look "amateur" or "off" by providing Claude Code with a concrete set of mechanical design rules. Instead of guessing or using ad hoc values, the AI can apply professional design systems based on the book Refactoring UI.

How it works

This is a "skill" for Claude Code, consisting of a set of Markdown files and CSS tokens. It provides the AI with specific scales for spacing, typography, colors, and shadows, as well as a diagnostic table to translate vague UI complaints into mechanical fixes. When activated, Claude uses these fixed scales and techniques to build visual hierarchy and depth through weight and color rather than just font size.

Who it’s for

Developers using Claude Code who want to improve the visual quality of their web interfaces without being professional designers.

Highlights

  • Fixed Design Scales: Uses constrained spacing, type, color, and shadow scales to ensure consistency.
  • Diagnostic Tooling: Converts vague feedback like "looks cheap" into specific, actionable design fixes.
  • Detailed Reference: Includes systems for building color palettes from scratch using HSL and hue rotation.
  • Contrast-Verified Tokens: Provides a starter set of CSS tokens that are verified for contrast.

Related

  • Project
    plugin87/ux-ui-agent-skills

    A comprehensive kit of instructions, design tokens, and runnable skills that turns AI agents into senior UX/UI architects capable of producing accessible, production-ready UI across any framework.

  • Project
    nateherkai/scroll-craft

    A Claude Code skill that builds premium, scroll-driven websites by enforcing strict professional design standards and unique interaction grammars to avoid generic AI-generated layouts.

  • Project
    Hainrixz/the-architect

    A Claude Code meta-agent that designs rigorous software blueprints with verified stacks and strict acceptance criteria to guide autonomous AI builders.

  • Project
    ItsssssJack/power-design

    A Claude Code skill that generates professional presentation decks and responsive websites by combining extracted brand DNA with codified, research-backed design principles.

  • Project
    vibe-motion/skills

    A collection of modular animation and rendering skills for AI agents to generate professional motion graphics, 3D effects, and promotional videos programmatically.