Como criar um site com IA no Elementor usando Claude e Novamira

Criar um site com inteligência artificial e depois reconstruir tudo manualmente no Elementor elimina boa parte da vantagem da IA. A proposta deste tutorial é diferente: criar o design no Claude e utilizar o Novamira para transformar esse projeto em páginas reais do WordPress, totalmente editáveis no Elementor.

No exemplo apresentado no vídeo, o resultado é um site institucional completo para a TP Webmaster, com páginas Home, Sobre, Serviços, Portfólio e Contato, além de cabeçalho, rodapé, menu responsivo e formulário.

O que será criado neste tutorial?

O fluxo reúne quatro partes principais:

• Claude para gerar o design e a estrutura do site;
• Novamira para conectar a IA ao WordPress por meio de MCP;
• WordPress como sistema de gerenciamento;
• Elementor para manter todas as páginas editáveis visualmente.

No final, a IA não entrega apenas um código HTML isolado. Ela cria as páginas dentro do WordPress, configura elementos do site e permite que o conteúdo continue sendo alterado pelo Elementor.

O que é MCP e qual é a função do Novamira?

MCP é a sigla para Model Context Protocol. Ele é um padrão que permite que uma inteligência artificial se conecte a ferramentas e sistemas externos.

Uma analogia simples para quem trabalha com WordPress é pensar no MCP como um plugin instalado na IA. Ele adiciona novas capacidades, permitindo que o Claude consulte informações e execute ações que não estariam disponíveis em uma conversa comum.

O Novamira cria essa ponte entre o cliente de IA e o WordPress. Dependendo das permissões concedidas, a ferramenta pode trabalhar com arquivos, banco de dados, comandos do WP-CLI, plugins e conteúdo do site.

Por oferecer acesso amplo, a própria documentação do Novamira recomenda o uso em ambientes de desenvolvimento ou staging, sempre com backup.

A Abilities API foi lançada no WordPress 7.0?

Não. Esse é um ponto da fala do vídeo que precisa ser corrigido.

A Abilities API entrou no WordPress 6.9 como uma base padronizada para que o WordPress, temas e plugins registrem funcionalidades de forma estruturada e legível por ferramentas. O WordPress 7.0 continuou a evolução da infraestrutura voltada para integrações com IA, enquanto versões posteriores ampliaram as capacidades disponíveis.

Isso não significa que o WordPress envie dados automaticamente para uma IA. A comunicação depende de plugins, configurações e permissões definidas pelo administrador.

Para acompanhar os detalhes técnicos, consulte a documentação da Abilities API no WordPress.

O que você precisa antes de começar?

Prepare os seguintes itens:

• WordPress atualizado;
• Elementor instalado;
• tema Hello Elementor;
• uma solução de Theme Builder para criar cabeçalho e rodapé;
• plugin Novamira;
• Claude Desktop ou outro cliente compatível com MCP;
• backup completo do site;
• ambiente de desenvolvimento ou staging.

No vídeo, foi utilizado o Pro Elements para disponibilizar recursos adicionais do Elementor. Ele é um projeto de terceiros e não possui vínculo oficial com a Elementor. Antes de utilizá-lo, confira licença, compatibilidade, atualizações e suporte. O Elementor Pro oficial também oferece o Theme Builder necessário para trabalhar com cabeçalho e rodapé.

Como preparar o WordPress?

Comece com uma instalação limpa ou um ambiente de testes. Atualize o WordPress e remova apenas conteúdos e plugins que você tenha certeza de que não serão utilizados.

Depois:

1. instale e ative o Elementor;
2. instale e ative o Hello Elementor;
3. configure a ferramenta de Theme Builder escolhida;
4. instale o plugin de formulário, caso o site tenha página de contato;
5. acesse Configurações > Links permanentes;
6. selecione Nome do post e salve.

No exemplo do vídeo, o WPForms é utilizado para o formulário de contato. A IA também consegue identificar a ausência do plugin durante a construção e instalá-lo, desde que tenha permissão para isso.

Mesmo assim, é melhor definir antecipadamente quais plugins serão usados. Dessa forma, você mantém controle sobre dependências, licenças e compatibilidade.

Como criar um Design System com o Claude?

Antes de gerar as páginas, defina o sistema visual do projeto. Um Design System reúne decisões como:

