Por muito tempo, o caminho do Figma até o site foi manual: eu desenhava e depois passava tudo para o WordPress, página por página, configurando cores, botões e espaçamentos à mão e, depois de muito resistir, acabei pensando em dar uma chance para usar IA para me ajudar na construção de projetos WordPress, no caso, usando o Claude Code e ir construindo o site “conversando”.
O ponto de partida
Megabody Fit é um projeto WordPress construído há algum tempo. O projeto é um conceito de site de academia que personaliza o treino do cliente, oferecendo planos e serviços para que o cliente tenha um treino personalizado. Minha ideia era montar um site que não fosse um estereótipo de site de academia: com fotos de pessoas perfeitas com músculos saltitando da roupa, mas sim um site com fotos mais reais, evitando que clientes se intimidassem ao entrar na página.
Com minha evolução, percebi que esse projeto seria um bom candidato a melhorias e eu poderia testar uma automação de processo usando o Claude IA nele.
A fase de design durou de 2 a 3 dias, desenhando no Figma e construindo os banners e imagens da página no Affinity.
Conectando: Claude + WordPress
Conectei o Claude Code ao meu WordPress por meio do Novamira, uma ferramenta que permite ler e alterar o site com segurança. Depois disso, ele passou a enxergar tudo: páginas, menus, plugins, mídia e o próprio Elementor.
Dei a ele o arquivo do design e a pasta de imagens e escrevi, com minhas palavras, o que queria: uma página nova, fiel ao Figma, usando as tecnologias disponíveis no Elementor. Foi esse o briefing, bem resumido.
Construindo
Ele analisou o design seção por seção e extraiu as cores direto da imagem. Enviou as imagens para a biblioteca de mídia e montou o header, o footer e a página inteira no Elementor. Quando um detalhe exigia código, como a curva do hero ou as bolinhas dos carrosséis, o CSS entrou no Fluent Snippets, como combinado.
A primeira versão já ficou muito próxima do meu layout, e a comparação com o Figma foi o que mais me impressionou: eu olhava as telas lado a lado e as diferenças eram pequenas. Depois disso, o polimento foi acontecendo aos poucos até chegar ao resultado que queria. Claro. Depois de tudo feito, tive que dar os toques finais e ajustar algumas coisas pessoalmente.
O polimento, a parte que é minha
Aqui entra meu trabalho de designer. Fui apontando o que não estava bom, e cada ajuste virou uma conversa curta:
Cores e botões no Elementor V4. Pedi para sair do CSS customizado e usar variáveis de cor, classes globais e o widget de botão atômico. Hoje mudar uma cor ou um tamanho é editar um token.
Mobile de verdade: Subi o design de celular depois de ver que os cards precisavam virar carrosséis. Pedi também que os textos seguissem boas práticas de UX e responsividade para dispositivos móveis
Tipografia 100%: Títulos, parágrafos e imagens viraram widgets atômicos, com controle responsivo de tamanho.
Organização para manutenção:Pedi que a estrutura da página tivesse nomes claros e, por fim, que a IA criasse uma página de Guia de estilos com a tipografia, botões, espaçamentos e a documentação do design.
O que isso mudou
Velocidade: A estrutura inteira da página nasceu em uma única sessão de conversa, e cada refinamento levava minutos, não horas de trabalho manual.
Fidelidade: O que está no ar é o que desenhei, porque fui eu quem dirigiu cada detalhe e revisou cada resultado.
Sistema, não só tela: O site ficou com tokens, classes e documentação. Quem fizer a manutenção depois entende o que mexer.
O que isso fez pela minha carreira
Antes, eu criava o design e precisava passar tudo manualmente para o WordPress, página por página. Também configurava à mão o guia de estilo: cores, botões, espaçamentos, tudo.
Hoje o fluxo é outro. Crio o design, conecto o Claude ao WordPress e a própria IA monta as páginas. Eu vou polindo o resultado até chegar onde quero, sem precisar construir cada página manualmente. Isso me dá rapidez e agilidade para tocar os projetos de forma mais prática.
Além disso, ganhei uma visão maior de como as ferramentas de IA funcionam e de como elas podem beneficiar tanto a mim quanto aos meus clientes na criação de sites, lojas virtuais ou qualquer projeto feito em WordPress.
Para mim, a lição é simples: a ferramenta executa, mas o meu olhar de design decide.
Veja o resultado: staging.megabodyfit.felipefelix.me