# Guia de prompts: como criar um site com o ChatGPT — processo passo a passo, prompts e limitações

> Guia prático completo para criar sites usando o ChatGPT: prompts prontos para estrutura, código e design, visão geral do ChatGPT Sites e análise das limitações.

ChatGPT pode atuar como um construtor de sites de duas formas fundamentalmente distintas: gerar, em modo de diálogo, o código completo (HTML, CSS e JavaScript vanilla), que você hospeda manualmente na plataforma escolhida, ou construir e publicar a página diretamente através da plataforma em nuvem ChatGPT Sites.

O primeiro método funciona em qualquer plano (incluindo o Free) e garante 100% de propriedade sobre o código. O segundo está disponível exclusivamente para assinaturas pagas e possui diversas restrições técnicas e legais rigorosas, das quais é necessário estar ciente antecipadamente.

---

## 1. Abordagens para criar sites via ChatGPT

A escolha da abordagem determina as ferramentas de deploy, os custos de assinatura e o controle sobre o recurso final.

### 1.1. Geração de código no chat versus hospedagem no ChatGPT Sites

- **Método 1: Geração de código no diálogo.** Você fornece um briefing estruturado, o ChatGPT gera um arquivo único ou modular com o código, você revisa o resultado localmente no navegador, faz ajustes iterativos e carrega a página no GitHub Pages, Cloudflare Pages ou Netlify. Funciona em todos os planos, e os arquivos finais pertencem inteiramente a você.
- **Método 2: ChatGPT Sites.** Um ambiente integrado dentro do ChatGPT Work, que não apenas gera o layout, mas também o hospeda automaticamente na infraestrutura em nuvem da OpenAI. Disponível somente em assinaturas pagas (sem acesso nos planos Free e Go), possui limitações geográficas (indisponível inicialmente na EEA, Suíça e Reino Unido) e proíbe qualquer atividade comercial.

> [!NOTE]
> Nuance importante: O ChatGPT é um diálogo textual, não uma tela visual. Construtores no-code clássicos (Webflow, Framer) demonstram mudanças no layout instantaneamente em tempo real. No ChatGPT, você controla o markup por meio de instruções textuais, portanto, o resultado final depende quase 100% da estrutura e precisão dos seus prompts.

### 1.2. Escolha do método ideal conforme o escopo do projeto

- **Geração de código no chat (Método 1)** é a melhor opção para landing pages, portfólios de especialistas, sites institucionais de negócios locais, páginas promocionais de eventos e blogs. O código não está vinculado ao ecossistema da OpenAI e é facilmente portável para qualquer servidor ou CDN.
- **ChatGPT Sites (Método 2)** foi desenvolvido principalmente para necessidades corporativas internas: dashboards analíticos, trackers de sprints, protótipos interativos rápidos e utilitários para equipes já integradas ao ecossistema ChatGPT Work.

---

## 2. Processo passo a passo para geração de site no chat do ChatGPT

Este método é o padrão universal de desenvolvimento web assistido por IA. Funciona nos planos Free, Plus, Team, Enterprise e Pro, aproveitando os pontos fortes naturais dos LLMs: escrita impecável de código semântico e copywriting sob especificações rigorosas.

### 2.1. Passo 1: Briefing-prompt estruturado

Não inicie o diálogo com solicitações vagas como "crie um site bonito". Um briefing profissional deve registrar seis parâmetros-chave: essência do negócio, perfil do público-alvo, única ação de conversão (CTA), ordem dos blocos, conceito estilístico e restrições técnicas.

```text
Act as a senior web designer and front-end engineer. I need a modern one-page website for [business name], a [business type] located in [city].

Audience: [who visits the site and what specific problem they need to solve].
Primary CTA action: [call now / book a consultation / request a quote / email].

Required Sections in order:
1. Hero section with strong conversion headline, concise value proposition, and prominent CTA button.
2. Services section (3 interactive cards with icons and key benefits).
3. About section focusing on trust, credentials, and experience.
4. Social proof / Testimonials (3 authentic reviews with client names and roles).
5. Contact section with clickable phone number, email, interactive address, and working working contact form.

Design Style: [clean and minimal / warm and welcoming / bold and high-tech].
Color Palette: [specific hex codes, or "curate a balanced accessible palette with dark charcoal background, off-white text, and an energetic accent"].
Typography: pairing from Google Fonts suitable for headings and body copy.

Technical Requirements:
- A single clean index.html file with embedded internal CSS (<style>) and vanilla JavaScript (<script>).
- Strictly mobile-first responsive grid layout.
- Valid semantic HTML5 tags (<header>, <main>, <section>, <article>, <footer>).
- Zero frameworks, zero build steps, zero external npm dependencies except Google Fonts.
- Fully accessible (WCAG AA compliant contrast, aria attributes, proper heading hierarchy).
- Include comprehensive SEO meta tags (title under 60 chars, description under 155 chars, Open Graph tags).

Output the complete, production-ready file without abbreviations or placeholders.
```

