review-web-designRevisar el diseño web en cuanto a calidad del diseño, tipografía, uso del color, espaciado, comportamiento responsivo, consistencia de marca y jerarquía visual. Cubre la evaluación de principios de diseño y recomendaciones de mejora. Usar al revisar una maqueta antes del desarrollo, evaluar un sitio implementado en cuanto a calidad de diseño, proporcionar r…
Independent GitHub snapshot · Automated classification · Original documentation governs
Evaluar un diseño web en cuanto a calidad visual, consistencia y efectividad en distintos dispositivos.
La jerarquía visual guía el ojo del usuario a través del contenido en orden de importancia.
## Evaluación de Jerarquía Visual
| Página/Sección | Punto Focal | ¿Jerarquía Clara? | Problemas |
|---------------|-------------|------------------|----------|
| Inicio | CTA en el hero | Sí | El CTA secundario compite con el principal |
| Página de producto | Imagen del producto | En su mayoría | El precio no es lo suficientemente prominente |
| Formulario de contacto | Botón de envío | No | El título del formulario tiene el mismo tamaño que el texto del cuerpo |
Esperado: Cada página/sección principal evaluada en cuanto a jerarquía visual clara. En caso de fallo: Si las maquetas no están disponibles, evalúe desde el código en vivo usando las herramientas de desarrollo del navegador.
/* Example well-structured type scale (1.25 ratio) */
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39.06px */
}
Esperado: Tipografía evaluada en cuanto a consistencia, legibilidad y jerarquía. En caso de fallo: Si el diseño usa más de 3 familias de fuentes, recomiende una consolidación.
## Evaluación de Color
| Uso | Color | Ratio de Contraste | WCAG AA | Notas |
|-----|-------|-------------------|---------|-------|
| Texto del cuerpo sobre blanco | #333333 | 12.6:1 | Pasa | Bien |
| Texto de enlace sobre blanco | #2563eb | 5.2:1 | Pasa | Bien |
| Texto atenuado sobre gris claro | #9ca3af sobre #f3f4f6 | 2.1:1 | FALLA | Aumentar contraste |
| Texto del botón CTA | #ffffff sobre #22c55e | 3.1:1 | FALLA para texto pequeño | Usar verde más oscuro o texto más grande |
Esperado: Paleta de colores revisada en cuanto a coherencia, accesibilidad y consistencia semántica. En caso de fallo: Use una herramienta de verificación de contraste (WebAIM) para verificar los ratios exactos.
Auditoría de espaciado:
## Verificación de Consistencia de Espaciado
| Par de Elementos | Brecha Esperada | Brecha Real | ¿Consistente? |
|-----------------|----------------|-------------|--------------|
| Título de sección a contenido | 24px | 24px | Sí |
| Tarjeta a tarjeta | 16px | 16px/24px | No — inconsistente |
| Etiqueta de formulario a entrada | 8px | 4px/8px/12px | No — varía |
Esperado: El diseño usa una cuadrícula sistemática y una escala de espaciado consistentemente.
En caso de fallo: Si el espaciado es inconsistente, recomiende adoptar una escala de espaciado (p. ej., space-* de Tailwind).
Probar en los puntos de quiebre clave:
| Punto de Quiebre | Ancho | Representa |
|---|---|---|
| Móvil | 375px | iPhone SE / teléfonos pequeños |
| Móvil L | 428px | iPhone 14 / teléfonos grandes |
| Tableta | 768px | iPad en portrait |
| Escritorio | 1280px | Portátil estándar |
| Ancho | 1536px+ | Monitor de escritorio |
Verificar en cada punto de quiebre:
## Revisión Responsiva
| Punto de Quiebre | Diseño | Objetivos Táctiles | Texto | Imágenes | Navegación | Problemas |
|-----------------|--------|-------------------|-------|---------|-----------|---------|
| 375px | OK | OK | OK | Desbordamiento en hero | Hamburguesa | La imagen hero se recorta |
| 768px | OK | OK | OK | OK | Hamburguesa | Ninguno |
| 1280px | OK | N/A | OK | OK | Navegación completa | Ninguno |
| 1536px | OK | N/A | Línea demasiado larga | OK | Navegación completa | Agregar max-width al contenido |
Esperado: Diseño probado en todos los puntos de quiebre clave con problemas documentados. En caso de fallo: Si las herramientas de prueba responsiva no están disponibles, revise las media queries de CSS para cobertura.
Esperado: Elementos de marca verificados frente a las directrices con desviaciones específicas anotadas. En caso de fallo: Si no existen directrices de marca, anote esto como recomendación y evalúe la consistencia interna en su lugar.
## Revisión de Diseño Web
### Impresión General
[2-3 oraciones: calidad general, aspectos más fuertes y más débiles]
### Jerarquía Visual: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Tipografía: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Color: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Diseño y Espaciado: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Diseño Responsivo: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Consistencia de Marca: [Puntuación/5]
[Hallazgos clave con referencias específicas]
### Mejoras Prioritarias
1. [Cambio más impactante — específico y accionable]
2. [Segunda prioridad]
3. [Tercera prioridad]
### Notas Positivas
1. [Lo que funciona bien y debe preservarse]
Esperado: La revisión proporciona retroalimentación específica con referencias visuales y mejoras priorizadas. En caso de fallo: Si la puntuación parece arbitraria, use un sistema más simple de pasa/preocupación/falla en su lugar.
review-ux-ui — usabilidad, patrones de interacción y accesibilidad (complementario al diseño visual)setup-tailwind-typescript — implementación de Tailwind CSS para sistemas de diseñoscaffold-nextjs-app — andamiaje de aplicaciones Next.js