Constructor de Páginas de Aterrizaje

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

Construye la página terminada, no una indicación, un wireframe, un moodboard o una muestra parcial. Entrega código funcional respaldado por QA real en el navegador. La calidad premium significa decisiones específicas de la marca, tipografía/composición/imágenes excelentes, claridad de conversión, artesanía responsiva, movimiento con propósito, accesibilidad, rendimiento e integridad factual.

Al ser invocado, lee metadata.version arriba y registra landing-page v<versión> en el brief del proyecto. Repite esa versión exacta en el informe de finalización para que cada página de aterrizaje generada siga siendo rastreable hasta la versión de la habilidad que la produjo.

Contrato de salida estricto

Entrega:

• una implementación responsiva completa en un proyecto nuevo o explícitamente aprobado existente;
• la copia exacta proporcionada por el usuario preservada textualmente; escribe, edita o reestructura la copia solo cuando el usuario lo solicite explícitamente;
• un sistema de marca funcional, un manifiesto de activos/notas de procedencia y notas de integración;
• imágenes de producción en lugar de marcadores de posición cuando la generación de imágenes o los activos aprobados estén disponibles;
• coreografía GSAP con propósito, movimiento de secciones activado por desplazamiento y microinteracciones de control por defecto para construcciones completas, sujeto a las excepciones de modo documentadas;
• metadatos SEO/OG, estructura semántica, estados de accesibilidad y medios optimizados;
• viewport del usuario probado en navegador, límites de punto de interrupción, tablet, móvil estrecho y estados móviles comunes;
• despliegue predeterminado en Vercel, seguido de verificación en vivo en desktop/móvil; pregunta solo cuando la autenticación u otro bloqueo real impida el despliegue.

Nunca inventes afirmaciones, métricas, credenciales, testimonios, logotipos de clientes, redacción regulada, productos, capturas de pantalla, detalles de contacto o éxito de formularios.

Enrutamiento de habilidades requerido

Carga antes de construir:

1. frontend-design para la dirección artística específica de la marca y la tesis visual.
2. design-taste-frontend para la implementación anti-'“slop”' y la verificación previa responsiva.
3. imagegen-frontend-web solo cuando la matriz de modo autoritativa lo resuelva en: ambigüedad visual, dirección basada en imágenes, conceptos solicitados o activos aprobados insuficientes.
4. Esta habilidad landing-page para orquestación, construcción, QA y entrega.
5. La capacidad de generación de imágenes de producción disponible o media-use cuando el inventario de activos oficial/proporcionado no pueda respaldar la dirección visual aprobada.
6. imagegen-frontend-mobile solo para medios de pantalla de aplicación conceptual claramente etiquetados o conceptos de pantalla de producto aprobados en una página de marketing de aplicación móvil. Nunca lo uses para diseñar web móvil responsiva o implicar que las pantallas generadas son funcionalidad de producto verificada.

Lee references/frontend-skill-stack.md para conocer las reglas de conflicto de pila.

Decisión del modo de proyecto

Lee references/policy-matrix.md. Es la única fuente autoritativa para Imagegen, GSAP, preservación, aprobación, seguridad de integración, cobertura de viewport y enrutamiento de control de calidad. Selecciona exactamente uno de sus seis modos y registra las decisiones resueltas más la justificación. Ninguna prosa en otro lugar puede anular la matriz.

Cuando el usuario diga "“desde cero"” o "“no toques construcciones anteriores,"” crea un proyecto con nombre único y nunca edites trabajo previo.

Fase 1: Captura de información de invocación

Haz una pregunta corta a la vez. Nunca combines varios campos en un párrafo o cuestionario. Espera la respuesta antes de hacer la siguiente pregunta realmente requerida.

Usa este orden, saltando cualquier cosa ya proporcionada o que se pueda inferir de manera segura:

1. ¿Para qué empresa/producto y sitio web oficial es esto?
2. ¿Dónde está la copia final aprobada por el usuario? La copia es obligatoria y se preserva exactamente.
3. ¿Dónde están la guía de marca, el logotipo y los activos aprobados, si existen?
4. ¿Es una construcción nueva separada o una edición de un proyecto existente?
5. Pregunta sobre la audiencia, el destino de la CTA, la integración o el cumplimiento solo si el sitio/la copia proporcionados no lo responden y bloquea materialmente la implementación.

