ChatGPT Sites faz criar um site parecer editar um Google Doc
Com poucos comandos, o ChatGPT Sites cria landing pages, guias, jogos e aplicativos simples com acabamento profissional.
O ChatGPT Sites é uma das melhores ferramentas que já testei para criar sites simples. Houve um tempo em que eu passava horas escrevendo HTML à mão. Também sofria com um software complexo de criação de sites chamado Dreamweaver. Agora, montar um site bonito é tão fácil quanto criar um Google Doc.
Descreva em poucas frases o que você imagina. Se já tiver um design em mente, envie imagens ou capturas de tela. Explique também qualquer recurso específico que queira incluir, como botões com links, elementos visuais incorporados ou componentes interativos.
O ChatGPT Sites está em beta pública e disponível nos planos ChatGPT Plus, Pro, Business, Enterprise e Edu.
Leia também: IA no trabalho: veja como criar soluções mesmo sem aprender programação
Para experimentar a ferramenta esta semana, criei com o ChatGPT Sites um guia complementar para este artigo. Teste você mesmo. Também preparei uma nova página de feedback. Nela, você pode enviar em particular sua opinião sobre este ou qualquer outro artigo da Wonder Tools. A seguir, veja mais exemplos de uso do ChatGPT Sites, além de dicas, ressalvas e alternativas.
O QUE CRIEI COM O CHATGPT SITES
Como não sei programar, fiquei surpreso ao perceber que cada site que imaginei e criei com o ChatGPT ficou melhor do que eu esperava. Alguns exemplos:
- Wonder Tools Sponsorship Page: uma página simples de mídia kit para possíveis anunciantes.
- What I’m Reading: uma página rápida para compartilhar alguns dos livros que estou lendo.
- A Beginner’s Guide to MCP: explica por que e como conectar suas ferramentas à IA. O material serviu de complemento ao meu artigo na newsletter.
- Music Lab: uma coleção de minijogos de teoria musical para minhas filhas. Você também pode experimentá-los.
- Wonder Tools Book Group: criei esta landing page para compartilhar a lista de livros que discutiremos em nossa primeira temporada. É um grupo de discussão online, ao vivo, para assinantes pagantes. A partir de um documento de referência e do contexto que forneci, o ChatGPT encontrou e adicionou corretamente as miniaturas das capas. Prefiro este site à versão anterior, que criei com o Claude Artifacts.
Leia também: Não sabe programar? IA cria aplicativos, jogos e dashboards em minutos
LANDING PAGES INTERESSANTES CRIADAS POR OUTRAS PESSOAS
Um guia de eventos em San Francisco. O resultado é muito mais bonito do que um Google Doc convencional com uma lista do que fazer durante uma visita.
Uma loja de artigos para piquenique. É uma loja virtual moderna que permite arrastar produtos para uma cesta. Veja o prompt e as diferentes versões.
Uma página de campanha de marketing do ChatGPT Work, com publicações de redes sociais incorporadas.
Um anúncio de que o ChatGPT Sites está disponível na Europa.
EXPERIÊNCIAS INTERATIVAS INTERESSANTES
Uma ferramenta de criação artística chamada GoalFlow. Você escolhe a bandeira de um país e “pinta” uma nova versão com as mesmas cores em uma tela que simula fluidos. A tinta gira e se espalha como pigmento na água. A ferramenta foi criada pela artista Drue Kataoka.
Uma coleção musical com faixas incorporadas. Esta celebra a série de músicas sobre “slop” criada por Andrew Ambrosino.
JOGOS
Glass Towers: um jogo parecido com Jenga, com física realista. Veja o prompt e as versões usadas para criá-lo.
Paper Glider: um jogo de fliperama simples no qual você conduz um avião de papel por dentro de aros. Veja o prompt e as diferentes versões.
Arcade Archive: uma coleção jogável de oito videogames clássicos.
COMO APROVEITAR MELHOR O CHATGPT SITES
Comece. Selecione o modo Sites no ChatGPT. Veja a captura de tela.
Defina seu objetivo. Descreva a landing page, o painel, o guia ou o aplicativo que deseja criar. Dica: diga para quem ele será feito. Isso ajudará a orientar a interface.
Acrescente contexto. Se você estiver trabalhando dentro de um ChatGPT Project, ele já terá acesso ao contexto relevante. Isso pode incluir seu guia de estilo, logotipos, declaração de missão e outros arquivos. Caso contrário, considere enviar tudo o que for pertinente.
Forneça referências visuais. Informe suas preferências de estilo, cores, fontes ou imagens. Considere acrescentar imagens de referência ou capturas de tela de sites cujo design você admira. Dica: peça ao ChatGPT que faça perguntas antes de definir a abordagem. Assim, você consegue direcionar melhor o plano.
Desenhe, se quiser. Caso tenha em mente um esboço que possa fazer no papel, tire uma foto e envie junto com o pedido.
Leia também: 5 prompts no Claude para ajudar a criar o design perfeito de um site
Dê feedback. Assim que o ChatGPT apresentar a primeira versão, responda com comentários sobre o que gostaria de mudar. Use a ferramenta de anotação na barra lateral para marcar trechos específicos do site que precisam de ajustes. Indique onde quer trocar uma cor ou fonte, substituir uma imagem ou revisar um texto.
Publique e compartilhe. Quando o site estiver pronto, publique o link para dividi-lo com outras pessoas. Ou mantenha-o privado, caso seja um recurso pessoal.
ESCOLHA UM PROJETO PARA TESTAR
Crie uma landing page ou um portfólio. Se você ainda não tem uma página para apresentar seu trabalho, monte uma para que as pessoas possam conhecê-lo melhor.
Crie um recurso para uma comunidade. Prepare um guia ou uma visão geral de determinado tema com base em seu próprio conhecimento ou pesquisa. Compartilhe recursos com estudantes, amigos ou o público.
Crie um aplicativo útil para você. Resolva uma necessidade própria. Eu fiz um aplicativo privado para organizar os projetos em que estou trabalhando de acordo com as datas de publicação.
Crie um jogo. Faça algo que torne o aprendizado divertido ou recrie um antigo jogo de fliperama ou de perguntas e respostas de que você gostava. Personalize o design e os recursos para que ele tenha identidade própria.
RESSALVAS
A ferramenta ainda não está disponível nos planos gratuitos do ChatGPT. Se você usar muito o ChatGPT Sites, poderá atingir algum limite da versão beta. Isso impedirá temporariamente a criação de novos Sites ou a manutenção pública daqueles com alto volume de uso. Ainda não esbarrei nesse limite.
Os sites não ficam prontos na mesma hora. Dependendo da complexidade do projeto, espere de 10 a 15 minutos após enviar o prompt.
Os recursos de ajuda são limitados. Para obter mais orientações, a OpenAI Academy oferece algumas gravações de workshops práticos. Você também pode assistir a este vídeo útil de Paul Lipsky.
ALTERNATIVAS
Anos atrás, usei o Tilda para criar meu site pessoal. A plataforma tem excelentes templates e oferece mais controle manual do que qualquer ferramenta concebida prioritariamente com IA. Seu funcionamento é modular: você pode trocar e adaptar seções do site sem precisar começar do zero. Escrevi sobre ela nos primeiros tempos desta newsletter.
Lovable e Bolt são ferramentas baseadas em IA desenvolvidas especificamente para a criação de sites. Elas ficaram mais fáceis de usar e flexíveis desde que escrevi pela primeira vez sobre plataformas de vibe coding, em 2024. Se você já paga pelo ChatGPT, talvez não precise dessas outras assinaturas, porque agora pode criar sites com o ChatGPT Sites.
O Claude consegue criar sites profissionais e interativos com Artifacts e Claude Design. É uma ótima opção se você já forneceu ao Claude bastante contexto sobre seu trabalho e tem uma conta paga. Criei muitos sites simples com o Claude e continuo usando a ferramenta em conjunto com o ChatGPT Sites.
