Como Eu Redesenhei um Site em Minutos com o Claude Opus

Como Eu Redesenhei um Site em Minutos com o Claude Opus

Duas semanas atrás, sentei na minha mesa às 23h com um problema. Um cliente precisava que o site inteiro fosse convertido de um tema claro básico para um design escuro e polido, uma página de serviços totalmente nova construída do zero, e uma auditoria completa de SEO com todas as correções implementadas — tudo antes de uma reunião na segunda-feira de manhã. O antigo eu teria virado a noite, ralando em CSS, escrevendo HTML, rodando o Lighthouse e corrigindo meta tags manualmente, uma por uma.

Em vez disso, abri o Claude Code, digitei três prompts e fui dormir.

Quando acordei, o site estava no ar. Tema escuro com taxas de contraste perfeitas. Uma página de serviços que combinava com a linguagem de design existente até no espaçamento. Meta tags, sitemap, robots.txt, favicon, cartões Open Graph — tudo no lugar. A transformação inteira levou cerca de doze minutos de processamento ativo do Claude. Meu envolvimento total? Talvez noventa segundos digitando.

Aquela noite mudou a forma como eu penso sobre fluxos de trabalho de desenvolvimento web. Não porque a IA fez algo mágico — mas porque expôs o quanto do "desenvolvimento web" é, na verdade, tomada de decisão repetitiva que um agente bem instruído consegue resolver sem você.

Aqui está exatamente como eu configurei tudo, o que aconteceu durante o processo, e as partes que me surpreenderam — incluindo a única coisa que o Claude errou e que eu quase não percebi.

O Problema Que Ninguém Admite Sobre Manutenção de Sites

Aqui vai um segredo sujo que a maioria dos desenvolvedores não fala em voz alta: manter um site é entediante. Construir um? Isso é empolgante. Escolher a stack, projetar a arquitetura, escrever os primeiros componentes. Mas seis meses depois, quando o cliente pede para você trocar do modo claro para o escuro, adicionar uma página e "arrumar as coisas de SEO" — esse é o trabalho que ninguém quer fazer.

Não é um trabalho difícil. Essa é a parte frustrante. Converter um tema claro para escuro é basicamente ajustar cores de fundo, cores de texto, cores de borda e garantir que as taxas de contraste continuem acessíveis. Criar uma nova página que combine com o design existente é copiar estrutura, trocar conteúdo, atualizar a navegação. Rodar uma auditoria de SEO significa verificar as mesmas vinte coisas toda vez — meta descriptions, hierarquia de títulos, alt tags, sitemap, robots.txt.

Cada tarefa leva talvez uma ou duas horas. Mas empilhadas, elas consomem um dia inteiro. E esse dia é cheio de decisões que não exigem criatividade — exigem consistência. "Esse cinza escuro tem contraste suficiente contra aquele cinza um pouco mais escuro?" "Eu atualizei a navegação nas duas páginas?" "A URL canônica está correta?"

Esse é precisamente o tipo de trabalho para o qual agentes de IA foram feitos. Não as decisões arquiteturais criativas. Não a lógica de negócio complexa. O trabalho de execução consistente, seguindo padrões, que humanos fazem no piloto automático de qualquer jeito — exceto que humanos cometem erros no piloto automático e a IA não se cansa.

Eu vinha usando o Claude Code para geração de conteúdo e assistência com código havia meses. Mas não tinha tentado usá-lo como um agente completo de modificação de sites até descobrir duas skills que mudaram tudo. E existe uma diferença crucial entre usar o Claude como chatbot e usá-lo como agente — vou explicar isso em detalhes quando chegarmos à seção de configuração.

O Que o Claude Opus 4.6 Realmente Faz de Diferente

Antes de eu percorrer o redesign, preciso esclarecer algo que me confundiu inicialmente. O Claude Opus 4.6 não é apenas um chatbot mais inteligente. Quando você muda do modo Chat para o modo Code no Claude Desktop, você está mudando fundamentalmente o modelo de interação. No modo Chat, o Claude te dá respostas. No modo Code, o Claude toma ações.

