Estudo de caso: um site de restaurante cinematográfico, gerado pelo Claude de primeira

“Ogień i Zioła” é um restaurante polonês fictício em Poznań, com site construído inteiramente pelo Claude a partir de um único prompt e publicado na Hostilo sem nenhuma correção. Diferente do nosso estudo de caso do Tetris, em que acertar a lógica levou várias rodadas, aqui tudo funcionou na primeira tentativa. Aqui está o prompt exato e por que essa diferença importa.

O briefing

O objetivo era um site de restaurante premium com cara de revista: abertura cinematográfica em tela cheia, navegação fixa, uma seção com a história da casa, abas de cardápio interativas em quatro categorias, perfil do chef, um widget de reserva com validação real do formulário, uma galeria feita só com CSS, horários e localização, inscrição na newsletter e rodapé. Tudo em um único arquivo HTML, sem bibliotecas externas, sem imagens e sem backend.

O prompt exato (copie e teste você mesmo)

Este é o prompt completo e sem edição enviado ao Claude, no original em inglês. Nada foi acrescentado depois; foi ele que gerou o site final:

Exemplo no ar

Veja o resultado: restauracja.hostilo.page

Por que funcionou de primeira

Nosso estudo de caso do Tetris precisou de várias rodadas de correção: lógica interativa de verdade (detecção de colisão, rotação, pontuação) tem casos extremos que só aparecem quando o código roda. O site do restaurante é outro tipo de projeto: muito conteúdo e layout, pouca lógica. As únicas partes interativas, troca de abas e validação de formulário, são padrões simples e conhecidos que qualquer bom modelo resolve com confiança.

O próprio prompt também fez boa parte do trabalho. Ele listava cada seção explicitamente em vez de descrever o site de forma vaga, deixava claras desde o início as restrições técnicas (um arquivo, sem bibliotecas externas, sem imagens, sem APIs) e definia o tom (“cinematográfico, elegante, acolhedor e premium”) em vez de deixar o estilo ao acaso. Essa combinação, briefing rico em conteúdo, restrições explícitas e tom claro, é exatamente o padrão do nosso guia de prompts para sites de um arquivo.

Do Claude a um link no ar

A publicação foi igual a qualquer outro exemplo deste blog, não importa o quanto a página fosse elaborada: copiar todo o HTML do Claude, colar no editor da Hostilo e salvar. O site entrou no ar na hora, sem build e sem configuração de hospedagem à parte para animações, abas ou validação. É tudo só HTML, CSS e JavaScript em um arquivo.

A lição

Nem todo projeto feito com IA precisa de iteração, e nem todo escapa dela; depende do que você pede. Páginas visualmente ricas e focadas em conteúdo, com interações simples e padrão (abas, formulários, rolagem suave), costumam sair de primeira, principalmente com um prompt detalhado e bem estruturado. Projetos com lógica de verdade, como jogos, calculadoras e qualquer coisa com estado e casos extremos, tendem a precisar de algumas rodadas. De qualquer forma, publicar continua sendo um passo único e rápido assim que o código funciona.

Perguntas frequentes

Qual ferramenta de IA criou este site de restaurante?
O Claude, a partir de um único prompt detalhado. O prompt completo está neste artigo.

Precisou de correções?
Não. Diferente do estudo de caso do Tetris, este site funcionou certo na primeira tentativa, sem prompts adicionais.

O Ogień i Zioła é um restaurante de verdade?
Não. É um restaurante fictício criado para mostrar o que um único prompt de IA consegue fazer em um site visualmente rico e cheio de conteúdo.

O formulário de reserva reserva mesmo uma mesa?
Não. Ele valida os campos obrigatórios e mostra uma mensagem de sucesso realista, tudo no navegador. Não há backend nem sistema de reservas por trás, porque o prompt não pediu.

Por que funcionou de primeira, enquanto o Tetris precisou de iterações?
Este projeto é principalmente conteúdo e layout com interações simples (abas, validação de formulário), enquanto o Tetris envolve lógica de jogo real com casos extremos como detecção de colisão. Projetos com muita lógica costumam exigir mais iterações do que os visuais.