skills.rest
PlaneInABottle
PlaneInABottleCOMMUNITY
Explore all skills by this author →
GitHub

refactoring-ui

Apply a grayscale-first design system to standardize UI hierarchy, spacing, typography, and color.

1|Updated Aug 26, 2025
Search Tags:#typography#ui-design#design-system#color-palette#visual-hierarchy#refactoring-ui#spacing-sizes
One-click install
npx skills add https://github.com/PlaneInABottle/configs --skill refactoring-ui-planeinabottle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/PlaneInABottle/configs/tree/main/agents/.agents/skills/refactoring-ui
Command: npx skills add https://github.com/PlaneInABottle/configs --skill refactoring-ui-planeinabottle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent UI and ad-hoc design decisions slow product development and create irregular experiences across platforms.

Core Features & Use Cases

  • Visual Hierarchy, Spacing & Sizing, Typography, Color, Depth & Shadows, Images & Icons, and Layout & Composition guide design decisions.
  • Use grayscale-first principles to establish a stable foundation before applying color and embellishments.
  • Real-world use: standardizing component styles, grids, typography scales, and accessibility-conscious color systems.

Quick Start

Start by auditing a UI in grayscale, establish hierarchy and spacing, then apply color and depth deliberately.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I fix inconsistent UI design and speed up iteration across product interfaces?▼

Fix inconsistent UI design by applying an opinionated design system that standardizes visual hierarchy, spacing, typography, color, and depth using fixed scales and diagnostics playbooks for stable product interfaces.

What is the best way to establish visual hierarchy and spacing before applying color?▼

Establish visual hierarchy and spacing by auditing your UI in grayscale first, creating a stable foundation before applying color and depth deliberately to avoid ad-hoc design decisions.

How do I create a scalable typography scale and color palette for a design system?▼

Create a scalable typography scale and color palette by following fixed scales defined in foundation principles, ensuring structured color usage and accessibility-conscious systems across your product interface.

Can I use this design system approach to standardize component styles and grids?▼

Yes, you can use this approach to standardize component styles, grids, typography scales, and accessibility-conscious color systems across platforms to eliminate irregular experiences.

How do I audit an existing UI for visual hierarchy and depth issues?▼

Audit an existing UI for visual hierarchy and depth issues by referring to a diagnostics playbook, evaluating grayscale foundations first, and checking against established spacing and sizing scales.

Why does my UI look inconsistent across different platforms despite using a color palette?▼

Your UI looks inconsistent because ad-hoc decisions bypass structured color usage and fixed scales; applying a grayscale-first foundation before color ensures visual hierarchy and spacing remain stable.

Related Skills

Explore More Design & Creative Skills→
wesleyegbertowesleyegberto
3

frontend-refactoring-ui

Audit and refactor web UI designs for visual hierarchy, spacing, and depth.

Community
Advanced
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
emiltsokovemiltsokov

refactoring-ui

Apply fixed scales for spacing, typography, color, and shadows to standardize UI designs.

Community
Advanced
47network47network
5

design-critique

Audits UI color contrast and typography readability for WCAG alignment and actionable fixes.

Community
Advanced