Como criar um site animado no Claude Code numa noite

Saiba mais sobre como trabalhar com modelos na documentação do Ailoot.

Porque é que um site criado por IA é óbvio logo no primeiro ecrã?#

Pede-se a um agente que monte uma página de destino. Quarenta minutos depois, há um site funcional: as secções estão no sítio, a apresentação adapta-se ao ecrã e os botões funcionam. E quase imediatamente surge a sensação de já se ter visto aquilo algures.

Milhares de tutoriais e modelos iniciais copiaram essa cor, enviesando a amostra, e o modelo aprendeu que os botões são roxos. O mesmo mecanismo aplica-se aos tipos de letra, aos cantos arredondados e às sombras.

Entretanto, o «aspeto de IA» mudou. Na documentação da skill frontend-design, a Anthropic descreve agora outros estilos.

O problema de fundo: há slop quando não existe nada específico para copiar e o modelo faz simplesmente uma média de todos os estilos da Web.

Aqui, «slop» significa trabalho gerado por máquina, reduzido a um resultado genérico sem estilo próprio.

A conclusão prática é que o agente precisa de uma gramática de design restrita, em vez de uma tarefa em aberto. Se disseres «torna-o bonito», ele escolhe a média. Se lhe deres uma paleta específica, dois tipos de letra e um elemento visual distintivo, constrói a partir daí.

O movimento é o sinal mais evidente neste contexto. Mesmo uma página estática com tipografia perfeita continua a parecer um modelo, porque os sites vivos respiram: os elementos surgem à medida que se desloca a página, o cursor altera coisas e as transições entre ecrãs não são abruptas.

O que é preciso para criar um site animado no Claude Code?#

Vamos analisar as ferramentas uma a uma, porque há muita confusão sobre os preços.

GSAP é a biblioteca de animação por detrás de uma parte significativa dos sites premiados. A Webflow comprou-a em outubro de 2024, e os rumores de que tudo tinha passado a ser gratuito começaram quase de imediato. Não é bem assim: na altura, a Webflow confirmou que os preços existentes se manteriam. A biblioteca tornou-se gratuita no final de abril de 2025, com a versão 3.13.

A versão 3.13 indica especificamente que plugins anteriormente pagos, como SplitText e MorphSVG, também passaram a ser gratuitos, inclusive para uso comercial. A versão atual, em julho de 2026, é gsap@3.15.0.

Ser gratuita não significa, contudo, que seja open source. A licença continua a ser proprietária e proíbe a criação, com GSAP, de um editor visual de animações que concorra com a Webflow. Não há restrições para sites, projetos de clientes ou trabalho comercial.

A skill frontend-design da Anthropic é um conjunto de instruções que altera a forma como o agente trabalha numa interface. A descrição no repositório diz:

Inclui um método em duas fases. Primeiro, o agente cria um sistema de tokens: quatro a seis cores com nome, tipos de letra para pelo menos duas funções, um esquema de layout em esboços textuais e um elemento visual distintivo para a página. Depois, critica o próprio plano em função da tarefa. Só então escreve o código.

A publicação refere 75 skills, a descrição do repositório enumera 78 e, atualmente, a árvore de ficheiros contém 91. O autor é claro quanto a isto: verifica o repositório com um comando de pesquisa, porque a descrição está desatualizada.

Como fazer com que o Claude Code deixe de produzir modelos?#

Comecemos pelo ficheiro de regras, porque se aplica a todos os pedidos e não custa nada.

Um ponto de partida útil é um bloco de proteções contra modelos. A lógica é simples: enumerar as escolhas específicas para as quais o modelo tende a desviar-se por predefinição e proibi-las explicitamente.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

O bloco está escrito intencionalmente em inglês: o modelo segue instruções técnicas curtas com maior precisão na língua da documentação.

A linha sobre animação surge na lista de proibições, ao lado das cores e das sombras, por uma razão. A opacidade no primeiro ecrã prejudica diretamente a métrica de velocidade, como veremos mais adiante.

A seguir, a skill. As skills oficiais da Anthropic podem ser instaladas através do plugin:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Um pormenor: não é possível instalar skills de design individualmente; o plugin example-skills instala as doze de uma só vez. Se quiseres apenas uma, copia manualmente a pasta — o Claude Code irá detetá-la sem reiniciar a sessão:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Outras skills desta coleção que podem ser úteis: theme-factory, com dez temas prontos a usar e a confirmação obrigatória de uma pessoa antes de os aplicar; web-artifacts-builder, para criar aplicações React com componentes prontos; e algorithmic-art, para gráficos generativos. Há um artigo separado que explica em pormenor como escolher skills para uma tarefa: como escolher skills para o Claude Code.

