Trabalhar com inteligência artificial no WordPress costuma exigir uma alternância constante entre duas interfaces. O usuário envia uma instrução no terminal ou no chat, aguarda a execução e volta ao painel do site para descobrir o resultado. Quando o layout não corresponde ao esperado, o ciclo recomeça sem que o agente e a pessoa compartilhem a mesma referência visual.
O Modo Visual do Novamira foi criado para reduzir essa distância. Segundo James Whitfield, do CreatePressHub, o recurso experimental conecta um agente externo ao construtor de páginas aberto no navegador e mostra cada alteração enquanto ela acontece. O agente pode abrir elementos, modificar estilos e aplicar variáveis do sistema de design diante do usuário, sem depender de uma conferência posterior em outra aba.
A demonstração analisada pelo autor foi conduzida por Paul, do WPTuts, no Bricks Builder. Ela mostra tanto o processo de conexão quanto a criação de uma seção completa, com hierarquia semântica, comportamento responsivo e uso de tokens globais.
Como o Modo Visual funciona
Em vez de operar apenas nos bastidores do WordPress, o recurso cria uma sessão visual ligada à tela do construtor. A janela do builder torna-se o espaço compartilhado entre o profissional e a IA: enquanto o agente seleciona componentes, ajusta margens, organiza blocos e aplica estilos, a tela é atualizada em tempo real.
Os pontos centrais do funcionamento são:
- a conexão é feita entre um agente externo e o construtor de páginas que está aberto no WordPress;
- a versão gratuita oferece suporte ao Gutenberg, enquanto o Novamira Pro acrescenta Elementor e Bricks Builder;
- o processo usa um prompt de sistema e uma troca de token visual, diferente da configuração MCP tradicional;
- a janela do construtor precisa permanecer aberta durante toda a sessão;
- por se tratar de um recurso experimental, os testes devem ser realizados em staging ou em uma instalação local.
Diferenças em relação à integração MCP tradicional
A integração MCP convencional continua sendo adequada para migrações de dados, operações em massa, geração de código e outras tarefas que não dependem de avaliação visual imediata. Nesse fluxo, o agente recebe o pedido em um terminal ou chat, executa a operação no WordPress e apresenta o resultado para conferência.
O Modo Visual acrescenta a camada que falta em trabalhos de design. Ele se aproxima de uma conexão remota dentro do próprio page builder: cada decisão estrutural aparece no canvas e pode ser avaliada antes que o agente avance. Se um espaçamento, uma cor ou uma organização de componentes não ficar correta, basta orientar a correção com um novo prompt.
Essa diferença é especialmente relevante para agências e profissionais que trabalham com Elementor ou Bricks. A rotina de ajustar, visualizar e corrigir consome uma parte significativa do desenvolvimento de interfaces. Quando a IA e o designer observam o mesmo estado visual, o ciclo de refinamento fica mais curto e os problemas aparecem no momento em que são criados.
A demonstração completa do WPTuts apresenta o recurso em funcionamento no Bricks Builder.
Como configurar a conexão visual
A configuração do Modo Visual não repete o processo de uma conexão MCP baseada somente em URL de servidor e senha de aplicativo. O fluxo usa um prompt preparado pelo Novamira e uma troca de token para estabelecer a sessão visual.
1. Acesse o recurso experimental
No painel do WordPress, abra o menu do Novamira e selecione Visual experimental. O aviso indica que o recurso ainda está em desenvolvimento e pode apresentar comportamentos inesperados.
2. Escolha o construtor compatível
A tela inicial informa as opções disponíveis. O Gutenberg pode ser usado na edição gratuita. Elementor e Bricks Builder fazem parte dos recursos do Novamira Pro. Depois de conferir o ambiente, clique em Começar.
3. Selecione o cliente de IA
O assistente permite escolher o cliente utilizado, como Claude Code, Claude Desktop, Codex, Cursor, VS Code, Gemini CLI e outras opções compatíveis. A escolha gera um prompt de sistema específico para adicionar o Novamira Visual ao cliente.
4. Conclua a troca do token
Copie o prompt gerado e cole-o no cliente de IA. O agente devolve um token de handshake visual, que deve ser informado no assistente do Novamira. Depois de conceder as permissões da sessão, abra a página que será editada no builder escolhido.
A janela do construtor deve permanecer aberta. Fechá-la encerra o vínculo visual. Se a primeira conexão demorar ou não for reconhecida, reiniciar o cliente de IA pode forçar uma reconexão limpa.
Atenção: o próprio Novamira classifica o recurso como experimental. Pequenas inconsistências de estilo e comportamentos inesperados ainda podem ocorrer. Consulte a documentação do Novamira para verificar limitações atuais e nunca faça os primeiros testes diretamente em um site de produção.
O que a IA criou na demonstração
Paul pediu que o agente construísse uma seção principal no Bricks Builder usando como referência um arquivo design.md disponível no diretório do projeto. Esse arquivo descrevia regras do sistema visual, como estilos globais, parâmetros de layout, escala tipográfica e variáveis utilitárias.
Três resultados se destacaram porque normalmente exigem atenção manual durante a montagem de uma página.
Hierarquia semântica
O agente aplicou H1 ao título principal e H2 aos subtítulos sem precisar de uma instrução específica para cada elemento. Uma hierarquia correta facilita a leitura por tecnologias assistivas e ajuda mecanismos de busca a compreender a organização do conteúdo.
Comportamento responsivo
A criação não ficou limitada à visualização de desktop. A IA configurou o empilhamento para tablets e celulares e ajustou o comportamento das colunas em telas menores, incluindo orientações em retrato.
Uso de variáveis globais
Em vez de inserir valores fixos de pixels e códigos hexadecimais em estilos isolados, o agente utilizou os tokens já existentes para espaçamento, cores e tipografia. Assim, o resultado passou a fazer parte do sistema de design do site, sem criar uma coleção paralela de estilos difíceis de manter.
Um arquivo design.md bem preparado aumenta a consistência da geração. Vale registrar nele as variáveis CSS globais, a escala tipográfica, os tokens de cor, os padrões de espaçamento e outras decisões que o agente deve respeitar. Quanto mais claro for esse contrato visual, menor será a necessidade de alinhar manualmente um layout genérico depois.
Refinamentos com prompts de acompanhamento
O Modo Visual também foi testado em uma alteração pontual após a criação da seção. O pedido era mudar o botão principal para a cor primária global e aplicar um raio de canto de tamanho M.
O agente localizou a variável --primary-color, aplicou a classe utilitária de raio correspondente e atualizou o botão diretamente no canvas. A decisão também ficou disponível para manter a consistência nas etapas seguintes. Uma tarefa que normalmente exigiria abrir vários painéis do builder foi resolvida com uma instrução curta.
Esse padrão separa bem as responsabilidades. A IA assume a geração estrutural e a aplicação repetitiva de regras, enquanto o profissional continua responsável por direção criativa, prioridades e avaliação do resultado. Os dois trabalham sobre a mesma representação visual, sem alternar entre um terminal desconectado e o navegador.
O impacto no fluxo de trabalho com WordPress
O recurso ainda está no início, mas aponta para uma mudança importante: a automação deixa de ser apenas execução invisível de código e passa a participar de uma colaboração visual. Para equipes que produzem vários sites, isso pode diminuir o intervalo entre uma estrutura gerada por IA e uma interface realmente alinhada ao sistema de design do cliente.
A adoção deve ser gradual. O ambiente ideal para os primeiros projetos é uma instalação local ou de staging, com backup disponível e regras visuais documentadas. Também é importante conferir a semântica, a responsividade, os tokens aplicados e qualquer alteração que possa afetar componentes reutilizados.
O Modo Visual do Novamira não elimina a revisão humana nem substitui a integração MCP tradicional. Ele acrescenta uma superfície mais adequada para tarefas em que aparência e contexto visual são decisivos. Dominar esse fluxo desde a fase experimental pode ajudar profissionais e agências a usar a IA com mais controle, velocidade e consistência na criação de páginas WordPress.
