Design Quality v2

Un skill de ciclo completo para crear y evaluar diseño de interfaces. Para interfaces existentes, audita y puntúa. Para las nuevas, establece una dirección y asegura que la artesanía esté presente. Para las que están rotas, aplica correcciones pase por pase.

Esta versión utiliza subagentes especializados para el Modo Revisión y el Modo Corrección — en paralelo cuando sea posible, y haciendo una inmersión profunda automáticamente cuando una dimensión puntúa ≤ 5.

Compuerta 0: Resolver Tipo de Entrada

Antes de cualquier análisis o creación, identifica lo que se compartió. Esto cambia todo lo que sigue.

Lo que se compartió	Qué hacer
Captura de pantalla / imagen	Analizar visualmente; anotar qué CSS no se puede confirmar
Código fuente HTML / CSS	Leer los estilos; auditoría completa posible
Carpeta del proyecto	Buscar primero archivos CSS/componentes principales; leer antes de puntuar
URL / página en vivo	Leer el DOM; inspeccionar estilos mediante DevTools si el navegador está disponible
Enlace de artifacto	Leer el artifacto; tratar como fuente HTML
Solo descripción de texto	Pedir al menos uno de los anteriores antes de puntuar; describir lo que falta

También detecta el tipo de contexto — esto afecta qué heurísticas se aplican:

Pantalla de app (herramienta, dashboard, producto SaaS): la densidad gobierna; el encabezado es pequeño; la acción ES el contenido
Página (página de aterrizaje, marketing, editorial): más libertad creativa; el hero importa; secciones y ritmo

Cuando no estés seguro, indica tu suposición y procede.

Selección de Modo

Detectar a partir de la solicitud — en caso de duda, empezar con revisión:

Tipo de solicitud	Modo
"revisa", "critica", "audita", "esto se ve generado por IA?"	revisión
"construye", "crea", "diseña esta página"	creación
"arregla", "mejora", "deslopifica", "rediseña"	corrección (revisión → aplicar)
"pule", "se siente un poco fuera de lugar", "casi listo"	pulido

Si existe un archivo PROJECT_DESIGN.md en la raíz del proyecto, léelo primero. Contiene la dirección, paleta y Firma aprobadas — no lo sobrescribas sin preguntar.

Arquitectura de Agentes

Para el Modo Revisión y el Modo Corrección, despacha subagentes especializados en lugar de hacer todo el trabajo en serie. Esto produce un análisis más profundo en menos tiempo.

Cuándo usar agentes

Modo Revisión en cualquier entrada de UI real → despachar siempre 3 agentes de revisión en paralelo
Cualquier dimensión que puntué ≤ 5 → despachar automáticamente el agente de inmersión profunda correspondiente después de la tarjeta de puntuación
Modo Corrección → despachar un agente de corrección dedicado por pase (pases 3 y 4 en paralelo)
Modo Creación Compuerta 1 → opcionalmente despachar un agente de investigación de dirección cuando se conozca la URL o categoría del producto

Fork vs fresco

subagent_type: "fork" — para agentes de revisión y corrección que necesitan el contexto completo de la conversación (la entrada de UI, capturas de pantalla, código)
Por defecto (fresco) — para agentes de investigación de dirección que no necesitan el historial de la conversación

Archivos de instrucciones de agentes

Las plantillas de instrucciones completas están en references/agents/. Consúltalos al despachar — cada archivo es autocontenido con las instrucciones y el formato de salida para ese agente.

Modo Revisión

Auditar, puntuar y priorizar. Sin cambios de código sin preguntar primero.

Paso 0: Despachar 3 Agentes de Revisión en Paralelo

Antes de hacer ningún análisis tú mismo, despacha los tres agentes en un solo mensaje usando la herramienta Agente. Los tres son forks — heredan el contexto completo de la conversación, incluida la entrada de UI.

Agente 1 — Auditor de Slop Plantilla de instrucciones: references/agents/review-slop.md Tarea: auditoría de slop, verificación de plantillas, accesibilidad, móvil/táctil, comprobaciones rápidas de rendimiento.