As regras e a skill complementam-se: as regras proíbem escolhas inadequadas e a skill impõe um processo — primeiro o sistema, depois a crítica e, por fim, o código.

Tudo o que é importante acontece antes do pedido. Colocam-se antecipadamente no contexto as restrições que orientarão a construção do agente, e a formulação do próprio pedido deixa de ter grande importância. Esta abordagem chama-se engenharia de contexto, e o ficheiro CLAUDE.md é o seu primeiro elemento. A combinação de clone de IA + Segundo Cérebro + Engenharia de Contexto ajuda a transformar o Claude de um gerador de resultados médios numa ferramenta que mantém o teu estilo.

Onde encontrar direções visuais e prompts de animação prontos a usar?#

As técnicas de movimento incluídas são: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Para quem não programa, as direções visuais prontas a usar são mais importantes. Em vez do vago «torna-o moderno», escolhe uma destas e dá ao modelo a gramática restrita que lhe faltava:

• clean-minimal-beige-light-mode - minimalismo bege claro
• dark-glass-clean-layout - vidro escuro
• documentary-brutalist-agency - estilo documental brutalista
• editorial-portfolio-chapters - portefólio dividido em capítulos, como uma revista
• orange-clean-paper-saas - site de serviços com aspeto de papel e apontamento laranja
• solar-duotone-bold - tratamento duotónico arrojado
• tech-green-dark-mode-modern - estilo tecnológico escuro com apontamentos verdes
• light-mode-paper-technical - papel técnico em modo claro

Há também skills técnicas para gráficos 3D e efeitos: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

O repositório não tem um comando de instalação — o autor afirma claramente no roteiro que o acrescentará quando o método de integração estiver definido. A única instrução para o Claude Code é:

Abaixo, apresenta-se uma opção de instalação. Este comando não consta do repositório; é uma recomendação de instalação:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Como dar ao agente documentação atualizada da GSAP numa linha?#

Um problema comum com bibliotecas de animação é o agente recordar uma forma desatualizada de as ligar. Importa um caminho antigo, regista um plugin como se fazia há dois anos e o código não funciona.

A solução é incluir a documentação no contexto. A GSAP disponibiliza-a num formato legível por máquinas:

https://gsap.com/llms.txt

Atualmente, o ficheiro tem cerca de 25 kilobytes. Cada página da documentação também está disponível numa versão Markdown — basta acrescentar .md ao URL.

Na prática, é assim:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

A biblioteca Motion (anteriormente Framer Motion) tem o mesmo ficheiro, e é ainda maior. A Motion é distribuída ao abrigo da licença MIT e continua a ser verdadeiramente open source; a versão atual é motion@12.42.2. Se o projeto for em React e precisar apenas de revelações simples, pode escolher-se a Motion; para cenas de deslocação complexas, deve usar-se a GSAP com o plugin ScrollTrigger.

Também há opções disponíveis apenas no browser que não usam bibliotecas. As transições de estado de página através da View Transitions API entraram no suporte de base a 14 de outubro de 2025 — mas apenas dentro de uma única página; a versão entre páginas não é de todo suportada no Firefox. As animações de deslocação em CSS ainda não entraram no suporte de base: o Chrome é compatível, o Safari aprendeu-as recentemente, mas no Firefox é preciso ativá-las manualmente nas definições, pelo que simplesmente não funcionarão para os leitores comuns. Pede ao agente que verifique primeiro se o browser é sequer compatível e, caso não seja, que mantenha a transição padrão.

Como transformar um site de que gostas num prompt?#

A forma mais comum de explicar o que se pretende é mostrar um exemplo. Isso não funciona diretamente com um agente: ele não vê o site, vê texto.

A skill video-to-superprompt preenche essa lacuna. A descrição no repositório diz: transformar uma referência em vídeo num prompt detalhado para recriação ou inspiração. A skill analisa a gravação por camadas: narrativa, layout, movimento, tipografia e gráficos 3D. O resultado é um prompt pronto a usar.

A regra principal está expressa com firmeza:

A segunda skill, html-to-interaction-prompts, trabalha com o código-fonte: encontra tudo o que se move — reações ao cursor, gráficos 3D, efeitos de deslocação e camadas que se movem a velocidades diferentes — e divide a página em prompts separados, um para cada secção, botão, estado ao passar o cursor ou efeito. O seu princípio é considerar o comportamento da fonte como verdade e não inventar efeitos a partir de uma captura de ecrã quando o código está disponível.

