# Pégale esto a tu agente (Claude Code, Cursor, v0, Lovable)

Auditoría de diseño de lumora.example hecha por Igna, de Anti Web Slop, el 29 de octubre de 2026. El informe completo, con el video, está en https://antiwebslop.com/informe-de-ejemplo

## El prompt

Vas a corregir la portada de Lumora en este orden. Haz un cambio a la vez y muéstrame el resultado antes de seguir.

1. Hero: reemplaza el h1 «Desbloquea el poder de la IA para tu negocio» por una frase de menos de 12 palabras que diga qué hace el producto, para quién y qué resultado da. El párrafo de debajo, en una sola línea con el cómo. Borra la pastilla «Nuevo: Lumora AI 2.0». Título en un solo color, sin degradé.
2. Botones del hero: «Empieza gratis» como único botón lleno, color sólido, sin sombra de color. «Agenda una demo» como link de texto al lado. En el menú, un solo botón.
3. Producto: debajo del hero, una captura real grande (/public/producto.png de ejemplo). Las tres tarjetas con emoji pasan a tres bloques alternados con una función concreta y su recorte de pantalla. Sin emojis como íconos.
4. Prueba social: borra la franja de logos, la tira 10x / 99.9% / 24/7 y los testimonios. Deja un componente Testimonio (nombre, empresa, foto, cita, sin estrellas) para cuando haya reales.
5. Color: variables --texto (casi negro) y --acento (sólido, ni violeta, ni índigo, ni rosa). Todos los degradés pasan a colores lisos; el acento solo en el botón principal y los links. Fondo blanco.
6. Tipografía: una fuente con carácter para títulos (Satoshi o General Sans, autoalojada), peso 600, tracking apretado; los h2 alineados a la izquierda. Borra «¿Por qué elegir Lumora?».
7. Links: borra todo href="#". Pie en una fila: nombre, correo, Privacidad, Términos y ©.
8. Cabecera: meta description, og:title, og:description, og:image 1200×630 y twitter:card.

No cambies nada que no esté en esta lista.

---

## Los cambios, uno por uno

El mismo trabajo, separado por hallazgo, por si prefieres ir de a uno. Cada uno trae la sección de la web y el momento del video donde lo explico.

### 1. El título no dice qué hace Lumora

- Prioridad: alta

**Qué cambiar:** Escribe qué hace, para quién y qué resultado da. Por ejemplo: «Lumora lee las ventas de tu tienda y te dice cada lunes qué producto reponer». Debajo, una sola línea con el cómo. Fuera la pastilla de «Nuevo: Lumora AI 2.0».

**Por qué:** «Desbloquea el poder de la IA para tu negocio» sirve para mil productos. Quien llega tiene unos segundos para entender si esto le sirve, y una promesa genérica lo obliga a bajar a buscar la respuesta. La mayoría no baja.

**Prompt:**

```text
Dónde: el hero de la portada, el h1 «Desbloquea el poder de la IA para tu negocio» y el párrafo de debajo.

Qué cambiar: reemplaza el h1 por una frase que diga qué hace el producto, para quién y qué resultado da, en menos de 12 palabras, sin las palabras «poder», «IA», «revoluciona» ni «siguiente nivel». El párrafo de debajo pasa a una sola línea con el cómo. Borra la pastilla «🚀 Nuevo: Lumora AI 2.0 ya está aquí». Saca el degradé del texto del h1: todo el título en un solo color.

Qué no tocar: el menú, los botones (hay otro cambio para ellos) y el resto de las secciones.
```

### 2. Los dos botones del hero compiten

- Prioridad: alta

**Qué cambiar:** Elige una acción principal (si el producto se prueba solo, «Empieza gratis») y dale el único botón lleno. La demo pasa a ser un link de texto al lado. Lo mismo en el menú: un solo botón.

**Por qué:** «Empieza gratis» y «Agenda una demo» tienen el mismo tamaño, el mismo degradé y la misma sombra. Cuando dos acciones pesan igual, no hay una principal y la persona duda justo en el momento de decidir.

**Prompt:**

