Criar uma landing page com IA: como obter um resultado profissional

Este artigo faz parte da série "Redesign de site com IA". Episódio anterior: Transformar um podcast em artigos de blog.

O problema

A AsuOs propõe duas ofertas principais: o Sprint (desenvolvimento intensivo num curto período) e o SaaS à medida (desenvolvimento de aplicações cloud). Mas no site, estas ofertas não tinham uma página dedicada. Um potencial cliente que quisesse compreender os nossos serviços tinha de adivinhar, ou contactar-me diretamente.

Faltava também uma página 404 à altura. Apenas a mensagem padrão do Next.js. Nada profissional.

A página SaaS à medida

O Claude Code criou uma página completa em app/[locale]/saas-sur-mesure-suisse/page.tsx, com mais de 260 linhas, incluindo uma hero section com o slogan e a proposta de valor clara, uma secção de problemas/soluções apresentando os pain points dos clientes e a nossa abordagem para os resolver, o processo de desenvolvimento passo a passo apresentado visualmente, a stack tecnológica com as razões das nossas escolhas, uma FAQ para as perguntas frequentes dos potenciais clientes, e dados estruturados Schema.org com a marcação Service para o SEO.

Tudo inteiramente traduzido nas 3 línguas através das chaves next-intl. Nenhum texto fixo no componente.

O que me impressionou

O Claude Code não criou uma página genérica. Leu as outras páginas do site, compreendeu o tom, o design system (Tailwind com a paleta laranja), e produziu algo coerente com o resto. As classes CSS, o espaçamento, a hierarquia tipográfica, tudo estava alinhado sem que eu tivesse de especificar o que quer que fosse.

A página Sprint

A página Sprint é mais complexa. Inclui um componente cliente (SprintClient.tsx) com mais de 220 linhas, contendo a apresentação completa da oferta (o que é um sprint, para quem, que resultados esperar), testemunhos de clientes com fotografias e feedback de experiência, um processo por etapas em formato de timeline visual, uma grelha de preços com as diferentes fórmulas, e uma secção FAQ interativa em acordeão com animações de abertura/fecho.

O Claude Code também adicionou dados estruturados Schema.org para os serviços de sprint, o que ajuda o Google a compreender exatamente o que propomos, com o preço, a duração e a zona geográfica de serviço.

A página 404 personalizada

É um pequeno detalhe, mas que faz a diferença. Em vez de uma página de erro fria, o Claude Code criou uma 404 que apresenta uma mensagem simpática na língua do utilizador, propõe links de navegação para encontrar o caminho, inclui uma imagem personalizada, e funciona automaticamente nas 3 línguas.

O padrão que se destaca

O que é marcante nestas páginas é o padrão de trabalho. Eu descrevo a intenção: "Preciso de uma página para a nossa oferta SaaS." O Claude Code analisa as páginas existentes para compreender o estilo. Cria a página respeitando as convenções do projeto. E eu ajusto o conteúdo de negócio: os preços, as promessas, o posicionamento.

O código técnico (os componentes React, os Server Components, os metadados, os dados estruturados, o responsivo) é gerido automaticamente. O meu papel concentra-se no que realmente importa: esta página diz aquilo que queremos dizer aos nossos clientes?

Um ganho de tempo concreto

Criar uma landing page de qualidade profissional implica habitualmente 2 a 4 horas de design (mesmo com um design system), 4 a 8 horas de desenvolvimento, 1 a 2 horas de integração SEO (metadados, dados estruturados) e 1 a 2 horas de testes e responsivo. Ou seja, 1 a 2 dias por página, no mínimo.

Aqui, as três páginas foram criadas em menos de uma hora no total. E já estavam responsivas, prontas para SEO e trilingues desde o início.

Amanhã, deixamos o conteúdo e a estrutura para entrar no território mais divertido deste redesign: as animações. Como dar vida a um site com transições de página espetaculares, um efeito ripple no switch de tema e scroll infinito animado. Tudo isto mantendo a acessibilidade. Este é o episódio que mais gostei de viver em direto.