Você fornece a imagem do design e especifica a página de destino. A IA então examina a estrutura visual, identifica os elementos e seus estilos e mapeia o design para os elementos do GemPages.
Se você nunca usou o GemPages MCP antes, comece com estes guias:
Antes que você comece
Certifique-se de que:
- O GemCommerce MCP está conectado à sua ferramenta de IA.
- Sua loja Shopify está conectada.
- Você tem uma imagem de referência da seção que deseja recriar.
- Você conhece o nome ou URL da página de destino no GemPages.
Use uma imagem nítida que mostre a seção completa. Se você quiser recriar várias seções, pode fornecer várias imagens ou trabalhar em uma seção de cada vez.
Como funciona a geração de páginas baseada em imagens 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 de um imagem como fonte.
A entrada de imagens é útil quando o design já existe visualmente, mas ainda não foi implementado em HTML.
A referência pode vir de:
- Uma captura de tela
- Uma maquete de design
- Um quadro exportado
- Um elemento visual de campanha
- Uma seção de página existente
O GemPages MCP usa a imagem como referência visual e recria o design usando elementos editáveis do GemPages.
Como criar um design a partir de uma imagem passo a passo
Passo 1: Anexe a imagem de referência.
Anexe a imagem do projeto à sua conversa.
A referência pode ser:
- Uma captura de tela de uma seção existente
- Uma maquete de design
- Uma imagem exportada de uma ferramenta de design.
- Outra referência visual que você deseja recriar no GemPages.
Tente evitar imagens desfocadas, muito recortadas ou que contenham controles de navegador irrelevantes. A IA só consegue trabalhar com as informações visuais disponíveis na referência.
Para uma página longa, você pode fornecer imagens separadas para cada seção e recriá-las uma de cada vez.
Passo 2: Insira o prompt
Após anexar a imagem de referência, digite o seguinte comando:
Use o GemCommerce MCP para descrever a estrutura visual, identificar a árvore de camadas e os estilos dos elementos e, em seguida, mapeá-los para os elementos do GemPages e criar a seção em [nome da página ou URL] no GemPages.
Substituir [nome da página ou URL] com a página de destino.
O que o comando pede para a IA fazer
O prompt contém duas solicitações principais.
Analise a imagem de referência.
A primeira parte pede à IA que examine:
- A estrutura visual
- A hierarquia dos elementos
- Os estilos visíveis usados no design
Dependendo da ferramenta de IA e do resultado da análise, a resposta pode incluir informações como:
- Estrutura visual
- Árvore de camadas proposta para o GemPages
- Detalhes de design visíveis, como tipografia, espaçamento, cores ou alinhamento.
O formato exato e o nível de detalhamento podem variar. Esses não devem ser considerados estágios de saída fixos que aparecem em todas as tarefas do GemPages MCP.
Crie a seção no GemPages.
A segunda parte pede à IA que:
- Mapeie as partes identificadas do design para os elementos do GemPages.
- Crie a seção na página que você especificou.
Incluir ambas as solicitações na mesma mensagem fornece à IA a imagem de referência, a interpretação pretendida e o destino do resultado.
Etapa 3: Deixe o GemPages MCP criar a seção
Após enviar a solicitação, permita que a IA analise a imagem e processe a seção.
Mantenha a conversa aberta enquanto o processo estiver em andamento. Se a IA solicitar que você aprove uma chamada da ferramenta GemCommerce MCP, revise e aprove para que o fluxo de trabalho possa continuar.
A IA também pode solicitar mais informações quando a página de destino ou parte do design não estiver clara.
Passo 4: Analise o resultado no GemPages
Após a criação da seção, abra a página de destino no GemPages e compare-a com a imagem de referência.
Confira:
- Ordem de disposição e elementos
- Posicionamento de texto e imagem
- Cores e tipografia
- Espaçamento e alinhamento
- Aparência em computadores e dispositivos móveis
Uma imagem de referência pode não conter todos os detalhes do design, como o nome da fonte original, as dimensões exatas ou as configurações de responsividade. Você pode fazer os ajustes finais diretamente no Editor GemPages ou enviar instruções adicionais.
Etapa 5: Refinar o resultado
Caso alguma parte da seção recriada precise de ajustes, continue na mesma conversa e descreva a alteração necessária.
Por exemplo:
Use o GemCommerce MCP para atualizar a seção que você acabou de criar. Reduza o espaço entre o título e o parágrafo e aumente o tamanho da imagem. Mantenha o restante da página inalterado.
Para uma alteração de layout:
Use o GemCommerce MCP para atualizar a seção recriada. Posicione o texto à esquerda e a imagem à direita na versão para desktop.
Para ajuste em dispositivos móveis:
Use o GemCommerce MCP para atualizar a seção recriada. Em dispositivos móveis, coloque a imagem abaixo do texto e centralize o botão.
Para um ajuste de estilo:
Utilize o GemCommerce MCP para atualizar a seção recriada. Ajuste a espessura do título e o estilo do botão para que fiquem mais semelhantes à imagem de referência.
Evite instruções genéricas como:
Faça com que fique melhor.
Em vez disso, identifique o elemento e explique o que deve ser alterado. Um acompanhamento específico facilita a compreensão do resultado desejado.
Dicas para melhores resultados
- Utilize uma imagem de referência de alta qualidade.
- Certifique-se de que toda a seção esteja visível.
- Especifique a página de destino exata.
- Indique onde a seção deve ser inserida.
- Ao trabalhar com uma página longa, recrie uma seção de cada vez.
- Forneça as imagens originais ou o texto exato separadamente, quando necessário.
- Use instruções de acompanhamento para pequenos ajustes em vez de reconstruir toda a seção.
O GemPages MCP oferece um ponto de partida mais rápido para recriar um design, mantendo o resultado editável no GemPages. Sempre revise a seção concluída e faça os ajustes necessários antes de publicar.
Obrigado por seus comentários