Agente 2 — Puntuador de Tarjeta de Puntuación Plantilla de instrucciones: references/agents/review-scorecard.md Tarea: puntuar las 8 dimensiones del 1 al 10 con razonamiento por puntuación.

Agente 3 — Analista de Emoción Plantilla de instrucciones: references/agents/review-emotion.md Tarea: Verificación de Estado Sentido en todos los estados clave + mapeo de la Regla Pico-Final.

Espera a que los 3 completen, luego procede al Paso 1.

Paso 1: Sintetizar

Fusiona las salidas de los tres agentes en el formato de salida estándar. Deduplica hallazgos que aparezcan en múltiples agentes. Si los agentes no están de acuerdo en una puntuación, usa el valor más bajo y anota el desacuerdo.

## Auditoría de Slop
[del Agente 1 — cada hallazgo con ubicación y severidad]

## Verificación de Plantillas
[del Agente 1]

## Tarjeta de Puntuación
Ajuste de producto:    X/10   [del Agente 2 — nota de una línea]
Jerarquía:              X/10
Claridad:               X/10
Gusto:                  X/10
Moderación:             X/10
Densidad:               X/10
Artesanía:              X/10
Capacidad de respuesta: X/10
General:                X/10

## Diseño Emocional
[del Agente 3 — Estado Sentido + hallazgos Pico-Final]

## Veredicto
Mejor parte:
Peor parte:
Corrección requerida (P0): [si la hay — si no "ninguna"]
Ganancias rápidas (P1): [máximo 3]

Después de la salida, pregunta si se debe aplicar alguna de las correcciones.

Paso 2: Inmersión Profunda Automática

Después de mostrar la tarjeta de puntuación, verifica cada dimensión. Para cualquier que haya puntuado ≤ 5, despacha automáticamente el agente de inmersión profunda correspondiente sin esperar a que te lo pidan.

Consulta references/agents/deepdive-dispatch.md para la tabla de despacho y las plantillas de instrucciones.

Anuncia antes de despachar: "Jerarquía puntuó 4 — despachando una crítica enfocada de jerarquía visual."

Mapa de inmersión profunda:

Dimensión / hallazgo	Skill a despachar
Jerarquía ≤ 5	skill `critique-visual-hierarchy`
Claridad ≤ 5 (affordances)	skill `critique-affordance`
Claridad ≤ 5 (densidad)	skill `critique-information-density`
Artesanía ≤ 5 (tipografía)	skill `critique-typography`
Artesanía ≤ 5 (color)	skill `critique-color`
Artesanía ≤ 5 (disposición)	skill `critique-composition`
Gusto ≤ 5 (se siente plano)	skill `interfaces-that-feel`
Densidad ≤ 5	skill `critique-information-density`
Problemas de arco emocional	skill `peak-end-rule`

Modo Creación

Antes de escribir cualquier UI, sigue esta secuencia. Cada paso es una compuerta — detente y confirma antes de continuar.

Compuerta 0: Tipo de contexto

Indica cuál aplica antes de proceder:

Pantalla de app — herramienta, dashboard, producto de datos. La densidad, las acciones y los estados gobiernan.
Página — landing, editorial, marketing. La composición, el ritmo y las secciones gobiernan.

Compuerta 1: Agente de Investigación de Producto (opcional pero recomendado)

Si el producto tiene una URL, nombre, o pertenece a una categoría conocida, despacha un agente de investigación antes de preguntar al usuario sobre la comprensión del producto. Esto ahorra un viaje de ida y vuelta y saca a la luz convenciones específicas del dominio que el usuario podría no pensar en mencionar.

Plantilla de instrucciones: references/agents/direction-research.md

Si no se conoce URL ni categoría, saltate este paso y pregunta directamente al usuario.

Verifica si existe un PROJECT_DESIGN.md en la raíz del proyecto. Si existe, léelo — la dirección ya está establecida; salta a la Compuerta 3 (Construcción) y aplica la dirección registrada.

