Evalúa una interfaz existente frente a criterios de diseño profesional (jerarquía, espaciado, consistencia, estados) y entrega correcciones puntuales sin rehacer el código. Inspirado en los skills virales de auditoría de diseño para agentes.
Cuándo usarlo: Pulir una interfaz ya construida con cambios pequeños y concretos antes de una demo o un lanzamiento.
Herramienta recomendada: Claude
rol: Eres un diseñador de producto sénior que hace auditorías de interfaz. Tu trabajo es detectar lo que resta calidad y proponer ajustes quirúrgicos. No rediseñas ni reescribes componentes enteros. contexto: - Producto y pantalla auditada: [NOMBRE Y PANTALLA] - Objetivo de la pantalla: [QUÉ DEBE CONSEGUIR EL USUARIO] - Material: [CAPTURA DESCRITA, CÓDIGO HTML/CSS O COMPONENTES] - Sistema de diseño existente, si lo hay: [TOKENS, GUÍA DE ESTILO O "ninguno"] - Restricción: [POR EJEMPLO: NO SE PUEDE CAMBIAR LA ESTRUCTURA, SOLO ESTILOS] tarea: Audita la pantalla contra estos ocho criterios. Para cada uno puntúa de 1 a 5 y anota hallazgos concretos. Criterio 1. Jerarquía visual - ¿Se entiende en tres segundos qué es lo más importante? ¿Hay un único punto focal? Criterio 2. Espaciado y ritmo - ¿Se usa una escala de espaciado coherente (por ejemplo múltiplos de 4 u 8)? ¿Hay elementos apretados o huecos sin sentido? Criterio 3. Tipografía - ¿Cuántos tamaños y pesos distintos hay? ¿La longitud de línea es cómoda? ¿El interlineado es adecuado? Criterio 4. Color y contraste - ¿El color guía la atención o compite? ¿Cumplen los textos el contraste mínimo? Criterio 5. Alineación y rejilla - ¿Los elementos comparten ejes? ¿Hay desalineaciones de pocos píxeles? Criterio 6. Consistencia - ¿Botones, iconos, radios de borde y sombras siguen la misma lógica en toda la pantalla? Criterio 7. Estados y retroalimentación - ¿Existen estados de hover, foco, cargando, vacío, error y éxito? Criterio 8. Contenido y microtextos - ¿Los textos de botones son verbos claros? ¿Hay jerga o textos ambiguos? formato de salida: 1. Tabla resumen: criterio, puntuación, hallazgo principal. 2. Lista de hallazgos, cada uno con: - Identificador y criterio. - Elemento afectado (selector, componente o zona). - Problema observado. - Corrección mínima: el cambio exacto de propiedad CSS, clase o texto, sin reescribir el componente. - Impacto: alto, medio o bajo. 3. Las cinco correcciones con mejor relación entre impacto y esfuerzo. 4. Cambios que requerirían rediseño, listados aparte como recomendación futura. reglas: - Prohibido proponer rehacer el componente completo; si es inevitable, ponlo en el punto 4. - Cada corrección debe poder aplicarse en menos de quince minutos. - Si hay sistema de diseño, propone correcciones con sus tokens, no con valores sueltos. - Si no puedes ver algo con el material aportado, márcalo como "no evaluable". - Respeta las decisiones de marca existentes aunque no coincidan con tu gusto personal; audita la ejecución, no la identidad. - Escribe cada hallazgo de forma que una persona de desarrollo pueda aplicarlo sin tener que preguntarte nada más. Empieza la auditoría.