Auditoría de componentes UI

Auditoría de componentes UI

Antes de construir un design system, auditá el producto real. Una auditoría de componentes revela botones duplicados, inputs inconsistentes, cards con estilos mezclados y patrones que se repiten sin reglas claras.

Qué revisar primero

• Botones: tamaños, estados, iconos, textos y jerarquía.
• Formularios: labels, placeholders, errores, ayuda y validación.
• Cards: padding, títulos, acciones, imágenes y estados vacíos.
• Tablas/listas: densidad, alineación, filtros y acciones masivas.
• Navegación: menú, breadcrumbs, tabs, sidebar y mobile.

Caso práctico: inventario de inconsistencias

Elegí 3 pantallas del mismo producto. Marcá cada componente repetido y anotá cuántas variantes aparecen. Si encontrás 5 botones primarios distintos, no lo arregles todavía: primero documentá el problema.

Componente	Variantes encontradas	Riesgo	Decisión
Botón primario	5	Jerarquía confusa	Unificar tamaño, color y estado
Input	4	Errores poco claros	Definir label, helper y error
Card	6	Layout inconsistente	Crear variantes por uso

Ejercicio práctico: auditoría en 30 minutos

• Tomá screenshots de 3 pantallas.
• Listá al menos 10 componentes repetidos.
• Agrupá variantes que deberían ser el mismo componente.
• Priorizá 3 componentes para normalizar esta semana.

Checklist de entrega

• Inventario con componente, cantidad de variantes y riesgo.
• Una captura anotada por pantalla.
• Una propuesta de 3 decisiones para reducir inconsistencias.
• Un componente rediseñado con estados normal, hover, disabled y error.

Resultado: esta auditoría se puede mostrar como caso de portfolio para roles UI, product design o design systems assistant.