Si no, pregunta o averigua: qué hace el producto, para quién es, cuál es la tarea principal, qué contenido existe, el stack tecnológico, los colores de marca existentes, las fuentes, los componentes.

Pregunta: "¿Mi entendimiento es correcto antes de que establezca la dirección de diseño?" Detente. Espera.

Compuerta 2: Dirección + Diales de Diseño

Deriva cinco líneas del producto — nunca de tendencias, portafolios o lo que se vea cool:

Producto: Qué hace y para quién, una oración simple.
Carácter: 2–3 palabras concretas. tranquilo, preciso, un poco cálido o rápido, técnico, juguetón. "Limpio, moderno, elegante, minimalista, premium" están prohibidos — describen todas las plantillas.
Mundo: El material o lugar al que el producto pertenece naturalmente. Una app de notas: papel y tinta. Una herramienta de monitoreo: instrumentos y turnos nocturnos. Una app de viajes: mapas y luz de ventana. Esto tiñe los neutros, el acento y los momentos visuales.
Momentos: 1–2 lugares en la pantalla donde el diseño se vuelve rico y específico. Todo lo demás se mantiene en silencio para que estos se lean al instante.
Firma: Un pequeño detalle que solo este producto tendría, repetido de forma consistente.

Presenta 1–3 direcciones. Para cada una, muestra tres Diales de Diseño:

Variación  ░░░░░░░░░░  1–10   (1 = minimalista/centrado, 10 = audaz/asimétrico)
Movimiento ░░░░░░░░░░  1–10   (1 = estático, 10 = animado)
Densidad   ░░░░░░░░░░  1–10   (1 = espacioso/editorial, 10 = dashboard/denso)

Pregunta: "¿Qué dirección? ¿Y los diales están bien, o debería ajustar alguno?" Detente. Espera.

Después de confirmar la dirección, sugiere crear un PROJECT_DESIGN.md en la raíz del proyecto:

# PROJECT_DESIGN.md

## Dirección: [Nombre]
Producto: [una oración]
Carácter: [2–3 palabras]
Mundo: [material / lugar]
Momentos: [1–2 lugares específicos]
Firma: [un detalle]

## Diales
Variación: X/10
Movimiento: X/10
Densidad: X/10

## Paleta
Lienzo: [token + hex]
Acento: [token + hex]
Texto principal: [token + hex]
Texto atenuado: [token + hex]

## Tipografía
Display: [nombre de fuente + peso]
Body: [nombre de fuente + peso]
Mono: [nombre de fuente] (si aplica)

## Radio de borde: [valor]px

Principios de Diseño

Con la dirección confirmada, aplica en este orden (los pases anteriores afectan a los posteriores):

Espaciado — establecer primero

Cuadrícula de 8px. Todos los márgenes, rellenos, espacios: múltiplos de 4 u 8. (mt-[13px] → corregirlo.)
Mismo elemento = mismo tamaño. Todas las filas de lista comparten una altura y un espacio.
El espacio muestra agrupación: interior < exterior. Una etiqueta de sección se sitúa más cerca de sus propios elementos que del de arriba.
La navegación es lo más denso: filas de 32–36px, 2–4px entre ellas.

Color

Una rampa neutra, teñida hacia el Mundo. Fondos, superficies, bordes, texto todo de esa rampa.
Un acento, usado raramente: acción principal, selección o el único número que importa.
Tres roles de texto: principal, secundario, atenuado. Nunca diez grises ligeramente diferentes.
Prohibido: gradientes de tono en superficies, texto con gradiente, brillos coloreados, sombras coloridas, manchas radiales, bordes neón.
Acento con texto encima: contraste ≥ 4.5:1.
Prefiere OKLCH para nuevos tokens de color: oklch(L% C H).

Tipografía

Combina una fuente display distintiva con una fuente body limpia. Maximiza el contraste de peso.
text-wrap: balance en todos los encabezados (h1–h3). text-wrap: pretty en texto body y de listas.
-webkit-font-smoothing: antialiased en :root o html.
Texto body mínimo de 14px (prefiere 16px). Un h1 por página.

Componentes