Cada parâmetro entre colchetes representa uma decisão estratégica de negócio. Quanto mais específicos forem os dados de entrada (por exemplo, "encanador emergencial em São Paulo, o visitante precisa agendar um técnico em 15 minutos"), maior será a qualidade e menor a genericidade do código gerado.

### 2.2. Passo 2: Aprovação da estrutura antes da geração do código

Para projetos que contenham mais de 2-3 telas, estabeleça obrigatoriamente um ponto de verificação intermediário. Aprovar a estrutura do texto leva 30 segundos, enquanto corrigir a arquitetura da página após a geração de 500 linhas de HTML exigirá um reinício completo.

```text
Before writing any code, propose a detailed structural outline for the webpage.

List every section sequentially. For each section, provide:
1. Proposed section ID and primary headline.
2. Content components and interactive elements.
3. Psychological intent: how this specific block moves the visitor closer to taking the primary action [primary CTA].
4. Any potential UX conflicts or gaps identified in my initial brief.

Do not write HTML/CSS yet. Wait for my explicit approval or revisions before proceeding to code generation.
```

Verifique cuidadosamente o plano proposto: o bloco de garantias está antes do formulário de pedido? O bloco de preços não se perdeu? A argumentação está logicamente organizada?

### 2.3. Passo 3: Geração do código e teste no navegador

Após receber sua confirmação, o ChatGPT criará o código completo da página. Salve o texto gerado em um arquivo `index.html` e abra-o no navegador (Chrome, Safari ou Firefox).

> [!TIP]
> O ChatGPT não vê a interface gráfica da página diretamente. O motor de renderização e o testador são você mesmo. Abra as ferramentas de desenvolvedor (`DevTools` -> `F12` ou `Cmd+Option+I`) e verifique obrigatoriamente o comportamento do site no modo móvel (largura 375–390px) antes de prosseguir para o lançamento.

### 2.4. Passo 4: Reescrita e refinamento do copywriting

O texto gerado pela inteligência artificial por padrão geralmente sofre de clichês burocráticos e "enchimento" pseudo-cotidiano, como: "Bem-vindo! Oferecemos soluções avançadas para seu sucesso." Execute uma segunda passagem que proíba categoricamente os clichês:

```text
Rewrite all marketing copy for this website.
Business name: [name]. Core service: [what you do] for [target audience].
Brand Voice: [direct, confident, transparent, professional without jargon].

Strict Copywriting Guidelines:
1. Hero Headline: under 10 words, focusing strictly on the visitor's tangible outcome, not internal processes.
2. Hero Subheadline: answers "What is this and who is it for?" in exactly one clear sentence.
3. Section Titles: must be descriptive and outcome-driven (e.g., "Emergency Repairs in Under 30 Minutes"), never generic (never "Our Services" or "About Us").
4. CTA Button Text: action-oriented and specific (e.g., "Calculate Repair Cost"), never vague ("Submit", "Learn More", "Click Here").
5. Strictly banned words and buzzwords: "solutions", "seamless", "cutting-edge", "passionate", "elevate", "game-changer", "world-class", "innovative".

First, provide 3 punchy headline alternatives. Once I select the winning variant, output the finalized copy blocks for each section.
```

### 2.5. Passo 5: Refinamento do design baseado em regras mensuráveis

Feedback vago ("deixe mais moderno e vibrante") leva a mudanças caóticas no layout. Um prompt de design eficaz opera com valores numéricos precisos: espaçamentos verticais, tamanhos de fonte, contraste e grids.

