# Cómo hacer una landing con IA (sin saber programar)

> ¿Cómo hago una landing con IA sin saber programar?

Una landing tiene un solo trabajo y cuatro secciones: hero (titular de beneficio + botón), tres beneficios como resultados, una sección de prueba y un CTA final que repite el botón. Le pasás tu brief a Claude con esa estructura y la construye entera, sin menú y mobile primero.

> Fuente: https://magoallegri.com/biblioteca/como-hacer-una-landing-con-ia

---

Una landing no es una página "linda": es una página con **un solo trabajo**. Todo lo que tiene empuja hacia una acción; todo lo que no empuja, sobra. Tiene cuatro secciones, y con un brief y un prompt Claude te la construye entera.

## La anatomía (cuatro secciones)

1. **Hero** — lo primero que se ve: un titular que dice el beneficio (no el nombre del servicio), una línea de apoyo y el botón con la acción. Si alguien solo ve el hero, ya entendió todo.
2. **Beneficios** — tres, no diez. Resultados, no características: "recuperá los turnos que se te escapan" le gana a "sistema de gestión de turnos".
3. **Prueba** — algo que haga creíble la promesa: testimonios si tenés, tu experiencia, números, o un "cómo funciona" en tres pasos. Sin prueba, el titular es solo una frase.
4. **CTA final** — el mismo botón del hero, repetido al fondo. El que llegó hasta abajo está interesado: no lo hagas scrollear de vuelta.

[Figura: La anatomía de una landing: hero, beneficios, prueba y CTA final]

## 💡 Sin menú de navegación

Una landing no tiene menú. Cada link que no es EL botón es una puerta de escape. Si Claude le pone navegación, pedile que la saque.

## Construila

Primero, un `brief.md` cortito: para quién es, qué ofrecés y la acción que querés. Con eso y tu proyecto abiertos, pegale esto:

```
Leé el brief.md y construí la landing completa en un index.html autocontenido.

Estructura, en este orden:
1. Hero: titular de beneficio, una línea de apoyo, y el botón con la acción del brief.
2. Tres beneficios como resultados concretos (no características).
3. Una sección de prueba: [TESTIMONIOS / TU EXPERIENCIA / CÓMO FUNCIONA EN 3 PASOS].
4. CTA final repitiendo el botón.

Reglas: sin menú de navegación, un solo color de acento, mobile primero.
El botón por ahora puede llevar a [TU WHATSAPP / TU MAIL / #].

Cuando esté, decime cómo verla.
```

Aprobá los cambios, abrí el `index.html` y mirala entera, de arriba a abajo, como si fueras la persona del brief.

## Ahora, el loop

Tres pasadas, una pregunta cada una:

1. **¿El titular dice el beneficio?** Si dice el nombre del servicio o algo genérico, pedí 3 titulares alternativos y elegí.
2. **¿Los beneficios son resultados?** Donde haya una característica, pedí que la traduzca a resultado.
3. **¿El botón se ve sin scrollear y se entiende qué pasa al tocarlo?** "Enviar" no; "Reservá tu llamada de 15 min" sí.

> [!info] **Checkpoint** — Tu landing tiene las cuatro secciones en orden, sin menú, y el botón aparece arriba y abajo. Leíste el titular en voz alta y dice un beneficio.

## ⚠️ Si algo sale mal

- **Quedó genérica igual.** El problema casi siempre está en el brief: ¿"para quién" es una persona concreta? Afinalo y pedí que regenere el hero desde el brief nuevo.
- **Puso fotos de stock falsas o logos inventados.** Pedile: `Sacá las imágenes de relleno. Mejor un diseño limpio sin fotos que fotos falsas.`
- **El texto suena a folleto.** Decile: `Reescribí los textos como si me lo contara un conocido que sabe del tema. Directo, sin frases de marketing vacías.`

## 🟢 Hacelo ahora

Las tres pasadas del loop, de a una. Al final, leé la página entera en voz alta: donde te trabes o te dé vergüenza, ahí hay que reescribir.