Crea tu propia Landing Page Profesional con IA

claude --dangerously-skip-permissions

Genera el claude.md de este proyecto

Quiero que instales correctamente estas dos skills en este proyecto:

1. ui-ux-pro-max-skill
2. gsap-skills

Objetivo:
Configurar ambas skills dentro del entorno actual para que puedan ser utilizadas durante el desarrollo del proyecto.

Instrucciones:
- Revisa primero la estructura actual del proyecto.
- Identifica si ya existe una carpeta de skills o configuración relacionada.
- Instala o copia las skills siguiendo la estructura correcta del proyecto.
- No modifiques archivos innecesarios.
- No cambies la arquitectura principal del proyecto.
- Si alguna skill requiere dependencias, configuración adicional o comandos específicos, instálalos correctamente.
- Verifica que ambas skills queden disponibles para usarse.
- Al final, dime exactamente:
  - Qué archivos o carpetas modificaste.
  - Qué comandos ejecutaste.
  - Cómo puedo confirmar que quedaron instaladas correctamente.

Repositorios/skills a instalar:
- https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- https://github.com/greensock/gsap-skills

Trabaja de forma ordenada, segura y sin sobrescribir configuraciones existentes sin revisar primero.

Quiero que generes una landing page profesional, moderna, visualmente impactante y completamente funcional en un solo archivo llamado index.html.
La página debe estar diseñada para una marca, producto, servicio o negocio con una estética premium, cinematográfica, futurista y altamente llamativa. La prioridad es que la página se vea profesional, tenga animaciones avanzadas, un fondo interactivo y una experiencia visual de alto nivel.
Antes de generar el código, usa la siguiente información del negocio:
NOMBRE DE LA MARCA:
 [ESCRIBE AQUÍ EL NOMBRE DE TU MARCA]
TIPO DE NEGOCIO / PRODUCTO / SERVICIO:
 [ESCRIBE AQUÍ QUÉ VENDE O QUÉ OFRECE TU NEGOCIO]
DESCRIPCIÓN BREVE DEL NEGOCIO:
 [ESCRIBE AQUÍ UNA DESCRIPCIÓN CORTA DE TU NEGOCIO]
PÚBLICO OBJETIVO:
 [ESCRIBE AQUÍ A QUIÉN VA DIRIGIDA LA PÁGINA]
OBJETIVO DE LA LANDING PAGE:
 [ESCRIBE AQUÍ EL OBJETIVO: vender, agendar llamadas, captar leads, mostrar producto, promocionar servicio, etc.]
ESTILO VISUAL DESEADO:
 [ESCRIBE AQUÍ EL ESTILO: futurista, elegante, minimalista, tecnológico, lujo, creativo, oscuro, limpio, colorido, etc.]
PALETA DE COLORES DESEADA:
 [ESCRIBE AQUÍ LOS COLORES DE TU MARCA O deja que Claude elija una paleta profesional]
PRODUCTOS / SERVICIOS PRINCIPALES:
[Producto o servicio 1]
[Producto o servicio 2]
[Producto o servicio 3]
[Producto o servicio 4]
BENEFICIOS PRINCIPALES:
[Beneficio 1]
[Beneficio 2]
[Beneficio 3]
[Beneficio 4]
CTA PRINCIPAL:
 [Ejemplo: Comprar ahora, Agendar llamada, Solicitar información, Empezar ahora]
CTA SECUNDARIO:
 [Ejemplo: Ver productos, Conocer más, Explorar servicios]