A terceira, stitched-full-page-capture, resolve um problema prático. Uma captura de ecrã normal de página inteira em sites com carregamento diferido e gráficos 3D fica cinzenta e vazia, porque é capturada antes da apresentação. A skill desloca-se pela página ecrã a ecrã, espera que tudo estabilize e junta o resultado.

Também há uma alternativa sem gravação de ecrã: ligar o agente a uma biblioteca de exemplos de interfaces reais através de MCP. O servidor oficial da Mobbin pode ser instalado com um comando:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Depois, abre uma sessão nova, seleciona o servidor na lista e inicia sessão no browser. O agente passa a ter acesso a capturas de ecrã de aplicações reais e funcionais: estão listados mais de 621 500 ecrãs. São capturas de produtos concluídos, não de componentes ou código. Importante: o servidor Mobbin não funciona no plano gratuito; está disponível nos planos pagos (em julho de 2026). Há um artigo separado sobre o Google Stitch que explica como ligar serviços externos a um agente, usando o mesmo método para trazer um sistema de design para o Claude Code.

Passo a passo: um site animado numa noite#

1. Configurar um projeto

   Se ainda não tens um projeto, começa com uma pasta vazia. Cria-a, abre-a num terminal e executa claude nessa pasta. No primeiro prompt, pede uma estrutura inicial: «cria o esqueleto de um site de página única para o meu negócio (descreve o que é), em HTML e CSS simples, sem bibliotecas». Aparecerá um conjunto de ficheiros — essa é a raiz do projeto, onde tudo passará a acontecer.

2. Colocar as regras em CLAUDE.md

   Copia o bloco Anti-Generic Guardrails para um ficheiro CLAUDE.md na raiz do projeto. Se não existir, pede ao agente que o crie. As regras destinam-se ao Tailwind; se a estrutura inicial usar CSS simples, diz ao agente: «aplica estes princípios ao CSS normal» — o significado das regras não muda. Consulta uma análise das quatro regras para CLAUDE.md para saberes como funciona o próprio ficheiro e que mais incluir nele.

3. Instalar a skill frontend-design

   Usa o plugin example-skills ou copia a pasta frontend-design, conforme descrito acima. Podes verificar se a skill foi carregada com o comando /doctor.

4. Escolher uma direção visual

   Uma, não duas ou três. Misturar o estilo documental brutalista com o minimalismo bege resulta precisamente na média que se pretende evitar.

5. Criar uma página estática

   Sem uma única animação. A tipografia, o espaçamento e a grelha vêm primeiro. Pede ao agente que inicie uma pré-visualização local e abre o endereço que te der. Para a veres no telemóvel, diz: «executa-a para abrir noutros dispositivos da minha rede», e o agente dar-te-á um endereço.

6. Acrescentar uma cena de movimento

   Apenas uma. Normalmente, é o primeiro ecrã: o título aparece e uma camada de fundo move-se mais lentamente do que o primeiro plano. Fornece ao agente o llms.txt da biblioteca e descreve a cena com precisão — o que se move, para onde e ao longo de quantos milissegundos. Deixa a opacidade quieta no primeiro ecrã; há uma secção abaixo que explica porquê.

7. Acrescentar uma regra para movimento reduzido

   Aplica a regra CSS e a configuração JavaScript de movimento reduzido da secção de acessibilidade. Verifica a página com a preferência ativada antes de publicar.

8. Publicar e verificar a velocidade

   Publica num serviço gratuito de alojamento estático — Vercel, Netlify ou GitHub Pages. Pede ao agente: «publica este projeto na Vercel e dá-me a ligação». Só depois de publicar, testa o URL resultante no PageSpeed Insights: o serviço funciona com URLs públicos e não consegue ver uma página local. Observa o «Largest Contentful Paint» — o tempo que o maior elemento demora a ser apresentado; a zona verde vai até 2,5 segundos. O agente consegue medir a versão local antes da publicação: o Chrome DevTools MCP abre-a no Chrome e apresenta a mesma métrica.

O sexto passo é aquele em que é mais fácil estragar o trabalho dos cinco anteriores.

Porque é que o excesso de animação faz um site parecer ainda mais gerado por IA?#

É aqui que falha o raciocínio de quase todas as pessoas que se interessam pelo tema: pouca animação parece barata, por isso é preciso acrescentar mais.

Isso consta da própria skill frontend-design que instalaste para melhorar o design. A Anthropic alerta contra exageros na ferramenta que o agente usa para decorar a página.

