Claude Code Club · Cuaderno de estudio
Etapa 3 — Websites
💸 Constrúyelo para convertir, no solo para lucir bonito
Lo que te llevarás: un sitio que no solo se ve bien — mueve a los visitantes hacia UNA acción y cobra vida.
Un sitio bonito que solo está ahí no hace nada. Esta pasada convierte el sitio que construiste en una versión de alta conversión, viva y pulida — sin reconstruirlo. Le añades por capas: una imagen de hero real, una barra fija de reserva, una oferta de descuento sobre las reseñas, garantía + FAQ, un aviso único de «¿aún decidiendo?», movimiento con gusto y una barra de progreso de scroll.
El criterio al juzgarlo: quédate con lo que empuja al visitante hacia tu única acción; retira lo que distrae. Y siempre rápido — solo transforms/opacidad, sin efectos que laguean.
📋 Prompt (traducido, por bloques)
Pega esto en Claude Code (sobre tu sitio ya construido)
Ahora convierte el sitio que construiste en una versión de alta conversión, viva y pulida —
refina lo que hay, no lo reconstruyas.
IMAGEN DE HERO: añade una imagen real de hero junto al copy — busca una foto relevante y libre de licencia en Unsplash (o usa la mía si la tengo). Incluye siempre un respaldo elegante (un gradiente cálido detrás) para que una imagen ausente nunca rompa el layout, y deja que la tarjeta de reserva flote sobre la esquina de la imagen.
IMAGEN DE HERO: añade una imagen real de hero junto al copy — busca una foto relevante y libre de licencia en Unsplash (o usa la mía si la tengo). Incluye siempre un respaldo elegante (un gradiente cálido detrás) para que una imagen ausente nunca rompa el layout, y deja que la tarjeta de reserva flote sobre la esquina de la imagen.
CONVERSIÓN: añade una barra fija de «reserva ahora» pegada abajo con
urgencia ligera («solo quedan 3 huecos esta semana»); una banda llamativa de oferta «20 $ de
descuento en tu primer [servicio]» justo ENCIMA de las reseñas; una sección de garantía
(reversión de riesgo) y un FAQ que responda las 3-4 objeciones principales; y un aviso deslizante
de una sola vez cuando el visitante pase el pricing («¿aún decidiendo? 20 $ de descuento»), que se
muestre una vez y se pueda cerrar.
DALE VIDA (elige una mezcla con gusto, variada según mi marca): movimiento
sutil en el fondo del hero; un pulso suave + brillo en el botón principal de la nav (y enlaces con
scroll suave a cada sección); iconos que se mecen en los pasos de Cómo Funciona; contadores que
suben en las cifras al entrar en pantalla; checks que se dibujan en la lista de precios; un
«respirar» sutil en el nivel destacado, elevaciones al pasar el ratón en las tarjetas, un destello
al hover del botón, un subrayado a mano en el titular, un parallax suave en la imagen del hero y
una barra fina de progreso de scroll arriba.
RÁPIDO Y A PRUEBA DE BALAS: anima solo con transforms/opacidad — sin
filtros caros (ruido/turbulencia animados, blend modes pesados) ni marquesinas auto-deslizantes;
fluido en un portátil modesto. Sin librerías JS externas; la página debe funcionar del todo sin
JavaScript (los únicos recursos externos son Google Fonts y la imagen del hero, que tiene respaldo
de gradiente). Un único archivo HTML autocontenido. Muéstrame la vista previa en vivo.
Fuente: Claude Code Club · Aula · Etapa 3 «Websites» — lección «Constrúyelo para convertir, no solo para lucir bonito».
Añadido al cuaderno: 7 de julio de 2026. Traducción al español para estudio personal.
Añadido al cuaderno: 7 de julio de 2026. Traducción al español para estudio personal.