# Los tells de IA

> Patrones que delatan que un sitio lo hizo un modelo. Prohibidos salvo que el
> brief los pida explícitamente.
>
> Adaptado de `design-taste-frontend` (Hermes Agent, MIT). Salieron de pruebas
> reales sobre landings generadas, no de teoría.

---

## 1. El guion largo — el más violado de todos

**El guion largo (—) está completamente prohibido.** Es la muletilla estilística
firma de los modelos y el tell visual número uno.

No hay excepción de "uso moderado", ni de "en texto corrido sí se vale". Ninguna.

- **En titulares** → punto o coma
- **En eyebrows, etiquetas, píldoras, botones, pies de foto, menú** → salto de
  línea, columnas o filete
- **En texto corrido** → reestructurar: dos oraciones con punto, o coma, o
  paréntesis, o dos puntos
- **En atribución de citas** → guion normal con espacios ( - ) o salto de línea
- **También el guion medio (–) como separador.** Rangos de fecha (2018-2026) y
  de número (40-80 mil) van con guion normal

**Verificación:** `grep -rn "—\|–" ` sobre los textos visibles no debe devolver nada.

---

## 2. Visual y CSS

- **Nada de resplandores neón ni glows exteriores.** Bordes interiores o sombras
  tintadas sutiles.
