Como Fazer um Site com o ChatGPT: Três Formas que Funcionam

Para fazer um site com o ChatGPT, você pode pedir que ele escreva o HTML e o CSS do site e depois colocar esses arquivos em um serviço de hospedagem por conta própria; usá-lo para planejar as páginas e escrever o texto antes de montar o site em um construtor de sites; ou conectar um construtor com IA, como o Mythex, dentro do ChatGPT, para que ele construa, hospede e publique o site para você a partir da mesma conversa. A primeira forma é gratuita e serve bem para um site de uma página só; a terceira é a que você quer quando o site precisar de formulários que salvam dados, logins ou atualizações frequentes. Este guia mostra cada método com prompts e deixa claro até onde cada um vai.

O que o ChatGPT pode e não pode fazer sozinho

O ChatGPT é muito bom em escrever: código, títulos, textos de página e planos. Por padrão, ele não é uma empresa de hospedagem. Ele não dá ao seu site um endereço público, não mantém um banco de dados em funcionamento e não guarda os arquivos do seu site entre projetos como um construtor faz. Cada método abaixo é uma resposta diferente para essa lacuna.

Método 1: o ChatGPT escreve o código, você hospeda

Esta é a abordagem clássica e funciona bem para um site simples e estático: um portfólio, uma página de apresentação ou uma página de casamento.

Passo 1: peça uma página completa, em um único arquivo

Seja específico sobre conteúdo e layout:

Escreva um site completo de uma única página, em um arquivo HTML, com o CSS dentro de uma tag style. É para Maya Haddad, uma ilustradora freelancer em Amã. Seções: um cabeçalho com o nome dela e “Ilustração para livros e marcas”, uma grade com seis imagens de portfólio (use caminhos de imagem de exemplo que eu possa substituir), um parágrafo curto sobre ela, uma lista de três serviços com preços iniciais e uma seção de contato com o e-mail dela como link mailto. Design limpo e moderno, com muito espaço em branco, funciona em celulares. Sem frameworks JavaScript.

Pedir um único arquivo mantém tudo simples para salvar e enviar.

Passo 2: salve e abra

Copie o código para um editor de texto, salve como index.html e abra no navegador. Se algo parecer errado, descreva para o ChatGPT: “a grade de imagens fica em uma coluna no computador; deixe em três colunas acima de 900 px de largura.”

Passo 3: substitua os exemplos

Troque as imagens de exemplo pelas suas e substitua qualquer texto que o ChatGPT tenha inventado. Confira preços, e-mails e nomes com cuidado; a IA preenche lacunas com muita confiança.

Passo 4: publique

Envie o arquivo para uma hospedagem estática gratuita, como o GitHub Pages, ou para qualquer hospedagem que você já pague. Você terá um endereço público. Para usar seu próprio domínio, siga as instruções da sua hospedagem; nosso guia sobre como conectar um domínio personalizado explica a parte do DNS.

Onde o método 1 para

• Formulários que salvam dados. Um formulário de contato precisa de um lugar para enviar as respostas. Você vai precisar de um serviço de formulários ou de um servidor.
• Logins e áreas de membros. Isso exige um backend e um banco de dados.
• Muitas páginas. Manter o cabeçalho e os menus consistentes em dez arquivos colados à mão fica cansativo.
• Atualizações. Cada mudança significa pedir um novo código, colar e enviar de novo.

Método 2: o ChatGPT planeja, um construtor monta

Aqui o ChatGPT faz o trabalho de pensar e escrever, e um construtor de sites faz a montagem e a hospedagem.

Passo 1: planeje o site com o ChatGPT

Tenho uma pequena padaria familiar em Manchester que aceita encomendas de bolos. Sugira as páginas que meu site precisa, o que cada página deve dizer e a única ação que quero que o visitante faça em cada uma. Limite a cinco páginas ou menos.

Passo 2: escreva o texto