```text
Refine the CSS styling of this webpage without altering the approved copy or section hierarchy:

1. Layout & Whitespace:
   - Section vertical padding: minimum 96px top/bottom on desktop (>1024px), 48px on mobile (<768px).
   - Maximum content container width: 1200px centered with automatic margins and 24px horizontal gutter.

2. Color Palette & Restraint:
   - Strict 60-30-10 palette rule: 60% dominant background, 30% structural neutral, 10% high-contrast brand accent [hex code].
   - Eliminate unnecessary background card borders; replace with subtle 1px border (#e5e7eb or rgba(255,255,255,0.08)) or soft shadow.

3. Typography Scale:
   - Base body text: 18px with 1.65 line-height for optimal readability.
   - Distinct heading hierarchy with negative letter-spacing (-0.02em) on H1 and H2.

4. UI Hierarchy:
   - Exactly ONE primary button style across the page. Secondary CTAs must be ghost buttons or text links with clear hover underlines.

5. Accessibility:
   - Validate all color pairs against WCAG AA standards (minimum 4.5:1 contrast for normal text).

Return the full, updated index.html document.
```

### 2.6. Passo 6: Preparação para lançamento, SEO e hosting

Quando a interface e os textos estiverem alinhados, finalize a otimização técnica antes da publicação:

```text
The webpage design and copy are finalized. Prepare the code for production deployment:

1. SEO Optimization:
   - Write a compelling Meta Title (50-60 characters) containing the primary keyword "[keyword]".
   - Write a Meta Description (140-155 characters) with clear value proposition and call to action.
   - Add Open Graph meta tags (og:title, og:description, og:type, og:image placeholder).
   - Add Twitter Card meta tags.
   - Ensure every <img> element has a descriptive, keyword-rich alt attribute.

2. Code Hygiene:
   - Strip all internal console.log statements, unused CSS classes, and development comments.
   - Ensure smooth scroll behavior (scroll-behavior: smooth).

3. Deployment Guide:
   - Provide concise, step-by-step instructions for deploying this single file to [GitHub Pages / Netlify / Cloudflare Pages] with a custom domain, assuming zero prior server administration experience.
```

O deploy de um site estático de um único arquivo `index.html` no GitHub Pages, Netlify ou Cloudflare Pages é gratuito, leva cerca de 3 minutos e fornece automaticamente um certificado SSL gratuito (HTTPS).

---

## 3. Recursos e lançamento passo a passo no ChatGPT Sites

O ChatGPT Sites é um ambiente em nuvem para prototipagem rápida e publicação de aplicações web leves, desenvolvido pela OpenAI dentro do ecossistema ChatGPT Work.

### 3.1. Disponibilidade por planos e regiões

- **Assinaturas:** A funcionalidade Sites é fornecida aos usuários dos planos pagos (Pro, Pro Lite, Enterprise, Edu, Team e Plus). Os planos gratuitos (Free) e Go não têm acesso à hospedagem em nuvem Sites.
- **Restrições geográficas:** Durante o beta-teste, a ferramenta está bloqueada para usuários da Zona Econômica Europeia (EEA), Suíça e Reino Unido devido a requisitos locais de regulação de dados.
- **Direitos de administrador:** Em espaços corporativos (Enterprise), os direitos de criação e publicação de sites externos são controlados pelo administrador da organização.

### 3.2. Processo passo a passo de deploy no ChatGPT Work

1. Abra a interface do ChatGPT no navegador ou aplicativo desktop e navegue até o espaço de trabalho **Work** ou ative a ferramenta **Codex** (na janela de chat clássica, a funcionalidade Sites está ausente).
2. Formule a solicitação usando obrigatoriamente a palavra `website` ou a tag `@Sites`. Descreva o objetivo da página, a estrutura, os elementos interativos esperados e, se necessário, anexe arquivos de entrada ou tabelas.
3. Receba o link para uma prévia interativa privada (Preview), que é implantada nos servidores da OpenAI.
4. Faça ajustes através de solicitações textuais comuns no chat, observando a atualização do layout.
5. Fixe a versão de trabalho através do menu de gerenciamento e configure o nível de acesso: privado (apenas você), para equipe (espaço de trabalho) ou acesso público via link direto na internet.
6. Se necessário, conecte seu próprio domínio de segundo nível adicionando registros CNAME e TXT no painel de controle do seu provedor DNS.

---

## 4. Restrições técnicas e regulatórias do ChatGPT Sites

Apesar da conveniência do deploy automático, o ChatGPT Sites possui restrições fundamentais que excluem seu uso para projetos comerciais completos.

### 4.1. Matriz consolidada de restrições técnicas e legais

Abaixo está a matriz consolidada das restrições da plataforma e seu impacto prático no desenvolvimento:

