TL, DR
O GemPages MCP permite transformar um HTML finalizado em uma página editável dentro do GemPages.
Você pode usar HTML de um desenvolvedor, agência, ferramenta de codificação de IA, fluxo de trabalho Figma-para-HTML ou outra fonte que produza HTML completo.
Depois de fornecer o HTML, a IA:
- Lê o HTML fornecido.
- Identifica a estrutura e as seções da página.
- Utiliza as regras de geração do GemPages para construir a página.
- Constrói e valida a página seção por seção.
- Cria a página editável no GemPages.
- Retorna os URLs de pré-visualização e do editor quando a página estiver completa.
Um prompt básico se parece com isto:
Utilize o GemCommerce MCP. Transforme o arquivo landing-page.html em uma página GemPages editável na minha loja.
A IA cria a página, mas não a publica. Revise o resultado no GemPages e publique-o quando estiver pronto.
Como funciona a geração de páginas HTML com o GemPages MCP
O GemPages MCP suporta a geração de páginas por IA a partir de HTML, imagens e URLs. Este guia se concentra especificamente no uso dessa tecnologia. HTML como fonte.
As páginas de destino em HTML podem vir de diversas fontes:
- Um desenvolvedor interno
- Uma agência criativa ou de comércio eletrônico
- Claude Code ou outra ferramenta de codificação de IA
- Um processo de conversão de Figma para HTML
- Um fluxo de trabalho de campanha existente
- Uma página que sua equipe já possui
- Outro sistema capaz de produzir HTML completo.
O arquivo pode parecer finalizado em um navegador, mas ainda está separado do fluxo de trabalho da página da loja.
Sem uma conexão direta, a equipe pode precisar transferir o código manualmente ou pedir a um desenvolvedor para reconstruir a página no GemPages. Isso cria mais uma etapa de transferência e mais uma chance de alterações no texto, layout ou links.
O GemPages MCP permite que a IA conclua essa transferência por meio de um processo definido. Em vez de deixar o trabalho finalizado em uma pasta local, o fluxo de trabalho cria uma página GemPages real que sua equipe pode visualizar e editar.
Como o GemPages MCP cria uma página a partir de HTML
O GemPages MCP não trata o arquivo HTML inteiro como um bloco indiferenciado.
Ele divide a fonte em seções semânticas, constrói cada seção separadamente e valida o resultado antes de prosseguir.
1. A IA lê o HTML finalizado.
O fluxo de trabalho começa quando você cola o HTML na conversa ou indica à IA um local específico. .html arquivo.
Você pode fornecer:
- Uma página de destino em HTML
- Vários arquivos HTML
- Uma pasta contendo um conjunto de páginas
O código HTML de origem já deve conter o texto, o layout, as imagens e o estilo desejados.
Alterações importantes de conteúdo ou design devem ser feitas antes do início do fluxo de trabalho. Começar com uma versão HTML estável reduz a confusão durante uma conversão longa.
2. A página está dividida em seções semânticas.
A IA lê o HTML e identifica as seções funcionais da página.
Dependendo do projeto de origem, isso pode incluir:
- Herói
- Introdução de produto
- Benefícios
- Diferenciais
- Como Funciona
- Comparação de Produto
- Prova social
- Reconhecimentos
- Ofereça a
- Perguntas frequentes
- CTA final
A lista exata de seções depende do HTML fornecido.
Dividir a página em seções semânticas fornece à IA uma estrutura clara a seguir. Isso também permite que o fluxo de trabalho isole problemas em uma seção específica, em vez de processar a página inteira em uma única ação em massa.
3. As regras de geração do GemPages são recuperadas.
Antes de construir a página, a IA recupera as regras de geração do GemPages.
Essas regras fornecem as instruções necessárias para traduzir o HTML em uma página GemPages. A IA as recupera uma única vez e as utiliza como referência durante toda a execução.
Isso mantém os mesmos requisitos de construção à medida que o fluxo de trabalho avança da primeira à última seção.
4. Cada seção é construída e validada.
A IA processa uma seção de cada vez.
Para cada seção, será:
- Leia o HTML relevante.
- Crie a seção de acordo com as regras de geração do GemPages.
- Valide o resultado gerado.
- Corrigir problemas encontrados durante a validação.
- Empurre a seção preenchida para a página.
- Continue com a próxima seção.
Esse processo, seção por seção, pode detectar problemas como:
- Cópia faltante
- Elementos de página incompletos
- Diferenças de layout
- Conteúdo colocado na seção errada
- Botões que não correspondem à fonte
- Seções omitidas durante a construção
- Outras diferenças entre o HTML e o resultado gerado
Após uma seção ser construída e validada, a IA passa para a próxima.
5. A página completa é criada no GemPages.
Após o processamento de todas as seções, o fluxo de trabalho conclui a página no aplicativo GemPages.
O HTML deixou de ser apenas um arquivo de código local. Sua equipe recebe uma página que pode abrir e continuar trabalhando.
6. A IA retorna os links da página
Assim que a página estiver completa, a IA retorna:
- URL de pré-visualização
- URL do editor
O URL de pré-visualização permite inspecionar a página completa antes da publicação.
O URL do editor abre a página no GemPages para que sua equipe possa continuar fazendo alterações.
O fluxo de trabalho é interrompido após a criação da página e o retorno desses links. A IA não publica a página automaticamente.
Como criar uma página GemPages a partir de HTML passo a passo
Execute o fluxo de trabalho no Claude Code, Claude Cowork no Claude Desktop ou em outro ambiente de IA compatível com GemCommerce MCP e acesso a arquivos locais.
A interface pode variar entre os clientes, mas o processo principal permanece o mesmo.
Antes de começar, siga o guia de configuração do GemPages MCP para conectar o GemCommerce MCP à sua ferramenta de IA e à sua loja Shopify.
Passo 1: Preparar o HTML
Comece com uma página de destino HTML finalizada.
A fonte já deve conter o conteúdo pretendido:
- Cópia da página
- Estrutura da seção
- Imagens
- Tipografia
- Cor
- botões
- Ligações
- Estilo responsivo
Analise o arquivo antes da conversão e confirme se está usando a versão correta.
Nomes de arquivos claros podem ajudar a evitar erros, especialmente quando vários arquivos ou versões estão armazenados na mesma pasta.
Por exemplo:
- aprovado para venda de verão.html
- lançamento-final-do-produto.html
- página-de-comparação-v3.html
Evite nomes de arquivo como:
- novo.html
- test2.html
- final-final.html
Para conversão em lote, coloque os arquivos HTML relevantes em uma pasta com um nome fácil de entender.
Etapa 2: Abra um ambiente de IA compatível
Abra o Claude Code, o Claude Cowork no aplicativo Claude Desktop ou outro ambiente de IA com:
- GemCommerce MCP
- Acesso a arquivos locais
- Permissão para ler e gravar arquivos de fluxo de trabalho
O fluxo de trabalho cria uma pasta de execução contendo arquivos de seção, registros e artefatos de compilação. Ele depende desses arquivos para acompanhar o progresso e retomar corretamente quando interrompido.
Um ambiente de IA baseado apenas em chat, sem acesso a arquivos locais, não consegue concluir a conversão completa de forma confiável.
Para aprender como conectar o GemCommerce MCP ao Claude ou ao Codex, siga nossas instruções. Guia de configuração do GemPages MCP.
Etapa 3: Peça explicitamente à IA para usar o GemCommerce MCP.
Comece a frase com:
Use o GemCommerce MCP.
Esta instrução orienta a IA a conectar-se às ferramentas corretas em vez de tentar adivinhar como o HTML deve ser processado.
Por exemplo:
Use o GemCommerce MCP. Ative landing-page.html em uma página GemPages na minha loja.
Etapa 4: Forneça um arquivo HTML ou um lote
Você pode colar o HTML na conversa ou indicar à IA um arquivo local.
Para uma página:
“Use o GemCommerce MCP. Ative landing-page.html em uma página GemPages na minha loja”.
Para um arquivo anexado:
“Use o GemCommerce MCP. Transforme o HTML em anexo em uma página GemPages na minha loja”.
Para vários arquivos:
“Use o GemCommerce MCP. Crie páginas GemPages para cada landing-page.html para páginas/lote-2026-07/Existem seis arquivos na pasta.
Sempre que possível, indique o nome exato do arquivo ou da pasta. Evite instruções como "use o arquivo mais recente" quando houver várias versões disponíveis.
Etapa 5: Deixe a IA construir a página
Após receber o HTML, a IA fará o seguinte:
- Leia a página.
- Divida-o em seções semânticas.
- Recupere as regras de geração do GemPages.
- Construa a primeira seção.
- Valide o resultado.
- Empurre a seção para a página.
- Repita o processo para cada seção restante.
Normalmente, não é necessário fornecer mais informações nesta etapa.
No entanto, permaneça próximo à conversa durante o início da execução. A IA pode precisar de permissão para usar uma ferramenta MCP, acessar um arquivo ou executar um comando local.
Etapa 6: Receba os URLs de pré-visualização e do editor.
Após cada seção ser construída e validada, a IA retorna os links para a página concluída.
Abra o URL de pré-visualização para inspecionar o resultado.
Abra o URL do editor quando a página precisar de mais alterações.
Para um lote, confirme se cada arquivo HTML possui uma página correspondente e um conjunto de links.
Etapa 7: Analise a página no GemPages
Compare a página convertida com o HTML original.
Analise a página desde o cabeçalho até a chamada à ação final, em vez de verificar apenas as primeiras seções.
Confirme que:
- Todas as seções estão incluídas.
- A cópia foi transferida corretamente.
- As imagens aparecem nos locais corretos.
- A tipografia e as cores correspondem à fonte.
- O espaçamento entre as seções permanece consistente.
- Os botões e links funcionam.
- A página comporta-se corretamente em todos os tamanhos de tela.
- Os elementos interativos funcionam conforme o esperado.
Etapa 8: Faça as alterações finais no editor.
Utilize o URL do editor para relatar quaisquer problemas encontrados durante a revisão.
Visualize a página novamente após fazer as alterações.
A página deve passar pelas verificações de conteúdo, design, técnicas e comerciais da sua equipe antes da publicação.
Passo 9: Publique a página você mesmo
O GemPages MCP não publica a página para você.
Quando a página estiver pronta, publique-a manualmente através do GemPages.
Isso mantém a versão final para o cliente e o cronograma de lançamento sob o controle da sua equipe.
Exemplos de prompt
Uma mensagem clara deve identificar o GemCommerce MCP, o arquivo de origem, a ação solicitada e o resultado esperado.
| Converter um arquivo HTML anexado | “Use o GemCommerce MCP. Transforme o arquivo HTML em anexo em uma página GemPages na minha loja. Retorne os URLs de visualização e do editor quando cada seção estiver concluída.” |
| Converter HTML a partir de uma ferramenta de codificação de IA | “Use o GemCommerce MCP. Ative campanha-de-verão.html em uma página GemPages na minha loja. Crie e valide cada seção separadamente e, em seguida, retorne os URLs de visualização e do editor”. |
| Converter um lote de páginas HTML | Use o GemCommerce MCP. Crie páginas GemPages para cada landing-page.html para páginas/lote-2026-07/Existem seis arquivos na pasta. Processe cada página separadamente e retorne os URLs de pré-visualização e do editor. |
Utilizando outros tipos de entrada
Este guia se concentra na criação de uma página GemPages a partir de HTML.
O GemPages MCP também suporta outras entradas para geração de páginas por IA:
- Imagem: Utilize uma imagem ou captura de tela como referência visual.
- URL: Utilize um URL de página web existente como fonte.
Para obter instruções passo a passo, consulte: Como gerar uma página editável a partir de uma imagem com o GemPages MCP
Dicas para executar o fluxo de trabalho sem interrupções
Dica 1: Permitir chamadas da ferramenta GemCommerce MCP
Por padrão, Claude solicita permissão antes de usar uma ferramenta MCP. Como o fluxo de trabalho HTML para GemPages utiliza muitas chamadas de ferramentas, essas solicitações podem interromper o processo repetidamente.
Para permitir as chamadas necessárias da ferramenta GemCommerce MCP:
- Abra o Claude Code no aplicativo Claude Desktop.
- Clique Personalizar na barra lateral esquerda.
- Acesse Conectores → GemCommerce MCP.
- Abra Permissões da ferramenta.
- Configure as ferramentas GemCommerce MCP necessárias para Sempre permitir.
Conceda permissão contínua apenas a conectores que você reconheça e em que confie.
Dica 2: Use o modo automático para comandos Bash seguros
O fluxo de trabalho utiliza comandos Bash para criar e gerenciar arquivos de seção, logs e artefatos de compilação.
Quando Claude solicita aprovação para cada comando, a execução pode parar com frequência.
No Claude Code, dentro do aplicativo Claude Desktop, defina a conversa para Modo automáticoClaude pode então executar comandos que considera seguros sem precisar solicitar aprovação a cada vez.
Analise as configurações de permissão antes de ativar o modo automático, especialmente quando a conversa tiver acesso a informações armazenadas ou arquivos locais.
Coisas a saber antes de executar o fluxo de trabalho
Analise os seguintes pontos antes de iniciar uma conversão.
1. Diga explicitamente "Use GemCommerce MCP"
Comece o comando instruindo a IA a usar o GemCommerce MCP.
Sem essa instrução, a IA pode tentar outro método ou não conseguir se conectar às ferramentas necessárias.
2. Utilize um ambiente com acesso a arquivos locais.
Execute o fluxo de trabalho no Claude Code, Claude Cowork ou em outro ambiente compatível com acesso a arquivos locais.
O fluxo de trabalho cria uma pasta de execução contendo:
- Arquivos de seção
- Registros de progresso
- Resultados da validação
- Construir artefatos
- Dados utilizados para retomar a conversão
Uma interface que funciona apenas por chat e não tem acesso a arquivos locais não consegue gerenciar toda a execução de forma confiável.
3. Utilize um modelo que suporte cerca de 500 mil contextos.
Uma landing page pode conter várias seções, cada uma com um ciclo de construção e validação separado.
Utilize um modelo que consiga lidar confortavelmente com cerca de 500 mil contextos, como o Opus com esforço de raciocínio Médio ou Alto.
Um modelo com contexto ou capacidade de raciocínio limitados pode perder o controle de:
- Regras de geração do GemPages
- Seções concluídas anteriormente
- Resultados de validação anteriores
- Padrões de design para toda a página
- A fase atual da corrida
Isso se torna ainda mais importante para páginas longas e conversões em lote.
4. Execuções interrompidas podem ser retomadas
Uma queda de conexão, o esgotamento do orçamento de dados ou outra interrupção podem interromper o fluxo de trabalho antes de sua conclusão.
Normalmente não é necessário reiniciar.
Peça à IA para continuar:
Continue o fluxo de trabalho de HTML para GemPages a partir da última seção concluída. Não reinicie a execução.
A IA pode usar os arquivos de seção, registros e artefatos de compilação existentes para continuar a partir do ponto correto.
Mantenha a pasta de execução intacta até que a página esteja completa.
5. Páginas longas podem levar mais de uma hora.
Uma página com muitas seções pode levar mais de uma hora para ser concluída.
O fluxo de trabalho prioriza uma reconstrução precisa em vez de uma transferência em massa rápida. Cada seção é construída e validada separadamente de acordo com as regras de geração do GemPages.
Isso é importante porque o resultado é uma página que os clientes verão e com a qual interagirão. Uma pequena diferença no texto, no layout ou no comportamento da chamada para ação pode afetar a experiência final.
Quanto mais seções a página contiver, mais rodadas de construção e validação o fluxo de trabalho precisará.
O que revisar antes de publicar
O GemPages MCP retorna uma página editável, mas sua equipe continua responsável pela revisão final.
Compare cada seção com o HTML original.
Abra o HTML original e a pré-visualização do GemPages lado a lado.
Verifique se:
- Todas as seções estão presentes
- A ordem das seções está correta.
- O texto corresponde à fonte.
- As imagens aparecem nos locais pretendidos.
- Os botões usam os rótulos pretendidos.
- Os destinos da CTA estão corretos.
- Nenhuma seção foi duplicada.
- Nenhum conteúdo importante está faltando.
Análise para desktop, tablet e celular.
Confira a página em diferentes tamanhos de tela.
Olhe para:
- Rolagem horizontal
- Texto que se estende para fora do seu contêiner
- Recortes de imagem incorretos
- Seções de largura fixa
- Botões difíceis de pressionar
- Grandes espaços entre as seções
- Tabelas que não se adaptam a telas menores
- Elementos adesivos cobrindo o conteúdo
Ações da página de teste
Teste e clique em todas as ações voltadas para o cliente, incluindo:
- Botões CTA
- Links de produtos
- Links de navegação
- Links de âncora
- Formulários
- acordeões
- Outros elementos interativos
Uma página pode parecer semelhante à fonte original, mas ainda assim conter um link incorreto ou uma ação que não funciona.
Verifique o conteúdo e as informações da oferta.
Verifica:
- Nomes de produtos
- Preços
- Descontos
- Informação de envio
- Condições de devolução
- Garantias
- Depoimentos
- Comparações de concorrentes
- Certificações
- Reivindicações do produto
- Datas de validade da oferta
O fluxo de trabalho transfere a página. Ele não garante que todas as declarações comerciais no HTML original estejam corretas.
Faça as alterações finais no GemPages.
Utilize o URL do editor para resolver quaisquer problemas restantes.
Após efetuar as alterações, visualize a página novamente e repita as verificações relevantes.
Publique somente após a revisão do conteúdo, design, apresentação em dispositivos móveis e ações do cliente.
Quando criar uma página GemPages a partir de HTML
Utilize HTML como fonte quando:
- Você já tem uma página de destino HTML completa.
- Um desenvolvedor preparou a página.
- Uma agência entregou o HTML final.
- Uma ferramenta de codificação de IA gerou uma página aprovada.
- Um design do Figma já foi implementado como HTML.
- Você precisa converter várias páginas HTML para o GemPages.
- A equipe de e-commerce precisa gerenciar a página após o desenvolvimento.
O fluxo de trabalho foi projetado para equipes que já finalizaram o HTML e precisam integrá-lo ao fluxo de trabalho da loja sem precisar recriá-lo manualmente.
Obrigado por seus comentários