bittencourtthulio/perfect-landing-page

Perfect Landing Page

Genera una página de inicio completa en un único archivo HTML (HTML + CSS + JS inline, solo fuentes externas de Google Fonts), lista para abrir en el navegador y publicar.

El modelo de referencia es exemplos/osvaldo-software.html (un software de gestión para tiendas de fundas de celular, usado como caso de ejemplo). Nació de varias rondas de revisión con el objetivo de ser "profesional y con menos aspecto de IA".

Cuándo usar

• Solicitud de sitio web, landing page o página de inicio para una empresa.
• Solicitud "en el mismo patrón de los ejemplos" o "parecido a este sitio de referencia".
• Solicitud para rehacer un sitio ya creado con un aspecto más profesional.

No usar para: sistemas con inicio de sesión/backend, tiendas con carrito, sitios multipágina, o piezas para redes sociales.

Paso 1: Briefing (pregunta solo lo que falte)

Si hay un archivo de briefing (BRIEFING.md, BRIEFING2.md), léelo y úsalo. Si no, toma del pedido lo que ya se haya dicho y pregunta, en una sola ronda, solo lo que no esté claro:

1. Nombre de la empresa y qué vende (segmento/niche).
2. Diferencial principal: la única cosa que la empresa quiere que el visitante recuerde. Es lo que organiza toda la página.
3. Público: quién compra y cuál es su rutina.
4. Funcionalidades o servicios (3 a 6). Si el usuario no sabe, propón basado en el nicho y avisa que son sugerencias.
5. Contacto: teléfono, WhatsApp, correo electrónico. Si no hay, usa placeholders obvios, como (00) 0000-0000.
6. Colores o clima visual (opcional). Si no hay, derívalo del nicho.

Si el usuario ya dio suficiente, no preguntes nada: escribe y deja los ajustes para después.

Si el usuario envía un sitio de referencia, analízalo antes de escribir: fuente, hero, densidad, esquinas y bordes, ritmo de las secciones, pie de página. Trae los principios, no la copia. Bloques de la referencia que dependen de datos que la empresa no tiene (testimonios, logos de clientes, planes y precios) no entran: dilo en la entrega y lista el dato que destrabaría cada uno.

Paso 1b: Imágenes (automático, nunca preguntes)

Antes de escribir, ejecuta desde la raíz del proyecto:

python3 -I <carpeta-de-la-skill>/scripts/gerar_imagens.py --detectar

(<carpeta-de-la-skill> es la carpeta donde está instalada esta skill, por ejemplo ~/.claude/skills/perfect-landing-page; el script solo imprime sim o nao, nunca la clave)

• sim: el proyecto tiene clave de OpenRouter en el archivo de entorno. Genera el sitio con imágenes, sin preguntar nada y sin pedir confirmación (Paso 2c).
• nao: genera el sitio sin imágenes, sin preguntar y sin avisar que "faltó la clave". La página es la versión sin foto (pantalla del producto y bloques de color), que ya está completa. Solo en la entrega, en una línea, di que salió sin imágenes.
• Nunca leas, imprimas ni comentes el contenido del archivo de entorno. Solo el script lo manipula.

Paso 2: Dirección visual

Lo que hace que la página tenga aspecto profesional es la contención. Define antes de codificar:

