Saltar al contenido
Cursos/Crea webs profesionales con IA desde cero/Laboratorio: detecta y corrige una interfaz genérica

Laboratorio: detecta y corrige una interfaz genérica

Reconoce patrones visuales automáticos y recupera identidad, jerarquía y utilidad sin rediseñar por capricho.

Lección 30 de 4780 min Laboratorio reproducible Codex + GPT-5.6 Sol

Resultado visible

Crearás una auditoría visual que separa identidad, jerarquía y utilidad. Corregirás un patrón cada vez sin pedir un rediseño completo.

Estado roto

Usa una copia con estos síntomas: degradado violeta sin relación con la marca, todas las secciones dentro de tarjetas, tres botones principales, iconos sin etiqueta, selectores nativos sin coherencia, texto intercambiable y animación en cada bloque.

Reproduce y observa

Haz capturas a 390 y 1440 px. Oculta el logotipo y pregunta a otra persona de qué sector parece la web. Marca como defecto todo elemento que podría pertenecer sin cambios a diez negocios distintos. No penalices un componente por ser común: penaliza que no exprese prioridad o contenido.

Prompt de diagnóstico

No rediseñes todavía. Audita la interfaz con BRIEF.md y CONTENT.md.
Clasifica cada hallazgo como identidad, jerarquía, contenido, interacción
o adorno. Para cada uno indica evidencia, impacto en la tarea y corrección
mínima. Conserva patrones convencionales que ayuden a entender la página.
Propón dos direcciones visuales usando los mismos contenidos y componentes.

Implementa la dirección elegida mediante tokens: color por función, dos familias tipográficas como máximo, escala de espacio, anchura de lectura y tres niveles de superficie. Sustituye adjetivos genéricos por contenido concreto. Deja una sola acción prioritaria por contexto.

Verificación y restauración

Repite las capturas, navegación por teclado y prueba de cinco segundos. Comprueba que no aparecieron problemas de contraste ni un aumento grande de CSS/JavaScript. Si la nueva identidad reduce claridad, revierte el último cambio y conserva solo los tokens aprobados.

Fuentes oficiales