- **Nada de negro puro (#000000).** Negro apagado, casi-negro, carbón.
- **Nada de acentos sobresaturados.** Desaturar para que convivan con los neutros.
- **Nada de texto en degradado** para titulares grandes.
- **Nada de cursores personalizados.** Anticuado, hostil a accesibilidad y a
  rendimiento.
- **Sombras tintadas al tono del fondo.** Nunca negro puro sobre fondo claro.

---

## 3. Tipografía

- **Inter desaconsejado como default.** Aceptable si el cliente pide algo neutro
  o estándar, o si es un sitio de accesibilidad crítica.
- **Nada de H1 gigantes que sólo gritan.** La jerarquía se controla con peso y
  color, no con escala bruta.
- **Serif muy desaconsejado por defecto.** "Se siente creativo / premium" no es
  razón. Es el tell más probado en pruebas de producción.
- **Prohibidas como default:** `Fraunces` e `Instrument Serif`.
- **Énfasis dentro de un titular:** cursiva o negrita **de la misma familia**.
  Meter una palabra serif dentro de un titular sans es de aficionado.

---

## 4. Layout y espaciado

- **Nada de tres tarjetas iguales en fila.** El bloque genérico de tres
  características idénticas está prohibido. Usar zigzag de 2, retícula asimétrica,
  scroll fijado, o scroll horizontal.
- **Padding y márgenes matemáticamente correctos.** Nada de elementos flotando
  con huecos raros.
- **Prohibido el header partido** — titular grande a la izquierda + párrafo chico
  flotando a la derecha, como encabezado de sección. Si de verdad hacen falta los
  dos, se apilan.
- **Prohibido el párrafo flotante en la esquina superior derecha** de una sección.
  Ese flotador es el tell.

---

## 5. Contenido y datos — el efecto "Juan Pérez"

- **Nada de nombres genéricos.** "Juan Pérez", "María González", "John Doe" →
  nombres creíbles y apropiados a la región.
- **Nada de avatares genéricos.** Ni el ícono de usuario, ni el huevo SVG.
- **Nada de números perfectos falsos.** Evitar 99.99%, 50%, 1,234,567. Usar datos
  orgánicos: 47.2%, +52 442 318 4927.
- **Nada de nombres de marca tipo startup.** "Acme", "Nexus", "SmartFlow",
  "Cloudly" → inventar nombres contextuales que suenen reales.
- **Nada de verbos de relleno.** "Potencia", "Impulsa", "Transforma", "Revoluciona",
  "Lleva al siguiente nivel", "De vanguardia" → verbos concretos.

---

## 6. Recursos externos

- **Nada de íconos SVG dibujados a mano.** Usar Phosphor, Tabler, Radix, HugeIcons.
- **Nada de capturas falsas hechas con divs.** Jamás construir una UI de producto
  falsa con rectángulos para simular una captura. Es el tell número uno.
  Foto real, imagen generada, o nada.
- **Nada de enlaces rotos de Unsplash.** Usar activos reales, o generar.
- **Componentes de librería nunca en su estado default.** Personalizar radios,
  colores, sombras y tipografía al proyecto.

---

## 7. Tells de producción — prohibición dura

### Hero y parte alta

- **Nada de etiquetas de versión en el hero.** `V0.6`, `BETA`, `ACCESO
  ANTICIPADO`. Sólo si el brief es literalmente sobre un lanzamiento.
- **Nada de sub-eyebrows tipo "Marca · No. 01".**
- **El muro de logos "Nos respaldan" va DEBAJO del hero**, nunca dentro.

### Numeración y micro-etiquetas

- **Nada de eyebrows numerados.** `00 / ÍNDICE`, `001 · Servicios`,
  `06 · cómo funciona`. El eyebrow nombra el tema en español llano, no enumera.
- **Nada de paginación `01 / 4`** sobre imágenes o celdas.
- **Nada de etapas numeradas.** "Etapa 1 / Etapa 2 / Etapa 3", "Fase 01 / 02 / 03".
  El contenido del paso es la etiqueta. Si hay progresión, usar el verbo directo
  ("Instalamos", "Configuramos", "Entregamos").

### Separadores

- **El punto medio (·) está racionado.** Máximo uno por línea en tiras de
  metadatos. No es el separador por defecto de todo.
- **Cero puntos de color decorativos** antes de cada elemento de lista, menú o
  badge. Sólo cuando el punto comunica estado real.

### Flourishes tipográficos

- **Nada de titulares partidos con `<br>` y una palabra en cursiva** como movida
  de diseño.
- **Nada de texto vertical rotado.** Cliché de portafolio de agencia.
- **Nada de líneas de retícula ni cruces decorativas** dibujadas sólo para que
  "se vea diseñado".

### Copy de marketing

- **Nada de "Silenciosamente usado por"** ni variantes coquetas. "Nos respaldan",
  "Clientes", o sin encabezado.
- **Nada de etiquetas poéticas** tipo "Desde el campo", "Notas de taller", "En la
  mesa ahora" sobre secciones de citas o blog. Etiqueta funcional o ninguna.
- **Nada de micro-oraciones bajo el eyebrow** explicando la sección. Eyebrow +
  titular + cuerpo es suficiente.
- **Nada de tiras de clima, ciudad u hora** en header o footer. Prohibidas en el
  99% de los briefs. Una dirección de contacto en el footer está bien; una tira
  atmosférica no.

### Píldoras y sellos

- **Nada de etiquetas encimadas sobre fotos.** O la imagen habla sola, o el pie
  va debajo, fuera de la imagen.
- **Nada de créditos de foto decorativos** tipo "Lámina 03 · Archivo". Sólo cuando
  hay un fotógrafo real al que acreditar.
- **Nada de sellos de versión** (`v1.4.2`, `Build 0048`) en páginas de marketing.
- **Nada de contadores de stock falsos** tipo "Reservación 412 de 800".

### Tiras decorativas y señales de scroll

- **Nada de tira de texto decorativa al fondo del hero** tipo `MARCA. FORMA.
  MOVIMIENTO.` en mayúsculas chiquitas. Cliché de portafolio.
- **Las señales de scroll están prohibidas.** `Scroll`, `↓ desliza`, la ruedita
  animada. Si el usuario no ha bajado, está viendo el hero. Ya sabe qué es scroll.

### Listas y barras

- **Nada de `border-t` + `border-b` en cada fila** de una tabla larga. Elegir uno
  y usarlo con moderación.
- **Nada de barras de progreso con fondo relleno** como visual comparativo en una
  landing. Es basura de dashboard.

---

## 8. Paletas prohibidas por defecto

### La regla del morado

El morado/azul con glow de IA está desaconsejado por defecto. Nada de botones
morados con resplandor ni degradados neón aleatorios. Base neutra (zinc, slate,
stone) con un acento único de alto contraste.

**Excepción:** si la marca pide morado, adelante. Pero con intención: paleta
consistente, neutros armonizados, degradados contenidos.

### La paleta de "consumo premium"

Para briefs de consumo premium (bienestar, artesanal, lujo, hogar, suplementos)
el default del modelo es **beige/crema + latón/arcilla/ocre + café oscuro**.

Prohibida como reacción automática. Alternativas, rotando entre proyectos:

| Familia | Descripción |
|---|---|
| **Lujo frío** | plata + cromo + humo |
| **Bosque** | verde profundo + hueso + acento ámbar |
| **Negro y tabaco** | casi-negro real + tabaco cálido, sin beige |
| **Cobalto + crema** | azul saturado contra un solo neutro |
| **Terracota + pizarra** | óxido cálido contra gris frío |
| **Olivo + ladrillo + papel** | olivo apagado + acento ladrillo |
| **Monocromo + un pop** | blanco roto + negro roto + un acento eléctrico |

**Regla de rotación:** si el proyecto anterior usó una familia, este usa otra.

---

## 9. Bloqueos obligatorios

- **Bloqueo de color:** un acento elegido se usa en TODA la página. Un sitio de
  grises cálidos no recibe un CTA azul en la sección 7.
- **Bloqueo de forma:** un solo sistema de radio de esquina. Todo recto, todo
  suave (12-16px), o todo píldora. Mezclar sólo con regla documentada.
- **Bloqueo de tema:** si la página es clara, es clara completa. Nada de una
  sección oscura suelta sin razón compositiva.
