Página de aterrizaje premium
Una página de aterrizaje está terminada cuando supera tres comprobaciones: coincide con su referencia o brief, se mantiene consistente en todos los anchos de 320 a 1920, y nada en ella es accidental. La mayor parte del trabajo es la tercera.
Decide el modo primero
Modo referencia — el usuario proporcionó una captura de pantalla, PDF, URL o "replica esto".
La precisión es el objetivo y "casi igual" es un fallo. Mide la referencia numéricamente
antes de escribir cualquier CSS. Carga reference-replication.
Modo brief — el usuario describió un negocio, una audiencia o una sensación, sin imagen. La composición es tuya para elegir; las reglas de la casa y la biblioteca de secciones establecen el nivel mínimo de calidad.
Si ambos están presentes, la referencia gana para todo lo que cubre y el brief llena los vacíos. Si ninguno está claro, pregunta — una página de aterrizaje construida para el modo equivocado es tiempo perdido.
Pregunta solo lo que cambia la construcción
No interrogues. Cuatro cosas alteran realmente el resultado:
- Stack — HTML / React / Next / Astro. Crea la estructura base desde
templates/<stack>/. - Datos básicos de la marca — nombre, y ya sea una paleta o "extráela de la referencia".
- Localización — define moneda, formato de fecha, ortografía del inglés británico vs. estadounidense. Pregunta una vez, mantén coherencia.
- Secciones — solo si ni una referencia ni un tipo de página obvio las implica.
Todo lo demás tiene un valor predeterminado defendible. Úsalo y di lo que asumiste.
Orden de construcción
Trabajar fuera de orden provoca retrabajo, porque la altura del héroe limita todo lo que está sobre el pliegue y los tokens de diseño limitan cada sección.
- Tokens — superficies, tinta, líneas, acento, radios, easing, una escala tipográfica fluida.
references/design-system.md. - Héroe — el elemento más corregido en cada construcción.
100svh, ritmo envh.references/house-rules.md. - Secciones, en orden de referencia.
references/sections.md. Cualquier espacio que necesite una fotografía: obténla ahora, no dejes un cuadro gris —../stock-imagery/SKILL.md. - Pie de página, luego la secuencia de finalización a continuación.
- Verificar. No opcional — ver más abajo.
Las trampas
Lee references/traps.md antes de escribir código de grid, marquee, icono SVG o imagen a sangre completa.
Seis fallos en ese archivo son silenciosos: CSS válido, sin errores, maquetación incorrecta en otro lugar.
Cuestan horas la primera vez y minutos con la referencia abierta.
La verificación es parte de la construcción
Una página de aterrizaje que no ha sido capturada en pantalla a anchos reales no está terminada. Ejecuta el harness incluido:
scripts/verify.sh <url> --sweep # overflow 320→1920 + ajuste del héroe
scripts/verify.sh <url> --shot 390x844 # una ventana gráfica específica
Maneja el límite de ventana de 500px de macOS que falsifica silenciosamente cada captura de pantalla móvil.
Detalles y el fallback manual: references/verification.md.
Tres comprobaciones deben pasar:
- Sin desbordamiento horizontal en ningún ancho de 320 a 1920.
- El héroe cabe en una pantalla a 390×844, 414×896 y 1600×900, o crece deliberadamente.
- Movimiento reducido aún renderiza cada sección — ningún elemento queda a medio animar.
Secuencia de finalización
Solicitada en cada construcción real. Esta es la definición de terminado, no un lujo:
lenis-smooth-scrollpremium-mobile-menusocial-share-faviconsbuild-creditREADME.mdsobre la página — sus secciones, tokens, puntos de ruptura, pasos de despliegue — no sobre las herramientas que la crearon.gitignore; mensaje de commit sin línea de coautor de IA a menos que se pida- Notas de despliegue (GitHub Pages necesita
.nojekyllcuando cualquier ruta comienza con_)
Lo que significa realmente "premium" aquí
No son degradados y vidrio. Es: tipografía que escala fluidamente en lugar de saltar en puntos de ruptura; movimiento que solo toca transform y opacity; espaciado medido contra el eje en el que vive; sin bandas muertas; y un diseño móvil que fue diseñado en lugar de heredado del escritorio. Cada uno de esos es verificable, por eso son el estándar.
Referencias
| Archivo | Léelo cuando |
|---|---|
references/house-rules.md | siempre — las correcciones que se repiten en cada construcción |
references/traps.md | antes de grid, marquee, iconos SVG, imágenes a sangre completa |
references/design-system.md | al configurar tokens y la escala tipográfica |
references/sections.md | al construir héroe, marquee, acordeón, carril de tarjetas, pie de página |
references/verification.md | al verificar, o una captura de pantalla se ve mal |
../reference-replication/SKILL.md | se proporcionó una imagen o URL de referencia |
../stock-imagery/SKILL.md | la página necesita fotografía y no se proporcionó ninguna |