Olá, gente! Bem-vindos e bem-vindas a mais uma live do CR_IA.Hoje a gente vai ver como criar sites com inteligência artificial.
A maior parte da aula será prática, mostrando para vocês, de fato, como usar a ferramenta, tá? Vou fazer tudo ao vivo, o que significa que às vezes pode dar problema, mas acho isso bom, porque a gente precisa descobrir juntos como contornar os obstáculos, né?
A ideia de hoje é mostrar para vocês a minha ferramenta favorita para criação de sites com IA. Não é a única, tá? Tem várias ferramentas de criação de site com IA. As únicas que vamos ver em slides hoje são as que eu recomendo.
A Loveable é a que vamos usar hoje. Mas tem também o Gamma, que é uma ferramenta mais focada em produção de apresentações, mas que também faz sites, uma boa opção. O Hostinger, que é um serviço de hospedagem, lançou uma ferramenta de criação de sites, que é mais uma ferramenta de programação, para criar sites apps, que eu gostei muito, e dá para usar um plano gratuito com uso limitado, e pagando você tem mais recursos.
E tem o Dora, que também é muito legal para criação de sites a partir de prompt.
Por que vamos usar o Loveable? Porque achei ela a mais completa, permitindo mais personalização e recursos mais complexos. Quero mostrar para vocês o tanto que dá para fazer.
Vamos usar o ChatGPT para criar a ideia do nosso site, e a Loveable para desenvolver de fato o site em código. O ChatGPT é só um apoio; poderia ter vindo com a ideia pronta, mas achei interessante mostrar esse processo porque pode ser útil: o ChatGPT ajuda a pensar a ideia, paleta de cores, textos, copy, e a Loveable faz o desenvolvimento, correção de bugs, adição de funcionalidades e, eventualmente, a publicação.
Vamos lá.
O site que vou produzir hoje é um site de um serviço fictício de apoio emocional para inteligências artificiais e robôs que estão passando por crises existenciais — tipo uma startup de terapia para bots.
Na tela, eu tenho o ChatGPT, que vou usar para estruturar melhor a ideia do site e as informações relevantes para o Loveable. Por exemplo, eu quero um prompt detalhado para o Loveable, contendo referência de como o site deve ser, a estrutura, as sessões, as cores, etc.
Como estou fazendo um exemplo para vocês, vou criar tudo no ChatGPT. Pedi para o ChatGPT criar um nome, conceito, paleta de cores, logo e mockup da estrutura do site, com seções, títulos e textos para cada seção, e que juntasse tudo isso num prompt completo para o Loveable.
Aqui estamos fazendo algo que recomendamos no CR_IA: usar uma IA para criar prompt para outra ferramenta. Se programarmos bem, vamos conseguir um prompt muito melhor do que se formos direto no Loveable pedir uma coisa genérica. Pedi tudo de uma vez para o ChatGPT e ele já está gerando tudo. O nome criado foi Algocinto, um nome que ele gostou muito, mostrando um pouco de criatividade do modelo.
Já temos a paleta, o logo (com a descrição, pois ele ainda não desenhou), e as seções do site. Vou pedir para ele desenhar o logo, mais criativo e divertido, e também para fazer o wireframe. Se você estiver criando seu site, pode seguir esse mesmo processo. Se já tiver a ideia pronta, o processo fica mais rápido.
Criei aqui o logo, que para uma primeira tentativa está bom. Ainda posso pedir ajustes. Isso mostra que, ao usar o ChatGPT para criar esses elementos, a gente consegue uma base boa para o site.
Em seguida, vou pedir o prompt em inglês, pois mesmo que o Loveable funcione em português, usualmente essas ferramentas de programação funcionam melhor com prompt em inglês. Os textos do site, porém, ficarão em português, que é o idioma do site. Eu já preparei o prompt com todos esses detalhes, inclusive anexei uma imagem de referência para a paleta de cores, que era uma parede parecida que gerei ontem.
Agora, vamos ao Loveable. Estou criando uma conta lá, que permite algum nível de uso gratuito. Depois de logar, colo o prompt que criei no ChatGPT.
O Loveable é uma ferramenta de desenvolvimento de software que não faz só sites, faz também apps, tudo que você imaginar, desde que usando prompt. Já usei prompts simples lá, como numa aula anterior do CR_IA em que criamos um e-commerce de produtos de carnaval, mas hoje vou usar o prompt mais completo que criei.
Colei o prompt em inglês, com todas as informações do texto, tom do design, e anexei a imagem de referência para a paleta de cores. Ele está processando, o que pode levar uns cinco minutos.
Enquanto isso, explico que esse prompt contém o conceito do site, a startup Algocinto que oferece apoio emocional, o tom leve, bem-humorado, empático, com estética profissional e carismática, a paleta de cores, a tipografia, as seções do site, os textos (copies), e o estilo visual.
Se eu colocasse só uma linha desse prompt no Loveable, ele faria o site, mas talvez com menos qualidade, pois seria criar tudo do zero e depois corrigir. Ao preparar bem o prompt, aumentamos a chance de sair algo melhor e poupamos trabalho de ajuste.
Você pode também pedir coisas adicionais no prompt, como chat, uma imagem grande no topo, ou outras funções, pois estamos em uma ferramenta de programação que funciona com prompts.
Alguém perguntou no chat se pode mostrar o prompt que gerou o prompt. Não é só um prompt, a ideia é que a gente converse com o ChatGPT e peça tudo o que precisamos. Primeiro ele cria nome, conceito, paleta, logo, depois o mockup com estrutura, seções, títulos e textos, e junta tudo num prompt.
Esse processo ajuda a trabalhar a comunicação natural com IA, similar ao que a gente faria com um designer ou criador de copy para criar um site. Você só precisa saber quais informações são relevantes para a IA fazer o trabalho.
Agora, ele está finalizando o mockup, e depois vamos para o Loveable com o prompt.
Alguém conhece o Loveable? É uma ferramenta bem interessante para desenvolvimento. Enquanto isso, respondo perguntas do chat.
Perguntaram se dá para usar com Figma como protótipo. Não sei se o Figma aceita código, mas talvez com algum plugin ou integração, possa funcionar.
Alexandre perguntou sobre testar diferentes ferramentas com os mesmos prompts para comparar resultados. Sim, eu faço isso. Por exemplo, testei ontem no Hostinger e no Loveable com o mesmo prompt e achei os resultados parecidos. O Dora é um pouco diferente.
Dieter comentou que está criando uma landing page integrada com um sistema de chamados, mas usou termos que não entendi muito bem. De qualquer forma, é legal ver pessoas já colocando em prática. Mostrei que, mesmo sem ser da área de tecnologia, com uma ferramenta como essa é possível chegar longe na criação de sites. Quando ele erra algo, basta pedir para arrumar, e geralmente ele consegue.
Ainda não testei criar um sistema de calendário complexo, mas vamos ver se o Loveable consegue.
Outra pergunta: dá para exportar o JSON, HTML do Loveable para importar em WordPress? Dá, pois você pode exportar o código completo ou publicar o site hospedado no Loveable e conectar seu domínio. Se quiser importar como um template do WordPress, vai precisar ajustar imagens e estrutura, porque alguma complexidade pode ser necessária.
O Loveable não substitui um profissional de desenvolvimento, mas permite que pessoas sem conhecimento técnico avancem bastante, levando para que um profissional faça os ajustes finais. Também é muito útil para desenvolvedores que querem agilizar trabalhos que demorariam muito.
Agora, visualizando o site feito pelo Loveable, o chat funciona e até a interface de agendamento com horários aleatórios foi criada. É muito legal para montar um protótipo funcional que depois o desenvolvedor pode finalizar.
Perguntaram se o Pedro Gianetti consegue gerar um tema WordPress com isso. O Loveable falou que não é tão simples, seria necessário converter o design com plugins como Elementor ou Divi.
Voltando ao site, pedi para colocar uma imagem realista grande no topo, tipo um slide banner. Ele pegou uma imagem no Unsplash, que é um banco de imagens gratuitas. No entanto, a imagem não apareceu corretamente, e isso é normal pois ainda estamos ajustando.
Como o site é para bots, pedi imagens menos "desumanizadas". Com o tempo, precisaremos ajustar muitos detalhes, como integrar calendários reais, alterar links, criar páginas adicionais, e assim por diante. Quando o site estiver pronto, você pode clicar em "publish" para publicá-lo na web. Se você quiser usar seu próprio domínio (como algosinto.com.br), precisa ter uma conta paga no Loveable.
Na versão gratuita, já usei todos os meus créditos. O upgrade custa R$25 por mês para 100 créditos, ou R$30 para times, e retira a assinatura do Loveable, permite domínios personalizados e trabalho com até três editores no projeto.
Sobre consumo de créditos, o Loveable cobra por mensagem. Criamos o suficiente pelo número de mensagens disponíveis. Se preferir, pode testar na versão gratuita antes de pagar.
Todas as boas ferramentas de criação de sites com IA são pagas, mas têm versões gratuitas limitadas.
O Gamma, por exemplo, é mais simples, permite criar uma landing page baseada em texto, com layout fixo e paleta que você determina, mas não tão personalizável. Minha ferramenta favorita é o Loveable, pela autonomia de edição e detalhes que permite.
Em resumo, esse passo a passo é relativamente simples para criação de site com IA, e essa rotina com o ChatGPT vai tirar vocês do zero, levando para o site pronto, como vocês viram aqui, inclusive com uma sessão de agendamento.
Antes de encerrar, abro para dúvidas e perguntas nesses 15 minutos finais. Alguém perguntou se já dá para começar a brincar de criar sites com IA? Sim, com esse processo já dá.
Alexandre perguntou qual o próximo passo depois que o site está pronto no Loveable. Você pode publicar, conectar seu domínio na conta paga, ou baixar o código e usar outro serviço de hospedagem.
Pedro perguntou se precisa pagar hospedagem para colocar o site no ar pelo Loveable. Se publicar direto no Loveable, não precisa, o site fica hospedado lá. Se levar o código para outra plataforma, aí sim precisa contratar hospedagem e ter o domínio registrado.
O Estúdio Fábrica comentou que perguntou para o próprio Loveable sobre exportação e recebeu uma explicação excelente.
Pedro Genet pediu para explicar as diferenças entre as ferramentas apresentadas. Expliquei que o Dora faz sites, mas não apps; o Loveable e Hostinger fazem apps e sites a partir de prompt. O Gama cria landing pages verticais simples a partir de conteúdo. Cada um tem enfoques e níveis de personalização diferentes.
Luís Amorim falou que para coisas pequenas ele se sentiria à vontade para explorar, mas para sites de cliente não se sentiria seguro.
Concordo totalmente. Essas ferramentas não eliminam o papel do programador. Para clientes, é importante entregar o escopo combinado. A ferramenta ajuda a acelerar o trabalho, mas um programador deve finalizar para garantir a qualidade.
Se não for técnico, qualquer problema precisará de um profissional para corrigir e manter o site. Então, essas ferramentas dão mais autonomia e aceleram o processo, mas não substituem profissionais. Além disso, permitem que outras pessoas da equipe criem protótipos para mostrar para o programador.
É isso, pessoal. Tem mais perguntas?
Muito obrigada pela aula! Essa aula serve para dar um pezinho na água nos potenciais da IA para criação de sites.Tem alguns insights que vocês podem usar para várias coisas.
Até a próxima!