Diseño UI y Sistemas de Diseño

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 m
Tiempo de estudio
18 Min

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.









ComponenteVariantes encontradasRiesgoDecisión
Botón primario5Jerarquía confusaUnificar tamaño, color y estado
Input4Errores poco clarosDefinir label, helper y error
Card6Layout inconsistenteCrear 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.
Texto Leccion 4/8
Estas viendo
Auditoría de componentes UI
Hablar por WhatsAppContactar por WhatsApp