Director de Páginas de Aterrizaje

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

Crea páginas de aterrizaje a través de decisiones de diseño explícitas en lugar de estilo libre. La calidad proviene de la secuenciación: comprende el brief, reduce la dirección visual, bloquea un sistema, crea referencias, tradúcelas fielmente e inspecciona el resultado renderizado.

Este skill es propietario del flujo de trabajo de páginas de aterrizaje. Las habilidades de soporte de imágenes, traducción, pruebas, marca, copy o frameworks pueden contribuir con trabajo especializado, pero no deben reemplazar este flujo de trabajo ni introducir una segunda dirección artística en competencia.

Ejecución por defecto

Usa este director para la dirección artística y el ciclo completo de construcción/revisión. Si design-harness está instalado y configurado, cárgalo para implementación aislada, contexto guardado, evidencia del navegador y revisión acotada. De lo contrario, realiza y registra estas etapas directamente; no afirmes que se ejecutaron comprobaciones de harness. El usuario no necesita invocar una segunda habilidad. Un hijo asignado a una sola etapa debe regresar a su padre sin iniciar otro bucle de orquestación.

Compatibilidad

Usa la generación de imágenes integrada para referencias visuales y una herramienta de inspección con capacidad de navegador para la revisión visual final. Coordina imagegen-frontend-web, image-to-code, brand-consistency y playwright-visual-testing cuando estén disponibles. Utiliza coreografía GSAP por defecto para construcciones completas y rediseños sustanciales, con CSS para la retroalimentación de interacción local. Respeta solicitudes explícitas estáticas, restricciones de preservación y sistemas de movimiento requeridos existentes.

Contrato central

• Trata el copy aprobado, las afirmaciones factuales, los logotipos, los activos de marca, el orden de página y los requisitos de plantilla fuente como bloqueados.
• Pregunta por el sitio web del cliente, la fuente de contenido, la guía de marca, los logotipos, las fuentes, los medios proporcionados, las imágenes de producto y las referencias relevantes cuando aún no estén disponibles; nunca asumas que no existe material fuente solo porque no se adjuntó al primer mensaje.
• Lee e inventaria cada documento proporcionado, URL, imagen, archivo de marca y fuente del repositorio antes de proponer una dirección artística.
• Nunca inventes estadísticas, testimonios, premios, clientes, certificaciones, ubicaciones, datos de contacto, pantallas de productos o pruebas.
• Haz visible la información faltante con [POR CONFIRMAR] cuando no se pueda omitir de forma segura.
• Establece un lenguaje visual coherente antes de la implementación.
• Asume decisiones rutinarias de dirección artística y selección de referencias a menos que el usuario solicite puntos de control de aprobación visual. Registra honestamente las referencias seleccionadas por el agente; nunca las llames aprobadas por el usuario. Escala la incertidumbre del contenido y los conflictos con los requisitos bloqueados, no las opciones de diseño ordinarias.
• Favorece una jerarquía controlada y legible sobre el espectáculo: un resultado premium no debe depender de tipografía gigante, héroes abarrotados, marcas ornamentales o branding sobredimensionado.
• Trata el movimiento como parte de ese lenguaje visual: dale un propósito, personalidad, sistema de temporización y una contraparte de movimiento reducido.
• Usa exactamente una dirección de gusto primaria. No combines varias habilidades de estilo o moodboards.
• Genera y revisa críticamente las referencias visuales antes de codificar cuando la calidad visual sea central.
• Construye una página funcional, no un mockup de apariencia estática con controles inertes.
• Inspecciona la página renderizada real en anchos de escritorio y móvil antes de informar la finalización.

Máquina de estados del flujo de trabajo

Sigue las etapas en orden. Omite una etapa solo cuando el usuario ya haya proporcionado todo lo que esa etapa establecería. No pidas al usuario que repita información ya presente en el brief, archivos, conversación, kit de marca o URL de referencia.

1. Lee y clasifica el brief

Inventaria todo lo ya presente en la conversación y el espacio de trabajo antes de pedir algo al usuario. Lee guided-intake.md y ejecuta su verificación previa de material fuente cuando el conjunto fuente esté incompleto o falte.

El inventario fuente cubre:

• Nombre del cliente, sitio web actual o URL de página fuente, y si la tarea es una página nueva, rediseño, clon o extensión
• Documento de contenido aprobado, estado del copy, orden de página/sección requerido, afirmaciones, texto legal y conversión primaria
• Guía de marca, logotipos, marcas, especificaciones de color, archivos de fuente y licencias, sistemas de iconos y material colateral anterior
• Fotografía, video, ilustración, diagramas, capturas de pantalla de productos, UI, testimonios, pruebas y material de cumplimiento proporcionados
• Referencias de competidores o inspiración, incluyendo lo que al cliente le gusta y no le gusta
• Repositorio existente, framework, sistema de componentes, restricciones técnicas, destinos de analíticas/formularios y expectativas de despliegue