```text
Dónde: los dos botones del hero, «Empieza gratis» y «Agenda una demo».

Qué cambiar: «Empieza gratis» queda como único botón lleno, de color sólido (sin degradé ni sombra de color). «Agenda una demo» pasa a ser un link de texto subrayado, al lado, sin fondo ni borde.

Qué no tocar: los textos de los botones, el título y el resto de la página.
```

### 3. Una captura del producto en lugar de tres tarjetas con emoji

- Prioridad: alta

**Qué cambiar:** Pon una captura real del producto debajo del hero, grande y sin marco de navegador falso. Cambia las tres tarjetas por tres cosas concretas que Lumora hace, cada una con su recorte de la pantalla donde pasa. Sin emojis como íconos.

**Por qué:** 🚀 Ultra rápido, ⚡ Impulsado por IA, 🔒 Seguridad empresarial: son las tres tarjetas que podría tener cualquier herramienta. En cuatro pantallas de scroll no hay una sola imagen de Lumora funcionando, y eso es lo que convence.

**Prompt:**

```text
Dónde: la sección «Todo lo que necesitas, en un solo lugar» con las tres tarjetas (🚀, ⚡, 🔒), y el espacio debajo del hero.

Qué cambiar: debajo del hero agrega una imagen grande con una captura real del producto (deja un archivo de ejemplo en /public/producto.png y yo la reemplazo). Reemplaza las tres tarjetas por tres bloques en fila alternada (texto a un lado, recorte de pantalla al otro), cada uno con una función concreta y un título que diga qué pasa, no un adjetivo. Borra los emojis que hacen de íconos.

Qué no tocar: el hero y las secciones de abajo.
```

### 4. Números y testimonios que nadie se cree

- Prioridad: media

**Qué cambiar:** Si todavía no hay clientes con nombre, saca la tira de números, los logos y los testimonios: es mejor no tener prueba social que tener una que se nota inventada. Cuando la haya, nombre completo, empresa, foto real y una frase que cuente un resultado concreto.

**Por qué:** «10x más rápido», «99.9%» y «24/7» sin decir comparado con qué; logos grises de empresas que no existen; tres testimonios con cinco estrellas, un círculo de color en lugar de cara y «Sarah J., CEO» sin empresa. La prueba social de plantilla resta confianza en vez de sumarla.

**Prompt:**

```text
Dónde: la franja de logos «Con la confianza de más de 10.000 equipos», la tira de números (10x, 99.9%, 24/7) y la sección «Lo que dicen nuestros clientes».

Qué cambiar: borra las tres. Deja en el código un componente Testimonio que reciba nombre, empresa, foto y cita, sin estrellas, para usarlo cuando haya testimonios reales.

Qué no tocar: el resto de la página.
```

### 5. El violeta de la IA, con degradé, en cada sección

- Prioridad: media

**Qué cambiar:** Elige un solo color de acento que no sea violeta y úsalo solo en la acción principal. Fondo blanco o casi blanco, texto casi negro. Sin degradés en textos ni en botones; el bloque final, sobre fondo liso.

**Por qué:** El 97% del color de acento es violeta o índigo y hay doce degradés violeta a rosa: en el logo, en el título, en los botones, en los íconos, en los números y en el bloque final. Es la paleta que hoy dice «esto lo hizo una IA» antes de leer una palabra.

**Prompt:**

```text
Dónde: los estilos globales y todos los degradés (logo, h1, botones, íconos, números, bloque «¿Listo para llevar tu negocio al siguiente nivel?»).

Qué cambiar: define dos variables, --texto (casi negro) y --acento (un color sólido que no sea violeta, índigo ni rosa), y reemplaza todos los linear-gradient y radial-gradient por colores lisos. El acento solo va en el botón principal y en los links. El fondo de la página pasa a blanco.

Qué no tocar: los textos y la estructura.
```

### 6. La tipografía de siempre y todo centrado

- Prioridad: media

**Qué cambiar:** Elige una tipografía con carácter para los títulos (hay buenas y gratis en Fontshare o Google Fonts) y alinea los títulos a la izquierda, con la columna de texto. La lista de «¿Por qué elegir Lumora?» con ✅ se puede borrar: repite lo que ya dicen las funciones.