![Matriz consolidada de restrições do ChatGPT Sites — ilustração 1](/api/guides-media/prompts/build-website-with-chatgpt-prompt-guide/images/build-website-with-chatgpt-prompt-guide-extra-01.webp)

| Parâmetro de restrição | Especificação no sistema | O que isso significa na prática |
| :--- | :--- | :--- |
| **Comércio proibido** | Proibição total de operações financeiras | Sites não pode processar pagamentos ou coletar dados de cartões de crédito. Nenhuma loja online ou reservas pagas. |
| **Runtime limitado** | Banco de dados Cloudflare D1 e armazenamento R2 | Sem suporte para backends Node.js arbitrários, PostgreSQL, contêineres Docker ou frameworks pesados de terceiros. |
| **Bloqueios regionais** | Ausência de licença em jurisdições específicas | O serviço está indisponível para usuários e desenvolvedores nos países da EEA, Suíça e Reino Unido. |
| **Grade tarifária** | Somente assinaturas premium | Usuários do plano gratuito Free e do plano Go estão totalmente privados de acesso ao Sites. |
| **Limites de requisições** | Análogo aos limites do OpenAI Codex | Ao atingir os limites de geração, o trabalho no site é temporariamente bloqueado; sites sob alta carga param. |
| **Cada deploy é produção** | Ausência de ambiente de staging separado | Qualquer atualização de código reflete-se imediatamente aos visitantes via endereço público. |
| **Política de conteúdo** | Moderação rígida da OpenAI Safety | É proibido hospedar dados médicos, questionários financeiros e conteúdo para menores de 13 anos, sob pena de remoção do site. |
| **Residência de dados** | Ausência de servidores soberanos | Os dados não estão cobertos por certificados corporativos de proteção, inviabilizando o uso em instituições financeiras e médicas. |

---

## 5. Erros comuns de desenvolvimento e recomendações de otimização

A prática mostra que 90% das tentativas malsucedidas de construir um site via ChatGPT decorrem da violação das regras básicas de interação com o modelo de linguagem.

### 5.1. Tentativa de caber todo o site em um único prompt gigante

Tentar descrever design, copywriting, scripts de calculadora, SEO e estrutura em uma única mensagem leva a rede neural a cortar caminhos: reduz blocos, escreve estilos primitivos ou insere comentários `<!-- Add more items here -->`. Divida o projeto em uma cadeia: briefing → estrutura → markup → copywriting → design → finalização.

### 5.2. Ignorar testes em telas móveis

O ChatGPT opera o código em abstração e não vê como os elementos se sobrepõem em uma janela estreita de smartphone (por exemplo, quando um header fixo cobre o título do hero block). Sempre verifique a página no modo de emulação de dispositivo móvel após cada rodada de ajustes.

### 5.3. Inserir fragmentos em vez do arquivo de código completo

Quando algo quebra no site, os usuários frequentemente copiam para o chat apenas 10 linhas do bloco quebrado. Privado do contexto geral das classes CSS e da estrutura dos containers pais, o ChatGPT entrega um patch que quebra blocos vizinhos. Transmita o arquivo completo com uma instrução clara:

```text
Something is visually broken: [describe symptom, e.g., the mobile hamburger menu overlaps the hero headline on screens narrower than 480px].

Here is my complete current index.html file:
[paste full file content]

Identify the root cause, explain the fix in one sentence, and return the complete corrected index.html file. Do not change any unrelated code or styling.
```

### 5.4. Publicar rascunho de texto AI sem edição

Os textos da primeira geração soam fluidos, mas carecem de concretude e sentido. Teste simples: substitua o nome da empresa concorrente no título. Se o texto servir igualmente para qualquer um no mercado — é lixo informacional que precisa ser reescrito seguindo o algoritmo do passo 4.

### 5.5. Ignorar completamente meta-tags e SEO básico

Um site sem tags Open Graph, `meta description` correto e atributos `alt` para imagens está fadado à ausência de tráfego orgânico e previews pouco atraentes em mensageiros. Adicione o bloco de SEO ainda na etapa do briefing inicial.

---

## 6. Comparação: ChatGPT versus construtores de IA especializados

O ChatGPT é uma ferramenta poderosa de geração de código, porém existe uma diferença funcional substancial entre o diálogo textual e os construtores visuais especializados de sites.

### 6.1. Tabela comparativa de recursos chave