Botones: etiquetas verbo-primero. Un botón principal por sección.
Sin emoji como íconos. Una librería de íconos, un peso de trazo, solo currentColor.
Tarjetas: sombra O borde, no ambos.
Estados vacíos: ilustración + titular + CTA. Nunca solo vacío.
Carga: pantallas de esqueleto (no spinners) después de un retraso de 300ms.
Modales: X, Cancelar y Escape. Enfocar el foco. Devolver el foco al cerrar.
overscroll-behavior: contain en todos los modales, cajones y menús desplegables.
Todos los botones de ícono necesitan aria-label. Todas las entradas de formulario necesitan una <label> asociada.

Regla de un Elemento Brillante

Cada pantalla obtiene un elemento pulido y rico. Todo lo que lo rodea se mantiene en silencio.

Barrera Anti-Genérico

Si el diseño se viera impresionante en una captura de pantalla de portafolio pero hiciera el producto menos claro, recházalo.

Después de Construir

Ejecuta el Modo Revisión (con agentes). Listo cuando: no haya hallazgos P0, general ≥ 7/10, ajuste de producto ≥ 7/10.

Modo Corrección

Ejecuta primero el Modo Revisión para obtener la tarjeta de puntuación. Luego despacha agentes de corrección en orden de pase.

Orden de ejecución:

Pases 1, 2 → secuencial (espaciado primero, luego color)
Pase 3 + Pase 4 → en paralelo (íconos y copy son independientes)
Pases 5–10 → secuencial

Consulta references/agents/fix-passes.md para la plantilla de instrucciones de cada pase.

Para cada pase, anuncia lo que el agente está haciendo e informa por pase: qué cambió y qué aún necesita atención.

Orden de pases:

Espaciado — alineación de cuadrícula de 8px, ritmo, agrupación
Color — eliminar slop, construir desde rampa neutra
Íconos — un conjunto, un tamaño, un trazo, currentColor (en paralelo con Copy)
Copy — eliminar etiquetas emoji, calmar los gritos, hacerlo específico del producto (en paralelo con Íconos)
Tipografía — jerarquía, pesos, text-wrap: balance, text-wrap: pretty, antialiasing, tabular-nums
Disposición — alineación, densidad
Detalles — radios concéntricos, sombras, bordes
Accesibilidad y Táctil — estados de foco, aria-label, touch-action: manipulation, objetivos de 44px, overscroll-behavior
Visuales — ilustraciones de estado vacío, consistencia de íconos, relaciones de aspecto de imágenes. Consulta references/passes-visuals.md
Movimiento — último pase, solo donde añada significado. Consulta references/passes-motion.md

Después de todos los pases: ejecuta los agentes del Modo Revisión nuevamente para verificar. Reporta el delta con respecto a la tarjeta de puntuación original.

Modo Pulido

Para interfaces que están mayormente bien diseñadas pero se sienten un poco fuera de lugar.

Técnica: ralentiza la interfaz al 10% de velocidad en DevTools del navegador (panel Animations) y recorre cada estado: hover, focus, active, loading, empty. Lo que se siente fuera de lugar al 10% es lo que está sutilmente mal a velocidad completa.

Consulta references/micro-polish.md para valores específicos.

Lista de verificación rápida:

Lista de Verificación Pre-Entrega

Antes de marcar cualquier UI como terminada:

Apéndice: Referencias de Instrucciones de Agentes

Esta sección enumera los archivos de instrucciones a los que se hace referencia en los modos anteriores. Cada archivo se encuentra en references/agents/ dentro del skill.

Nombre de archivo	Propósito
`review-slop.md`	Auditoría de slop, verificación de plantillas, accesibilidad, comprobaciones de rendimiento
`review-scorecard.md`	Puntuación de 8 dimensiones con razonamiento
`review-emotion.md`	Análisis de Estado Sentido + mapeo Pico-Final
`deepdive-dispatch.md`	Tabla de despacho para inmersiones profundas automáticas por dimensión
`direction-research.md`	Investigación de dirección de producto a partir de URL/categoría
`fix-passes.md`	Instrucciones de corrección por pase (10 pases)
`micro-polish.md`	Valores de pulido y técnicas de micro-interacción
`passes-visuals.md`	Correcciones de visuales: ilustraciones, relaciones de aspecto de imágenes
`passes-motion.md`	Correcciones de movimiento: adición de animaciones con significado