• cores;
• tipografia;
• estilos de botões;
• campos de formulário;
• espaçamentos;
• cards;
• navegação;
• hierarquia visual.

Você pode fornecer uma descrição completa, utilizar um arquivo de referência ou enviar capturas de tela de um projeto autorizado. A referência deve servir para orientar linguagem visual, cores e componentes, sem copiar identidade, textos ou elementos exclusivos de outro site.

No vídeo, um Design System é preparado primeiro e depois selecionado na criação do site. Isso ajuda a manter as cinco páginas visualmente consistentes.

Quais são os prompts originais usados no vídeo?

Os dois prompts exibidos abaixo são os textos originais utilizados no vídeo. Eles também estão disponíveis no repositório Prompt Novamira, de Thiago Póvoa.

Prompt Claude Design System

Quero criar o novo site institucional da **TP Webmaster**, empresa localizada no **Rio de Janeiro, Brasil**.

O site deve possuir as seguintes páginas:

- Home

- Sobre

- Serviços

- Portfólio

- Contato

Na página de serviços, apresente nossas principais soluções:

- Criação de Sites

- Desenvolvimento de Sistemas Web

- Desenvolvimento de Apps (Android e iOS)

- Automação de Processos com IA

O objetivo do site é transmitir profissionalismo, gerar confiança e incentivar o visitante a entrar em contato através do formulário de orçamento.

A experiência deve ser moderna, rápida e intuitiva. Quero um visual sofisticado, com aparência de um site de alto nível, mas sem exageros ou elementos que prejudiquem a usabilidade.

Utilize estas informações sobre a empresa ao longo do conteúdo:

- Mais de 15 anos de experiência em desenvolvimento.

- Especialistas em sites, sistemas, aplicativos e automações.

- Atendimento direto, sem intermediários.

- Comunicação clara durante todo o projeto.

- Desenvolvimento personalizado para cada cliente.

- Foco em qualidade, desempenho e entrega.

Já possuo um Design System completo. Portanto, não crie novas cores, tipografia ou componentes visuais. Utilize apenas os componentes existentes e concentre-se na estrutura das páginas, experiência do usuário, organização do conteúdo e copywriting.

Quero um site que passe credibilidade desde o primeiro acesso e conduza naturalmente o visitante até a solicitação de um orçamento.

Depois da geração, revise cada página. Verifique textos, hierarquia, links, responsividade e consistência. A primeira versão serve como ponto de partida e pode ser refinada com novos pedidos.

Como conectar o Novamira ao WordPress?

Baixe o plugin no site oficial do Novamira e instale o arquivo ZIP em Plugins > Adicionar plugin > Enviar plugin.

Após ativar:

1. abra as configurações do Novamira;
2. habilite a integração necessária;
3. crie uma senha de aplicação do WordPress;
4. copie a configuração MCP fornecida;
5. adicione essa configuração ao cliente de IA;
6. reinicie completamente o cliente;
7. faça um teste de conexão.

A configuração pode ser feita no Claude Desktop por meio do arquivo JSON indicado na documentação do Novamira. Como caminhos e formatos podem mudar entre versões, copie o modelo fornecido pela própria ferramenta em vez de utilizar um exemplo antigo.

Como proteger a senha de aplicação?

A senha de aplicação permite que uma ferramenta externa autentique ações no WordPress. Trate-a como uma credencial confidencial.

• não mostre a senha em vídeos ou capturas de tela;
• não cole a credencial em conversas públicas;
• não salve em repositórios;
• utilize um usuário com somente as permissões necessárias;
• revogue a senha quando terminar;
• não reutilize a mesma credencial em vários sites;
• mantenha backup e registro das alterações.

Se a credencial for exposta, revogue-a imediatamente no perfil do usuário e gere outra.

Como testar a conexão antes de criar o site?

Antes de enviar o projeto, confirme no Claude se o MCP do Novamira está conectado ao WordPress correto. Faça primeiro uma consulta de leitura, confira endereço, versão, tema e plugins e só então autorize alterações.

Como transformar o design em páginas do Elementor?

Depois de revisar o projeto no Claude, exporte o site como HTML ou no formato aceito pelo seu fluxo. Anexe o arquivo ao Claude Desktop e envie instruções detalhadas para a conversão.

