TheMattBerman/landing-page-factory

Construcción de Página

La calidad de la construcción viene después de la fidelidad estratégica, no antes.

Esta etapa ensambla la página preservando lo que importa para la confianza y la conversión.

Entradas requeridas

1. workspace/pages/[page-name]/strategy.json
2. workspace/brand/profile.md
3. workspace/brand/palette.json
4. workspace/pages/[page-name]/copy.md
5. workspace/pages/[page-name]/visuals/
6. references/anti-slop.md (incluido con esta skill)

Si falta la estrategia, detente.

Si existe workspace/pages/[page-name]/visuals/manifest.json, úsalo como la fuente visual canónica legible por máquina. No ignores los metadatos del proveedor cuando afecten la confianza, la fidelidad o el historial de fallback.

Jerarquía de preservación

Aplica en este orden:

1. preserva las convenciones de categoría críticas para la confianza
2. preserva las necesidades de comunicación del mecanismo
3. preserva la identidad visual de la marca
4. mejora el ritmo del layout y la calidad de la interacción
5. aplica mejoras de gusto anti-slop solo donde no distorsionen los puntos 1-4

Anti-slop es un filtro de calidad, no una licencia para rediseñar.

Lista de verificación previa a la construcción

Antes de generar HTML, confirma:

• tipo de página confirmado
• mecanismo de conversión confirmado
• inventario de pruebas cargado
• señales de confianza seleccionadas
• manifiesto visual resuelto en rutas de imagen listas para construir
• convenciones de categoría requeridas preservadas
• destino del CTA conocido
• elección del layout justificada en una línea

Si alguno es falso, detente o degrada.

Lógica de enrutamiento

Ruta de producto físico

Úsala cuando el tipo de página de la estrategia esté liderado por producto.

Sobre el pliegue debe incluir:

• imagen clara del producto o mecanismo
• titular de la oferta
• CTA
• señal de confianza

Ruta SaaS / aplicación

Sobre el pliegue debe incluir:

• captura de pantalla o tratamiento de UI preservado si es requerido
• titular de resultado
• señal de confianza
• CTA

Ruta de captura de leads

Sobre el pliegue debe incluir:

• formulario + reductor de fricción o
• CTA claro hacia un destino conocido

Ruta de autoridad / servicio

Debe incluir:

• señal de autoridad sobre el pliegue
• sección de pruebas temprana
• manejo de objeciones en torno a la confianza y el ajuste

Ruta regulada

Debe incluir:

• certeza reducida cuando la prueba es parcial
• bandera de revisión de cumplimiento en los metadatos

Reglas de diseño

• archivo HTML único
• responsive con puntos de quiebre mínimos de 768px y 1024px
• HTML semántico
• estados de foco visibles
• texto alternativo en todas las imágenes
• sin atribución del constructor a menos que se solicite explícitamente
• sin patrón de gusto importado que anule las señales de confianza de origen

Uso de anti-slop

Carga references/anti-slop.md y aplícalo después de la jerarquía de preservación, no antes.

Tabla de QA post-construcción

Escríbela en workspace/pages/[page-name]/qa.md y resúmela en meta.json:

Comprobación	¿Pasa?	Notas
mecanismo visible sobre el pliegue
prueba principal visible sobre el pliegue
CTA sobre el pliegue
señal de confianza sobre el pliegue
sin pruebas inventadas
sin patrones slop prohibidos
colapso móvil comprobado
contraste comprobado
texto alternativo presente
convención de categoría preservada

Contrato de metadatos

meta.json debe incluir:

• brand
• page
• page_type
• mechanism_type
• template_route
• CTA_destination
• proof_items con resumen de procedencia
• risk_reversal_present
• compliance_flags
• review_flags
• preserved_elements
• deviations_from_source
• images_used
• sections_present
• build_confidence

Cuando exista un manifiesto visual, también incluye:

• hero_image
• image_provider_policy
• images_used como objetos estructurados, no solo nombres de archivo
• contexto del proveedor y fallback cuando sea relevante para la revisión o QA

Ayudante de construcción

Usa scripts/resolve-visual-assets.py --page-name [page-name] para convertir visuals/manifest.json en metadatos de imagen listos para construcción para HTML y meta.json.

Luego usa scripts/prepare-build-meta.py --page-name [page-name] --resolved-assets [file] para fusionar esos activos resueltos en meta.json con campos de selección deterministas:

• hero_image
• mechanism_image
• lifestyle_image
• og_image
• image_slots.hero
• image_slots.mechanism
• image_slots.lifestyle
• image_slots.og

Luego usa skills/page-build/scripts/html-image-context.py --meta workspace/pages/[page-name]/meta.json para emitir valores literales listos para HTML como:

• hero_img_src
• hero_img_alt
• mechanism_img_src
• mechanism_img_alt
• lifestyle_img_src
• lifestyle_img_alt
• og_image_path

Constructor ejecutable mínimo:

• skills/page-build/scripts/build-page.py --page-name [page-name] Este consume strategy.json, meta.json, y html-image-context.json y escribe un index.html real.

Usa los scripts locales de la skill como la interfaz principal para Cowork o cualquier runtime de agente que solo suba la carpeta de la skill. Las copias en /scripts de la raíz del repositorio son conveniencias para el desarrollo local, no un requisito de empaquetado.

Referencia de evaluación

Para criterios de puntuación y umbrales de aprobación, consulta skills/page-qa/references/eval-rubric.md. Para patrones anti-slop, consulta references/anti-slop.md (incluido con esta skill).

Lógica de parada / continuación

Detente si:

• el destino del CTA es desconocido para una página de acción de lead
• la página depende de pruebas que faltan
• las señales de confianza requeridas no pueden ser respaldadas

Continúa con degradación si:

• los activos visuales son parciales pero el layout de soporte neutral aún funciona
• la prueba es ligera pero la página se reformula hacia afirmaciones más suaves

Salida

Escribe:

• workspace/pages/[page-name]/index.html
• workspace/pages/[page-name]/meta.json
• workspace/pages/[page-name]/qa.md

Una construcción sin salida de QA está incompleta.