¿Qué hace Constructor de Páginas de Aterrizaje?

Construye páginas de aterrizaje de alta calidad, listas para implementar, extrayendo la marca y el contenido de los sitios web y documentos del cliente, y produciendo una página HTML/CSS responsiva con imágenes verificadas y estructura limpia.

Este skill existe porque las páginas de aterrizaje requieren una coordinación cuidadosa de la marca, el contenido, las imágenes y el diseño responsivo — y el modo de fallo más común es tratar los documentos fuente como solo texto, perdiendo las imágenes que llevan la mitad del mensaje de marketing.

Las Reglas de Oro

1. Las imágenes son contenido, no decoración. Cuando un PDF de marketing muestra una foto de un salón de clases junto a un párrafo sobre el bienestar estudiantil, esa foto ES el mensaje. Una página de aterrizaje sin esas imágenes está incompleta, sin importar lo buena que sea la copia. Extrae e integra imágenes en la primera pasada, siempre.

2. Mantén el estilo mantenible dentro del stack elegido. Para una página estática, coloca el CSS en styles.css, no en línea en el HTML. Para un proyecto de framework existente, preserva sus módulos CSS establecidos, estilos de componentes, clases utilitarias o sistema de tokens. No migres la arquitectura de estilos sin una razón.

3. Nunca inventes contenido. Usa solo lo que proporciona el documento fuente. No inventes pies de foto, direcciones visuales, citas de testimonios, estadísticas o nombres de clientes. Si falta contenido, márcalo y pregunta — no llenes los vacíos con texto de relleno generado por IA.

4. Usa el stack frontend deliberadamente. Antes de codificar, carga los skills de soporte disponibles que se indican a continuación. Son roles complementarios, no instrucciones duplicadas para pegar a ciegas. Si un skill nombrado no está disponible, continúa con el stack disponible y registra la brecha; nunca finjas que se ejecutó.

Stack Frontend (Enrutamiento Requerido)

Las herramientas frontend proporcionadas en la captura de pantalla se asignan a este flujo de trabajo de página de aterrizaje de la siguiente manera. Lee references/frontend-skill-stack.md para las reglas completas de enrutamiento y conflictos.

frontend-design — establece la tesis visual específica del tema, tipografía, paleta, concepto de diseño, elemento característico e intención de movimiento. Úsalo para nuevas construcciones y remodelaciones visuales significativas.
design-taste-frontend — aplica disciplina de implementación anti-slop, mecánicas de diseño responsivo, estados de interacción accesibles, elecciones de componentes, comprobaciones de rendimiento y la verificación previa al vuelo final del diseño.
imagegen-frontend-web — úsalo cuando las referencias visuales generadas reduzcan materialmente la ambigüedad: dirección visual desconocida, campañas impulsadas por imágenes, ilustración/dirección artística personalizada, o cuando el usuario pida maquetas. Genera referencias; no reemplaza activos de marca reales ni la implementación.
design-taste-frontend-v1 — solo como respaldo heredado. Úsalo cuando un proyecto existente dependa explícitamente del comportamiento v1; no cargues v1 junto con el Design Taste actual.
imagegen-frontend-mobile — no forma parte de la construcción de una página web de aterrizaje. Úsalo solo para un entregable de pantalla de aplicación móvil independiente, nunca como paso de diseño web responsivo de la página.
Aidesigner Frontend — si este skill exacto se instala y es detectable, úsalo como una segunda crítica opcional de la dirección de arte aprobada. Actualmente no se asume que esté disponible y nunca debe bloquear el flujo de trabajo.

No ejecutes todas las herramientas por ceremonia. El stack mínimo para una nueva página de aterrizaje es frontend-design + design-taste-frontend actual + landing-page. Agrega imagegen-frontend-web cuando la generación de referencias visuales esté justificada. El web móvil responsivo sigue siendo parte de la implementación y el QA; no se delega al skill de imágenes de aplicaciones móviles.

Puerta de diseño previa al código requerida

Antes de la implementación, produce un brief de construcción interno que contenga:

la audiencia de la página, un único objetivo de conversión y el contenido fuente de verdad;
una tesis visual coherente vinculada al tema real, no a una estética SaaS genérica;
roles de paleta y tipografía con licencia/disponibilidad verificada;
orden de las secciones y el trabajo de cada sección;
mapa de activos: conservar, obtener, generar u omitir;
una idea visual característica y un plan de movimiento contenido;
comportamiento en escritorio, tableta y móvil para el primer pliegue y secciones complejas;
lista explícita de elementos a evitar basada en la auditoría de marca y referencias.

Si el usuario proporcionó una referencia, extrae principios sin clonar su identidad. Si la fuente es un sitio web de cliente existente o una plantilla aprobada, conserva la copia aprobada, los activos de marca, la gramática de componentes y el orden de las secciones a menos que el usuario autorice explícitamente un rediseño.

Reglas Anti-Slop (OBLIGATORIO)