Si no existe nada, registra que el proyecto es greenfield y procede sin asumir que se proporcionaron activos. Si el usuario indica que existe un sitio web, documento, carpeta o conjunto de activos pero es inaccesible, solicita la URL, archivo adjunto, ruta o permiso antes de tomar decisiones que dependan de ello.

Clasifica la tarea:

• Nueva y visualmente indefinida: ejecuta la ingesta guiada y la selección de dirección.
• Nueva con un brief visual explícito: confirma el brief compilado y procede a las referencias.
• Liderada por referencia o clon: analiza la referencia y preserva la estructura, el contenido y el modelo de interacción solicitados.
• Rediseño: audita la página actual antes de proponer una dirección; preserva la funcionalidad existente y el copy bloqueado.

Inspecciona el repositorio y sus archivos de instrucciones antes de cambiar código. Preserva el framework existente, el gestor de paquetes, las convenciones de componentes y el tiempo de ejecución a menos que el usuario solicite explícitamente una migración.

2. Ejecuta la ingesta guiada cuando sea necesario

Cuando las decisiones de diseño estén delegadas, elige las preferencias visuales no resueltas del contexto del cliente y registra tu razonamiento en lugar de realizar una entrevista. Usa las preguntas a continuación solo cuando el usuario desee una selección de dirección colaborativa o no se pueda inferir de forma segura un requisito material.

La verificación previa del material fuente ocurre antes de las preguntas de diseño y no cuenta para el límite de preguntas de diseño. No preguntes por material ya encontrado en la conversación, el espacio de trabajo, el sitio web actual o la fuente conectada.

Haz una pregunta a la vez. Cada pregunta debe contener dos o tres opciones mutuamente excluyentes, coloca la opción recomendada primero, explica su efecto visual o comercial en una oración y permite una alternativa de forma libre. Mantén un sentido visible de progreso como "Dirección 1 de 4".

Prioriza solo las decisiones no resueltas. Un brief vago típico necesita cuatro decisiones:

1. Dirección visual
2. Estado de ánimo del color
3. Carácter tipográfico
4. Estructura del héroe/diseño

Pregunta sobre imágenes, movimiento o arquitectura de conversión solo cuando el brief no los haga inferibles. Cuando el movimiento importe comercial o narrativamente, pregunta si la experiencia debe sentirse contenida, expresiva o liderada por desplazamiento y explica la compensación de rendimiento. Mantén la entrevista en seis preguntas o menos a menos que el usuario solicite un taller más profundo.

No empieces a codificar mientras una elección de dirección material permanezca sin resolver.

3. Presenta tres direcciones nombradas

Para una dirección de marca indefinida, propón tres rutas genuinamente diferentes, no tres variaciones de color del mismo diseño. Cada dirección debe especificar:

• Un nombre memorable
• La idea estratégica y la impresión en la audiencia
• Combinación de fuentes o categoría tipográfica
• Estado de ánimo de la paleta con roles de color representativos
• Composición del héroe
• Densidad del héroe, rango de escala del titular, presupuesto de contenido del primer viewport y qué se difiere deliberadamente debajo del pliegue
• Tratamiento de imágenes
• Tratamiento del logotipo en navegación y pie de página, incluyendo manejo del fondo y huella visual máxima
• Carácter de superficie, borde, radio y sombra
• Tratamiento del CTA y cómo la conversión primaria se vuelve visualmente dominante sin desorden decorativo
• Carácter del movimiento
• La principal compensación

Cuando el diseño esté delegado, compara las rutas brevemente, elige la más fuerte y genera su referencia de héroe. De lo contrario, recomienda una ruta y presenta las alternativas para el punto de control colaborativo solicitado. Evita generar tres direcciones completas cuando una ruta seleccionada resolverá la tarea.

4. Compila y bloquea el brief de diseño

Lee design-brief-schema.md. Escribe DESIGN-BRIEF.md dentro del proyecto usando esa estructura.

Lee visual-calibration.md para establecer un objetivo visual concreto y el bucle de corrección. Esto es especialmente importante cuando el brief solo dice "premium", "moderno" o "hazlo mejor".

Traduce las elecciones a reglas listas para implementar: fuentes nombradas, pesos, escala tipográfica, tokens de color, cuadrícula, anchos máximos, ritmo de espaciado, radios, bordes, sombras, reglas de imágenes, ritmo de sección, interacciones, tokens de movimiento, reducción de movimiento y transformaciones de punto de interrupción.

También bloquea las restricciones prácticas de composición que comúnmente causan rechazo en etapas tardías:

• Ancho máximo del titular del héroe y tamaño en escritorio y móvil
• Orden de prioridad del primer viewport y un presupuesto de densidad para texto, medios, pruebas y acciones
• Altura del encabezado más altura máxima del logotipo y ancho; usa un activo genuinamente transparente cuando la marca debe estar sin fondo
• Prominencia del CTA primario a través de escala, contraste, colocación y contexto de apoyo
• Espacio libre mínimo entre índices, divisores, bordes, iconos y texto
• Reglas de composición específicas de la sección para que las secciones de prueba, éxito, proceso y conversión no se conviertan en variaciones de la misma cuadrícula de tarjetas
• Tratamientos aprobados explícitos, tratamientos no gustados y motivos rechazados que no deben reaparecer más adelante en la página