Essa distinção importa. Quando eu pedi ao Claude para converter o tema do meu site, ele não me deu sugestões de CSS dizendo "tente mudar esses valores". Ele abriu os arquivos HTML e CSS reais no meu repositório Git, analisou o esquema de cores existente, mapeou cada token de cor para seu equivalente no modo escuro, fez as alterações e me mostrou um diff do que ele modificou.

O agente trabalha diretamente com o seu sistema de arquivos através de um diretório de trabalho — uma pasta local vinculada a um repositório Git. Cada mudança que o Claude faz acontece em arquivos reais que você pode revisar, commitar ou reverter. Pense nisso menos como conversar com uma IA e mais como programar em par com um desenvolvedor júnior extremamente rápido que nunca se distrai.

Existe mais uma peça na arquitetura que torna isso poderoso: as skills. Skills são capacidades modulares que estendem o que o Claude pode fazer. São como plugins, mas mais inteligentes — cada skill vem com suas próprias instruções especializadas e fluxos de trabalho.

Para o projeto de redesign do site, eu usei duas skills:

A Skill de Design Front-end — uma skill oficial mantida pela Anthropic com mais de 100.000 instalações na época em que gravei isso. Ela dá ao Claude conhecimento profundo de sistemas de design, teoria das cores, padrões de acessibilidade e padrões de layout responsivo. Quando eu disse ao Claude para converter para um tema escuro "com contraste perfeito", a skill é o que permitiu que ele entendesse o que "contraste perfeito" realmente significa em termos de taxas WCAG AA.

A Skill de Auditoria SEO — uma skill da comunidade com cerca de 19.000 instalações. Essa transforma o Claude em um analisador abrangente de SEO que consegue rastrear seu site, identificar problemas com base nas melhores práticas atuais e então realmente implementar as correções.

A combinação dessas duas skills com as capacidades nativas de edição de código do Claude é o que faz o fluxo de trabalho parecer quase absurdamente eficiente. Mas configurar tudo corretamente importa — pule um passo e você vai gastar mais tempo depurando a configuração do que teria gasto fazendo o trabalho manualmente.

Aqui está exatamente como colocar isso para funcionar do zero.

Configurando o Claude Como Seu Agente de Sites — Passo a Passo

Passo 1: Coloque um site em um repositório Git.

Isso parece óbvio, mas o detalhe importante é que o Claude precisa de acesso ao sistema de arquivos através de um repositório Git. Se o seu site está em uma plataforma gerenciada como Squarespace ou Wix sem acesso Git, esse fluxo de trabalho não vai funcionar. Você precisa de arquivos HTML, CSS e JavaScript reais em um repositório.

Para minha demonstração, usei o GitPage para criar rapidamente um site de teste. O processo foi simples — escolhi um template de design, inseri dados de exemplo do negócio (nome, e-mail, descrições básicas de serviços) e fiz o deploy. Em cinco minutos, eu tinha um site no ar com seu código-fonte em um repositório Git.

Dica profissional: Se você está testando isso pela primeira vez, não use um site de produção. Crie um projeto descartável. Você vai querer a liberdade de experimentar sem se preocupar em quebrar algo que importa.

Passo 2: Instale o Claude Desktop e mude para o modo Code.

Baixe o Claude Desktop no site da Anthropic — está disponível para Mac e Windows. Após a instalação, você vai estar no modo Chat por padrão. Mude para o modo Code usando o botão na interface. Esse é o passo que a maioria das pessoas pula. O modo Chat vai te dar conselhos sobre como redesenhar seu site. O modo Code vai realmente fazer isso.

Uma vez no modo Code, defina seu diretório de trabalho para o clone local do seu repositório Git. É assim que o Claude sabe quais arquivos ler e modificar. O diretório de trabalho é a âncora para tudo que vem depois.

Passo 3: Entenda o arquivo claude.md.

Dentro do seu diretório de trabalho, você vai encontrar (ou criar) um arquivo claude.md. Pense nele como o manual de instruções que você entrega ao Claude sobre o seu projeto específico. Ele contém informações sobre a estrutura do projeto, convenções e quaisquer regras especiais que o Claude deve seguir.