No preguntes si se puede reescribir la copia. No ofrezcas escribir o cambiar la copia. Escribir, editar o reestructurar solo está habilitado mediante una solicitud explícita del usuario. No preguntes si desplegar; el despliegue en Vercel es el predeterminado.

Lee references/intake-brand-assets.md y sigue su jerarquía de fuentes, recuperación de logotipos, alternativa de guía de marca, cumplimiento, integración y reglas de procedencia.

Fase 2: Evidencia y auditoría de marca

Después de la captura:

1. Lee las instrucciones del proyecto, el brief/contenido aprobado, las aprobaciones previas y las referencias proporcionadas.
2. Abre el sitio web oficial en un navegador real cuando exista uno; de lo contrario, registra la condición de marca nueva/sin sitio y continúa desde el contexto proporcionado.
3. Extrae fuentes/colores calculados, variantes de logotipo, espaciado, cuadrícula, radios, botones, iconos, imágenes, navegación, formularios, pie de página, comportamiento responsivo y movimiento.
4. Recupera y verifica visualmente un logotipo SVG oficial o PNG transparente de alta resolución. Si no hay un logotipo existente, pídelo al usuario. Si no existe ningún logotipo, confirma si un tratamiento de nombre de producto en texto plano es aceptable y registra que el diseño del logotipo está fuera del alcance. Nunca redibujes o generes un logotipo de cliente.
5. Extrae texto e imágenes del documento juntos; preserva las relaciones imagen-copia.
6. Crea un manifiesto de activos verificado.
7. Si no existe una guía de marca, crea una guía de proyecto compacta creada por el agente y etiquétala honestamente.

Para trabajo regulado/sensible a la confianza, preserva los descargos de responsabilidad, licencias, redacción de premios, elegibilidad, consentimiento y calificaciones proporcionados, a menos que las ediciones estén explícitamente autorizadas.

Fase 3: Contenido y arquitectura de conversión

Crea un manifiesto de contenido antes del diseño:

• titular/cuerpo/CTA/afirmación respaldados por fuentes para cada sección;
• trabajo de la sección: enganchar, explicar, probar, diferenciar, responder o convertir;
• fuente de evidencia o marcador de posición no resuelto;
• visual/medios previstos y estado de los activos;
• ruta de conversión principal y destino de la CTA.
• approval_status y verification_status rastreados por separado para afirmaciones factuales, testimonios, métricas, credenciales y redacción regulada.

La política de contenido predeterminada es la preservación exacta de la copia proporcionada por el usuario. authorized_editing o agent_draft_unapproved pueden seleccionarse solo cuando el usuario solicita explícitamente editar o escribir. Los borradores del agente permanecen sin aprobar y no pueden contener afirmaciones no respaldadas.

Usa solo secciones que respondan a una pregunta de conversión real. No incluyas mecánicamente héroe + confianza + tres tarjetas + testimonios + FAQ. Una idea principal por sección. Preserva la IA aprobada en proyectos existentes a menos que esté autorizado cambiarla.

Fase 4: Brief de diseño e Imagegen

Escribe el brief previo al código:

• audiencia, objetivo de conversión, fuente de verdad, modo de proyecto;
• una tesis visual específica del sujeto y columna vertebral narrativa;
• paleta, roles tipográficos, cuadrícula/espaciado, gramática de forma/componente;
• grado de imagen, mapa de activos, plan de generación de imágenes, elemento característico;
• comportamiento del primer pliegue y secciones complejas en desktop/tablet/móvil;
• storyboard de movimiento con un propósito para cada secuencia;
• lista explícita de evitar y criterios de aceptación.

Rechaza la dirección si pudiera reutilizarse sin cambios para una marca no relacionada.

Cuando la matriz de políticas resuelva Imagegen como activado, lee references/imagegen-production.md:

