Todos os artigos

Os melhores prompts de IA para criar um site em um único arquivo

A instrução mais útil que você pode acrescentar a qualquer prompt de site é: “como um único arquivo HTML autossuficiente, com CSS e JavaScript embutidos, sem dependências externas”. Essa única linha é a diferença entre um código que você cola e publica na hora e um código dividido em arquivos que precisa de build.

Por que o jeito de pedir importa

O ChatGPT, o Claude e o Gemini criam um site a partir de uma descrição simples, mas às vezes assumem por padrão um projeto de verdade: arquivos HTML, CSS e JavaScript separados, ou uma estrutura de framework. Não está errado, mas é atrito desnecessário se você só quer uma página para colar na hospedagem e compartilhar. Dizer ao modelo exatamente qual formato você quer elimina esse atrito antes que ele apareça.

A fórmula do prompt

Monte qualquer prompt de site em três partes:

1. O que é a página: seja específico sobre objetivo e conteúdo, não só o tema.
2. A restrição de formato: “como um único arquivo HTML com CSS e JavaScript embutidos, sem dependências externas”.
3. A direção de estilo: cores, clima ou uma comparação (“limpo e minimalista”, “tema escuro”, “como uma landing page moderna de SaaS”).

Prompts prontos para usar

Copie qualquer um para o ChatGPT, o Claude ou o Gemini e ajuste os detalhes:

Portfólio: “Crie um único arquivo HTML (CSS e JS embutidos, sem dependências externas) para o portfólio de uma designer freelancer. Inclua uma seção principal com nome e profissão, uma grade com 4 cards de projetos e uma seção de contato. Tema escuro, tipografia sem serifa limpa.”

Landing page: “Escreva uma landing page em um único arquivo HTML para um app de produtividade chamado Focus. Inclua título, três cards de recursos, uma seção de preços com dois planos e um formulário de inscrição por e-mail. Todo o CSS e JS embutido, sem dependências externas, responsivo para celular.”

Lista de espera: “Construa um único arquivo HTML para a página de lista de espera de uma startup em estágio inicial. Título, descrição em uma frase, um campo de e-mail com botão e um pequeno contador ‘Mais de 500 pessoas já entraram’. Somente CSS e JS embutidos.”

Página de evento: “Crie uma página de evento em um único arquivo HTML para um workshop de um dia. Inclua data, local, uma agenda curta e um botão de inscrição. Paleta de cores quentes, sem dependências externas.”

Jogo simples: “Construa um pequeno jogo de navegador em um único arquivo HTML autossuficiente, uma versão simples de [jogo]. Só JavaScript puro e CSS embutido, controlado pelas setas do teclado, sem bibliotecas externas.”

Três hábitos que deixam o resultado limpo

Sempre acrescente “responsivo para celular” se a página precisa funcionar no telefone; isso não é assumido por padrão. Peça mudanças em mensagens seguintes em vez de reescrever o prompt inteiro: os modelos lidam melhor com “deixe o botão azul e adicione um rodapé” do que com um segundo prompt gigante. E se o modelo devolver vários arquivos mesmo assim, uma linha resolve: “junte isso em um único arquivo HTML com tudo embutido”.

Perguntas frequentes

Qual é a instrução mais importante em um prompt de site?
Pedir explicitamente o resultado como um único arquivo HTML autossuficiente, com CSS e JavaScript embutidos e sem dependências externas. Essa instrução define se o resultado pode ser colado direto em uma hospedagem.

Funciona do mesmo jeito no ChatGPT, no Claude e no Gemini?
Sim. Os três assistentes de IA escrevem um site completo em um único arquivo HTML quando pedido; a estrutura de prompt deste guia funciona em todos.

E se a IA dividir o código em vários arquivos mesmo assim?
Peça diretamente para juntar tudo em um único arquivo HTML com o CSS e o JavaScript embutidos. Funciona de forma confiável mesmo depois.

Dá para criar algo interativo com esses prompts, não só uma página estática?
Sim. Um único arquivo HTML pode ter toda a lógica em JavaScript, então jogos, calculadoras e ferramentas interativas funcionam do mesmo jeito que uma landing page estática.