Frontend Landings

Genera páginas de aterrizaje HTML impresionantes, sin compilación, de un solo archivo, con preajustes de estilo seleccionados, animaciones suaves, diseño responsivo y modo oscuro/claro, todo en un único archivo autónomo.

Antes de Empezar

Lee el archivo de referencia de preajustes de estilo para comprender las estéticas disponibles:

references/STYLE_PRESETS.md

Dos Modos de Operación

Modo 1: Desde Cero

El usuario proporciona los detalles del producto → genera una página de aterrizaje completa.

Recopila estos datos (pregunta si no se proporcionan):

Nombre del producto/marca (obligatorio)
Eslogan / titular principal (obligatorio)
3–6 características o beneficios clave (obligatorio)
Público objetivo (útil)
CTA principal (ej., "Iniciar prueba gratuita", "Únete a la lista de espera") — predeterminado: "Comenzar"
Preferencias de color (opcional — el preajuste lo manejará)
Preajuste de estilo (muestra el menú de preajustes si no se especifica)

Modo 2: Mejorar / Convertir

El usuario proporciona HTML existente, una descripción, una captura de pantalla o una URL → mejora con mejor diseño, animaciones y capacidad de respuesta.

Flujo de trabajo:

Analiza el diseño existente (estructura, colores, tipografía, diseño)
Identifica mejoras (animaciones, capacidad de respuesta, accesibilidad, jerarquía visual)
Pregunta qué preajuste de estilo aplicar (o conservar la estética existente)
Regenera como un HTML de un solo archivo con todas las mejoras

Sistema de Preajustes de Estilo

SIEMPRE ofrece el menú de preajustes al inicio de cualquier tarea de página de aterrizaje, a menos que el usuario ya haya elegido uno o haya descrito explícitamente una estética específica.

Presenta los preajustes de esta manera:

Elige un estilo visual para tu página de aterrizaje (escribe el número o nombre):

 1. ☁️  Clean SaaS Minimal     — Blancos nítidos, sombras sutiles, sensación nativa del sistema
 2. 🔮  Glassmorphic Modern     — Paneles de vidrio esmerilado, degradados, translucidez
 3. 🏗️  Bold Brutalist          — Texturas de hormigón crudo, tipo monoespaciado, contraste marcado
 4. 🌆  Cyberpunk Neon          — Fondos oscuros, resplandor eléctrico, efectos de línea de barrido
 5. ✒️  Elegant Serif Premium   — Lujo editorial, titulares con serifa, acentos dorados
 6. 🎨  Playful Gradients       — Animaciones saltarinas, degradados de malla, todo redondeado
 7. 🌙  Dark Mode First         — Negros profundos, acentos neón, optimizado para OLED
 8. 📻  Vintage Retro           — Tonos sepia cálidos, tipo retro, texturas nostálgicas
 9. 🌿  Organic Nature          — Tonos tierra, formas orgánicas, ilustraciones botánicas
10. 🏢  Corporate Professional  — Paleta azul marino/pizarra, cuadrícula estructurada, generador de confianza

O describe tu propia estética personalizada.

Después de que el usuario elija, lee references/STYLE_PRESETS.md para obtener las variables CSS detalladas, pilas de fuentes, estilos de animación y tokens de diseño para ese preajuste.

Requisitos de Salida

Arquitectura de Archivo Único HTML

Cada salida DEBE ser un archivo HTML completo y autónomo. Estructura:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Meta Tags SEO -->
  <title>{Nombre del Producto} — {Eslogan}</title>
  <meta name="description" content="{Descripción concisa del producto}">
  <meta property="og:title" content="{Nombre del Producto}">
  <meta property="og:description" content="{Descripción}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js para animaciones -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts (específico del preajuste) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={Fuentes+del+Preajuste}&display=swap" rel="stylesheet">
  
  <!-- Configuración de Tailwind + Tema personalizado -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Extensiones específicas del preajuste
          fontFamily: { /* del preajuste */ },
          colors: { /* del preajuste */ },
        }
      }
    }
  </script>
  
  <style>
    /* Propiedades personalizadas CSS del preajuste */
    :root { /* variables del tema claro */ }
    .dark { /* variables del tema oscuro */ }
    
    /* Clases base de animación activadas por desplazamiento */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* Estilos personalizados específicos del preajuste */
  </style>
</head>
<body>
  <!-- Todo el contenido aquí -->
  
  <script>
    // Alternar modo oscuro
    // Observador de revelación por desplazamiento
    // Animaciones de entrada con Anime.js
    // Componentes interactivos (acordeón FAQ, alternador de precios, etc.)
  </script>
</body>
</html>

Pila CDN (no se permiten otros)

Tailwind CSS: https://cdn.tailwindcss.com (con configuración en línea)
Anime.js: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts: Solo fuentes específicas del preajuste
Iconos: Solo SVG en línea (estilo Heroicons). NUNCA uses CDN de fuentes de iconos.