| Critério de avaliação | Geração de código no ChatGPT (Método 1) | Plataforma ChatGPT Sites (Método 2) | Construtores de IA especializados (Framer, Webflow, Wix Studio) |
| :--- | :--- | :--- | :--- |
| **Tela visual (WYSIWYG)** | Ausente (trabalho às cegas via código) | Apenas preview básico em nuvem | Editor drag-and-drop interativo completo |
| **Velocidade de deploy** | 5–10 min (upload manual para hosting) | Imediato em 1 clique | Imediato em 1 clique |
| **Suporte a e-commerce** | Necessária integração de backend externo | Rigorosamente proibido | Completo (carrinho, gateways de pagamento, pedidos) |
| **Flexibilidade e posse do código** | 100% autonomia (arquivos com você) | Infraestrutura fechada da OpenAI | Exportação de código em planos Pro |
| **Custo operacional** | Gratuito (mesmo no plano Free) | Requer assinatura Plus / Work / Pro | De $15 a $40 por mês |

### 6.2. Critérios para escolher a ferramenta para tarefas de negócio

- Escolha a **geração de código no chat do ChatGPT** se você precisar de um site rápido, gratuito, leve de página única, que carregue em frações de segundo e pertença inteiramente a você.
- Escolha o **ChatGPT Sites** se você precisar implantar um dashboard interno ou protótipo para colegas dentro do espaço corporativo da OpenAI.
- Escolha **construtores de IA especializados** se o site exigir atualizações de marketing frequentes feitas por não técnicos, CMS dinâmico, recebimento de pagamentos por cartão ou animações interativas complexas.

---

## 7. Arquitetura do fluxo de trabalho e tomada de decisões

Para escolher o caminho ótimo de implementação do projeto sem desperdício excessivo de tempo e recursos, utilize a árvore de decisões:

### 7.1. Diagrama de seleção do pipeline de desenvolvimento

```mermaid
flowchart TD
    Start["Завдання: створити вебсайт за допомогою ШІ"] --> Q1{"Чи потрібен прийом онлайн-платежів або складна CMS?"}
    
    Q1 -- "Так (e-commerce / блог)" --> Dedicated["Спеціалізований AI-конструктор\n(Framer, Webflow, Shopify)"]
    Q1 -- "Ні (лендінг / дашборд)" --> Q2{"Чи потрібна публікація без власного хостингу всередині команди?"}
    
    Q2 -- "Так (внутрішній прототип)" --> Q3{"Чи є платний тариф ChatGPT та доступний регіон?"}
    Q3 -- "Так" --> Sites["ChatGPT Sites\n(Хмарний деплой OpenAI)"]
    Q3 -- "Ні (ЄЕЗ / Free тариф)" --> ChatCode["Генерація HTML/CSS в чаті ChatGPT\n+ Деплой на GitHub Pages / Netlify"]
    
    Q2 -- "Ні (публічний сайт з власним доменом)" --> ChatCode
```

Este pipeline minimiza riscos técnicos e garante a conformidade da stack escolhida com os requisitos do seu negócio.

---

## 8. Perguntas Frequentes (FAQ)

### 8.1. Respostas práticas às questões principais

> [!NOTE]
> **O ChatGPT é um construtor de sites completo?**  
> Não, o ChatGPT é um modelo de linguagem generativo que cria código de páginas a partir de um briefing textual. A ferramenta em nuvem ChatGPT Sites adiciona a função de hospedagem, mas devido à ausência de um editor visual drag-and-drop, toda a interação ocorre via prompts.

> [!TIP]
> **Qual prompt traz o melhor resultado na primeira tentativa?**  
> O melhor resultado é obtido com o briefing estruturado do passo 2.1, contendo descrição clara do negócio, audiência, ação alvo, blocos obrigatórios, requisitos de design e limites técnicos rígidos (um arquivo `index.html` sem bibliotecas externas).

> [!IMPORTANT]
> **É possível criar e publicar um site gratuitamente via ChatGPT?**  
> Sim. Você pode gerar o código completo do site no plano gratuito ChatGPT Free e depois hospedar gratuitamente o arquivo `index.html` resultante nas plataformas GitHub Pages ou Cloudflare Pages. O plano pago é necessário apenas para o serviço em nuvem ChatGPT Sites.

> [!WARNING]
> **Por que não é possível lançar uma loja virtual no ChatGPT Sites?**  
> A política de segurança da OpenAI proíbe estritamente o processamento de dados bancários e a realização de operações financeiras dentro da plataforma Sites. Para e-commerce, é necessário usar código autônomo com gateways de pagamento externos ou plataformas de comércio eletrônico.