Para um projeto de site, seu claude.md pode incluir coisas como:

• Qual framework CSS você está usando
• Variáveis de cor e tokens de design
• Convenções de nomenclatura de arquivos
• Fluxo de deploy

Esse arquivo persiste entre sessões, então o Claude mantém o contexto sobre seu projeto mesmo quando você inicia uma nova conversa. Eu não consigo exagerar o quanto isso faz diferença — transforma o Claude de um assistente genérico em um membro da equipe que conhece o projeto.

Passo 4: Instale as skills.

As skills são instaladas através de comandos simples no Claude Code. Você pode descobrir skills disponíveis através do diretório de skills do Claude. Para o nosso fluxo de trabalho:

# The front-end design skill
/install-skill frontend-design

# The SEO audit skill
/install-skill seo-audit

A instalação é rápida — geralmente menos de um minuto. Uma vez instaladas, as skills ficam disponíveis em todos os seus projetos, não apenas no diretório de trabalho atual.

Se você chegou até aqui, está pronto para fazer o que me levou doze minutos e teria levado um dia inteiro manualmente. A próxima seção é onde a coisa fica divertida.

O Redesign: De Tema Claro para Escuro em Minutos

Comecei com um prompt simples. Nada sofisticado. Sem instruções elaboradas ou descrições de vários parágrafos.

"Converta este site do tema claro atual para um tema escuro moderno com contraste perfeito."

Isso. Dezessete palavras.

O Claude começou a trabalhar. Aqui está o que eu vi acontecer em tempo real:

Primeiro, ele escaneou todos os arquivos HTML e CSS no repositório para entender o sistema de design existente. Identificou a paleta de cores — os fundos, cores de texto, bordas, destaques, sombras. Mapeou a hierarquia de componentes. Depois começou a fazer as alterações.