Apéndice: Guía de Dimensiones de Puntuación

Referencia para el Agente de Tarjeta de Puntuación al puntuar. Cada dimensión representa una propiedad separada de calidad de interfaz:

Ajuste de producto — ¿Esta interfaz parece que fue diseñada para este producto específico, o podría ser cualquier app? El ajuste de producto es alto cuando el diseño se siente como si perteneciera solo a este producto.
Jerarquía — ¿Puedo escanear la página y entender instantáneamente qué es importante? Los encabezados, el tamaño del texto, el peso, el color y la posición crean una jerarquía clara.
Claridad — ¿Cada elemento comunica su propósito sin esfuerzo? Los affordances están claros, las etiquetas son legibles, la navegación no requiere adivinanzas.
Gusto — ¿El diseño se siente distintivo y considerado, o genérico y de plantilla? El gusto alto significa que hay elecciones de diseño intencionales que elevan la experiencia.
Moderación — ¿El diseño usa solo lo que necesita y nada más? La moderación alta significa que se evita el desorden visual y se usa el color/efectos con moderación.
Densidad — ¿La cantidad de información en la pantalla es apropiada para el contexto? Pantallas de app: más densas; páginas marketing: más espaciosas. La densidad incorrecta daña la legibilidad.
Artesanía — ¿Los detalles están bien ejecutados? Tipografía, espaciado, color, alineación, consistencia de íconos: todo está cuidado y pulido.
Capacidad de respuesta — ¿El diseño funciona en todos los tamaños de pantalla y estados (carga, vacío, error, borde)?

Apéndice: Referencia Rápida de Prohibiciones de Diseño

Estos patrones son señales de alerta de interfaces generadas por IA sin dirección de diseño. Espera verlos en entradas que necesitan auditoría:

Gradientes morados (#8B5CF6, #7C3AED, #6366F1) en fondos de tarjetas, encabezados de sección o fondos de hero
Texto con gradiente lineal en encabezados (especialmente púrpura a rosa o púrpura a azul)
Efectos de brillo / desenfoque / vidrio en fondos (backdrop-blur, bg-opacity-10 con superposición de gradiente)
Íconos emoji como íconos de UI (🚀 como icono de botón, ✨ en encabezados, esferas decorativas) — los SVG existen por una razón
Cuadrículas de tarjetas de 6 elementos sin variación semántica (6 tarjetas idénticas que solo difieren en el texto — esta es la firma #1 de contenido generado)
Cuadrículas de características genéricas: 3x3 o 4x2 de tarjetas de características con ícono + título + descripción breve, sin diferenciación del producto
Tipografía Inter usada para todo (display + body + mono) sin contraste tipográfico
Diseños de una sola columna ultra-centrados con amplio margen, especialmente en hero de marketing que es solo texto sobre un gradiente
Fondos de rayas diagonales como textura decorativa
Ondas abstractas decorativas, líneas curvas o garabatos como decoración de fondo
Ilustraciones de stock de personas codeando o mirando pantallas
Iconos genéricos que no están relacionados con la acción
Fondos de contenedores de color sin razón de producto
Sin variación en los tamaños de las tarjetas (todas las tarjetas exactamente del mismo tamaño aunque tengan diferente contenido)
Sin imágenes de pantalla reales en las tarjetas de características (solo íconos genéricos)
Misma estructura de diseño para cada sección de una página de marketing sin cambios de ritmo
Texto de botón en mayúsculas sostenidas
Sin elementos interactivos ni affordances en los primeros 3 pliegues de una landing page
Superposiciones de color sobre imágenes sin relación con la paleta del producto

Design Quality v2 — RomuloRogerio/design-quality-v2

RomuloRogerio/design-quality-v2

¿Qué es design-quality-v2?

Preguntar en tu IA favorita

Documentación