Clonar um site
Recrie as páginas fornecidas na aplicação atual. Corresponda à origem antes de adicionar uma nova direção de design. Entregue código funcional e editável: capturas de tela, iframes e pacotes de produção baixados são referências, não a implementação.
1. Mapear o trabalho
Leia as instruções do projeto, o framework/scripts reais e as rotas existentes. Abra as URLs de origem com o navegador disponível. Prefira HTTP direto, ferramentas de ativos ou APIs para extração quando prático; use o navegador para estabelecer aparência e comportamento.
Registre um breve mapa de rota origem-para-local e os arquivos que cada página possui. Siga as convenções da aplicação; neste modelo, use src/app/, src/components/sites/<site>/, public/sites/<site>/ e docs/research/<site>/. Dê nomes distintos para origens, páginas e downloads; adicione uma porta ou hash de URL quando nomes legíveis colidirem.
- Um primeiro clone raiz pode substituir a página inicial não modificada do modelo.
- Preserve os caminhos de origem para várias páginas de uma mesma origem. Variações de consulta/fragmento geralmente representam estados da mesma rota; reproduza esses estados.
- Preserve as rotas/ativos existentes criados. Atualize-os quando solicitado; resolva colisões de rota não solicitadas antes de substituir qualquer coisa.
- Ao adicionar páginas a um clone existente, estenda seu layout e estilos globais sem substituir os estilos usados pelas páginas existentes.
- Use aplicações separadas para diferentes origens, a menos que o usuário queira uma aplicação combinada. Sites combinados precisam de prefixos de rota distintos e fontes, estilos e layout com escopo.
- Escape segmentos literais de URL que entram em conflito com a sintaxe do framework (
_,@, colchetes, parênteses) usando seu mecanismo suportado e, em seguida, verifique a URL real solicitada.
Clones existentes são pontos de partida úteis: compare-os com a origem atual e registre o que foi reutilizado. Termine quando cada URL solicitada tiver um destino e a propriedade do arquivo estiver clara.
2. Observar antes de construir
Inspecione a página inteira em larguras de desktop e celular. Role de cima para baixo para carregar mídia lenta e revelar cenas sticky/pinned. Em seguida, exercite menus, abas, accordions, carrosséis, estados de hover e links primários. Distinga mudanças acionadas por scroll, clique, hover ou tempo; uma imitação de clique de uma seção acionada por scroll é um produto diferente.
Trate cada observação como uma amostra de uma regra. Leia valores declarados (estilos computados, variáveis CSS, opções ao vivo de uma biblioteca) em vez de inferi-los de uma única renderização, e varie a largura da janela de visualização (incluindo mais larga que o design), altura da janela de visualização, entrada e estado até saber o que impulsiona cada mudança. Conduza a página com as entradas que os visitantes usam (roda, toque, teclado, ponteiro); rolagem com script ignora o comportamento anexado a elas, como rolagem suave.
Salve capturas de tela da origem rotuladas com janela de visualização, posição de rolagem e estado de interação. Capture conteúdo/ativos de estado alternativo. Mantenha um resumo de página compacto: ordem das seções, tipografia, medidas de layout, mapeamento de ativos e interações. Adicione briefings de seção apenas quando eles ajudarem construtores independentes.
Leia a referência de inspeção para extração e comparação de estado. Para páginas geradas por Framer, cenas sticky, animações de revelação ou mídia animada, leia Framer e movimento.
Use o texto real da origem e os arquivos que ela realmente carrega: fontes, imagens, SVGs e vídeo. Um substituto de mesmo nome de outro provedor ou conjunto de ícones tem métricas ou formas diferentes. Meça geometria/estilos computados importantes. Inspecione imagens em camadas e elementos de mídia antes de reconstruir um visual como HTML. Rastreie URL de origem → caminho de ativo local e verifique tipo de conteúdo/dimensões: uma URL .png pode retornar AVIF.
Termine quando cada seção e estado significativo tiver evidência suficiente para construir, com detalhes indisponíveis identificados. Um despejo grande de DOM não substitui olhar para a página.
3. Construir uma primeira passagem completa
Estabeleça fontes, largura da página, cores, ativos, rotas, comportamento em toda a página e componentes compartilhados primeiro. Construa cada componente compartilhado com cada estado observado (hover, foco, pontos de quebra) para que os construtores o reutilizem como está. Reutilize componentes adequados. Prefira CSS para layout/movimento simples e uma biblioteca de animação quando o comportamento da origem precisar dela.
Construa seções coerentes com conteúdo real. Delegue páginas/seções independentes depois que os arquivos compartilhados tiverem um proprietário. Dê aos construtores capturas de tela, medidas/notas de estado relevantes, caminhos de ativos, arquivos de destino e uma linha de chegada concreta. Um briefing conciso com referências precisas de arquivos é suficiente; não é necessário um número fixo de agentes ou papelada por componente.
Recrie interações dentro do escopo. Preserve destinos reais de saída. Reescreva links para rotas locais quando essas rotas estiverem incluídas; deixe destinos fora do escopo apontando para a origem e divulgue-os. Controles visíveis devem executar o comportamento que prometem.
Execute a verificação apropriada do projeto após uma fatia integrada. Termine esta passagem quando cada seção/rota solicitada renderizar com ativos reais e controles importantes funcionarem.
4. Comparar, reparar, repetir
Abra páginas de origem/locais na mesma janela de visualização, posição de rolagem e estado. Deixe fontes, mídia e animações de revelação se estabelecerem. Revise a página inteira onde quer que o passo 2 tenha encontrado uma regra mudando, além de uma janela de visualização mais larga que o design; julgue o comportamento de rolagem e ponteiro com entrada real. Uma montagem lado a lado localiza desvios; seções em tamanho real estabelecem detalhes.
Corrija as maiores diferenças visíveis primeiro: geometria, seções/camadas ausentes, tipografia/quebra, corte de ativos, depois espaçamento e movimento. Reexamine as visualizações afetadas. Compare regiões animadas em estados inicial, ativo e final, incluindo rolagem reversa quando relevante.
Exercite o fluxo de trabalho local real: navegação entre rotas clonadas, menu mobile, estados de abas/accordions, limites do carrossel, ações primárias, controles de mídia e transições vinculadas a scroll observadas. Verifique erros de tempo de execução, ativos faltantes e estouro horizontal. Ao adicionar páginas, verifique se as rotas existentes ainda funcionam. Use algumas verificações no navegador nestes limites em vez de asserções sobre nomes de classe.
Execute a verificação de produção do projeto. A conclusão requer uma compilação bem-sucedida e comparação renderizada. Indique as diferenças restantes com precisão em vez de chamar um resultado não verificado de pixel-perfect.
Entregar
Retorne instruções de pré-visualização/execução, o mapa de rota origem-para-local, comparações representativas de desktop/mobile, verificações realmente executadas e lacunas visuais/funcionais restantes. Mantenha clones de referência em aplicações separadas ao manter o modelo reutilizável.