Separa tres tipos de información:

• Bloqueado: copy aprobado, hechos de marca, activos proporcionados, dirección seleccionada.
• Derivado: tokens de diseño, comportamiento responsivo, reglas de composición.
• No resuelto: información aún en espera de confirmación.

Ejecuta node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md cuando el script empaquetado de esta habilidad esté accesible. Corrige secciones faltantes o de marcador de posición antes de continuar.

5. Crea referencias de sección centradas en imágenes

Carga imagegen-frontend-web, luego usa la capacidad de generación de imágenes integrada.

Planifica la narrativa de la página. Genera y revisa críticamente la referencia del héroe primero, corrigiendo la composición débil antes de extenderla a las otras secciones. Genera una imagen de referencia grande y horizontal separada para cada sección planificada. Una página con siete secciones recibe siete imágenes de sección. Genera referencias de detalle nuevas en lugar de recortar fragmentos pequeños de un compuesto de página completa.

Mantén estos constantes en cada referencia:

• Paleta y roles de color
• Combinación de fuentes y personalidad tipográfica
• Lógica de cuadrícula y ritmo de espaciado
• Lenguaje de borde, radio, icono y superficie
• Tratamiento de imagen y dirección artística

Varía la composición de la sección deliberadamente. Evita repetir texto-izquierda/imagen-derecha, cuadrículas de tarjetas, contenedores bento y titulares centrados sobredimensionados por defecto.

Guarda las referencias específicas del proyecto bajo design-references/ con nombres ordenados como 01-hero.png, 02-proof.png y 03-product.png. Trata las referencias aprobadas como la fuente de verdad visual.

Revisa las referencias en un recorte de viewport realista, no solo como tableros aislados. Antes de la implementación, confirma que:

• El héroe tiene un mensaje dominante, una acción dominante y ningún grupo competidor de pruebas, imágenes, etiquetas o dispositivos decorativos.
• El tipo de visualización se siente seguro en un tamaño de visualización normal en lugar de sobredimensionado para el lienzo.
• El logotipo del encabezado es ópticamente subordinado a la navegación y no introduce un rectángulo blanco accidental o un fondo no coincidente.
• La sección de conversión final es un momento diseñado con suficiente contraste y peso visual, no solo copy centrado y un botón.
• Las filas numeradas, los pasos de la línea de tiempo y las listas con reglas tienen espacio para respirar a ambos lados de sus líneas.
• Ningún símbolo decorativo se está utilizando como sustituto de composición o significado.

La selección de dirección y la revisión de referencias son puntos de control separados. Una ruta nombrada no establece que su ejecución sea buena. Si el usuario rechaza una referencia, revísala; no empieces a codificar desde la composición rechazada.

Las imágenes fijas no pueden especificar completamente la temporización. Agrega anotaciones de movimiento concisas al brief de diseño para cada sección que se mueva: disparador, secuencia, cambio espacial, duración, easing, repetición, adaptación móvil y resultado de movimiento reducido. No inventes animación solo porque una referencia contenga profundidad o imágenes en capas.

Si el usuario solicitó aprobación visual, muestra las referencias y espera en ese punto de control. De lo contrario, selecciona las referencias después de la revisión crítica y continúa de forma autónoma. En este flujo de trabajo, las referencias aceptadas por el agente pueden servir como la fuente de verdad de implementación, pero no deben describirse como aprobadas por el usuario.

6. Traduce las referencias a código

Carga image-to-code y analiza cada referencia aprobada en busca de tipografía, espaciado, color, composición, imágenes, componentes, intención responsiva e indicaciones de interacción.

Antes de componer secciones, implementa tokens semánticos para:

• Colores de fondo, primer plano, texto atenuado, acento, borde y superficie
• Familias de fuentes de visualización y cuerpo
• Escala tipográfica y relaciones de altura de línea
• Ritmo de espaciado y anchos de contenido
• Niveles de radio, borde y sombra
• Duración y easing del movimiento

Implementa el encabezado y el héroe como el primer segmento visual e inspecciónalos a 1440 y 390 píxeles antes de traducir las secciones restantes. Corrige la escala y el fondo del logotipo, la densidad del héroe, el ajuste del titular, el peso del CTA y la composición del pliegue en este punto para que una primera pantalla débil no se propague por la página.

Usa activos de imagen transparentes intrínsecos para logotipos cuando estén disponibles. La combinación CSS, los contenedores blancos, el recorte o los filtros no son sustitutos para eliminar un fondo horneado no deseado. Dimensiona los logotipos por su marca visible, no solo por las dimensiones del mapa de bits fuente.

En componentes reglados o numerados, reserva espacio explícito entre el número y el divisor o el borde del contenido. Verifica el espacio libre óptico en el resultado renderizado; el relleno matemáticamente igual aún puede verse apretado cerca de reglas delgadas.

Construye HTML semántico y accesible...