Prompt MCP Novamira

Meu site utiliza **WordPress** com **Elementor**, e o plugin **Novamira** está instalado para funcionar como MCP entre o Claude e o WordPress.

Quero que você transforme este design em um site WordPress totalmente funcional e fácil de editar posteriormente.

Durante o desenvolvimento, siga estas diretrizes:

- Construa toda a estrutura utilizando **Elementor Containers**, evitando o uso de **Inner Sections**.
- Sempre que possível, utilize os **widgets nativos do Elementor**. Recorra a widgets HTML apenas quando realmente não houver outra alternativa.
- **Não utilize os elementos Atomic do Elementor V4.**
- Aproveite o plugin **Novamira**, que já está configurado, para compreender e manipular corretamente os elementos do Elementor.

Crie todas as páginas presentes no design e, ao final, gere um novo menu de navegação contendo todas elas. Defina também a página inicial correta do site.

Desenvolva um **cabeçalho** e um **rodapé** totalmente editáveis utilizando o Elementor e salve ambos como templates para que possam ser personalizados facilmente no futuro.

Na página de contato, utilize o **WPForms** para criar o formulário.

Após concluir toda a conversão e verificar que o site está funcionando corretamente, publique-o no meu domínio conectado:
https://dev.tpwebmaster.com/tp/

A IA primeiro reconhece o ambiente, verifica plugins e estrutura o trabalho. Dependendo do tamanho do projeto, a tarefa pode atingir o limite de contexto ou de uso. Nesse caso, peça para continuar exatamente da etapa interrompida, sem reconstruir o que já está pronto.

Qual foi o resultado apresentado no vídeo?

O processo gerou cinco páginas:

• Home;
• Sobre;
• Serviços;
• Portfólio;
• Contato.

Também foram criados cabeçalho, rodapé, navegação mobile e formulário com WPForms. O layout final permaneceu visualmente próximo do projeto feito no Claude, mas passou a existir dentro do WordPress.

O teste mais importante foi abrir uma página em Editar com Elementor. Os containers, textos e demais elementos estavam disponíveis para edição visual, permitindo que o desenvolvedor ou o cliente continuasse trabalhando normalmente.

É possível pedir alterações depois da conversão?

Sim. Depois que o site está conectado, você pode iniciar uma conversa mais curta, testar novamente o MCP e solicitar mudanças específicas. Os dois prompts completos usados para iniciar o projeto permanecem disponíveis no repositório oficial do tutorial.

No vídeo, a IA localiza uma imagem, envia o arquivo para a biblioteca de mídia e aplica o fundo na seção principal. A imagem continua disponível no WordPress e a configuração permanece editável pelo Elementor.

Quais cuidados são indispensáveis?

A integração economiza tempo, mas oferece acesso amplo ao WordPress. Por isso:

1. utilize staging ou desenvolvimento;
2. faça backup antes de cada tarefa maior;
3. trabalhe com permissões mínimas;
4. revise plugins antes de instalá-los;
5. não exponha senhas de aplicação;
6. confira as páginas dentro do Elementor;
7. teste desktop, tablet e celular;
8. valide links, menu e formulários;
9. verifique se imagens possuem licença de uso;
10. revise o histórico de ações antes de publicar;
11. revogue acessos que não são mais necessários.

O Novamira não deve ser tratado como um botão que pode alterar qualquer site sem supervisão. Ele funciona melhor como uma ferramenta de desenvolvimento controlada.

Vale a pena criar sites Elementor com Claude e Novamira?

O fluxo resolve uma dificuldade comum: criar um layout com IA e depois precisar reconstruí-lo manualmente no WordPress.

Com Claude, Novamira e Elementor, é possível acelerar:

• criação de páginas institucionais;
• montagem de cabeçalho e rodapé;
• configuração de menus;
• instalação controlada de recursos;
• criação de formulários;
• inserção de imagens;
• ajustes posteriores;
• manutenção do site.

A maior vantagem é preservar a editabilidade. O site não fica preso a um HTML separado nem exige que toda mudança seja feita no código. O Elementor continua disponível para o trabalho visual, enquanto a IA ajuda na criação e na manutenção.

Assista ao vídeo incorporado no início deste artigo para acompanhar todo o processo e ver o resultado dentro do Elementor.