# Lectura de diseño y los tres diales

> **Se hace antes de tocar código.** La mayoría del diseño malo de IA sale de
> saltar a una estética por defecto en vez de leer el encargo.

---

## 1. Señales que se leen primero

1. **Tipo de página** — landing (SaaS / consumo / agencia / evento), portafolio,
   rediseño (preservar vs. rehacer), editorial / blog, servicio local.
2. **Palabras de vibe que usó el cliente** — "minimalista", "elegante", "premium",
   "serio", "juvenil", "editorial", "como Apple", "tipo agencia".
3. **Referencias** — URLs que mandó, capturas, marcas con las que compite.
4. **Audiencia** — comité de compras B2B, consumidor con ojo visual, o productor
   agrícola de 55 años que usa WhatsApp. **La audiencia elige la estética, no tu gusto.**
5. **Activos de marca que ya existen** — logo, color, tipografía, fotos. En un
   rediseño son material de partida, no opcionales.
6. **Restricciones calladas** — accesibilidad, sector público, salud,财 regulado,
   público mayor. **Estas mandan sobre la preferencia estética.**

---

## 2. Declarar la lectura en una línea

Antes de cualquier código, decir:

> **"Leo esto como: {tipo de página} para {audiencia}, con lenguaje {vibe},
> tirando a {familia estética}."**

Ejemplos:

- *"Leo esto como: landing B2B para productores agrícolas de 40-60 años, con
  lenguaje de confianza y prueba en campo, tirando a fotografía real + tipografía
  robusta, cero abstracción."*
- *"Leo esto como: página de servicio para consultora SAP dirigida a directores de
  TI, con lenguaje sobrio y técnico, tirando a retícula estricta + dato duro."*
- *"Leo esto como: rediseño de sitio inmobiliario para compradores locales, con
  lenguaje aspiracional pero verificable, tirando a foto grande + ficha limpia."*

**Si el brief es ambiguo, se hace UNA pregunta.** Nunca un bloque de preguntas.
Si se puede inferir con confianza, no se pregunta: se declara la lectura y se avanza.

---

## 3. Los tres diales

Después de la lectura, fijar tres valores. Todo lo demás se decide contra ellos.

- **`VARIANZA: 8`** — 1 = simetría perfecta, 10 = caos artístico
- **`MOVIMIENTO: 6`** — 1 = estático, 10 = cinemático
- **`DENSIDAD: 4`** — 1 = galería de arte, 10 = tablero de datos

**Base: 8 / 6 / 4.** Se usa así salvo que la lectura lo cambie.

### Inferencia por señal

| Señal del brief | VARIANZA | MOVIMIENTO | DENSIDAD |
|---|---|---|---|
| minimalista, limpio, calmado, editorial | 5-6 | 3-4 | 2-3 |
| premium de consumo, lujo, marca | 7-8 | 5-7 | 3-4 |
| lúdico, agencia, experimental, Awwwards | 9-10 | 8-10 | 3-4 |
| landing o portafolio (por defecto) | 7-9 | 6-8 | 3-5 |
| confianza primero, salud, gobierno, accesible | 3-4 | 2-3 | 4-5 |
| rediseño conservador | igualar | +1 | igualar |
| rediseño a fondo | +2 | +2 | igualar |

### Presets por caso

| Caso | VAR | MOV | DEN |
|---|---|---|---|
| Landing SaaS / servicio | 7 | 6 | 4 |
| Landing agencia o creativo | 9 | 8 | 3 |
| Landing consumo premium | 7 | 6 | 3 |
| Portafolio de diseñador | 8 | 7 | 3 |
| Editorial / blog | 6 | 4 | 3 |
| B2B técnico (drones, SAP, industrial) | 6 | 4 | 5 |
| Inmobiliario | 7 | 5 | 4 |
| Salud, suplementos, bienestar | 5 | 4 | 4 |
| Servicio local (dentista, taller, despacho) | 6 | 4 | 4 |

### Qué controla cada dial

- **VARIANZA** gobierna asimetría, ruptura de retícula, secciones no centradas.
  Arriba de 4, el hero centrado se evita salvo brief de manifiesto o lanzamiento.
- **MOVIMIENTO** gobierna cuántos efectos, de qué intensidad, y si hay scroll-driven.
  Siempre con `prefers-reduced-motion`.
- **DENSIDAD** gobierna aire, tamaño de tipo, cuánto contenido por pantalla.
  Arriba de 7, prohibido meter todo en tarjetas genéricas.

---

## 4. Disciplina anti-default

**No tirar por defecto a:** degradado morado de IA, hero centrado sobre malla
oscura, tres tarjetas iguales, glassmorphism en todo, animaciones en bucle
infinito, Inter + gris pizarra.

Eso es lo que produce un modelo cuando no leyó el encargo. Estirarse más allá,
a propósito, con base en la lectura de diseño.

---

## 5. Registro anti-convergencia

> El problema no es que un sitio salga feo. Es que **todos salgan iguales**.

Antes de construir, anotar del sitio anterior que hiciste (para este cliente o
para cualquiera, en esta misma sesión):

| Eje | Sitio anterior | Este sitio |
|---|---|---|
| Familia de paleta | | |
| Pareja tipográfica | | |
| Arquitectura del hero | | |
| Efecto de firma | | |
| Estilo de botones | | |
| Lenguaje de esquinas | | |

**Este sitio debe diferir en al menos 4 de los 6 ejes.**

Si no puedes llenar la columna de "sitio anterior", pregunta o revisa la carpeta
del cliente. Repetir paleta y estructura es cómo un portafolio entero acaba
pareciendo una sola plantilla.
