luizhcrocha/design-engineering

Ingeniería de diseño

Las buenas interfaces están hechas de muchos pequeños detalles que los usuarios nunca notan uno por uno. Cada detalle a continuación tiene una razón. Aplícalo donde corresponda y estudia por qué las interfaces que admiras se sienten como lo hacen.

Elige el skill adecuado para el trabajo

• Una animación para construir: animate.
• Un diff cuyo movimiento necesita un veredicto: review-animations.
• Una base de código cuyo movimiento hay que auditar y planificar: improve-animations. Lugares que deberían empezar a moverse: find-animation-opportunities. Movimiento que eliminar: remove-animations.
• Varios elementos moviéndose juntos: choreograph. Una animación que pierde fotogramas: animation-performance.
• Arrastrar, deslizar y hojas en la web: gestures.
• Un componente para probar bajo estrés con datos del peor caso: break-ui.
• Gestos, muelles, materiales y tipografía al nivel de Apple: apple-design.
• Una aplicación web que se siente mal en un teléfono: mobile-native.
• Una biblioteca de componentes para elegir: pick-ui-library.
• Varias direcciones para una misma pieza de IU: prototype.

Este skill cubre el resto: pulido de componentes y una revisión de IU que va más allá del movimiento.

Reglas que detectan la mayoría de los problemas

1. Decide si debe animar o no. Una acción vista 100 o más veces al día, o iniciada desde el teclado, no recibe animación.
2. Nombra propiedades exactas. Nunca transition: all.
3. Entrada y salida con ease-out o una curva personalizada fuerte, como cubic-bezier(0.23, 1, 0.32, 1). Nunca ease-in en IU.
4. Mantén las animaciones de IU por debajo de 300 ms. Un menú desplegable tarda de 150 a 250 ms; la retroalimentación de presión tarda de 100 a 160 ms.
5. Dale a cada elemento presionable un estado :active, como transform: scale(0.97).
6. Nunca entres desde scale(0). Empieza desde scale(0.95) con opacity: 0.
7. Los popovers escalan desde su disparador (transform-origin: var(--transform-origin) en Base UI). Los modales se mantienen centrados.
8. Usa transiciones, no keyframes, para cualquier cosa que un usuario pueda volver a activar en medio del vuelo. Se redirigen desde el valor actual.
9. Anima solo transform y opacity. En Motion, usa la cadena completa de transform en lugar de los atajos x e y.
10. Respeta prefers-reduced-motion con movimiento más suave, no ninguno, y coloca los efectos hover dentro de @media (hover: hover) and (pointer: fine).

Cuando la sensación no pueda juzgarse desde el código, dilo. Reproduce la animación de 2 a 5 veces su duración o fotograma a fotograma en DevTools, prueba los gestos en un dispositivo real y vuelve a mirarla al día siguiente.

Formato de revisión

Una revisión de IU es una tabla markdown con las columnas Antes, Después y Por qué, una fila por problema. Nunca escribas "Antes:" y "Después:" en líneas separadas.

Antes	Después	Por qué
transition: all 300ms	transition: transform 200ms ease-out	Nombra las propiedades; all anima lo que no querías
transform: scale(0)	transform: scale(0.95); opacity: 0	Nada en el mundo real aparece de la nada
Sin estado :active en un botón	transform: scale(0.97) en :active	Una presión necesita retroalimentación instantánea

La referencia

Para una solución rápida a un síntoma común (números parpadeantes, avatar aplastado, "1 miembros"), consulta primero references/ui-cheatsheet.md.

Lee references/craft.md para conocer las razones y el código detrás de cada regla: el marco de decisión de animaciones, muelles, principios de componentes (tooltips, desenfoque sobre un crossfade, @starting-style), transformaciones, patrones de clip-path (pestañas, mantener presionado para eliminar, revelaciones de imagen, controles deslizantes de comparación), manejo de arrastre y gestos, rendimiento, accesibilidad, principios para componentes que la gente ama, escalonamiento, depuración y la lista de verificación de revisión.