Migração de site Jimdo para Neleto com prompts do Claude
Curadoria, tradução e análise: Redação Triplo Hub.
A maioria dos posts "migramos um site" ignora a parte em que algo quebra. Este não ignora, porque a parte que quebrou é a parte interessante, junto com como alguns prompts de acompanhamento a consertaram.
A versão curta: pegamos um site Jimdo ao vivo e o reconstruímos 1:1 no Neleto usando Claude e nosso conector MCP. A primeira tentativa foi rápida e parecia ótima, mas o Lighthouse detectou uma regressão de acessibilidade que não esperávamos. Duas solicitações depois, o site obteve uma pontuação quase perfeita de 99 / 100 / 100 / 100. Não codificamos nada manualmente ou abrimos o construtor de páginas. Apenas prompts.
O ponto de partida: um site Jimdo decente
O site era uma construção típica do Jimdo, uma página única limpa que cumpre sua função. Antes de tocarmos em qualquer coisa, executamos o Lighthouse na versão ao vivo para termos uma linha de base real em vez de um palpite. Desktop, 10 de junho:
| Métrica | Jimdo (ao vivo) |
|---|---|
| Desempenho | 88 |
| Acessibilidade | 88 |
| Melhores Práticas | 100 |
| SEO | incompleto |
| Maior Pintura de Conteúdo | 1.9 s |
| Primeira Pintura de Conteúdo | 1.3 s |
| Peso total da página | ~1.18 MB |
Não é ruim. Um 88 em desempenho é o tipo de número com o qual muitos sites de pequenas empresas ficariam felizes. Mas há espaço para melhorias em todos os lugares: LCP perto de dois segundos, uma pontuação de acessibilidade com quatro auditorias quebradas escondidas atrás dela, e uma categoria de SEO que nem mesmo voltou completa. Essa é a realidade da maioria dos construtores de sites hospedados. Bom na superfície, mas você não controla a pilha, então não pode consertar o que está por baixo.
Essa é toda a razão pela qual o Neleto existe, então migramos o site.
A migração: um prompt, o site inteiro
Não abrimos um construtor e começamos a arrastar caixas. Colamos um único prompt inicial no Claude, o mesmo reutilizável que usamos para cada trabalho de "copiar um site para o Neleto". Em termos simples:
Replicar este site Jimdo 1:1 em nosso CMS Neleto como um site totalmente orientado a componentes. Cada pedaço de texto, imagem, link e cor editável através do CMS, nada codificado em modelos. Construa todas as páginas e, em seguida, verifique tudo você mesmo antes de relatar.
Algumas coisas fazem esse prompt funcionar de verdade em vez de produzir uma aproximação grosseira. Ele puxa o design real em vez de um palpite: Claude dirige um Chrome sem cabeça para capturar uma captura de tela de cada página e extrair os estilos computados (família da fonte, peso, tamanho, altura da linha, cores, preenchimento, raio da borda, alturas das seções, estilos de botão) e combina esses valores exatos em vez de avaliá-los visualmente. Ele constrói da maneira que o Neleto deseja ser construído, com um Layout, um componente por seção e uma Página por rota, para que o proprietário possa editar qualquer palavra, imagem ou cor depois sem tocar no código. E verifica seu próprio trabalho: o prompt diz ao Claude para executar o axe-core em cada página e corrigir problemas antes de relatar, então acessibilidade é um requisito de construção em vez de uma reflexão tardia.
Claude se comunica com o Neleto através do nosso conector MCP, um endpoint JSON-RPC sem estado, então toda a construção (layout, componentes, páginas, conteúdo) acontece através da mesma interface que um desenvolvedor usaria, apenas impulsionada pela linguagem natural. O site foi colocado em um domínio de staging do Neleto.
Então executamos o Lighthouse novamente.
A parte honesta: a primeira tentativa regrediu a acessibilidade
Aqui está o resultado daquela primeira migração, 11 de junho, 9:00:
| Métrica | Jimdo | Neleto (primeira tentativa) |
|---|---|---|
| Desempenho | 88 | 97 |
| Acessibilidade | 88 | 81 |
| Melhores Práticas | 100 | 100 |
| SEO | incompleto | 100 |
| LCP | 1.9 s | 1.1 s |
| FCP | 1.3 s | 0.7 s |
O desempenho subiu nove pontos. O LCP quase foi reduzido pela metade. O SEO passou de "não completou" para um limpo 100. Até agora, tudo bem.
Mas a acessibilidade caiu, de 88 para 81. Essa é a parte que a maioria dos estudos de caso cortaria silenciosamente da captura de tela. Estamos mantendo isso, porque é a parte mais útil da história.
O Lighthouse sinalizou exatamente quatro coisas, e o axe-core as nomeou:
-
html-has-lang: o elemento<html>não tinha atributo[lang], então os leitores de tela não sabiam que a página estava em alemão. -
label: um elemento de formulário não tinha um rótulo associado. -
heading-order: os cabeçalhos não estavam em uma ordem decrescente sequencial (um salto de, digamos, umh2para umh4). -
color-contrast: as cores de primeiro plano e de fundo não atingiram a proporção de contraste WCAG AA.
Nenhuma dessas questões é exótica. Elas são quatro das falhas de acessibilidade mais comuns na web, e um clone visual 1:1 irá reproduzi-las ou introduzi-las, porque combinar pixels não é o mesmo que combinar semântica. É exatamente por isso que o prompt de construção executa o axe-core, e por que rechecamos com o Lighthouse em vez de confiar no primeiro painel verde.
A correção: alguns prompts, não alguns dias
É aqui que possuir a pilha compensa. No Jimdo, três dessas quatro questões são coisas que você simplesmente não pode acessar. No Neleto, cada seção é um componente e cada valor é editável, então as correções são pequenos prompts direcionados. Em linguagem simples:
- Adicionar o atributo
langao layout. Uma mudança no Layout, aplicada em todo o site. - Dar ao campo de entrada do formulário um rótulo associado adequado. Uma edição de componente.
- Corrigir a hierarquia dos cabeçalhos para que desça em ordem. Alguns níveis de cabeçalho ajustados nos componentes.
- Aumentar a cor do texto até que atinja AA de contraste e me perguntar antes de mudar qualquer cor da marca.
Essa última cláusula é importante. As correções de contraste podem silenciosamente prejudicar uma marca, então o prompt é construído para sinalizar um conflito em vez de escurecer silenciosamente a paleta.
Vinte minutos depois, 11 de junho, 9:20, executamos o Lighthouse final:
| Métrica | Jimdo | Neleto (primeira tentativa) | Neleto (otimizado) |
|---|---|---|---|
| Desempenho | 88 | 97 | 99 |
| Acessibilidade | 88 | 81 | 100 |
| Melhores Práticas | 100 | 100 | 100 |
| SEO | incompleto | 100 | 100 |
| LCP | 1.9 s | 1.1 s | 0.9 s |
| FCP | 1.3 s | 0.7 s | 0.5 s |
| Tempo Total de Bloqueio | 30 ms | 0 ms | 0 ms |
| Deslocamento de Layout Acumulado | 0.006 | 0 | 0 |
Três das quatro categorias com uma pontuação perfeita de 100, desempenho em 99, e uma pontuação de acessibilidade que passou de silenciosamente quebrada no site original do Jimdo para genuinamente perfeita. A Primeira Pintura de Conteúdo caiu de 1.3 s para 0.5 s, então a página n
A migração de sites utilizando IA, como demonstrado neste artigo, é uma tendência crescente que pode beneficiar empresas brasileiras ao otimizar a performance e acessibilidade de seus sites. A capacidade de corrigir problemas rapidamente com prompts de IA permite que empresas mantenham seus sites atualizados e competitivos. É crucial que as empresas adotem essas tecnologias para melhorar a experiência do usuário e atender às exigências de acessibilidade, o que pode resultar em melhor posicionamento nos motores de busca e maior satisfação do cliente.