LINK DEL CTA PRINCIPAL:
 [Coloca aquí el link o usa # si aún no tienes uno]
REDES SOCIALES:
 Instagram: [LINK O USUARIO]
 TikTok: [LINK O USUARIO]
 YouTube: [LINK O USUARIO]
 Web: [LINK]
Ahora genera la landing page completa siguiendo estas instrucciones:
FORMATO OBLIGATORIO:
Todo debe estar dentro de un solo archivo llamado index.html.
El archivo debe incluir HTML, CSS y JavaScript en el mismo documento.
El CSS debe ir dentro de una etiqueta <style>.
El JavaScript debe ir dentro de una etiqueta <script>.
No generes archivos separados.
No generes carpetas.
No uses rutas locales inexistentes.
El archivo debe poder abrirse directamente en el navegador.
LIBRERÍAS Y ANIMACIONES:
Usa GSAP por CDN para las animaciones.
Usa ScrollTrigger por CDN si lo necesitas para animaciones al hacer scroll.
Puedes usar Google Fonts por CDN.
Puedes usar iconos por CDN solo si aportan valor.
No uses dependencias pesadas innecesarias.
Las animaciones deben sentirse premium, suaves, cinematográficas y profesionales.
REQUISITOS VISUALES:
Diseño moderno, limpio y de alto impacto.
Estética premium.
Fondo interactivo que reaccione al movimiento del usuario o al cursor.
Uso de gradientes, luces, glow, blur, glassmorphism, partículas, blobs, líneas, halos o profundidad visual si aportan al diseño.
Elementos visuales flotantes.
Sensación de profundidad.
Buena jerarquía visual.
Tipografía moderna y elegante.
Buen espaciado.
Diseño completamente responsive para desktop, tablet y móvil.
La página debe verse muy bien en video, captura de pantalla y navegación real.
REQUISITOS DE ANIMACIÓN:
Animación inicial del hero.
Animaciones de entrada para textos y botones.
Animaciones al hacer scroll.
Parallax o efectos de profundidad.
Cards con hover effects.
Botones con microinteracciones.
Elementos flotantes animados.
Fondo interactivo.
Transiciones suaves entre secciones.
Movimiento elegante, no exagerado ni caótico.
Cuida el rendimiento para que la página se sienta fluida.
ESTRUCTURA DE LA LANDING PAGE:
HERO SECTION
 Debe incluir:
Nombre de la marca.
Título principal fuerte, persuasivo y visualmente impactante.
Subtítulo claro y atractivo.
Botón principal.
Botón secundario.
Visual principal del producto, servicio o marca.
Fondo animado e interactivo.
Elementos flotantes o decorativos premium.
Animación de entrada con GSAP.
SECCIÓN DE PRODUCTOS O SERVICIOS
 Debe incluir:
De 3 a 5 cards.
Cada card debe tener:
nombre del producto o servicio
descripción breve
beneficio principal
precio, etiqueta o dato destacado si aplica
Diseño premium.
Hover effects.
Animaciones al hacer scroll.
SECCIÓN DE BENEFICIOS
 Debe incluir:
De 3 a 6 beneficios principales.
Diseño visual claro.
Iconografía o elementos gráficos.
Animaciones suaves.
Copy persuasivo.
SECCIÓN CINEMATOGRÁFICA DESTACADA
 Crea una sección especial con alto impacto visual.
 Debe sentirse como una escena premium dentro de la landing page.
 Puede incluir:
Texto grande y poderoso.
Fondo con profundidad.
Glow, blur, partículas o formas abstractas.
Parallax.
Mensaje aspiracional relacionado con la marca.
Animación avanzada.
SECCIÓN DE PROCESO O EXPERIENCIA
 Debe explicar de forma clara cómo funciona el producto, servicio o experiencia.
 Puede ser en 3 pasos:
Paso 1
Paso 2
Paso 3
Cada paso debe tener diseño atractivo y animaciones.
TESTIMONIOS O PRUEBA SOCIAL
 Incluye 3 testimonios ficticios pero creíbles.
 Cada testimonio debe tener:
nombre
rol o tipo de cliente
comentario breve
diseño visual premium
CTA FINAL
 Debe incluir:
Mensaje fuerte de cierre.
Botón principal.
Texto persuasivo.
Animación elegante.
Diseño llamativo.
FOOTER
 Debe incluir:
Nombre de la marca.
Links simulados o reales.
Redes sociales.
Texto legal simple.
Diseño limpio y consistente.
REQUISITOS TÉCNICOS:
Código limpio y ordenado.
CSS organizado por secciones.
JavaScript ordenado.
Comentarios útiles solo donde realmente ayuden.
Sin errores de consola.
Sin código innecesario.
Sin dependencias rotas.
Sin assets locales inexistentes.
Si no hay imágenes reales, crea visuales con CSS, gradientes, formas abstractas, mockups, cards o composiciones visuales.
La página debe funcionar correctamente abriendo index.html.
CALIDAD ESPERADA:
 No quiero una landing page básica.
 No quiero una página genérica.
 No quiero una plantilla simple sin personalidad.
 No quiero solo texto con botones.
 No quiero animaciones mínimas.
Quiero una landing page que parezca profesional, premium, moderna, cinematográfica y lista para mostrarse como una demo visual de alto nivel.
Debe sentirse como una página hecha por un diseñador UI/UX senior y un motion designer profesional.
ENTREGA FINAL:
Entrégame únicamente el código completo del archivo index.html.
No expliques teoría antes del código.
No generes varios archivos.
No generes instrucciones innecesarias.
Primero entrega el código completo.
Después del código, agrega un resumen breve indicando:
Qué incluye la página.
Qué librerías usa.
Cómo abrir el archivo.
Qué partes puedo editar para personalizarla.