Criar uma página de destino visualmente atraente costumava significar contratar desenvolvedores ou aprender a programar. Mas agora, com a integração do ChatGPT e Gemini no Selldone’s Page Builder, isso já não é mais o caso. Esse novo fluxo de trabalho impulsionado por IA permite que qualquer pessoa — independentemente da experiência técnica — converta uma imagem simples, esboço ou até mesmo uma ideia vaga em uma seção bonita e totalmente responsiva para sua loja online ou página de destino. Tudo é feito de maneira a funcionar instantaneamente dentro do ecossistema Selldone, sem necessidade de codificação manual.
Se você está construindo uma marca pessoal ou gerenciando um negócio online, este método facilita o lançamento de páginas modernas e polidas em minutos.
Do Conceito ao Componente em Minutos
Vamos supor que você encontre um design de que goste. Talvez seja uma vitrine de produtos em outro site, um banner de marketing que você criou no Canva, ou até mesmo uma captura de tela que guardou. Você não precisa descobrir como codificar isso ou por onde começar. Simplesmente carregue a imagem ou descreva o layout, e peça ao ChatGPT (usando o plugin Selldone) ou Gemini para convertê-lo em uma seção de página de destino. A IA entende tanto o formato técnico do Selldone quanto a estrutura dos componentes dinâmicos Vue usados na plataforma. Você receberá um bloco de código pronto para copiar e colar que se encaixa diretamente no Selldone’s Page Builder. Esta seção incluirá:
Todo o texto e cabeçalhos
Imagens e links
Botões, fontes e cores
Recursos dinâmicos, como cartões de produtos ou depoimentos
Mais importante, será responsiva em desktops, tablets e celulares — automaticamente.
Um Processo Simples para Resultados Poderosos
Para adicionar esta seção à sua página Selldone, siga estes passos:
Carregue ou descreva sua ideia de design para o ChatGPT ou Gemini.
Peça um componente Vue compatível com o Selldone Page Builder.
Copie o código gerado.
No Selldone’s Page Builder, arraste e solte o elemento Código na página de destino
Cole o código na aba Vue e salve.
Carregue ou descreva sua ideia de design para o ChatGPT ou Gemini.
Dica: Do seu computador, carregue a imagem de design que você prefere para o ChatGPT. Junto com a imagem, forneça uma explicação detalhada para ajudar a gerar um componente mais preciso e minimizar revisões futuras.
Exemplo de Sugerimento:
Sua nova seção está viva, totalmente estilizada e pronta para dispositivos móveis. Você pode agora personalizá-la através do painel de propriedades ou voltar à IA para solicitar edições—seja ajustando um layout, alterando cores, adicionando recursos, ou substituindo texto.
Recomendação de Sugerimento para os Melhores Resultados
Para ajudar a IA a entender exatamente o que você precisa, recomendamos usar este prompt:
Por favor, gere um componente Vue responsivo para o Selldone Page Builder com base nesta imagem ou descrição. Todo o texto, botões, imagens, cores e fontes devem ser definidos dentro do objeto de propriedades. O componente deve seguir os padrões do Vuetify 3, ser responsivo em todos os dispositivos e seguir as regras do Selldone, incluindo a não utilização de tags auto-fechantes. Se aplicável, inclui cartões de produtos, estrelas de avaliação e botões de ação. Para todos os textos, cartões e botões, por favor, adicione opções visuais como seletor de cor, tamanho da fonte, peso da fonte e raio.
Você pode reutilizar este prompt sempre que quiser criar ou ajustar uma seção. Ele garante que o código seja gerado de maneira limpa e atenda aos requisitos do Selldone.
Totalmente Personalizável, Totalmente Escalável
Uma vez que sua seção esteja no lugar, você não está limitado ao que começou. Você pode pedir ao ChatGPT ou Gemini para alterar qualquer coisa:
Substituir ou mover uma imagem
Atualizar títulos e subtítulos
Adicionar novos botões, sliders, depoimentos ou banners
Ajustar estilos e tamanhos de texto
Modificar espaçamento e layout para um visual diferente
Você pode continuar expandindo a página com novas seções. Não há limite para quantos componentes você pode adicionar, e cada um deles será construído na mesma estrutura confiável e flexível. Cada elemento é editável. As cores podem ser alteradas usando seletores visuais, e as imagens podem ser substituídas ou carregadas facilmente. A experiência é feita para ser intuitiva, mesmo se você nunca tiver usado um construtor de páginas antes.
Possíveis Erros
Erro #1
Se você encontrar erros após colar o código no construtor do Selldone (como mostrado na imagem abaixo), simplesmente peça ao ChatGPT ou Gemini para ajudá-lo a resolver.
As ferramentas responderão automaticamente e começarão a corrigir o código para você.
My Chat with Gemini and its Answer to the Error
Erro #2
Se você copiar e colar o código na aba HTML, a seção será mostrada em branco:
Como você pode ver, eu acidentalmente inseri o código na aba HTML, o que não deveria ter feito.
Erro #3
Às vezes, quando você solicita um slider, carrossel ou barra de rolagem a serem adicionados a uma seção, pode observar elementos indesejados como pontos extras, traços ou botões de seta aparecendo fora da seção. Isso geralmente acontece porque o ChatGPT utilizou MDI (Material Design Icons) ao invés dos Material Icons do Google exigidos. Para corrigir isso, certifique-se de pedir ao ChatGPT que utilize apenas os Material Icons oficiais do Google.
Antes de Começar, Leia Estas Dicas:
Às vezes, após a resposta da ferramenta, pode ser necessário pedir para que ela escreva o código completo. Se as alterações forem pequenas e o código original for longo, pode preferir dar instruções para substituir linhas específicas em vez de reescrever todo o bloco.
Recomenda-se iniciar uma nova conversa Selldone ChatGPT para cada nova seção. Continuar de uma sessão anterior pode causar a aplicação de instruções antigas que não são relevantes para o seu novo componente.
Às vezes, o ChatGPT pode lhe dar uma entrada nas propriedades do componente Selldone para inserir um URL de imagem, mas sua imagem está armazenada localmente no seu computador. Nessas situações, peça ao ChatGPT para definir o elemento (por exemplo, um carrossel ou slider) como um objeto, para que você possa carregar imagens diretamente em vez de usar URLs.
Se uma imagem contiver muitos elementos visuais, você pode simplesmente carregá-la no ChatGPT e pedir uma descrição. Em seguida, copie essa descrição e use como sugestão para pedir ao ChatGPT a geração de um componente. Essa abordagem leva a resultados melhores e mais precisos com frequência.
Por Que Isso é Importante
Com este fluxo de trabalho, qualquer pessoa pode ir de um conceito visual para uma seção de destino responsiva e pronta para produção em minutos. Sem mais esperar por desenvolvedores ou lutar com construtores de layout. Não é necessário aprender Vue, CSS ou design responsivo. Tudo o que a IA gera já está otimizado para parecer bom em todos os dispositivos. Você não precisa se preocupar em quebrar o layout, redimensionar imagens ou escrever regras de estilo. As seções seguem padrões rigorosos baseados na linguagem de design do Selldone e nas melhores práticas. Você passará mais tempo criando e menos tempo corrigindo.
Experimente Você Mesmo Hoje
Começar é simples. Escolha uma seção que gostaria de criar — seja inspirada em outro site, um esboço ou um panfleto de produto — e descreva-a ao ChatGPT ou Gemini usando o prompt recomendado. Você receberá o código, colá-lo-á no Selldone, e sua página de destino ganhará vida.
É rápido. É fácil. E é ilimitado. Não há limites para a criatividade, nem um teto sobre até onde você pode ir. Com a IA e o Selldone, construir páginas web poderosas e bonitas é agora tão simples quanto descrever o que você deseja.
Add Comment