O fundo mudou de branco (#FFFFFF) para um carvão profundo (#1a1a2e). O texto foi de quase-preto para um branco-suave (#e0e0e0) que é mais confortável para os olhos do que branco puro contra fundos escuros — um detalhe que a maioria dos humanos erra na primeira tentativa. As cores de destaque foram ajustadas para manter a vivacidade contra o fundo mais escuro. Componentes de card receberam ajustes sutis de borda para manter a separação visual sem parecer agressivos.

O que me impressionou não foram as escolhas de cores — essas são relativamente padrão para uma conversão de tema escuro. O que me impressionou foi a consistência. Cada componente foi atualizado. Nenhum elemento claro órfão. Nenhuma violação de contraste. Nenhum momento de "ops, esqueci do rodapé" que assombra conversões manuais.

A conversão inteira do tema levou cerca de quatro minutos.

Uma coisa que chamou minha atenção — o Claude preservou o esquema de cores original como propriedades CSS customizadas com uma classe light-theme, tornando teoricamente possível adicionar um alternador de tema depois. Eu não pedi isso. A skill de design front-end aparentemente inclui isso como uma boa prática. Inteligente? Sim. Pedido? Não. É um daqueles momentos em que você percebe que o agente de IA está aplicando conhecimento que você não solicitou explicitamente, o que é ao mesmo tempo poderoso e algo que você precisa observar com cuidado.

Adicionando uma Página de Serviços Sem Escrever Uma Única Linha

O próximo prompt foi igualmente direto:

"Crie uma nova página de Serviços que seja consistente com o design existente. Atualize a navegação tanto na página inicial quanto na de serviços para incluir o novo link."

É aqui que o entendimento do Claude sobre sistemas de design realmente brilha. Ele não criou apenas uma página genérica. Analisou as páginas existentes — a estrutura do cabeçalho, o layout do conteúdo, a escala tipográfica, o ritmo de espaçamento, o formato do rodapé — e replicou tudo isso para a nova página de serviços.

O conteúdo que ele gerou era meio placeholder, mas surpreendentemente relevante. Como o site de teste era posicionado como uma agência de automação com IA, a página de serviços incluiu seções para automação de fluxos de trabalho com IA, desenvolvimento de chatbots personalizados, integração de pipelines de dados e consultoria em IA. Cada serviço tinha uma descrição, uma lista de entregáveis e um botão de call-to-action estilizado de forma consistente com o resto do site.

As atualizações de navegação aconteceram nas duas páginas simultaneamente. O menu do cabeçalho na página inicial agora incluía um link "Services". A página de serviços tinha a mesma navegação com "Services" destacado como a página ativa. Sem links quebrados. Sem estilos inconsistentes. Sem problemas de "esqueci de atualizar a outra página".

Isso levou cerca de três minutos.

Aqui está a parte que me surpreendeu. Quando inspecionei o HTML, o Claude tinha adicionado marcação semântica — elementos <nav> adequados, atributos aria-current="page" no item de navegação ativo, e estruturou o conteúdo dos serviços com hierarquia de títulos apropriada (H1 para o título da página, H2 para cada serviço, H3 para subseções). Esses detalhes de acessibilidade são coisas que muitos desenvolvedores humanos pulam quando estão com pressa. O Claude aprimorado com skills incluiu tudo por padrão.

Mas houve um porém sobre o qual quero ser honesto. O conteúdo dos serviços em si era genérico. O Claude não conhece os serviços reais do seu negócio — ele fez suposições razoáveis com base no posicionamento do site. Você precisaria substituir o conteúdo placeholder pelas suas descrições reais de serviços. Isso não é uma limitação do Claude; é uma limitação de entrada de dados. A IA não consegue escrever descrições precisas de serviços para um negócio que ela não conhece. O trabalho estrutural que ela faz, porém, te poupa da parte tediosa para que você possa focar no conteúdo.

A Auditoria de SEO Que Encontrou o Que Eu Não Vi

Agora a parte sobre a qual eu era mais cético. Auditoria de SEO envolve tanto análise técnica quanto julgamentos subjetivos. Eu já rodei centenas de auditorias de SEO manualmente e com ferramentas como Screaming Frog, Ahrefs e Google Search Console. Será que a skill de SEO do Claude conseguiria competir?

O prompt: "Rode uma auditoria completa de SEO neste site."

A auditoria do Claude foi minuciosa. Produziu um relatório estruturado cobrindo todos os principais fatores de SEO on-site, organizado por prioridade:

Problemas Críticos Encontrados:

• Nenhum arquivo robots.txt (mecanismos de busca não tinham instruções de rastreamento)
• Nenhum sitemap XML (mecanismos de busca não conseguiam descobrir páginas eficientemente)
• Favicon ausente (parece pouco profissional e afeta o reconhecimento da marca em abas/favoritos)
• Meta descriptions duplicadas ou ausentes em várias páginas

Problemas de Alta Prioridade:

• Tags Open Graph ausentes (pré-visualizações ruins ao compartilhar em redes sociais)
• Tags Twitter Card ausentes (mesmo problema, específico do Twitter)
• Hierarquia de títulos incompleta na página de serviços
• Nenhuma URL canônica especificada

Recomendações de Média Prioridade:

• Melhorias no texto alt das imagens
• Oportunidades de links internos
• Sugestões de schema markup
• Dicas de otimização de velocidade da página

O que me chamou a atenção foi a especificidade. A auditoria não disse apenas "adicione meta descriptions". Ela identificou exatamente quais páginas tinham problemas e qual era o estado atual. A descoberta do robots.txt era legítima — muitos desenvolvedores que fazem deploy de sites simples esquecem esse arquivo completamente, e isso pode causar desperdício de budget de rastreamento em sites maiores.

Então eu dei a instrução que realmente testou o sistema: "Implemente todas as correções de SEO recomendadas."

O Claude organizou a implementação em duas fases. A fase um cobriu os itens críticos e de alta prioridade: criar o robots.txt, gerar um sitemap XML, adicionar meta descriptions em todas as páginas, implementar tags Open Graph e Twitter Card, adicionar a referência do favicon e corrigir a hierarquia de títulos.

A fase dois cuidou dos itens de média prioridade: melhorar o texto alt, adicionar URLs canônicas e implementar schema markup básico.

Cada correção foi implementada diretamente no código. Eu podia ver os diffs passando enquanto o Claude modificava arquivo após arquivo. O robots.txt que ele gerou era limpo e padrão:

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

O sitemap incluía todas as páginas com datas <lastmod> adequadas e valores <changefreq>. As meta descriptions eram únicas por página e dentro da faixa recomendada de 150-160 caracteres. As tags Open Graph incluíam og:title, og:description, og:image e og:url adequados para cada página.

Tempo total para a auditoria completa de SEO e implementação: cerca de cinco minutos.

A Única Coisa Que o Claude Errou

Prometi que seria honesto, então aqui está.

A implementação do favicon estava tecnicamente correta, mas praticamente incompleta. O Claude adicionou a tag <link rel="icon"> em cada arquivo HTML e referenciou um caminho favicon.ico. O problema? Ele não criou de fato o arquivo de imagem do favicon. Referenciou um arquivo que não existia.

Esse é um tipo sutil, mas importante, de erro para ficar de olho com agentes de IA. O código estava sintaticamente perfeito. O padrão de implementação estava correto. Mas o asset em si estava faltando. Se você fizesse o deploy sem verificar, veria referências de favicon quebradas na aba de rede do seu navegador — um erro 404 que é fácil de perder porque os navegadores lidam com favicons ausentes de forma graciosa (eles simplesmente não mostram nenhum).

Percebi isso porque me treinei para verificar referências de assets após qualquer processo automatizado. Lição aprendida: agentes de IA são excelentes em mudanças no nível de código, mas podem falhar na fronteira entre código e assets. Sempre verifique se os arquivos referenciados realmente existem.

Depois que apontei isso, o Claude imediatamente gerou um favicon SVG simples e atualizou a referência. Problema resolvido em trinta segundos. Mas ele não teria percebido sozinho — e essa é uma limitação honesta que vale a pena conhecer.

Por Que Isso Muda a Conta para Desenvolvedores Solo

Deixe-me colocar alguns números nisso. Aqui está a comparação de tempo para exatamente as mesmas tarefas:

Isso é uma aceleração de aproximadamente 30-40x. E a qualidade do resultado era comparável ao que eu produziria manualmente — em alguns casos melhor, porque o Claude não pulou os pequenos detalhes de acessibilidade que eu poderia apressar quando estou cansado.

Mas aqui está o que a maioria das pessoas não percebe sobre essas comparações. O tempo economizado não é apenas sobre a tarefa individual. É sobre o que esse tempo economizado possibilita.

Quando um cliente pede uma mudança de tema e você sabe que vai levar três horas, você empurra para a semana que vem. Quando leva quatro minutos, você faz agora mesmo. A diferença de tempo de resposta muda o relacionamento com o cliente completamente. Você deixa de ser o "vou cuidar disso" para ser o "já está pronto". Essa mudança no tempo de entrega vale mais do que qualquer funcionalidade individual.

Para desenvolvedores solo e pequenas agências, essa é a história real. Não que a IA te torna preguiçoso — ela te torna rápido o suficiente para dizer sim para trabalhos que antes não valiam o tempo.

O Que Eu Faria Diferente da Próxima Vez

Depois de rodar esse fluxo de trabalho várias vezes, refinei minha abordagem. Aqui está o que eu gostaria de ter sabido desde o início.

Dê mais contexto ao Claude logo de cara. Meus prompts iniciais eram mínimos, e o Claude se saiu bem com eles. Mas quando comecei a incluir mais detalhes — "converta para tema escuro usando as cores da marca #1a1a2e para fundo e #00d4ff para destaques" — os resultados ficaram ainda mais próximos do que eu imaginava. Você não perde nada sendo específico. A IA não fica confusa com detalhes; ela fica mais precisa.

Revise diffs, não páginas. Depois que o Claude faz alterações, seu primeiro instinto é abrir o navegador e olhar o site. Resista a esse instinto inicialmente. Olhe o diff do Git primeiro. O diff mostra exatamente o que mudou, arquivo por arquivo, linha por linha. A inspeção visual pode deixar passar problemas ocultos (como o arquivo de favicon faltando). Diffs não mentem.

Faça commit entre prompts. Após cada grande mudança (tema, nova página, correções de SEO), faça commit das alterações no Git antes de passar para o próximo prompt. Isso te dá pontos de rollback limpos se algo der errado em uma etapa posterior. Eu não fiz isso inicialmente e tive que desemaranhar mudanças quando quis reverter uma modificação específica.

Não confie cegamente em auditorias de SEO. A skill de SEO do Claude é boa — genuinamente boa. Mas SEO é parcialmente subjetivo e muda com as atualizações de algoritmo do Google. Cruze as recomendações com seu próprio conhecimento e melhores práticas atuais. Eu concordei com cerca de 90% do que o Claude recomendou. Os outros 10% eram sugestões válidas que não se aplicavam à minha situação específica.

Mantenha o arquivo claude.md atualizado. Conforme seu projeto evolui, atualize o arquivo de instruções. Diga ao Claude sobre decisões de design que você tomou, convenções que quer manter, arquivos que ele não deve tocar. Quanto mais contexto ele tiver, menos provável será que faça mudanças que conflitem com a sua visão.

Para Onde Isso Está Indo

Eu venho construindo sistemas de IA para clientes no meu trabalho de agência há mais de dois anos. A trajetória está clara para mim, mesmo que o cronograma não esteja.

Agora, estamos no estágio de "IA como um desenvolvedor júnior muito rápido". Você dá instruções claras, ela as executa com precisão, e você revisa o trabalho. Isso já é transformador para a produtividade. Mas a próxima fase — onde o agente identifica proativamente problemas, sugere melhorias e lida com pipelines de deploy inteiros — está chegando mais rápido do que a maioria das pessoas espera.

O ecossistema de skills é o acelerador-chave. Quando comecei a usar o Claude Code, ele conseguia editar arquivos e rodar comandos. Adicionar as skills de design front-end e SEO essencialmente deu a ele expertise especializada por cima das suas capacidades gerais. Conforme mais skills forem desenvolvidas — otimização de performance, hardening de segurança, integração de analytics, conformidade de acessibilidade — o escopo do que um único prompt pode realizar vai continuar se expandindo.

Minha previsão? Dentro de um ano, o fluxo de trabalho padrão para desenvolvedores solo não vai ser "construir o site, depois otimizá-lo". Vai ser "construir o site com um agente de IA que cuida da otimização como uma etapa embutida". A separação entre desenvolvimento e otimização vai se tornar tão tênue que serão o mesmo processo.

Para agências como a minha, isso significa que podemos pegar mais projetos sem aumentar proporcionalmente o número de pessoas. Isso não é uma ameaça aos desenvolvedores — é uma libertação do trabalho de manutenção que ninguém gosta e todo mundo evita.

Sua Vez

Aquele site do cliente que mencionei no começo? Ele foi ao ar na segunda-feira de manhã. O cliente adorou o tema escuro. Ele não percebeu as melhorias de SEO — que é exatamente o objetivo. Um bom SEO é invisível para os usuários e visível apenas para mecanismos de busca e painéis de analytics.

Três semanas depois, o tempo médio de carregamento do site caiu 0,4 segundos (a limpeza das meta tags reduziu redirecionamentos desnecessários), e ele começou a ranquear para duas palavras-chave de cauda longa para as quais não aparecia antes. Pequenas vitórias, mas mensuráveis. O tipo de vitória que se acumula ao longo dos meses.

Se você vem adiando manutenção de sites, redesigns ou limpeza de SEO porque o trabalho parece tedioso — configure o Claude Code com essas duas skills neste fim de semana. Escolha uma página em um projeto e tente o fluxo de trabalho. Os doze minutos que vai levar vão te convencer mais rápido do que qualquer coisa que eu possa escrever aqui.

E da próxima vez que alguém pedir para você converter um tema claro para escuro, você vai sorrir em vez de suspirar.

Vamos Trabalhar Juntos

Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura de tecnologia? Adoraria ajudar.

• Fiverr (builds personalizados e integrações): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (soluções enterprise): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (serviços de segurança): xcybersecurity.io