1. Usa imagegen-frontend-web y anuncia el recuento de referencias seleccionado.
2. Genera e inspecciona una referencia horizontal separada para cada sección seleccionada.
3. Mantén un mundo de marca mientras varías la composición y la densidad.
4. Bloquea la dirección mediante un punto de control del usuario (solicitud/consecuencia de compensación) o una puerta de aceptación del agente (autónoma, reversible, respaldada por fuentes). Registra qué modo de aprobación se utilizó.
5. Genera/resuelve los activos de producción por separado en relaciones de aspecto reales sin texto, logotipos, afirmaciones o marcas de agua incorporados. La UI está excluida, excepto para el caso de pantalla de aplicación conceptual, claramente etiquetado y enrutado por política.
6. Inspecciona, recorta, optimiza, añade texto alternativo y registra la procedencia.

Juzga las imágenes por utilidad narrativa, repetición visible, especificidad de marca y calidad de activos en lugar de cuotas. Una página deliberadamente liderada por tipografía o rica en activos puede saltarse la generación con una justificación registrada; una página accidentalmente cargada de texto o genérica de stock falla.

Fase 5: Implementación estática y aprobación

Elige la pila más simple que cumpla con el brief:

• preserva el framework, estilo, enrutamiento, componentes, análisis y canalización de activos de un repositorio existente;
• usa HTML semántico, CSS externo y JS externo para páginas genuinamente estáticas;
• usa React/Vite/Next solo cuando la arquitectura existente, componentes reutilizables, integraciones, estado o interacción compleja lo justifiquen;
• verifica las dependencias antes de importarlas.

Completa la página estática antes del movimiento. Ya debe tener:

• copia correcta, logotipo/activos verificados, destinos de CTA reales;
• tokens coherentes y gramática de componentes;
• tipografía controlada y saltos de línea en el viewport del usuario;
• suficiente variedad compositiva para evitar la repetición visible, sin cuotas de diseño numérico;
• recortes de imagen intencionales y dimensiones reservadas;
• navegación funcional, formularios/enlaces, estados de enfoque e interacción;
• reflujo responsivo deliberado en lugar de apilamiento accidental;
• sin medios rotos, desbordamiento, recortes, UI falsa, marcadores de posición o restos de fuente.

Captura-QA con capturas de pantalla y corrige la composición estática antes de comenzar con GSAP.

Fase 6: Pase de producción GSAP

Lee references/gsap-motion.md para cada construcción completa y rediseño sustancial; planifica el movimiento en el brief e impleméntalo después del QA de composición estática.

El movimiento está activado por defecto para construcciones completas bajo la matriz de políticas. Ofrece coreografía del héroe, movimiento de sección específico del contenido y retroalimentación para los controles interactivos existentes. Adapta la intensidad a la marca. Una restricción válida de estática/ejecución/preservación puede cambiar esto; la ausencia de una solicitud de animación explícita no es una razón para omitirla. Registra las observaciones de ejecución en QA/motion-review.md; las capturas de pantalla por sí solas no pueden pasar la aceptación de movimiento.

Mantén el contenido crítico visible si los scripts fallan o se cargan lentamente. No uses oyentes de desplazamiento de ventana sin procesar. Verifica la animación en pestaña activa porque las pestañas en segundo plano aceleran los temporizadores.

Fase 7: QA en el navegador

Ejecuta la página localmente e inspecciona capturas de pantalla y estados reales:

• viewport real del usuario, cada límite de punto de interrupción de diseño, una tablet, un móvil estrecho y un móvil común; 375px/390px son valores predeterminados, no requisitos universales;
• primer pliegue, múltiples secciones intermedias, CTA/pie de página final;
• estados de movimiento activo y en reposo más movimiento reducido;
• menús, anclas, formularios, acordeones, pestañas, carruseles y uso del teclado;
• familias/pesos de fuente calculados donde la tipografía importa;
• carga/dimensiones naturales de la imagen, recorte, texto alternativo;
• desbordamiento horizontal, recortes, errores de consola/red, riesgos de CLS;
• destino de formulario/CTA y comportamiento de éxito/error. Usa puntos finales de prueba/sandbox y datos sintéticos. Nunca envíes leads en vivo, registros de CRM, pagos, correos electrónicos o eventos de análisis sin aprobación explícita.

Corrige los defectos antes de la entrega. Una compilación que pasa no es QA de diseño.

