TheMattBerman/landing-page-factory

Construção da Página

A qualidade da construção vem depois da fidelidade estratégica, não antes.

Esta etapa monta a página preservando o que importa para confiança e conversão.

Entradas obrigatórias

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 (incluído com esta skill)

Se a estratégia estiver faltando, pare.

Se workspace/pages/[page-name]/visuals/manifest.json existir, use-o como a fonte visual legível por máquina canônica. Não ignore metadados do provedor quando eles afetarem confiança, fidelidade ou histórico de fallback.

Hierarquia de preservação

Aplique nesta ordem:

1. preserve convenções de categoria críticas para confiança
2. preserve necessidades de comunicação do mecanismo
3. preserve identidade visual da marca
4. melhore ritmo do layout e qualidade de interação
5. aplique melhorias de gosto anti-slop apenas onde não distorcerem 1-4

Anti-slop é um filtro de qualidade, não uma licença para redesenho.

Lista de verificação pré-construção

Antes de gerar HTML, confirme:

• tipo de página confirmado
• mecanismo de conversão confirmado
• inventário de prova carregado
• sinais de confiança selecionados
• manifesto visual resolvido em caminhos de imagem prontos para construção
• convenções de categoria obrigatórias preservadas
• destino do CTA conhecido
• escolha de layout justificada em uma linha

Se algum for falso, pare ou faça downgrade.

Lógica de roteamento

Rota de produto físico

Use quando o tipo de página da estratégia for product-led.

Acima da dobra deve incluir:

• visual claro do produto ou mecanismo
• headline da oferta
• CTA
• sinal de confiança

Rota SaaS / aplicativo

Acima da dobra deve incluir:

• screenshot preservado ou tratamento de IU se necessário
• headline de resultado
• sinal de confiança
• CTA

Rota de captura de leads

Acima da dobra deve incluir:

• formulário + redutor de atrito ou
• CTA claro para um destino conhecido

Rota de autoridade / serviço

Deve incluir:

• sinal de autoridade acima da dobra
• seção de prova no início
• tratamento de objeções em torno de confiança e adequação

Rota regulamentada

Deve incluir:

• certeza rebaixada quando a prova é parcial
• sinalizador de revisão de conformidade em metadados

Regras de design

• arquivo HTML único
• responsivo com breakpoints mínimos de 768px e 1024px
• HTML semântico
• estados de foco visíveis
• texto alternativo em todas as imagens
• nenhuma atribuição do construtor, a menos que explicitamente solicitado
• nenhum padrão de gosto importado que substitua sinais de confiança originais

Uso do anti-slop

Carregue references/anti-slop.md e aplique-o após a hierarquia de preservação, não antes.

Tabela de QA pós-construção

Escreva isto em workspace/pages/[page-name]/qa.md e resuma em meta.json:

Verificação	Passou?	Notas
mecanismo visível acima da dobra
prova primária visível acima da dobra
CTA acima da dobra
sinal de confiança acima da dobra
nenhuma prova inventada
nenhum padrão slop proibido
colapso móvel verificado
contraste verificado
texto alternativo presente
convenção de categoria preservada

Contrato de metadados

meta.json deve incluir:

• brand
• page
• page_type
• mechanism_type
• template_route
• CTA_destination
• proof_items com resumo de proveniência
• risk_reversal_present
• compliance_flags
• review_flags
• preserved_elements
• deviations_from_source
• images_used
• sections_present
• build_confidence

Quando um manifesto visual existir, inclua também:

• hero_image
• image_provider_policy
• images_used como objetos estruturados, não apenas nomes de arquivo simples
• contexto do provedor e fallback quando relevante para revisão ou QA

Auxiliar de construção

Use scripts/resolve-visual-assets.py --page-name [page-name] para converter visuals/manifest.json em metadados de imagem prontos para construção para HTML e meta.json.

Em seguida, use scripts/prepare-build-meta.py --page-name [page-name] --resolved-assets [file] para mesclar esses ativos resolvidos em meta.json com campos de seleção determinísticos:

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

Em seguida, use skills/page-build/scripts/html-image-context.py --meta workspace/pages/[page-name]/meta.json para emitir valores literais prontos para HTML, como:

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

Construtor executável mínimo:

• skills/page-build/scripts/build-page.py --page-name [page-name] Isso consome strategy.json, meta.json e html-image-context.json e escreve um scaffold index.html real.

Use os scripts locais da skill como a interface principal para o Cowork ou qualquer runtime de agente que apenas faça upload da pasta da skill. As cópias /scripts na raiz do repositório são conveniências de desenvolvimento local, não um requisito de empacotamento.

Referência de avaliação

Para critérios de pontuação e limites de aprovação, veja skills/page-qa/references/eval-rubric.md. Para padrões anti-slop, veja references/anti-slop.md (incluído com esta skill).

Lógica de parada / continuação

Pare se:

• o destino do CTA for desconhecido para uma página de ação de lead
• a página depender de prova que está faltando
• sinais de confiança obrigatórios não puderem ser suportados

Continue com downgrade se:

• os ativos visuais forem parciais, mas o layout neutro de suporte ainda funcionar
• a prova for leve, mas a página for reformulada para alegações mais suaves

Saída

Escreva:

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

Uma construção sem saída de QA está incompleta.