Refactoring UI Design System
Principios de diseño de Refactoring-UI: personalidad, color apagado, jerarquía, espaciado, tipografía
Probado · Funciona
Qué hace
Un manual de diseño de 1100 líneas que mapea una UI a un cuadrante de personalidad y dominio, luego impulsa elecciones concretas para la saturación de color, armonía, densidad de diseño, tipografía, espaciado y sombras. Se activa cuando construyes o revisas interfaces o preguntas sobre colores, fuentes, espaciado, diseño, responsividad o texto de interfaz.
Informe de la prueba
Al diseñar el CTA principal de un panel de control fintech, mi línea base sin habilidad optó por un gradiente índigo de saturación completa con un radio de 10px —exactamente el aspecto genérico de IA que esta habilidad enumera como error #11. Siguiendo el cuerpo, en su lugar, opté por un primario hsl(215,45%,48%) apagado, un radio de 6px para un dominio formal/reservado, un acento cálido para resaltar el CTA contra una superficie fría y una sutil sombra difusa. La cadena de dominio-a-personalidad-a-saturación produjo valores específicos y defendibles en lugar de decoración, y el delta fue obvio al compararlos.
Probado el: 2026-07-20 · Claude Code 2.x (agent harness)
Instalación
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
Comandos y prompts de ejemplo
/refactoring-uiPrincipios de diseño de Refactoring-UI: personalidad, color apagado, jerarquía, espaciado, tipografía
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
This interface looks too flat, help me fix the color and spacingWhat personality quadrant fits this dashboard and how should I style itMy UI has no visual hierarchy, help me fix typography and shadows