**Por qué:** Inter en el 100% del texto y cada título centrado, sección tras sección, en el orden de siempre (hero, funciones, por qué elegirnos, testimonios, llamado final). No hay nada que diga que alguien tomó una decisión.

**Prompt:**

```text
Dónde: la tipografía global y los títulos h1 y h2 de todas las secciones; la sección «¿Por qué elegir Lumora?».

Qué cambiar: carga una tipografía para títulos distinta de Inter (te propongo Satoshi o General Sans de Fontshare, autoalojada) con peso 600 y tracking apretado. Alinea los h2 y sus bajadas a la izquierda. Borra la sección «¿Por qué elegir Lumora?» con la lista de ✅.

Qué no tocar: el texto de párrafo, que puede seguir en Inter.
```

### 7. 26 de 29 links no llevan a ningún lado

- Prioridad: baja

**Qué cambiar:** Deja en el pie solo lo que existe: contacto, legal y, si los hay, documentación y precios. Todo lo demás, fuera hasta que exista la página.

**Por qué:** El pie tiene cinco columnas con veinticinco links (Changelog, Roadmap, Careers, Press, Webinars…) y casi todos apuntan a «#». Un link muerto es peor que ninguno: avisa que la página es de cartón.

**Prompt:**

```text
Dónde: el pie y el menú.

Qué cambiar: borra todo link con href="#". En el pie deja una sola fila con el nombre, el correo de contacto y los links a Privacidad y Términos. Cambia «Hecho con ❤️ para equipos de todo el mundo» por solo el ©.

Qué no tocar: el resto de la página.
```

### 8. Sin vista previa al compartir

- Prioridad: baja

**Qué cambiar:** Agrega una meta description que diga qué hace Lumora y una imagen de 1200×630 con el nombre y la captura del producto.

**Por qué:** Falta la descripción y la imagen para redes (og:image). Cuando alguien pase el link por WhatsApp, Slack o X, se va a ver vacío.

**Prompt:**

```text
Dónde: el <head> de la portada.

Qué cambiar: agrega <meta name="description"> con la misma idea del nuevo título del hero (máximo 155 caracteres), og:title, og:description, og:image (1200×630, deja /public/og.png de ejemplo) y twitter:card=summary_large_image.

Qué no tocar: nada visible de la página.
```

---

## Al terminar: guarda las reglas de diseño

Para que los próximos cambios no vuelvan a lo mismo, guarda esto en el proyecto: si existe CLAUDE.md o AGENTS.md en la raíz, agrégalo al final; si no, crea AGENTS.md con este contenido. Si estás en Lovable, v0 o Bolt, dile a la persona que lo pegue en las instrucciones del proyecto.

```markdown
# Reglas de diseño de lumora.example

Salen de la auditoría de la portada: léelas antes de cada cambio para que Lumora no vuelva a parecer una plantilla.

- Cada título dice qué hace Lumora, para quién y qué resultado da, en menos de 12 palabras. Nada de «poder», «IA», «revoluciona» ni «siguiente nivel».
- Un solo botón lleno por pantalla, de color sólido y sin sombra de color. La acción secundaria va como link de texto subrayado.
- Muestra el producto con capturas reales, grandes y sin marco de navegador falso. Nunca uses emojis como íconos.
- No agregues números, logos de clientes ni testimonios que no sean reales. Un testimonio lleva nombre completo, empresa, foto real y una frase con un resultado concreto, sin estrellas.
- Los colores salen solo de las variables --texto (casi negro) y --acento (un color sólido que no sea violeta, índigo ni rosa), sobre fondo blanco. El acento va solo en el botón principal y en los links.
- No uses linear-gradient ni radial-gradient: ni en textos, ni en botones, ni en fondos.
- Los títulos van en Satoshi o General Sans, autoalojada, peso 600 y tracking apretado, alineados a la izquierda con la columna de texto. El texto de párrafo se queda en Inter.
- No sumes secciones de relleno como «¿Por qué elegir Lumora?» con listas de ✅: si una sección repite lo que ya dice otra, sobra.
- Ningún link con href="#": si la página no existe, el link tampoco. El pie se queda en una fila con nombre, correo, Privacidad, Términos y ©.
- Cada página nueva lleva meta description, og:title, og:description y una og:image de 1200×630.
```