🏗️ Constrúyela con Claude

Lo que te llevarás: una landing en vivo construida alrededor de tu única acción — de una sentada.

Infografía: construir la landing — «Una página, un trabajo» — el CTA arriba (above the fold) y repetido abajo.

Ahora le das a Claude el esqueleto + el copy que acabas de escribir y ejecutas el Bucle de Construcción de la Etapa 3. Elige el prompt más cercano a tu caso, pégalo, mira la vista previa. Luego reacciona en palabras normales: «el titular es flojo — hazlo el resultado», «sube el CTA above the fold», «la prueba está muy lejos del botón».

Atento a esto

Aliméntalo con tu copy real de la lección anterior — no dejes que Claude invente una oferta genérica.
Exige que el CTA aparezca above the fold (visible sin scroll) y también abajo.
5–10 rondas es normal. Es el flujo de trabajo, no un fracaso.

📋 Prompt A — Landing de oferta (traducido)

Pega esto en Claude Code

Construye una landing page moderna de una página con diseño profesional para [oferta], construida alrededor de UNA acción. Usa exactamente este copy: titular [pega], promesa [pega], 3 beneficios [pega]. Mantén UNA acción principal — un botón «[acción]» — pero incluye una barra de navegación fija fina con 2-3 enlaces que hagan scroll suave a las secciones (cómo funciona · beneficios · FAQ), CTA final. Que parezca hecho por un estudio de diseño real, no IA genérica — usa mi design.md para colores y fuentes si lo tengo (si no, una paleta con gusto + un par display/cuerpo): jerarquía tipográfica fuerte, espaciado generoso y uniforme, hero con gradiente de malla CSS fluido, subrayado a mano en la palabra clave del titular, revelados con fundido, checks que se dibujan en los beneficios, contador que sube en las cifras de prueba, elevaciones suaves al hover y un destello en el CTA. Iconos SVG en línea — sin librería. RÁPIDO y a prueba de balas: solo animaciones transform/opacidad, sin librerías JS externas, totalmente visible sin JavaScript, Google Fonts como único recurso externo. Mobile-first. Un único archivo HTML. Muéstrame vista previa en vivo.

📋 Prompt B — Landing de lista de espera (traducido)

Variante «waitlist»

Construye una landing de lista de espera moderna y con diseño profesional para [producto]. Un titular de resultado contundente, un subtítulo de una línea, 3 viñetas de «lo que obtienes», y UN formulario de captura de email como única acción. (Misma barra de diseño y reglas de rendimiento que el prompt A.)

🧩 La barra de diseño (común a ambos): jerarquía fuerte · espaciado generoso · hero de malla · subrayado a mano · fundidos y checks animados · solo transform/opacidad · sin librerías externas · un solo HTML · mobile-first · vista previa en vivo.

Fuente: Claude Code Club · Aula · Etapa 4 «Landing Pages» — lección «Constrúyela con Claude».
Añadido al cuaderno: 7 de julio de 2026. Traducción al español para estudio personal.