Características Obligatorias en Cada Salida

Diseño Responsivo — Primero móvil. Prueba el modelo mental a 375px, 768px, 1280px.
Modo Oscuro/Claro — Detección automática de prefers-color-scheme + botón de alternancia manual en la navegación.
Animaciones de Desplazamiento — Animaciones de revelación basadas en IntersectionObserver en todas las secciones.
Desplazamiento Suave — scroll-smooth en html + JS para anclas de navegación.
Accesibilidad — HTML5 semántico, etiquetas ARIA en elementos interactivos, estilos focus-visible, enlace para saltar al contenido, contraste de color suficiente.
Meta Tags SEO — title, description, og:title, og:description, og:type, twitter:card.
Rendimiento — Carga diferida de imágenes, CSS eficiente, JS mínimo.

Generación de Secciones

Basado en la entrada del usuario, incluye inteligentemente estas secciones. No todas son obligatorias: adáptalas al contexto del producto.

Incluir Siempre:

Navegación — Navegación fija/pegajosa con logo, enlaces, alternador de modo oscuro, botón CTA principal
Hero — Titular grande + subtitular + botón(es) CTA + elemento visual (degradado, forma abstracta o marcador de posición de imagen)
Características — 3–6 tarjetas/cuadrícula de características con iconos SVG en línea
CTA Final — Banner de llamada a la acción de ancho completo con titular + botón
Pie de Página — Enlaces, derechos de autor, iconos sociales (SVG en línea)

Incluir Cuando Sea Relevante:

Prueba Social / Logos — Barra de logos "Confían en nosotros" (usa cuadros de marcador de posición con nombres de estilo empresarial)
Testimonios — 2–3 tarjetas de citas con marcadores de posición de avatar
Precios — 3 niveles con alternador mensual/anual (impulsado por JS)
FAQ — Acordeón con animaciones suaves de apertura/cierre
Cómo Funciona — Proceso de 3 pasos con pasos numerados
Estadísticas / Métricas — Contadores animados (ej., "Más de 10k usuarios", "99.9% de tiempo de actividad")

Manual de Animaciones

Usa estos patrones de animación de manera consistente:

Revelación por Desplazamiento (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Entrada Escalonada (Anime.js)

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

Animación del Texto Hero

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

Microinteracciones al Pasar el Ratón

Usa transiciones CSS para los efectos hover — Anime.js solo para secuencias complejas:

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

Animación de Contadores

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

Implementación del Modo Oscuro

// Verificar preferencia del sistema y preferencia guardada
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Función de alternancia (vincular al botón)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

Botón de alternancia en la navegación:

<button onclick="toggleDark()" aria-label="Alternar modo oscuro" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- Icono de sol (se muestra en modo oscuro) -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- Icono de luna (se muestra en modo claro) -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

Tipografía y Reglas Anti-Genéricas

NUNCA uses estas fuentes: Inter, Roboto, Arial, Helvetica, Open Sans, valores predeterminados de system-ui.

Cada preajuste especifica su propio par de fuentes distintivo. Siempre cárgalas desde el CDN de Google Fonts.

NUNCA uses los colores predeterminados de Tailwind sin personalización. Cada preajuste define una paleta personalizada mediante variables CSS Y la extensión de tailwind.config.

NUNCA generes una página que se parezca a cualquier otra página de aterrizaje generada por IA. Cada preajuste tiene diferenciadores específicos: respétalos.

Iconos SVG en Línea

Usa SVG en línea de estilo Heroicons. Aquí está el patrón:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

Incluye de 6 a 8 iconos de uso común directamente en el HTML. Elige iconos contextualmente relevantes para las características del producto.

Implementación del Acordeón FAQ

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // Cerrar todos los demás
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

Implementación del Alternador de Precios

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

Instrucciones Finales de Salida

Después de generar el HTML, SIEMPRE añade esta guía:

✅ ¡Tu página de aterrizaje está lista!

Para usarla:
1. Copia todo el código anterior en un archivo llamado `index.html`
2. Ábrelo en cualquier navegador: funciona de forma independiente, no se necesita paso de compilación

Para desplegarla de forma gratuita:
• Vercel: vercel.com → Nuevo Proyecto → arrastra y suelta tu index.html
• Netlify: app.netlify.com → arrastra y suelta tu index.html
• GitHub Pages: Sube a un repositorio → Configuración → Pages → Desplegar desde main

Para personalizarla aún más:
• Colores: Edita las variables CSS en :root { } y .dark { }
• Contenido: Todo el texto está directamente en el HTML — búscalo y reemplázalo
• Fuentes: Cambia el enlace de Google Fonts y los valores de font-family
• Animaciones: Ajusta el tiempo en las llamadas de Anime.js y las transiciones CSS

Lista de Verificación de Calidad

Antes de entregar, verifica mentalmente:

hemsurendranath/frontend-landings-claude-skill

¿Qué es frontend-landings-claude-skill?

Preguntar en tu IA favorita

Documentación