🔀 El embudo del flujo, que converge en una única compilación
Vale la pena detenerse un segundo para ver el camino recorrido. En el módulo 5.1 viste el problema: pedir "haz un sitio bonito" sin contexto da un resultado genérico — una calidad de ~40%. Del 5.2 al 5.6 fuiste cerrando esa brecha pieza por pieza: una skill (conjunto de instrucciones fijas que le enseña al proceso de diseño global (de construcción de interfaces), el ciclo de capturas de pantalla (el agente construye → toma una captura de pantalla → compara → ajusta, repitiendo hasta que coincida con la referencia), los límites de ese ciclo (lo que no puede ver por sí solo), cómo usar una referencia visual sin copiar la marca de terceros y una carpeta de marca permanente con colores, fuentes y logo documentados.
Este módulo no enseña ninguna pieza nueva: es el momento de usar las seis juntas, en una landing page real, desde el primer prompt hasta el enlace en línea. Por eso es más largo y más práctico que los anteriores: la teoría ya está explicada, ahora toca construir.
Leyenda: los cinco módulos prácticos anteriores (más el diagnóstico del 5.1) alimentan este build: cada flecha representa una pieza que ya tienes lista para usar, no teoría nueva.
💡 Concepto principal
Este módulo no introduce ninguna técnica nueva: orquesta las seis anteriores en un solo flujo, desde cero hasta el enlace publicado.
- •Si algún paso de abajo te parece extraño, es una señal para volver al módulo correspondiente antes de continuar.
- •No hay problema en repetir una etapa (por ejemplo, ejecutar el ciclo de capturas de pantalla más de una vez): un build de verdad es iterativo.
🧩 Anatomía de una landing page que funciona
¿Eres nuevo aquí? Una landing page ("página de destino/aterrizaje") es una página web única, con un solo objetivo: lograr que el visitante entienda rápido qué ofreces y realice una acción: comprar, registrarse o ponerse en contacto. Es diferente de un sitio completo con varias páginas; la landing es concisa a propósito. Antes de construirla, ayuda saber qué compone una landing eficaz, para que puedas reconocer si el resultado del agente va por buen camino o solo es "bonito por fuera".
La primera parte visible de la pantalla: un título contundente, una frase de apoyo y el botón principal. En 3 segundos, el visitante debe entender «qué es esto» y «qué gano yo».
Una sección justo debajo que muestra de 3 a 5 razones concretas para confiar/comprar: no recursos técnicos, sino beneficios (lo que cambia para quien la usa).
CTA (del inglés llamada a la acción, «llamada a la acción») es el botón o enlace que lleva al visitante a actuar: «Empieza ahora», «Contáctanos». Una buena landing repite el CTA principal en al menos 2 puntos de la página (arriba y al final).
Información de contacto y confianza (dirección, redes, año): pequeña, pero presente. Una landing sin pie de página da la impresión de estar incompleta.
✓ Landing que funciona
- ✓Un único objetivo claro por página: no intenta vender tres cosas al mismo tiempo
- ✓CTA visible sin tener que desplazarte mucho, repetido al final
- ✓Carga rápido — pocas imágenes pesadas, sin animaciones excesivas
✗ Landing que no funciona
- ✗Un hero genérico como "Bienvenido a nuestro sitio" sin decir qué es
- ✗CTA escondido allá abajo o ningún CTA claro
- ✗Texto genérico de placeholder («lorem ipsum» o frases vagas como «somos los mejores»)
💡 Consejo práctico
Usa esta lista de 4 secciones como checklist visual mientras revisas el resultado del agente: si puedes señalar rápidamente dónde están el hero, los beneficios, el CTA y el pie de página, la estructura está bien, aunque el acabado visual todavía necesite ajustes en el ciclo de capturas de pantalla (etapa 4, a continuación).
🎯 Etapas 1-3: objetivo, carpeta de marca y prompt inicial
La implementación completa tiene 7 etapas. Las tres primeras son de preparación: sin ellas, el agente parte de cero y el resultado vuelve a ser genérico, exactamente el problema del módulo 5.1.
Leyenda: las 7 etapas en orden — la 4 (bucle de screenshot) es donde se gasta la mayor parte del tiempo, iterando; la 7 se conecta directamente con el módulo 5.8.
Define el objetivo de la landing
Antes de abrir el agente, escribe una sola frase: qué vende/anuncia/presenta y para quién. Ej.: "landing para captar interesados en un curso de cocina para principiantes". Sin eso, el agente llena el vacío con algo genérico.
Reúne (o crea) la carpeta brand_assets
Si ya tienes una del módulo 5.6, solo tienes que indicarla. Si no, usa el prompt del 5.6 para crear una antes de seguir: saltarse este paso es la causa más común de obtener un resultado sin identidad.
Escribe el prompt inicial, con la skill de diseño activa
El prompt reúne el objetivo + la carpeta de marca + la estructura de la sección anterior (hero/beneficios/CTA/pie de página) en un solo pedido. Mira el bloque copy-run de abajo.
Pedir la primera versión de la landing, con la skill de diseño (5.2) activa y la carpeta de marca (5.6) como fuente de verdad, ya con la estructura hero/beneficios/CTA/pie de página.
Use a skill de design pra construir uma landing page (index.html, self-contained) pra <descrição do objetivo: ex. "captar interessados num curso de culinária pra iniciantes">. Antes de escrever qualquer CSS, leia brand_assets/cores.md e brand_assets/tipografia.md e siga exatamente a paleta e a fonte de lá. Estrutura obrigatória: 1. Hero: título direto dizendo o que é + frase de apoio + botão CTA "<texto do seu CTA principal>" 2. Seção de benefícios: 3 a 4 cards com ícone + benefício concreto (não recurso técnico) 3. Seção de CTA reforçado, no meio ou perto do fim da página 4. Rodapé simples com <contato/redes/ano> Depois de gerar, tire um screenshot e me mostre — vamos rodar o laço de ajuste até bater com o padrão da marca.
✅ Cómo verificar
La primera captura de pantalla ya debe usar los colores exactos de cores.md (no una aproximación) y tener las 4 secciones presentes. Si falta alguna, es señal de que el agente se saltó parte del prompt: pídele que lo revise antes de pasar a la etapa 4.
🔁 Etapas 4-5: el bucle de capturas de pantalla y la revisión manual
¿Eres nuevo aquí? O ciclo de capturas de pantalla (que se explica en detalle en el módulo 5.3) consiste en que el agente ejecute un ciclo: construir → tomar una captura de pantalla → comparar con lo que pediste (o con una referencia) → ajustar lo que no coincide → tomar otra captura → repetir. Es lo que convierte «supuse que quedó bien» en «vi que quedó bien».
Ejecuta este ciclo varias veces seguidas: normalmente, 2 a 4 rondas bastan para resolver la mayoría de los ajustes de espaciado, alineación y contraste. En cada ronda, pide algo específico: «el botón del hero está demasiado pequeño, auméntalo», «el espacio entre las tarjetas de beneficios está muy apretado». Las solicitudes vagas como «mejóralo» generan ajustes aleatorios.
🔍 Por dentro
- Ronda típica: captura de pantalla → señalas 1-3 problemas concretos → el agente ajusta solo esos puntos → nueva captura de pantalla.
- Cuándo detenerse: cuando la captura coincide con lo que tenías en mente y las 4 secciones del tema 2 están presentes y claras.
Al llegar a la etapa 5, es hora de ser honestos: incluso después del bucle, hay cosas que él no lo obtiene por su cuenta — exactamente lo que advirtió el módulo 5.4. El ritmo de una animación (¿demasiado rápida? ¿demasiado lenta?), el gusto personal de "el espaciado aquí parece un poco grande, pero no sé decir por qué" y el acabado fino de la última etapa. Esa revisión te corresponde a ti, con tus propios ojos, abriendo la página de verdad — no solo mirando una captura estática.
💡 Consejo práctico
Sé realista con tus expectativas: si sigues todo el proceso, el resultado será mucho más sólido que el genérico del módulo 5.1: pasará de «~40%» a cerca de «~60%» de acabado profesional. Pero no llegará al 100%: el ajuste fino según tus gustos, el timing de la animación y el último pulido siguen siendo tarea tuya. No es una falla del proceso; es lo que queda para que tú decidas.
🖥️ Etapas 6-7: probar en localhost antes de publicar
¿Eres nuevo aquí? Localhost ("host
local") es ver la página funcionando en tu propia computadora, sin que todavía esté publicada en internet; generalmente
en una dirección como http://localhost:3000 que solo
tú (en tu máquina) puedes abrir. Es el ensayo antes del estreno: navegas, haces clic en los enlaces y pruebas en
la pantalla del celular y de la computadora, todo sin que nadie de afuera lo vea todavía.
Este paso no es opcional. Una captura siempre está un poco «congelada» — no muestra si se rompió un enlace, si el menú no se abre en el celular o si el CTA realmente se puede pulsar. Pídele al agente que ejecute la página localmente y ábrela tú mismo; prueba al menos que los enlaces funcionen, que el diseño no se rompa en una pantalla estrecha (celular) y que el CTA principal realmente lleve a algún lugar (aunque por ahora sea solo un enlace temporal).
✓ Prueba completa en localhost
- ✓Se abrió en una pantalla de celular estrecha, no solo en un monitor grande
- ✓Hiciste clic en cada enlace o botón para confirmar que responde
- ✓Volviste a cargar la página desde cero (no solo miraste el resultado ya cargado)
✗ "Lo probé" solo con mirar la captura
- ✗Solo vio la captura de pantalla del bucle, nunca abrió la página de verdad
- ✗No probó la página en una pantalla estrecha: el diseño puede fallar en el celular sin avisar
- ✗Fue directo a publicación sin pasar por localhost ni una sola vez
Pedirle al agente que ejecute la landing localmente y te dé la dirección para que la abras y la pruebes con tus propios ojos.
Suba esta landing page em localhost pra eu testar antes de publicar. Me diga o endereço exato pra eu abrir no navegador. Depois que eu confirmar que testei, some as próximas etapas (deploy/ publicação) — vamos seguir isso no próximo módulo, com calma.
✅ Cómo verificar
Lograste abrir la dirección local en el navegador, ver la página completa (sin que aparezca una pantalla en blanco) y hacer clic en al menos 2 elementos interactivos (un enlace o un botón) para confirmar que responden.
Con la prueba local aprobada, el paso 7 es publicar ("deploy" — poner la página en línea, en una dirección accesible para cualquier persona en internet, no solo en tu computadora). Las reglas detalladas para hacerlo bien — qué nunca automatizar por tu cuenta, cuándo pedir confirmación, las precauciones con el alojamiento — son todo el tema del próximo módulo, el 5.8. Aquí, el hito que importa es: tu landing está lista y probada, esperando solo la etapa formal de publicación.
🧯 Errores comunes del build y checklist de publicación
Al cerrar la build, vale la pena hacer un repaso de los errores más comunes de quienes hacen este proceso por primera vez y de la lista de verificación que evita cada uno antes de que sigas al módulo 5.8.
✓ Build bien guiado
- ✓Objetivo escrito antes de abrir el agente, no decidido «a mitad del prompt»
- ✓Carpeta de marca existente y señalada explícitamente en el prompt inicial
- ✓Al menos 2 rondas del ciclo de capturas de pantalla antes de considerarlo listo
- ✓Probado de verdad en localhost, en dos anchos de pantalla
✗ Build apresurado
- ✗Se saltó la carpeta de marca: «vamos a ver qué sale»
- ✗Aceptó el primer resultado del ciclo sin ninguna ronda de ajustes
- ✗Publicó directamente desde la captura, sin abrir localhost ni una vez
- ✗Esperó a que estuviera 100% terminado antes de cerrar — un build nunca queda «perfecto», queda lo suficientemente bien
📋 Lista de verificación antes de considerar que el build está listo
- ☐ El objetivo de la landing está escrito y claro (qué vende/presenta y para quién)
- ☐ Carpeta
brand_assets/existe y se consultó en el prompt - ☐ Están presentes las 4 secciones básicas: hero, beneficios, CTA, pie de página
- ☐ Se ejecutaron al menos 2 rondas del ciclo de capturas de pantalla
- ☐ Tú mismo lo abriste en localhost y probaste los enlaces y la pantalla estrecha
- ☐ Eres honesto contigo: sabes que quedó ~60%, no 100% — y está bien
Verificación rápida (opcional): ¿por qué probar en localhost antes de publicar, si el ciclo de capturas de pantalla ya mostró la página funcionando?
📝 Ejercicio
Publica tu propia landing page: elige un objetivo real (puede ser ficticio, como un producto imaginario; lo importante es practicar todo el proceso), sigue las 7 etapas de este módulo de principio a fin y llega hasta la prueba aprobada en localhost. Guarda el enlace del repositorio o la carpeta del proyecto: lo usarás directamente en el módulo 5.8 para completar la publicación.