Peça o texto de cada página e depois reescreva com a sua própria voz. Acrescente detalhes reais que o ChatGPT não pode saber: horário de funcionamento, preços, áreas de entrega, o que torna seus bolos diferentes.

Passo 3: monte no construtor

Cole o plano e o texto em um construtor de sites. Em uma ferramenta de arrastar e soltar, você coloca o texto em um modelo. Em um construtor com IA, você pode passar o plano inteiro em uma única mensagem e ele monta as páginas; por exemplo, no construtor de sites do Mythex:

Crie um site para uma padaria familiar em Manchester usando este plano e este texto: [cole aqui]. Inclua um formulário de pedido que salve cada solicitação (nome, telefone, tipo de bolo, data necessária, mensagem) para que eu possa vê-las em uma página de administração à qual só eu tenha acesso. Design caloroso e acolhedor, que funcione em celulares.

O formulário de pedido aqui é salvo em um banco de dados real, o que um arquivo HTML colado não consegue fazer. Para saber mais sobre esse caminho, veja como criar um site com IA.

Método 3: crie e publique de dentro do ChatGPT

A opção mais nova é conectar um construtor ao ChatGPT para que o ChatGPT possa usar as ferramentas dele diretamente. Você continua na conversa do ChatGPT; o construtor fornece o projeto, a prévia, o banco de dados e a hospedagem.

O Mythex funciona assim pelo seu app para ChatGPT (um conector MCP). Você conecta a partir das configurações da conta no Mythex; a conexão funciona em qualquer plano, e as ferramentas que executam o sandbox do seu projeto precisam do plano Pro. Depois de conectado, você pode pedir ao ChatGPT algo como:

Usando o Mythex, crie um novo site para minha padaria com uma página inicial, uma página de cardápio com bolos e preços, e um formulário de pedido que salve em um banco de dados. Mostre a prévia e publique quando eu disser que está bom.

Depois disso, o ChatGPT cria o projeto, escreve o código, executa e publica em um URL público quando você aprova. As mudanças são apenas mais mensagens na mesma conversa. A mesma abordagem de conector também funciona com Claude, Cursor e Codex. Para entender como isso funciona e quais construtores são compatíveis, veja aplicativos de IA com MCP.

Qual método escolher?

Dicas de prompts que funcionam em qualquer método

• Dê fatos reais logo no início. Nome, localização, serviços, preços, dados de contato. Menos detalhes inventados significa menos retrabalho.
• Descreva o visitante e o objetivo. “Um pai procurando um bolo de aniversário, que deve acabar enviando um pedido.”
• Peça layouts pensados primeiro para celular. A maioria dos visitantes usa o celular.
• Mude uma coisa por mensagem depois que a primeira versão existir.
• Peça explicitamente o básico de SEO: um título e uma descrição únicos por página, títulos reais e texto alternativo nas imagens. Veja SEO para sites feitos com IA.

Nosso guia sobre como escrever prompts para construtores de apps com IA tem mais padrões.

Problemas comuns e soluções

• O design parece genérico. Dê uma referência: “como uma cafeteria escandinava tranquila, com muito branco e um verde suave”.
• O código foi cortado. Peça ao ChatGPT para continuar a partir da última linha, ou para dividir a página em seções e enviar uma de cada vez.
• Ele inventou depoimentos ou estatísticas. Remova. Avaliações falsas prejudicam a confiança e, em muitos lugares, violam as regras de defesa do consumidor.
• O site quebra depois de uma mudança. Guarde uma cópia da última versão que funcionava antes de colar código novo. Construtores como o Mythex mantêm checkpoints para você voltar atrás.

Antes de publicar

Leia cada palavra de cada página. Confira se os dados de contato funcionam. Abra o site em um celular. Garanta que as imagens são suas ou têm licença adequada. Depois publique e compartilhe onde seus visitantes já estão. Se você quer que tudo isso não custe nada, como fazer um site de graça detalha as opções de hospedagem gratuita.

Perguntas