¿Te imaginas crear una landing page profesional completa en 5 minutos? No es ciencia ficción. Es Vibe Coding.
Vas a crear una landing page lista para vender con secciones de features, testimoniales, pricing y CTAs estratégicos. Con modo oscuro/claro y diseño profesional. Un solo prompt. Cinco minutos. Resultado profesional.
product-landing👉 Importante: Este proyecto se construye completamente desde cero usando la IA de Cursor. No necesitas repositorio base, ¡la magia sucede en tiempo real!
1Usa HTML5 y CSS3 sin frameworks. 2 3Quiero que actúes como un diseñador y desarrollador frontend profesional. 4 5Diseña y crea el código de una landing page moderna y responsive para un 6[producto a elegir: app móvil, curso online o producto físico]. 7 8IMPORTANTE: Crea archivos separados profesionalmente: 9- index.html (estructura semántica) 10- styles.css (todos los estilos) 11- script.js (toda la funcionalidad) 12 13La estructura debe incluir: 14 15HERO SECTION IMPACTANTE: 16- Título atractivo que capture atención inmediatamente 17- Subtítulo con propuesta de valor clara 18- Imagen o mockup del producto 19- CTA principal prominente 20 21SECCIÓN DEL PROBLEMA: 22- Explica claramente el problema que el producto resuelve 23- Conecta emocionalmente con el usuario 24- Usa lenguaje persuasivo pero auténtico 25 263 CARACTERÍSTICAS PRINCIPALES: 27- Cada una con ícono o ilustración SVG 28- Título descriptivo 29- Texto breve pero convincente 30- Layout en grid responsive 31 32TESTIMONIALES: 33- 2 o 3 opiniones de usuarios satisfechos 34- Incluye nombre, rol/empresa y foto de perfil 35- Diseño tipo card elegante 36 37PLAN DE PRECIOS SIMPLE: 38- 3 opciones: básico, pro y premium 39- Características de cada plan claramente listadas 40- Precio destacado visualmente 41- CTA en cada plan 42- Plan recomendado resaltado 43 44CTAs ESTRATÉGICOS: 45- Distribuidos estratégicamente en toda la página 46- Variedad de textos según el contexto 47- Diseño que llame a la acción sin ser agresivo 48 49MODO CLARO/OSCURO: 50- Toggle elegante y accesible 51- Transición suave entre temas 52- Persistencia con localStorage 53- Todos los elementos adaptados a ambos modos 54 55CARACTERÍSTICAS TÉCNICAS: 56- Archivos separados: index.html, styles.css, script.js 57- HTML semántico y limpio 58- CSS organizado con comentarios por sección 59- JavaScript modular y bien documentado 60- 100% responsive (mobile-first) 61- Animaciones suaves al scroll con IntersectionObserver 62- Gradientes modernos y efectos glass/blur 63- Tipografía jerarquizada y legible 64- Iconos SVG integrados en el HTML 65 66ESTILO VISUAL: 67- Moderno y minimalista 68- Profesional pero accesible 69- Buena jerarquía visual 70- Colores que generen confianza 71- Espaciado generoso 72- Microinteracciones sutiles 73 74Hazlo visualmente impactante y listo para convertir visitantes en clientes. 75Debe verse como una landing profesional de 2025.
Si quieres personalizar o mejorar tu landing, aquí tienes dos ejemplos de iteraciones efectivas:
1Personaliza mi landing page con este producto específico: 2 3PRODUCTO: [Nombre y descripción detallada de tu producto] 4 5CONTENIDO: 6- Hero headline: [Tu título principal impactante] 7- Propuesta de valor: [Por qué elegir tu producto en 1 línea] 8- Problema que resuelve: [El dolor específico que atacas] 9- 3 Features: 10 1. [Feature 1 con beneficio claro] 11 2. [Feature 2 con beneficio claro] 12 3. [Feature 3 con beneficio claro] 13 14TESTIMONIALES: 151. [Nombre] - [Rol] - "[Testimonio específico]" 162. [Nombre] - [Rol] - "[Testimonio específico]" 173. [Nombre] - [Rol] - "[Testimonio específico]" 18 19PRECIOS: 20- Básico: $[X] - [3-4 características] 21- Pro: $[Y] - [4-5 características] - RECOMENDADO 22- Premium: $[Z] - [5-6 características] 23 24BRANDING: 25- Esquema de colores: [azul corporativo / verde innovador / morado creativo / naranja energético] 26- Tono: [profesional / amigable / técnico / inspirador] 27 28Ajusta todo para que sea persuasivo y auténtico.
1Mejora mi landing con estos efectos visuales profesionales: 2 3ANIMACIONES: 4- Hero section con fade-in dramático al cargar 5- Features que aparecen secuencialmente al scroll 6- Pricing cards con hover effect 3D 7- Parallax sutil en backgrounds 8- Smooth scroll entre secciones 9 10MICROINTERACCIONES: 11- Botones con ripple effect al click 12- CTAs con pulse animation sutil 13- Iconos que se animan al entrar en viewport 14- Toggle de tema con transición fluida 15 16ELEMENTOS VISUALES: 17- Gradiente animado en hero background 18- Shapes geométricas flotantes decorativas 19- Glassmorphism en cards seleccionadas 20- Sombras que dan profundidad 21 22OPTIMIZACIONES: 23- Lazy loading para imágenes 24- Transiciones de 60fps 25- Estados de loading en CTAs 26- Accesibilidad mejorada (aria-labels, contraste) 27 28Todo debe ser elegante y profesional, nunca distraer de la conversión.
Este proyecto te introdujo a:
¡Felicidades! Acabas de dar tu primer paso en el mundo del Vibe Coding 🎉