MD412/agentic-build-intro

Introdução de Build Agentic

Uma tela inicial, uma varredura da página real e, em seguida, uma construção da página real por agentes de cursor rotulados. Sem framework, sem etapa de build. Dois arquivos: assets/layers.js e assets/layers.css.

Arquivos

• assets/layers.js: o runtime. Lê a configuração, mostra o portal, executa a varredura e a construção.
• assets/layers.css: todos os estilos, temáticos através das propriedades customizadas --lx-*.
• assets/head-snippet.html: as três tags que toda página precisa no <head>.
• references/gate-design.html, references/scan-design.html: os designs originais autônomos. Use-os como ponto de partida se o proprietário quiser um novo design de portal ou varredura.

Etapas

1. Faça backup do site. Em seguida, copie layers.js e layers.css para ele (caminhos padrão /js/layers.js e /css/layers.css; ajuste o snippet se o site usar outros).

2. Adicione as tags do cabeçalho a cada página. Cole assets/head-snippet.html no <head> de cada página. O script inline oculta a página antes da pintura apenas quando a introdução será executada e a revela após 4s se o runtime nunca carregar.

3. Defina o texto do portal. Use atributos data-* na tag script ou um objeto window.AgenticBuildIntro definido antes do script carregar. O objeto tem precedência sobre os atributos.

   Chave	Atributo	Padrão
   name	data-name	document.title
   initials	data-iniciais	primeiras letras de name
   title	data-title	oculto quando vazio
   location	data-localização	oculto quando vazio
   timezone	data-fuso-horário	hora local do visitante
   clock	data-clock	true
   cta	data-cta	Iniciar Construção do Portfólio
   skip	data-pular	Pular para o site
   agents	data-agentes	30 desktop, 14 phone
   colors	data-cores	paleta embutida (lista separada por vírgula)

   Use apenas fatos que o proprietário forneceu. Nunca invente nome, título ou localização. Qualquer texto extra é texto de UI neutro.

4. Combine com o sistema de design do site. Leia as variáveis CSS e fontes do site e, em seguida, sobrescreva os tokens --lx-* em :root na folha de estilo do próprio site: --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1 a --lx-accent-4, --lx-font-display, --lx-font-body. O kit não carrega fontes. Mantenha as próprias cores do site e escolha cores vibrantes para os agentes que se destaquem no fundo.

5. Não altere como a varredura funciona. Os contornos da varredura vêm da mesma lista de elementos que a construção usa, então os contornos ficam exatamente onde o conteúdo real pousa e os agentes de varredura entregam aos agentes de construção nos mesmos pontos, cores e rótulos. Nunca troque por um wireframe genérico.

6. Mantenha esses comportamentos.

   • As caixas são arrastadas com alças e rótulos L x A, o texto digita com um cursor, linhas guia piscam enquanto os agentes trabalham.
   • Imagens revelam em cerca de 1,7s com uma varredura superior escalonada, linha de varredura, listras fracas e uma transição de escala de cinza para cor.
   • Os ritmos padrão são suaves, mas rápidos, todos com um ease-in-out suave: cursores viajam de 0,5 a 0,7s, caixas são arrastadas em 0,6 a 0,8s, texto digita a cerca de 15ms por caractere com blocos longos limitados a cerca de 1,4s, e cada agente pausa cerca de 150ms entre tarefas. A velocidade é definida antecipadamente com base no tamanho da página e aumenta durante a construção se ficar atrás de uma meta de cerca de 23 segundos em desktop e 20 em telefones, permitindo que os agentes comecem mais abaixo da dobra quando necessário. Os agentes sempre constroem todos os elementos até o rodapé. Um fail-safe de 45 segundos é a única parada forçada.
   • O acompanhamento está ativado por padrão: quando o próximo alvo de construção cai abaixo de cerca de 65% da janela de visualização, a página desce suavemente em um movimento lento para que o trabalho fique a cerca de 30% do topo. Nunca rola de volta ao topo no final. Com movimento reduzido, salta em vez de suavizar.
   • Executa uma vez por sessão. ?build=1 reproduz, ?build=0 pula. Enter inicia, Esc pula o portal; roda, clique, toque ou qualquer tecla pula uma introdução em execução.
   • Funciona até 390px de largura com menos agentes em telefones. prefers-reduced-motion pula a introdução.

7. Regras de código. Sem comentários de código, sem travessões em em em texto, sem figuras humanas geradas por IA.

8. Verifique gravando. Execute node --check no JS. Sirva o site e grave vídeo Playwright em 1280x800 e 390x844: abra ?build=1, clique no botão iniciar, grave de 20 a 60s. Extraia quadros para o portal, varredura, entrega, construção e estado final, verifique se há erros na página e corrija o que vir. Confirme se todas as páginas existentes ainda retornam 200.

9. Relate com o link ativo, uma captura de tela do portal e a gravação.