Também enumera outras técnicas padronizadas: um número grande com uma legenda pequena e um apontamento em gradiente como resposta habitual a qualquer tarefa; blocos numerados como 01 / 02 / 03, adequados apenas quando existe realmente uma sequência.

Na prática, exagerar significa dar ao agente a tarefa «acrescenta animações» e ele acrescentar um efeito de revelação ao deslocar a página em todas as secções. O título desliza para dentro, três cartões aparecem um após outro, os testemunhos entram pela lateral e o rodapé desvanece-se. Cada efeito, por si só, é aceitável. Em conjunto, criam uma página que nunca para de se mover e não destaca nada.

Um site ativo funciona de outra forma: uma cena deliberada, geralmente no primeiro ecrã, e contenção depois disso. O movimento funciona como ênfase — faz sentido desde que recaia sobre uma única palavra.

Daí resulta uma regra para o prompt. Formula-a assim: «cria uma cena no primeiro ecrã e deixa tudo o resto estático». São apenas algumas palavras de diferença em relação a «acrescenta animações», mas o resultado é incomparavelmente melhor.

Como é que as animações prejudicam a velocidade de um site?#

As três métricas que a Google usa para avaliar uma página são: tempo até à apresentação do maior elemento — não mais de 2,5 segundos; capacidade de resposta a uma interação — não mais de 200 milissegundos; e alterações de layout — não mais de 0,1. São medidas no percentil 75 das visitas reais.

Vejamos porque isto importa neste caso. Por predefinição, o agente cria uma revelação da seguinte forma: define a opacidade de uma secção como zero e, depois, remove essa definição quando a secção entra na área visível. Se essa revelação estiver no primeiro ecrã, a imagem pode estar totalmente carregada e descodificada, mas a métrica só a contabiliza quando a apresentação começa. É pior se um script remover a opacidade depois do carregamento — nesse caso, a métrica espera pelo script completo.

Há duas formas de resolver isto. Ou se inicia a revelação com uma opacidade pequena, mas diferente de zero, para que a apresentação inicial seja contabilizada. Ou se deixa a opacidade quieta no primeiro ecrã e se anima apenas o deslocamento.

A segunda questão é saber o que é simples de animar e o que é dispendioso.

Em termos simples: o browser monta a imagem por camadas, e as alterações à posição e à opacidade acontecem na última etapa, a mais barata. Tudo o resto obriga-o a recalcular a página. As medições da mesma documentação: animar com deslocamentos de top e left demora 37 milissegundos no layout e 79 na apresentação; o mesmo efeito visual com transform demora zero em ambos.

Eis uma contradição que convém recordar: a opacidade é barata de compor, mas desqualifica um elemento da métrica de velocidade. Assim, uma animação barata para o browser e segura para o desempenho são duas coisas diferentes.

Mais uma coisa sobre a propriedade will-change, que os agentes adoram espalhar «para otimizar». A documentação do MDN diz o contrário:

A documentação também diz que a propriedade se destina a ser o último recurso para problemas de desempenho existentes. Não serve de prevenção. Uma linha como will-change: transform, opacity em cinquenta elementos é um sinal típico de código gerado.

A questão das alterações de layout é mais simples. A documentação da Google não culpa as animações; pelo contrário, as transições cuidadosas ajudam a atualizar conteúdo sem assustar o leitor. A receita é a mesma: alterar a escala com transform em vez de width e height, e deslocar com desvios em vez de coordenadas.

E as pessoas que sofrem danos físicos com o movimento?#

Esta secção importa por mais do que simples cortesia. O público que compra a um proprietário de uma empresa é precisamente constituído por pessoas com 40 anos ou mais.

O consórcio W3C descreve as consequências sem eufemismos: náuseas e enxaqueca, por vezes suficientemente graves para obrigarem a pessoa a deitar-se.

É possível resolver a questão com três linhas de estilos:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Há três pontos a ter em conta.

Define a animação como comportamento predefinido e desativa-a dentro desta regra — assim, a página degrada-se de forma mais segura do que se fizeres o contrário.

A especificação diz «remove, reduz ou substitui» — a remoção completa nem sequer é a primeira opção. Substituir uma entrada abrupta por um breve esbatimento funciona melhor do que eliminá-la por completo: desativar todas as animações interrompe os indicadores de carregamento e as barras de progresso.

Animações JavaScript precisam de tratamento próprio da preferência; alterar a duração CSS não cancela uma cronologia GSAP. Guardar apenas matchMedia(...).matches numa variável não faz nada sem uma condição na configuração. Em GSAP, mantém o elemento visível no HTML/CSS normal e cria movimento só quando permitido:

