Como Criar Site com o ChatGPT e Publicar Grátis

O ChatGPT é a IA mais usada do mundo, e a maior parte das pessoas que querem criar um site grátis começa por ele. Faz sentido: você já tem login, já está acostumado a conversar com ele, e ele realmente sabe escrever HTML.

Tem um detalhe que poucos guias contam: o ChatGPT tem três formas diferentes de gerar um site. Quem usa só o chat tradicional perde o Canvas (editor lado a lado feito sob medida para HTML) e perde o DALL-E, que gera imagens originais no mesmo fluxo. Neste guia você aprende os três, com prompts prontos e um comparativo honesto com Claude e Gemini. No final, publica o site em segundos no Htmly e recebe um link compartilhável.

O que o ChatGPT consegue criar (e o que não consegue)

O ChatGPT gera sites estáticos — páginas HTML com CSS e JavaScript que funcionam direto no navegador. Dentro desse universo, dá para fazer:

Landing pages para produtos, serviços e lançamentos
Sites pessoais, portfólios e currículos online
Páginas de evento, casamento ou formatura
Cardápios digitais e sites de pequenos negócios locais
One-pages para infoprodutos e captura de lead

O que ele não faz diretamente: e-commerce com checkout, sistemas com login e banco de dados, blogs com CMS, aplicações com backend próprio. Para esses casos, você precisa de plataforma específica (Shopify, WordPress, Webflow).

Para esmagadora maioria dos negócios que precisa de presença online clara e profissional, o ChatGPT resolve. Uma personal trainer divulgando pacotes, um nutricionista captando leads, um designer mostrando portfólio — tudo isso é uma página estática bem feita. E você vai sair daqui com uma.

Método 1 — ChatGPT via chat (free, mais rápido)

A forma mais conhecida. Você abre o ChatGPT, descreve o site, ele devolve o código pronto. Em 5 minutos você tem um arquivo HTML funcional.

Passo a passo em 6 etapas

1. Acesse o ChatGPT

Vá para chatgpt.com e faça login. O plano gratuito permite gerar sites HTML completos — o modelo grátis dá conta da maioria dos sites estáticos.

2. Escreva um prompt detalhado

Esse é o passo que define a qualidade do site. Quanto mais contexto, melhor o resultado. Exemplo real para uma personal trainer:

"Crie um site HTML completo e responsivo para uma personal trainer chamada Camila Andrade. Ela atende em São Paulo, foca em treinamento funcional para mulheres acima de 35 anos e oferece três modalidades: presencial, online e plano híbrido.

Estrutura do site:

Hero: nome, tagline 'Treino que se encaixa na sua rotina, não o contrário', botão 'Conheça os planos'

Sobre Camila: 2 parágrafos. Formada em Educação Física pela USP, 12 anos de experiência, especialização em treinamento para mulheres na perimenopausa

Planos: 3 cards — Presencial (R$ 480/mês, 2x semana), Online (R$ 220/mês, planilhas + acompanhamento por WhatsApp), Híbrido (R$ 380/mês, 1 sessão presencial + planilha online). Cada card com lista de benefícios e botão 'Quero esse plano' que leva para o WhatsApp

Como funciona: 4 passos (Avaliação inicial, Plano personalizado, Acompanhamento semanal, Ajustes mensais) com ícone e descrição curta

Depoimentos: 3 alunas com nome, idade, plano contratado e depoimento realista de 2 linhas

FAQ: 5 perguntas frequentes (preciso ter experiência?, posso fazer em casa?, o que está incluso?, como funciona o pagamento?, posso cancelar quando quiser?)

Contato: WhatsApp (11) 99876-5432, Instagram @camilaandrade.fit, e-mail [email protected]

Footer: copyright 2026, links para as redes sociais, CRP do conselho

