refactoring-ui

Apply Refactoring UI principles to diagnose and improve design clarity, spacing, color, and hierarchy.

3|Updated Apr 15, 2026

Search Tags:#design #ui #color #spacing #visual-hierarchy #refactoring-ui

Ready to run

npx skills add https://github.com/eXodes/skills-workspace --skill refactoring-ui-exodes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/eXodes/skills-workspace/tree/main/refactoring-ui
Command: npx skills add https://github.com/eXodes/skills-workspace --skill refactoring-ui-exodes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Expert guidance for applying Refactoring UI principles to diagnose and improve design clarity, spacing, color, and hierarchy without writing code.

Core Features & Use Cases

Applies a structured design vocabulary (hierarchy, layout, color, depth) to reviews and critiques.
Provides concrete, repeatable steps to polish interfaces across tools like Figma or code.
Use Case: share a UI design and receive targeted recommendations aligned with Refactoring UI.

Quick Start

Provide a UI design for critique and have the system improve it using Refactoring UI principles.

Frequently Asked Questions about refactoring-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I improve UI visual hierarchy and spacing in my design?▼

To improve UI visual hierarchy, provide your design artifact to receive targeted Refactoring UI guidance that diagnoses pain points and delivers repeatable steps for polishing layout, color, and depth.

What is the best way to get a UI critique for my Figma design?▼

The best way to get a UI critique is to share your Figma design artifact and receive targeted recommendations aligned with Refactoring UI principles, covering visual hierarchy, spacing, color, and depth without writing code.

Can I use Refactoring UI principles to fix color and depth in a CSS layout?▼

Yes, you can use Refactoring UI principles to fix color and depth in a CSS layout by applying a structured design vocabulary to receive concrete, repeatable steps that polish interfaces directly in code.

Does this UI design review approach require writing code?▼

No, this UI design review approach does not require writing code, as it provides expert guidance for applying Refactoring UI principles to diagnose and improve design clarity, spacing, color, and hierarchy purely from a design artifact.

How do I diagnose design clarity issues in my product team's interface?▼

To diagnose design clarity issues, identify pain points in your UI design artifact and apply a structured Refactoring UI vocabulary covering hierarchy, layout, color, and depth to receive targeted improvement recommendations.

When should I use Refactoring UI principles instead of other design system approaches?▼

Use Refactoring UI principles when you need faster, more consistent design decisions across tools like Figma or CSS, specifically targeting ambiguity in visual hierarchy, spacing, color, and depth without writing code.