// Executar depois de GSAP e dos elementos da página estarem carregados.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Chamar cleanupMotion() ao remover esta página ou componente.

O título não pode ter estilo base oculto ou deslocado. Com movimento reduzido, permanece visível e estático. Se a preferência mudar com a página aberta, GSAP reverte a animação quando a consulta deixa de corresponder. mm.revert() também remove a animação recolhida ao desmontar. Em Motion, implementa a condição equivalente na configuração da biblioteca; só a regra CSS não basta. Consulta a documentação GSAP matchMedia de ciclo de vida e limpeza.

Há também um critério formal de acessibilidade a ter em conta. O critério 2.2.2 das WCAG 2.2, de nível A, exige que, se algo se mover, piscar ou deslocar automaticamente, durar mais de cinco segundos e for apresentado juntamente com outros conteúdos, o utilizador possa pará-lo. Isto aplica-se a carrosséis com rotação automática e a faixas infinitas, que os agentes inserem com facilidade.

Sete pontos em que tudo falha#

1. O primeiro ecrã fica oculto até aparecer gradualmente. Um elemento com opacidade zero não conta como candidato à métrica de apresentação. É o erro mais dispendioso, porque prejudica uma métrica que afeta a classificação nos motores de pesquisa.

2. Tudo é animado. Todas as secções deslizam para dentro, todos os cartões aparecem de repente. A Anthropic afirma claramente que isto aumenta a impressão de design gerado.

3. Scrolljacking. Quando um site substitui o comportamento normal da roda do rato pela sua própria lógica «cinematográfica».

No mesmo estudo, a maioria dos participantes sentiu pelo menos uma desorientação ligeira.

4. Animam-se propriedades de layout. Coordenadas e dimensões em vez de transformações. 37 e 79 milissegundos contra zero.

5. As animações são demasiado longas. O intervalo útil é de 100 a 400 milissegundos, sendo 400 já muito lento e adequado apenas para movimentos amplos. Os agentes gostam de usar um segundo inteiro por predefinição.

Segundo as suas conclusões, o intervalo útil é de 100 a 400 milissegundos; 400 já é muito lento e só é adequado para movimentos amplos. Os agentes gostam de usar um segundo inteiro por predefinição.

6. Não há uma regra para movimento reduzido. O agente não a acrescenta por iniciativa própria.

7. O site fica mais lento a cada interação. Específico de React: uma animação criada sem referência ao elemento e sem limpeza multiplica-se a cada atualização do componente. Gradualmente, a página começa a ficar lenta sem razão aparente.

Há uma oitava armadilha. A abordagem em que «o agente tira uma captura de ecrã e corrige o que vê» funciona muito bem em páginas estáticas, mas, com elementos animados, prende o agente num ciclo interminável de edições: vê um fotograma intermédio, pensa que é um erro, corrige-o e vê outro fotograma intermédio. Além disso, cada captura de ecrã consome contexto.

Quanto custa e como evitar gastar o limite mensal numa só página?#

Uma história típica das comunidades anglófonas de programação por intuição: alguém cria uma página vistosa com uma deslocação pelo espaço, publica o resultado e a discussão revela que aquele único site gastou todo o limite mensal.

É de esperar. As animações custam mais do que o trabalho normal de layout por várias razões em simultâneo. Não é possível verificar o resultado pela leitura do código; são necessárias iterações. Cada edição implica voltar a ler ficheiros. E um ciclo de capturas de ecrã em elementos móveis acrescenta passagens desnecessárias.

O que ajuda:

Cria uma cena de cada vez e estabiliza o resultado. Um pedido único para «acrescentar animações ao site inteiro» garante gastos excessivos. Podes desativar a verificação por capturas de ecrã nos elementos animados e inspecioná-los visualmente. Mantém curto o ficheiro CLAUDE.md para que as regras não consumam contexto em cada pedido. E fornece antecipadamente ao agente o llms.txt da biblioteca, senão ele inventará um método de ligação desatualizado e depois tentará corrigir a própria invenção.

O artigo porque é que o Claude Code volta a ler o projeto inteiro explica onde são gastos os tokens ao trabalhar num projeto; o artigo como não gastar os limites do Claude Code aborda formas de controlar a utilização.

E agora?#

Cria a tua primeira página seguindo os oito passos. Escolhe uma direção visual, cria uma cena no primeiro ecrã e verifica a velocidade.

Para os próximos passos — Ailoot.