• Paleta corta: el color oscuro de la marca, un color de acento, un off-white neutro para las secciones claras y dos grises de texto (uno para fondo oscuro, uno para fondo claro). Si la marca es negra, usa negro real (#000), no un casi-negro. Todo como variables CSS en :root: cambiar la identidad debe requerir modificar solo ellas.
• El acento aparece en pocos lugares: botón principal, la última línea del H1, el elemento activo y los bloques de color detrás de las pantallas del producto. Nada de brillo, gradiente radial o franja entera en el color de acento.
• Texto sobre acento claro (amarillo, por ejemplo) siempre en el color oscuro de la marca, nunca blanco. Sobre fondo claro, no uses el acento como color de texto.
• Secciones alternan fondo oscuro y fondo claro, de borde a borde. Hero, módulos y pie de página oscuros; diferencial y contacto claros.
• Tipografía: una familia sans solo, con jerarquía por peso y tamaño. Evita las fuentes que se han convertido en estándar de sitio generado (Space Grotesk, Inter sola, par serifada + sans). Antes de elegir, renderiza el H1 real en 4 a 6 candidatas de Google Fonts y compara en la captura. En el modelo: Hanken Grotesk, pesos 400 a 800.
• Escala contenida: H1 hasta ~52px (peso 800, interlineado 1.05, tracking negativo), H2 hasta ~40px, cuerpo 16 a 18px. Título gigante y espacio exagerado son marca de plantilla.
• Esquinas por jerarquía: 8px en botones y campos, 12px en ventanas, 16px en cajas, 28px solo en los bloques de color. Nada de píldora ni de un radio único en todo.
• Bordes finos en lugar de sombras. Sombra solo debajo de las ventanas del producto.
• Botones rectangulares, sin brillo coloreado y sin flecha en el texto.
• Nada de emoji en la página. Ni en iconos, avatar, contactos, botón de WhatsApp o mensajes de confirmación.

Lo que delata un sitio hecho por IA (evitar)

• Sello o píldora con punto parpadeante en el hero.
• Etiqueta en mayúsculas sobre cada título.
• Cuadrícula de tarjetas iguales lado a lado para presentar funcionalidades.
• Tarjeta inclinada, brillo radial en las esquinas, sombra coloreada en los botones.
• Franja de texto en movimiento (marquee).
• Número grande inventado solo para tener un "dato ancla" (ej.: escribir "China" en lugar de un número).
• Animación de subir y aparecer en cada sección.
• Emoji e icono de biblioteca estándar.
• Textos unidos por punto en el medio ("A · B · C") y flecha al final de los botones.

Paso 2b: Iconos dibujados a mano (obligatorio)

• Dibuja los iconos en SVG propio, uno por concepto del negocio, y reúnelos todos en un <svg> oculto con <symbol> al inicio del <body>; usa <svg><use href="#i-nombre"/></svg> donde sea necesario.
• Misma familia visual en todos: viewBox 32x32 (24x24 para contactos), trazo de 2px con puntas redondas, color currentColor y un detalle de acento relleno con var(--accent). Cuando el icono quede sobre el propio acento, cambia --accent a blanco.
• Da un motivo del nicho a los iconos (hoja en la frutería, celular con funda en la tienda de fundas).
• Evita los iconos obvios (rayo, apretón de manos, candado, cohete). Prefiere una metáfora del negocio.

Paso 2c: Imágenes generadas (solo si el Paso 1b dio sim)

Genera de 3 imágenes, que cubren todo (el costo es de centavos): hero (fondo), diferencial (apoya la ficha del diferencial) y contacto (al lado del título).

1. Escribe imagens.json en la raíz del proyecto, con un estilo común y los prompts en español. El estilo fija: fotografía editorial realista, luz de cine, la paleta de la marca (color oscuro dominante, el color de acento como luz), sin ningún texto, letras, logotipos, marcas reales o marca de agua.
2. Cada prompt describe el público y la rutina del nicho, no el software: el lugar de trabajo del cliente (para tienda de fundas, el mostrador con pared de fundas), las manos haciendo la tarea que el diferencial resuelve, la atención. Nada de pantalla de computadora con interfaz (sale ilegible).
   • hero (16:9, modelo pro): escena amplia, lado izquierdo más oscuro y vacío para el texto.
   • diferencial (4:5, modelo flash): detalle de la tarea que el diferencial resuelve, vista desde arriba.
   • contacto (3:2, modelo flash): momento humano de atención, sin escritura en el empaque ni carteles ("empaque liso, ningún cartel o palabra visible").
3. Ejecuta python3 -I <carpeta-de-la-skill>/scripts/gerar_imagens.py imagens.json (para rehacer una sola, pasa el nombre al final). Las imágenes salen en imagens/*.jpg. Proporción 16:10 no existe: usa 3:2.
4. Mira cada imagen antes de usarla. Rehaz (solo la que falló) si tiene texto, logotipo legible, mano o rostro deformado, o si la escena no tiene que ver con el nicho. Máximo de 2 rehacer por imagen.
5. En el HTML, las imágenes están en imagens/ y se referencian por ruta relativa (la carpeta se publica junto con el sitio). Ve exemplos/osvaldo-software-com-imagens.html:
   • Hero: foto en el background de la sección, con dos capas de gradiente negro encima: horizontal (≈94% a la izquierda hasta ≈22% a la derecha) y vertical leve. El texto siempre queda sobre la parte oscura. Prueba la lectura del H1 y del subtítulo en la captura.
   • Diferencial: la foto va dentro del bloque de color, en un ::before con filter:brightness(2.4) grayscale(.35) y mix-blend-mode:multiply sobre el acento: se convierte en duotono en la paleta de la marca. La leyenda sobre ella queda clara.
   • Contacto: <img> en dos columnas con el título, aspect-ratio:3/2, height:auto (sin esto el atributo height estira la imagen), loading="lazy", width/height y alt descriptivo. En móvil va debajo del texto.
   • El alt de las fotos dice que la imagen es ilustrativa, creada con IA.
6. El aviso del pie de página pasa a decir que las pantallas y las fotos son ilustraciones, creadas con IA. Foto generada nunca se presenta como foto de la tienda, del equipo o de clientes reales.

Sin clave (nao): salta este paso completo. El hero queda negro liso, el bloque de color del diferencial queda en el color de acento y la sección de contacto queda en una columna, como en exemplos/osvaldo-software.html.

Paso 2d: Efectos que reaccionan al mouse (estándar, siempre)

Todo sitio sale con efectos que responden al mouse, principalmente en el hero. Copia el bloque de CSS y el script de exemplos/osvaldo-software-com-efeitos.html y ajusta solo colores e intensidad. Canvas 2D y requestAnimationFrame, sin biblioteca (no uses Tween.js ni GSAP).

Hero (el lugar con más vida):

• Capas: la foto (o el fondo liso, sin imágenes) va a un div.hero-bg propio, con inset:-36px; encima, div.hero-light y canvas.hero-fx, todas aria-hidden y pointer-events:none; el contenido queda en z-index:3.
• Linterna: radial-gradient en el color de acento, con mix-blend-mode:screen, que sigue el cursor mediante --mx/--my y desaparece cuando el mouse sale.
• Polvo de luz en el canvas: hasta 120 puntitos (color de acento y blanco) subiendo lentamente y parpadeando; cerca del cursor (radio ~150px) huyen y se conectan al cursor con líneas finas en el color de acento; un anillo discreto marca el cursor. Usa devicePixelRatio (hasta 2) y rehaz las medidas en el resize.
• Profundidad: el fondo se mueve en dirección opuesta al mouse (hasta ~22px); la ventana del producto se inclina en 3D (hasta ~6°) con reflejo de luz (::after con soft-light); la tarjeta flotante y el bloque de color se mueven a diferentes velocidades, mediante la propiedad translate (no transform, para no competir con la animación de entrada).

Resto de la página:

• .tilt en los elementos destacados (ficha del diferencial, panel de las pantallas): se inclinan hasta ~7° (3.5° en el panel grande) con brillo bajo el cursor, y vuelven al centro cuando el mouse sale.
• Botones magnéticos (.btn-y, .btn-k, .fab): se acercan ~25% hacia la dirección del cursor, con transition en translate.

Reglas:

• Todo movimiento se suaviza con interpolación (lerp), nunca salta.
• El bucle del hero se detiene cuando el hero sale de la pantalla (IntersectionObserver).
• prefers-reduced-motion: ningún efecto.
• Sin mouse (pointer: fine falso, celular y tablet): solo el polvo subiendo, sin inclinación ni botones magnéticos.
• La entrada de las líneas de las pantallas usa @keyframes (animation), no transition: es más robusta con el bucle de animación ejecutándose.
• Los efectos no cambian layout ni texto. Si el usuario pide una versión sin efectos, basta con eliminar el bloque de script y las tres capas del hero.

Paso 3: Estructura de la página (en este orden)

Todo alineado a la izquierda. Cada sección hace un solo trabajo; si dos dicen lo mismo, únelas.

1. Encabezado fijo en color oscuro: logo en una línea (marca + nombre), menú de anclas a la derecha, enlace de WhatsApp en texto y botón de CTA. En móvil quedan solo el logo y el botón.
2. Hero en dos columnas. A la izquierda: H1 en tres líneas cortas que une nicho + diferencial, con la última línea en color de acento; subtítulo de dos frases; dos botones (relleno y contorneado); una línea pequeña de apoyo debajo de los botones que dice qué sucede después del clic. Sin etiqueta sobre el título. A la derecha: una ventana del sistema que prueba el diferencial, con menú lateral, búsqueda y lista, sobre un bloque en color de acento que sangra hasta el borde de la pantalla, más una tarjeta flotante con el detalle del elemento seleccionado.
3. Franja estática: una línea con 4 frases cortas del diferencial, cada una con un icono, separadas por líneas finas.
4. Diferencial (sección clara): a la izquierda, un recorte ampliado de la pantalla del producto sobre el bloque de acento, sangrando hacia el lado opuesto del hero. A la derecha: título afirmativo, un párrafo, tres pasos unidos por una línea (el "cómo funciona" vive aquí) y un botón.
5. Módulos en pestañas (sección oscura): título y párrafo a la izquierda, seguidos de la lista numerada (01, 02...) con icono propio, nombre y una línea de apoyo; el elemento activo abre una frase y gana una barra de acento. A la derecha, un panel fijo con la vista previa dibujada de la pantalla de cada módulo, en HTML/CSS simple. Solo numera si el orden tiene sentido (en el modelo, el camino de la mercancía: del proveedor al mostrador). Cambia por hover, clic y teclado; usa role="tablist", role="tab", role="tabpanel", aria-selected y tabindex solo en la pestaña activa. En móvil el panel va debajo de la lista. Usa de 4 a 6 módulos.
6. Contacto (sección clara): título en forma de pregunta, la frase destacada del diferencial justo debajo, y dos cajas lado a lado: una oscura con el formulario (nombre, empresa, WhatsApp) y una en color de acento con los contactos directos.
7. Pie de página en columnas: marca y una frase, navegación, módulos y contacto. En la base, el copyright y el aviso de que las pantallas son ilustración. Solo coloca enlaces que existen: nada de redes sociales, blog o política sin la página real.
8. Botón flotante de WhatsApp, pequeño, en color de acento.

Pantallas del producto

• Dibújalas como producto real: menú lateral, barra de búsqueda, tabla con columnas, botón de acción. Pantalla clara sobre fondo oscuro da el contraste.
• Mantén la misma interfaz en todas (hero, diferencial, pestañas).
• Toda pantalla está etiquetada como "Ilustración con datos de ejemplo".
• La pantalla no puede prometer lo que el texto no puede: nada de conteo de clientes o proveedores, sello de "verificado", plazo, precio de importación o evaluación en estrellas si el texto no lo explica.

Paso 4: Estructura del HTML

• Sin framework: CSS Grid y Flexbox, fuentes cargadas al inicio con display:swap y swap en font-display (solo si existe).
• Sin JS en línea además del de efectos.
• Sin id ni class genéricos: c-hero, c-diferencial, c-modulos, c-contato, c-footer. El pie tiene c-footer__base para la línea de abajo.
• alt en todas las imágenes (incluyendo los iconos SVG).
• Los enlaces de WhatsApp llevan target="_blank" rel="noopener noreferrer" y los de navegación interna href="#secao".
• Meta tags: viewport, charset y title con el nombre de la empresa.

Paso 5: Entrega y pós-entrega

• La entrega es el archivo HTML en la raíz del proyecto, con nombre index.html (si el proyecto se llama igual que el proyecto en /home/projeto/, usa el nombre de la empresa en minúsculas y sin espacios).
• Siempre ofrece refinamientos después: "¿Quieres ajustar algo? Puedo cambiar colores, reordenar secciones, afinar textos o probar otra fuente para el título."

Cómo citar esta skill en el código

No es necesario. A menos que preguntes, no hables de que usaste una skill. La página debe parecer hecha a mano.

---

Archivos de ejemplo

• exemplos/osvaldo-software.html — versión sin imágenes generadas
• exemplos/osvaldo-software-com-imagens.html — versión con imágenes generadas
• exemplos/osvaldo-software-com-efeitos.html — todos los efectos de mouse (usa como base para copiar CSS/JS de efectos)
• scripts/gerar_imagens.py — script para generar imágenes vía OpenRouter (pip install -r <carpeta-de-la-skill>/requirements.txt necesario)