Estos patrones hacen que las páginas generadas por IA parezcan baratas y genéricas. NUNCA los uses:

Patrones de Copia Prohibidos

"Revoluciona", "Transforma tu", "Libera el poder de", "Aprovecha", "Empodera"
"De vanguardia", "Próxima generación", "Estado del arte", "Mejor de su clase"
"Sin problemas", "Sin esfuerzo", "Sobrecarga"
"En el mundo acelerado de hoy", "En una era de"
Comenzar párrafos con "Imagina..." o "Visualiza esto..."
CTA genéricos como "Más información" o "Comienza ahora" sin contexto — usa CTA específicos: "Obtén Cotización Instantánea", "Reserva una Demo", "Ver Precios"

Patrones Visuales Prohibidos

Manchas de malla de degradado o fondos de aurora (la señal #1 de páginas generadas por IA)
Degradados de púrpura a azul como lenguaje de diseño principal
Objetos 3D flotantes sin conexión con el producto
Patrones geométricos abstractos genéricos como fondos de héroe
Tarjetas excesivamente redondeadas (border-radius > 1.5rem) con sombras paralelas pesadas
Diseños de tarjetas idénticos repetidos 3+ veces con solo cambios de icono
Imágenes de héroe de stock que no coinciden con el negocio (ej., fotos de apretones de manos genéricos)

Patrones de Código Prohibidos

Estilos en línea en elementos HTML
Usar !important en CSS (excepto para anulaciones utilitarias)
Valores de píxel codificados para tamaños de fuente — usa clamp() o rem
Atributos alt faltantes en imágenes
Usar <div> cuando existen elementos semánticos (<section>, <article>, <nav>, <header>, <footer>)

Resumen del Flujo de Trabajo

La construcción sigue siete fases. Resuelve hechos obvios de las fuentes proporcionadas en lugar de pedir al usuario que los repita. Pregunta solo cuando una decisión faltante cambie materialmente el resultado.

Contexto e Investigación — Lee las instrucciones del proyecto/cliente, decisiones de reuniones, brief, estado de aprobación, marca en vivo, referencias, copia y gramática de diseño.
Extracción de Contenido — Extrae todo el texto e imágenes aprobados de las fuentes proporcionadas.
Verificación de Activos — Construye un inventario de medios utilizables con conocimiento de procedencia.
Dirección Frontend y Plano — Aplica Frontend Design y Design Taste; bloquea el flujo de conversión, tokens, comportamiento responsivo, activos y comprobaciones de aceptación; genera referencias web solo cuando esté justificado.
Construcción — Usa el stack más simple que satisfaga el brief e implementa el código de producción completo.
QA en Navegador — Construye/prueba, inspecciona capturas de pantalla en escritorio/tableta/móvil, corrige defectos y repite.
Despliegue y Verificación en Vivo — Despliega solo cuando se solicite, luego inspecciona la URL real e informa el alias verificado.

Fase 1: Contexto e Investigación

Antes de escribir código, lee las instrucciones más cercanas del proyecto/cliente, el brief aprobado, las decisiones de reuniones y los enlaces fuente. Luego, comprende la marca existente del cliente y recopila todos los activos que necesitarás.

Extracción de Marca

Obtén el sitio web del cliente y extrae:

Colores: Inspecciona las propiedades personalizadas de CSS, los estilos calculados en elementos clave (encabezados, botones, fondos, acentos). Registra como valores hex.
Fuentes: Verifica enlaces de Google Fonts, declaraciones font-family y reglas @font-face. No asumas — muchos sitios usan fuentes que se parecen a las comunes pero no lo son.
Logo: Encuentra la URL de la imagen del logo (generalmente en el encabezado o pie de página). Obtén la versión de mayor resolución disponible.
Lenguaje de diseño: Anota patrones de espaciado, uso de border-radius, estilos de sombra, tratamientos de fondo de sección.

Recopilación de Activos

Esto es crítico. Rastrea los directorios de imágenes del sitio para construir un catálogo completo:

Obtén la página de inicio y las páginas clave, extrae todos los atributos src de <img> y las URLs de background-image de CSS.
Busca patrones en las rutas de las imágenes (ej., /wp-content/uploads/YYYY/MM/ para sitios WordPress).
Para cada imagen, registra:
- URL completa
- Nombre descriptivo (¿qué muestra la imagen?)
- Dimensiones (del nombre del archivo o obteniendo los encabezados)
- Categoría (foto, ilustración, icono, logo, sticker)

Guarda este catálogo — lo consultarás durante toda la construcción.

Ejemplo de entrada de catálogo:

URL: https://ejemplo.com/wp-content/uploads/2023/08/imagen-13-1024x768.jpeg
Descripción: Estudiantes trabajando juntos en un salón de clases
Dimensiones: 1024x768
Categoría: foto
Usar para: Sección de Problema, Galería

Fase 2: Extracción de Contenido

Cuando el usuario proporciona un PDF, documento de Word u otro documento de contenido:

Contenido de Texto

Extrae todos los encabezados, cuerpo del texto, estadísticas, citas y CTA.
Preserva la estructura de secciones del documento — generalmente se asigna a las secciones de la página.
Anota cualquier frase específica que deba mantenerse textualmente (eslóganes, afirmaciones respaldadas, citas de testimonios).

Contenido de Imágenes (NO SALTES ESTO)

Identifica cada imagen en el documento.
Para cada imagen, determina qué muestra y a qué sección pertenece.
Coincide las imágenes del documento con URLs alojadas reales del sitio web del cliente (de tu catálogo de la Fase 1).
Si una imagen del documento no coincide con ninguna URL del catálogo, anótala como "necesita fuente" y pregunta al usuario.

La razón por la que esto importa: los documentos de marketing usan imágenes estratégicamente. Un PDF que muestra ilustraciones de personajes junto con contenido de ciencia del cerebro te está diciendo que esas ilustraciones pertenecen a la sección de Ciencia del Cerebro de la página de aterrizaje. Ignorarlas produce una página con mucho texto que no da en el blanco.

Fase 3: Catálogo y Verificación de Imágenes

Antes de construir nada, verifica cada URL de imagen que planeas usar.

Proceso de Verificación

Para cada URL de imagen:

Obtén la URL y verifica el código de estado HTTP.
Una respuesta 200 con el content-type correcto significa que está bien.
Un error 404 u otro significa que la URL es incorrecta.

Corrección de URLs Rotas

Cuando una URL de imagen devuelve 404:

Vuelve al sitio en vivo y busca la imagen por nombre de archivo parcial.
Obtén la fuente de la página que originalmente contenía la imagen.
Busca la ruta correcta — los nombres de archivo a menudo tienen ligeras variaciones (ej., GYM_Kid-at-Desk-300x295.png vs GYM_Kid_AtDesk-222x300.png).
Nunca adivines nombres de archivo. Siempre verifica contra el servidor real.

Catálogo Final

Produce una lista verificada que asigne cada sección de contenido a sus imágenes:

Héroe: logo.png (verificado), character-teaching.png (verificado), sticker-owl.png (verificado)
Problema: classroom-photo.jpeg (verificado)
Ciencia del Cerebro: character-1.png (verificado), character-2.png (verificado), character-3.png (verificado), character-4.png (verificado)
Cambio: school-kits.jpg (verificado), home-products.jpeg (verificado)
Galería: classroom.jpeg, confidence.png, founders.jpeg (todos verificados)

Fase 4: Dirección Frontend y Plano

Carga el stack frontend requerido y completa la puerta de diseño previa al código del principio de este archivo. Decide si las imágenes de referencia web generadas son útiles. Bloquea el flujo de conversión, los trabajos de las secciones, los tokens visuales, el plan de medios, la intención de movimiento, el comportamiento responsivo y las comprobaciones de aceptación antes de la implementación.

Rechaza la dirección si podría reutilizarse sin cambios para un cliente no relacionado. Una dirección de arte coherente es mejor que promediar varias estéticas de skills.

Fase 5: Construcción

Elige el stack de implementación

No fuerces cada página de aterrizaje a una sola tecnología. Elige según el proyecto real:

Repositorio o plantilla existente: preserva su framework, tiempo de ejecución, componentes, enrutamiento y canalización de activos a menos que la migración se solicite explícitamente.
Página de campaña estática: se prefieren HTML semántico, CSS externo y JavaScript mínimo cuando no se necesita una arquitectura de componentes o comportamiento de aplicación.
Página basada en componentes o interactiva: React/Vite, Next.js o el stack existente del repositorio es válido cuando los componentes reutilizables, integraciones, estado o movimiento complejo lo justifican.
Verifica las dependencias antes de importarlas. Prefiere las bibliotecas existentes del proyecto sobre agregar paquetes de moda.

El antiguo valor predeterminado a continuación se aplica solo a una página estática genuinamente nueva.

Estructura de archivos para página estática

Mantenlo simple — un solo directorio con dos archivos:

nombre-proyecto/
├── index.html
└── styles.css

Para una página estática simple, evita herramientas de construcción innecesarias y dependencias de framework. Esto es un valor predeterminado, no una prohibición de usar el stack real del proyecto.

Configuración del Sistema de Diseño (styles.css)

Inicia la hoja de estilo con el sistema de marca extraído:

:root {
  /* Colores de marca — extraídos del sitio del cliente */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... todos los colores de marca como propiedades personalizadas */

  /* Escala neutra — siempre define estos */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Tokens utilitarios */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transiciones */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

Reglas de Tipografía (CRÍTICO)

La mala tipografía es la razón #1 por la que las páginas de IA se ven amateur. Sigue esto estrictamente:

/* Tamaños mínimos — NUNCA vayas por debajo de estos */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */

…

Constructor de Páginas de Aterrizaje

¿Qué es Constructor de Páginas de Aterrizaje?

Preguntar en tu IA favorita

Documentación