Fase 8: Control de calidad premium

Lee references/premium-quality-gate.md y puntúa con evidencia:

1. Especificidad de marca
2. Conversión y narrativa
3. Tipografía
4. Composición y espaciado
5. Imágenes y dirección artística
6. Artesanía de componentes
7. Diseño responsivo
8. Movimiento
9. Accesibilidad e integridad
10. Rendimiento y preparación para producción

Usa comprobaciones críticas binarias más anclas de 0/5/8/10 respaldadas por evidencia. Ninguna categoría aplicable puede puntuar por debajo de 8/10; apunta a 9+ en general. Se permite N/A solo con justificación escrita, incluido el movimiento en una página deliberadamente estática. Cita evidencia de captura de pantalla, DOM, auditoría o prueba para cada puntuación. Cualquier criterio de rechazo crítico hace que la página falle independientemente del promedio. Corrige la categoría aplicable más débil, vuelve a ejecutar la evidencia y vuelve a puntuar.

Si el usuario llama al trabajo básico, genérico o malo, invalida la dirección artística actual. Deja de hacer microajustes, identifica la causa sistémica, reinicia la tesis/referencia/primer pliegue, reconstruye y re-QA.

Fase 9: SEO, rendimiento y despliegue

Antes de la entrega:

• un H1, estructura de encabezados lógica, título, descripción, canónico, metadatos OG y favicon;
• imágenes responsivas optimizadas, prioridad/precarga del héroe cuando corresponda, medios perezosos debajo del pliegue;
• máximo dos familias de fuentes justificadas y solo los pesos requeridos;
• elementos semánticos, etiquetas, texto alternativo, contraste, enfoque, teclado y soporte de movimiento reducido;
• sin integraciones falsas, afirmaciones no verificadas, errores de consola, enlaces rotos o secretos no resueltos;
• notas de origen con procedencia de copia/activos/logotipo/generación de imágenes/integración.

Despliega cada página de aterrizaje completada en Vercel de forma predeterminada utilizando la configuración de Vercel existente del proyecto o un nombre de proyecto nuevo aislado. Si la autenticación, propiedad, secretos u otro bloqueo real impiden el despliegue, pregunta solo por ese bloqueo. Verifica el alias en vivo exacto en un navegador real en desktop y móvil; comprueba los marcadores de título/contenido, activos, navegación, formularios, desbordamiento, consola, movimiento y propiedad del alias. El éxito de la CLI o HTTP 200 por sí solo no es prueba.

Lista de rechazo anti-'“slop”'

Rechaza:

• degradados genéricos de IA púrpura/azul, manchas, tarjetas de vidrio sin sentido, relleno 3D flotante;
• apretones de manos de stock no relacionados, paneles falsos, gráficos/KPI inventados, prueba social falsa;
• encabezados sobredimensionados o condensados sin razón de marca, texto del cuerpo pequeño, ajustes incómodos;
• filas idénticas de tres tarjetas, familias de diseño repetidas, píldoras/radios/sombras excesivos;
• copia como "“revolucionar,"” "“liberar,"” "“próxima generación,"” "“sin problemas"” o etiquetas de CTA vagas;
• palabras/logotipos/UI generados dentro de imágenes de producción;
• móvil que es meramente desktop apilado verticalmente;
• animación utilizada para ocultar un diseño estático débil;
• elementos decorativos cuyo único trabajo es llenar espacio.

Prefiere activos de marca verificados, imágenes específicas del sujeto, tipografía controlada, composición variada pero coherente, una firma memorable, espacio negativo con propósito, prueba clara y una ruta de conversión decisiva.

Mapa de referencia

Necesidad	Lee
Enrutamiento autoritativo del modo de proyecto	references/policy-matrix.md
Captura de información, sitio/marca/logotipo/contenido/activos/integraciones	references/intake-brand-assets.md
Enrutamiento/conflictos de pila frontend	references/frontend-skill-stack.md
Generación de imágenes de producción	references/imagegen-production.md
Movimiento GSAP y storyboard	references/gsap-motion.md
Control de calidad premium	references/premium-quality-gate.md
Flujo de trabajo de Vercel	references/vercel-workflow.md