Profundizar el Diseño
Crea un diseño más propio, no meramente más decorado.
Lee references/recursive-tree.md antes de trabajar. Si el usuario reacciona a un resultado previo insatisfactorio, lee también references/failure-patterns.md.
Distinción fundamental
La granularidad tiene niveles:
- verdad del producto y creencia deseada;
- teorema de marca y metáfora narrativa;
- arquitectura de página y tempo;
- composición de sección e interacción;
- lenguaje de componentes;
- tipografía, color, espaciado, bordes, sombras y pulido de movimiento.
Siempre desciende en este orden. Un conjunto de tokens más grande, más sombras o más microinteracciones no es un diseño más profundo cuando los niveles 1-4 permanecen sin cambios.
Comienza desde la evidencia renderizada
Para una interfaz existente:
- Conserva la implementación actual y los cambios del usuario.
- Captura la vista de escritorio y móvil del primer viewport.
- Inspecciona al menos dos secciones posteriores y una interacción significativa.
- Indica qué está funcionando objetivamente.
- Explica por qué la página es olvidable en cinco segundos.
- Separa las puertas funcionales de los juicios de gusto.
Trata "sigue siendo mediocre" como una prueba de diseño fallida. No defiendas una puntuación anterior ni continúes la misma dirección por defecto.
Construye un árbol binario acotado
En cada nodo que cambie de dirección, crea exactamente dos ramas materialmente diferentes. Una rama válida cambia el argumento visual, la estructura de la información o la interacción característica. Un cambio de paleta no es una rama.
Usa búsqueda en haz (beam search):
- expande dos ramas;
- haz ambas visibles en la fidelidad útil más económica;
- compáralas por pares;
- conserva la rama más fuerte y un retador creíble;
- desciende un nivel;
- retrocede cuando ambos hijos heredan la misma debilidad.
No construyas todas las hojas posibles. Invierte profundidad en decisiones consecuentes, no en volumen combinatorio.
Puertas de profundidad requeridas
Profundidad 0: invariante del producto
Escribe:
- el visitante;
- el momento de tensión;
- lo que deberían entender, sentir y hacer;
- la verdad del producto que los competidores no pueden reclamar honestamente de la misma manera.
No implementes hasta que esto sea específico.
Profundidad 1: dos teoremas de marca
Crea dos posiciones de una oración con diferentes implicaciones. Cada una debe generar:
- una metáfora narrativa;
- una gramática espacial;
- una prioridad de contenido;
- un mecanismo característico;
- una anti-referencia explícita: qué esta dirección no debe parecerse.
Busca de tres a cinco referencias actuales y relevantes cuando haya investigación externa disponible. Extrae mecanismos, no un collage de estilos. Ningún candidato puede copiar la identidad visual completa de una sola referencia.
Profundidad 2: dos arquitecturas
Para el teorema principal, bifurca la página en dos recorridos diferentes. Define el trabajo, la familia de diseño, el tempo, el evento de contraste, la prueba y la acción de salida para cada sección.
Rechaza una arquitectura cuando:
- la mayoría de las secciones repiten "encabezado grande + párrafo + imagen/tarjeta";
- la prueba del producto es intercambiable con una captura de pantalla SaaS genérica;
- eliminar el logotipo hace que la categoría o la marca sea irreconocible;
- la única distinción visible es la paleta o la tipografía.
Profundidad 3: prototipos visuales
Renderiza ambas direcciones supervivientes antes de la implementación completa. Prefiere:
- dos prototipos del primer viewport;
- una sección representativa de mitad de página para cada una;
- escritorio primero, luego una verificación de colapso móvil.
Compara las capturas de pantalla una al lado de la otra. No selecciones solo a partir de prosa.
Si el usuario está disponible y las direcciones codifican un gusto genuinamente diferente, haz una pregunta de bifurcación concisa. Si el usuario solicitó autonomía, elige a partir de la evidencia y conserva el retador.
Profundidad 4: sistema e implementación
Solo ahora define:
- roles y escala tipográfica;
- paleta y contraste;
- lenguaje de activos;
- reglas de cuadrícula, espaciado y forma;
- semántica de movimiento;
- primitivas de componentes.
Usa ui-ux-pro-max para datos relevantes del sistema de diseño cuando esté disponible. Usa
design-taste-frontend después de la selección de dirección como un linter de verificación previa. Sus
reglas pueden rechazar clichés, pero no pueden elegir el concepto.
Profundidad 5: microdetalle
Ajusta bordes, sombras, material, hover, espaciado óptico y rendimiento solo después de que las puertas de dirección y arquitectura hayan pasado.
Cada microcambio debe nombrar la decisión padre que refuerza. Elimínalo cuando no altere la jerarquía, el significado, la retroalimentación o la coherencia del material.
Evalúa lo correcto
Mantén dos libros contables separados.
Puerta funcional
- verdad del producto;
- comportamiento responsivo;
- accesibilidad;
- rendimiento;
- salud del código y las pruebas.
Estas son restricciones de pasa/falla. No prueban el gusto.
Juicio de diseño
- comprensión en cinco segundos;
- capacidad de ser reconocible sin logotipo;
- recuerdo visual después de un retardo;
- distancia de la plantilla de categoría;
- visibilidad del mecanismo del producto;
- contraste y tempo en toda la página;
- preferencia del usuario.
Usa evidencia por pares del flujo de trabajo de referencia. No otorgues un absoluto 95/100 o 98/100 a partir de una rúbrica auto-creada. Si el usuario dice que el resultado es genérico, la afirmación de diferenciación ha fallado independientemente de Lighthouse.
Termina con evidencia
Devuelve:
- el árbol explorado y dónde retrocedió;
- la dirección ganadora y el retador superviviente;
- capturas de pantalla antes/A/B o evidencia visual equivalente;
- los tres cambios visibles más grandes, ordenados por profundidad;
- resultados de las puertas funcionales;
- decisiones de gusto o de producto no resueltas.
No describas el volumen de microdetalles como el resultado principal. El resultado es un argumento de diseño reconocible que sobrevive sin el logotipo.