Design: limpo e moderno. Cores: fundo branco (#ffffff), textos em cinza escuro (#1f2937), destaques em verde-musgo (#4d7c0f). Fonte: Inter do Google Fonts. Ícones via Lucide ou emojis discretos. Botões com cantos arredondados (8px).

Inclua meta tags para SEO (title, description) e Open Graph (og:title, og:description, og:image placeholder). Tudo em um único arquivo HTML com CSS e JavaScript embutidos. Mobile-first com media queries. Botão flutuante de WhatsApp fixo no canto inferior direito."

Repare nos detalhes: nome real, valores reais, 3 modalidades específicas, paleta com hex, fonte definida. Quanto mais concreto, menos espaço para ambiguidade — e o ChatGPT acerta de primeira.

3. Copie o código gerado

O ChatGPT exibe o HTML em um bloco de código com botão "Copiar" no canto. Se vier truncado, peça "envie o código completo, sem cortes, mesmo que ocupe múltiplas mensagens".

4. Salve como arquivo HTML

Abra o Bloco de Notas (Windows) ou TextEdit (Mac). Cole e salve como index.html. No Bloco de Notas, mude "Tipo" para "Todos os arquivos (.)" e a codificação para UTF-8 — sem isso o arquivo salva como index.html.txt ou bagunça os acentos.

5. Teste no navegador

Duplo-clique no index.html para abrir no Chrome. Confira layout, responsividade (redimensione a janela), funcionamento dos botões e ausência de erros de digitação. Para testar sem abrir explorador, use a ferramenta gratuita HTML Preview — cola o código e vê o resultado em tempo real.

6. Publique no Htmly

Acesse htmly.com.br, arraste o arquivo e receba o link em segundos. Sem cadastro, o site fica 1 hora no ar (ótimo para testar). Com conta gratuita, ele fica permanente com subdomínio próprio.

Método 2 — Canvas: o editor lado a lado para iterar

Aqui é onde o ChatGPT brilha de verdade para criação de sites. O Canvas é uma interface diferente do chat: em vez de receber um bloco de código que cresce a cada resposta, você vê o HTML em um painel à direita, e o chat fica à esquerda. Você pede ajustes em linguagem natural, e o ChatGPT edita o código diretamente — sem regerar tudo do zero.

Por que Canvas muda o jogo para HTML

No chat tradicional, cada ajuste obriga o ChatGPT a reescrever o site inteiro. Isso tem 3 problemas: (1) gasta tokens à toa, (2) pode introduzir bugs em partes que estavam funcionando, e (3) você precisa copiar o código de novo a cada iteração.

No Canvas, ele edita só o que mudou. Se você pedir "aumente o tamanho da fonte do hero", ele troca uma linha no CSS, e pronto. O resto fica intocado. Você pode iterar 30 vezes sem complicação.

Além disso, o Canvas tem preview embutido — não precisa salvar como .html e abrir no navegador a cada ajuste. Você vê o resultado renderizado direto no painel.

Como ativar o Canvas

O Canvas tá disponível no plano grátis com limite de uso, e sem limites no Plus (US$ 20/mês). Para ativar, há duas formas:

Pelo seletor de modelo: clique no nome do modelo no topo da conversa e escolha "GPT-4 com Canvas" ou similar (a UI muda às vezes — procure pela opção que mencione Canvas explicitamente).
Pedindo direto: comece sua mensagem com "Crie no Canvas:" ou "Use o Canvas para...". Em muitos casos, o ChatGPT abre o Canvas automaticamente quando detecta que você pediu código longo.

Se você é Plus, o Canvas costuma vir habilitado por padrão para HTML/JavaScript. Se você é grátis e o Canvas não aparece, peça explicitamente — em geral funciona com algumas mensagens por dia.

Iteração em vez de regerar — exemplo prático

Suponha que você gerou o site da personal trainer pelo Método 1 e abriu o código no Canvas. Três ajustes encadeados que mostram o poder da iteração:

Você: "Aumente a fonte do hero para 4rem no desktop e 2.5rem no mobile."

Você (próximo turno): "Adiciona uma seção de horários entre 'Como funciona' e 'Depoimentos'. 3 colunas: Manhã (6h-10h), Tarde (14h-18h), Noite (19h-22h)."

Você (próximo turno): "Nos depoimentos, troca as imagens placeholder por iniciais grandes em círculo colorido."

A cada turno, o ChatGPT edita só o que mudou. Depois de 3 ajustes, você baixa o HTML completo do Canvas e publica no Htmly. Esse fluxo é o que faz o Canvas valer a pena para qualquer site mais complexo que uma página genérica.

Limites a saber

Canvas é mais lento que o chat tradicional na geração inicial — vale a pena depois que você já tem o esqueleto. Recursos como APIs externas, fontes pesadas e vídeos podem não funcionar 100% no preview, então sempre teste no navegador real antes de publicar. No grátis, o Canvas pode pausar depois de algumas mensagens — espera 2-3 horas ou continua no chat tradicional.

Método 3 — ChatGPT + DALL-E: imagens originais no mesmo fluxo

Se o seu site precisa de imagens (e quase todo precisa), você tem duas opções: usar bancos de imagens grátis (Pexels, Unsplash, Pixabay) ou gerar imagens originais com IA. O ChatGPT integra o DALL-E nativamente, o que significa que você gera imagem e HTML no mesmo lugar, sem trocar de ferramenta.

Quando vale usar DALL-E

Sites visuais: portfólios, lookbooks, sites de fotografia ou design
Hero images personalizadas: quando a imagem precisa contar uma história específica do negócio
Ilustrações de marca: ícones, mascotes, ilustrações para "Como funciona"
E-commerce: mock-ups de produtos quando você ainda não tem fotos profissionais
Convites e eventos: ilustrações temáticas únicas

Quando não vale a pena: site de pessoa real (use foto real), site de produto físico que você já tem (use foto do produto), site institucional sério (foto de equipe real é mais confiável que ilustração).

Workflow combinado

A grande sacada é alternar entre gerar HTML e gerar imagem na mesma conversa. O ChatGPT mantém contexto, então "sabe" que aquela imagem é para o site que ele acabou de criar. Fluxo típico:

Peça o site completo com placeholders nas imagens ("use placeholders 1200x600 onde vão entrar fotos")
Em seguida: "Agora gera N imagens horizontais (1200x600) para os cards. Estilo: [descrição]. Sem texto na imagem, fundo claro."
Por fim: "Substitui os placeholders no HTML pelas URLs dessas imagens."

Depois, baixe as imagens (clique direito → Salvar) junto com o HTML, coloque numa pasta, compacte em ZIP e arraste no Htmly. O ZIP é extraído automaticamente.

Limites e uso comercial

No grátis você gera 2-3 imagens por dia. No Plus, ~50 por 3 horas — um site inteiro em uma sessão. Para site de 5-10 imagens, o grátis serve mas exige 3-4 dias.

As imagens do DALL-E podem ser usadas comercialmente segundo os termos atuais da OpenAI (vale conferir a versão atual antes de produto pago). Para site de divulgação de serviço, sem revenda da imagem em si, está liberado.

7 dicas para prompts melhores no ChatGPT

A diferença entre site genérico e site profissional está quase toda no prompt:

1. Descreva o público antes do design. "Site para mulheres entre 30 e 50 anos que valorizam minimalismo" é melhor que "site moderno". O ChatGPT escolhe paleta, fonte e tom proporcionais ao público definido.

2. Peça 1 arquivo HTML único. "Tudo em um único arquivo HTML com CSS e JavaScript embutidos" simplifica tudo. Resolve o clássico problema do CSS sumir porque você esqueceu de subir o .css.

3. Especifique paleta + tipografia + tom. "Paleta: fundo #fefefe, texto #1f2937, destaque #2563eb. Fonte: Inter. Tom: profissional mas próximo, sem jargão" é preciso. O ChatGPT aplica exatamente o que você pede.

4. Liste seções obrigatórias com o conteúdo de cada uma. Não diga "site para clínica" — descreva: "Hero (nome, tagline, botão), Especialidades (5 cards), Equipe (3 médicos: foto, nome, CRM), Convênios, Depoimentos (3), Localização, Contato". Estrutura explícita = resultado fiel.

5. Peça mobile-first explicitamente. "Mobile-first com breakpoints em 640px, 768px e 1024px" garante que fica bom no celular. O ChatGPT já costuma incluir media queries, mas pedir explicitamente eleva a qualidade.

6. Use o Canvas para ajustes, não regere do zero. Pedir "altera só X" no chat tradicional muitas vezes faz o ChatGPT regerar tudo. No Canvas, ele de fato edita pontualmente.

7. Termine o prompt com um checklist. Adicione: "Inclua meta tags SEO (title, description) e Open Graph. Use HTML semântico. Otimize acessibilidade (alt em imagens, contraste WCAG AA)." Eleva qualquer site de "tá funcionando" para "tá bem feito".

Se preferir começar de um design pré-pronto, dá uma olhada nos templates HTML prontos — você clona um, edita no navegador e publica.

ChatGPT vs Claude vs Gemini — qual usar quando

Se você está decidindo qual IA usar, aqui está a comparação honesta. Cada uma brilha em algo diferente — não existe "a melhor" universal.

Critério	ChatGPT	Claude	Gemini
Velocidade de iteração	Excelente com Canvas	Excelente em conversas longas	Muito boa
Qualidade do código HTML	Boa, melhora com prompt detalhado	Excelente — código limpo e semântico	Boa para sites simples
Geração de imagens	DALL-E nativo, no mesmo chat	Não tem	Imagen integrado
Memória entre sessões	Sim (lembra preferências)	Não no grátis	Limitado
Ecossistema (plugins, GPTs)	O maior	Menor, mais focado	Integrado com Google
Plano grátis utilizável	Sim, GPT-4o limitado	Sim, generoso	Sim, mais generoso
Melhor para	Workflow completo + imagens originais	Código limpo + projetos longos	Velocidade + integração Google

A verdade é que a qualidade do prompt importa mais do que a IA escolhida. Um briefing detalhado em qualquer uma das três gera resultado profissional. As diferenças aparecem em casos específicos:

ChatGPT ganha quando você precisa de imagens originais no mesmo fluxo (DALL-E) ou quando vai iterar muito visualmente (Canvas).
Claude ganha quando o foco é código limpo, semântico e fácil de editar depois — especialmente em projetos com 500+ linhas. Veja o guia completo de criar site com o Claude.
Gemini ganha quando você quer velocidade pura e já está no ecossistema Google. Veja o guia de criar site com o Gemini.

Para um comparativo mais amplo cobrindo todas as IAs disponíveis, veja o comparativo completo de 7 IAs pra criar sites. Resumo prático: use a que você já tem login. As três são boas o suficiente para um site bem-feito.

Como publicar o site no Htmly em 10 segundos

Depois de gerar e ajustar o site no ChatGPT, publicar é a parte mais fácil de todo o processo.

Arquivo único

Copie o código final do ChatGPT (ou baixe direto do Canvas)
Salve como index.html no seu computador
Acesse htmly.com.br
Arraste o arquivo para a área de upload
Pronto — você recebe um link compartilhável na hora

Sem cadastro, o site fica no ar por 1 hora (ótimo para testes rápidos). Com uma conta gratuita, você ganha:

Subdomínio personalizado — seunegocio.htmly.com.br em vez de hash aleatório
Site permanente — não expira
Analytics básico — quantas visitas e de onde vêm
Editor visual — clique no texto e edite direto no navegador

Para recursos extras como editor de código completo, domínio próprio (seunegocio.com.br) e remoção do badge "Made with Htmly", confira os planos pagos — começam em R$ 12/mês.

Múltiplos arquivos (HTML + CSS + JS separados)

Se o ChatGPT gerou os arquivos separados (raro com prompt pedindo "tudo em um arquivo", mas acontece):

Cria uma pasta no computador (ex: meu-site)
Salva cada arquivo dentro dela (index.html, style.css, script.js)
Compacta a pasta em ZIP
Arrasta o ZIP no Htmly

O Htmly extrai tudo automaticamente e identifica o index.html como página principal. Se você gerou imagens com DALL-E, baixa cada uma, coloca na mesma pasta (numa subpasta imagens/ se preferir organização) e referencia no HTML antes de zipar. Para sites estáticos com IA, é a melhor hospedagem de sites que você vai encontrar — publicar leva segundos e não exige configuração técnica.

O que fazer depois de publicar

Teste antes de compartilhar

Antes de mandar o link para todo mundo, abre no celular — mais da metade do tráfego que vai chegar no seu site vem de mobile. Confira também: links de WhatsApp abrindo no app, imagens carregando, formulários (se houver) realmente disparando algo (site estático não processa form sozinho — aponte para Google Forms, Typeform ou Formspree), e o preview de compartilhamento puxando título, descrição e imagem corretamente.

Se você gerou o site com DALL-E e tem dúvidas sobre o que fazer com as imagens depois, vale ler o guia de o que fazer depois que o ChatGPT criou seu site.

Coloque no Google

Seu site no Htmly é indexável por padrão. Para acelerar: cria conta no Google Search Console, adiciona a URL e solicita indexação. Pode levar horas a alguns dias. Passo a passo completo em como colocar seu site no Google.

Compartilhe e edite

Ter site é metade do caminho. Atrair visitas é a outra: link na bio (Instagram, TikTok, LinkedIn), assinatura de e-mail, QR Code em cartão de visita, Google Meu Negócio (essencial para negócios locais) e WhatsApp Business com link no perfil.

Para editar depois: o editor visual do Htmly permite clicar no texto e ajustar direto no navegador (grátis), ou você volta ao ChatGPT para pedir alterações no código e refaz o upload. Para negócios que atualizam com frequência, o editor inline dos planos pagos economiza tempo.

Perguntas frequentes

Preciso pagar pelo ChatGPT para criar site?

Não. O plano grátis permite gerar sites HTML completos, com limite diário no GPT-4o. O Plus (US$ 20/mês) libera Canvas e DALL-E sem limites — vale a pena se você cria sites com frequência ou precisa de imagens originais.

Canvas e DALL-E estão no plano grátis?

Sim, com limites. Canvas funciona no grátis com algumas mensagens por dia. DALL-E também, com 2-3 imagens por dia. Para projetos pontuais, o grátis basta.

O ChatGPT consegue criar site com login ou e-commerce?

Não diretamente. Ele gera código estático que roda no navegador. Para ter área de membros, banco de dados ou checkout, você precisa de plataforma específica (Shopify, WordPress, Webflow). Se o seu site só precisa mostrar informação e captar contato (90% dos casos), ChatGPT + Htmly resolve.

Posso usar imagens do DALL-E comercialmente?

Sim, segundo os termos atuais da OpenAI. As imagens podem ser usadas em sites comerciais e materiais de marketing. O que não pode é revender a imagem em si (ex: como NFT, como banco de imagens). Como termos podem mudar, vale conferir antes de usar em produto pago de alta visibilidade.

ChatGPT é melhor que Claude para criar site?

Depende do que você prioriza. ChatGPT vence em ecossistema (Canvas + DALL-E), Claude vence em código limpo e iteração em projetos longos, Gemini vence em velocidade. Para sites estáticos comuns, as três entregam resultado bom com prompt detalhado. Use a que você já tem login.

Como faço o site ficar bom no Google?

Três coisas: (1) HTML semântico (peça no prompt), (2) meta tags preenchidas (title, description ~150 chars, Open Graph), (3) submissão no Google Search Console. O Htmly já serve com SSL, CDN e velocidade boa. O resto é conteúdo: texto claro, palavras-chave naturais e alt descritivo nas imagens.

Crie seu site agora

O processo completo leva menos de 30 minutos:

Acesse chatgpt.com e faça login
Escreva um prompt detalhado descrevendo seu site (use o exemplo da personal trainer como base)
Itere com o ChatGPT até ficar do jeito que você quer (use Canvas se for ajustar muito, use DALL-E se precisar de imagens)
Copie o código e salve como index.html
Publique no Htmly — arrasta o arquivo e recebe seu link

Do zero ao site na internet — grátis, sem servidor, sem complicação. O ChatGPT gera o código e as imagens, o Htmly coloca no ar. Você cuida do que importa: o conteúdo do seu negócio.

Quer uma landing page que converte? Se o objetivo do seu site é vender, captar lead ou agendar consulta, prompt genérico no ChatGPT não basta. Nosso Gerador de Prompt para Criar Landing Page estrutura um briefing profissional em 7 passos e gera um prompt pronto para colar no ChatGPT (ou Claude, ou Gemini) com framework PAS+FAB, design system pixel-perfect e schema.org específico do seu nicho. É grátis.

Leia também: