Hacer que las interfaces se sientan mejor

¿Qué hace Hacer que las interfaces se sientan mejor?

Usa este skill para los pequeños detalles de diseño e ingeniería que se acumulan en una interfaz más pulida.

Fuente: rescatado de un PR comunitario desactualizado #1659 por linus707.

Cuándo usarlo

• El usuario dice que la IU se siente mal, plana, genérica, apretada, saltarina o sin terminar.
• Estás construyendo controles, tarjetas, listas, tableros, navegación, formularios o barras de herramientas.
• Un componente necesita estados de hover, activo, foco, entrada, salida, carga o vacío.
• Una revisión frontend necesita recomendaciones específicas de antes/después.

Principios fundamentales

Radio concéntrico

Para superficies redondeadas anidadas cercanas:

radio exterior = radio interior + padding

Si el padding es grande, trata las capas como superficies separadas en lugar de forzar la fórmula. El objetivo es la coherencia óptica, no la adoración a la fórmula.

Alineación óptica

El centrado geométrico no siempre es el centrado visual. Los botones de icono, triángulos de reproducción, flechas, estrellas e iconos asimétricos a menudo necesitan un pequeño desplazamiento. Corrige el SVG cuando sea posible; de lo contrario, ajusta con un cambio de margen o padding a nivel de píxel.

Sombras y bordes

Usa bordes para separación y anillos de foco. Usa sombras en capas cuando una tarjeta, botón, menú desplegable o popover necesite profundidad. Las sombras deben ser transparentes y lo suficientemente sutiles para funcionar en distintos fondos.

Ajuste de texto

• Usa text-wrap: balance en encabezados y títulos cortos.
• Usa text-wrap: pretty en texto de cuerpo corto a mediano, leyendas, descripciones y elementos de lista.
• Evita ambos en prosa larga, código y contenido preformateado.
• Usa font-variant-numeric: tabular-nums para contadores, temporizadores, precios, tablas y otros números que se actualizan.

Suavizado de fuentes

En macOS, aplica suavizado de fuentes antialiasing en el diseño raíz cuando el proyecto no lo haga ya:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Contornos de imágenes

Las imágenes a menudo necesitan un contorno interior sutil para que sus bordes no se difuminen con la superficie.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Usa contornos alfa neutros en negro o blanco. No tiñas los contornos de las imágenes con la paleta de la marca.

Movimiento

Usa transiciones CSS para cambios de estado interactivos porque pueden redirigirse cuando el usuario cambia de intención a mitad del movimiento. Reserva los keyframes para entradas únicas por etapas o secuencias de carga.

Buenos valores predeterminados de movimiento:

• Entrada: combina opacidad, un pequeño translateY y, opcionalmente, desenfoque.
• Salida: más corta y silenciosa que la entrada, normalmente 150ms.
• Presión: scale(0.96) para botones táctiles, con una forma de desactivarlo cuando el movimiento distrae.
• Intercambio de iconos: fundido cruzado con opacidad, escala y desenfoque en lugar de alternancias de visibilidad instantáneas.

Ámbito de transición

Nunca uses transition: all. Especifica las propiedades cambiadas:

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Usa will-change solo para el tartamudeo del primer fotograma en propiedades aptas para el compositor como transform, opacity y filter. Nunca uses will-change: all.

Áreas táctiles

Los controles interactivos deben tener al menos un área táctil de 40x40px, idealmente 44x44px donde el diseño lo permita. Expande con un pseudoelemento cuando el icono visible sea más pequeño, pero no permitas que las áreas táctiles expandidas se superpongan.

Resultado de la revisión

Al revisar un pase de pulido de IU, informa cambios concretos en filas de antes/después:

Principio	Antes	Después
Radio concéntrico	Mismo radio en padre e hijo	El radio del padre considera el padding
Números tabulares	El contador se desplaza al cambiar los dígitos	El contador usa tabular-nums
Ámbito de transición	transition: all	Propiedades de transición explícitas

Incluye rutas de archivo y propiedades cuando no sean obvias a partir de los fragmentos. Omite los principios que revisaste pero no cambiaste.

Lista de verificación

• Los elementos redondeados anidados son ópticamente coherentes.
• Los iconos están visualmente centrados.
• Los botones, tarjetas y popovers usan bordes o sombras por la razón correcta.
• Los encabezados y textos cortos evitan ajustes incómodos.
• Los números dinámicos usan numerales tabulares.
• Las imágenes tienen contornos neutros donde sea necesario.
• Las animaciones de entrada y salida están separadas, son sutiles e interrumpibles cuando corresponda.
• Los botones tienen estados activos táctiles sin movimiento exagerado.
• transition: all y will-change: all están ausentes.
• Los controles pequeños aún tienen áreas táctiles utilizables.