Antes de ir direto para o AI Studio, peça ao próprio Gemini para criar um prompt detalhado. Um bom prompt gera código limpo que funciona de primeira.

Acesse ⟶ gemini.google.com, entre com sua conta e vá na opção 'REAL TIME' e fale a mensagem a mensagem abaixo:

"Olá Gemini!

"Gostaria que você criasse um prompt detalhado para a IA criar um site para o meu restaurantecom visual baseado em uma imagem.O site deve ser:- Feito em Next.js e tecnologias modernas- Totalmente responsivo- Visualmente bonito (UI/UX moderna)- Baseado em uma imagem de referência de layout"

Escolha um layout de referência no Dribbble

Com o prompt em mãos, você precisa de uma imagem de referência visual. O Dribbble é o melhor lugar para isso — é uma galeria de designs profissionais gratuita.

Acesse o link abaixo e escolha um design que combine com o seu projeto:

Foi usada a referência de um site de restaurante moderno com E-Commerce. Busque por "Food Restaurant Website" no Dribbble e filtre pelos mais recentes.

Acesse dribbble.com e pesquise pelo estilo do seu site

Clique no design que mais gostar e faça o download ou screenshot da imagem

Salve a imagem — você vai fazer o upload dela no AI Studio

Gerando o Site

Agora é hora de colocar o Gemini para trabalhar ! Abra o AI Studio e use o prompt gerado no passo 1, junto com a imagem de referência.

1Faça login com sua conta Google (gratuito)

2Clique em"New prompt"e cole o prompt gerado pelo Gemini

3Clique no ícone de imagem e faça o upload da referência do Dribbble

4Clique em"Run"e aguarde a geração do código

O AI Studio pode levar de 1 a 3 minutos para gerar um projeto completo em Next.js. Não feche a aba durante a geração.

Com o site gerado, você pode solicitar ajustes diretamente no chat. Por exemplo:

EXEMPLOS DE AJUSTE
"Mude a cor principal para vermelho escuro"
"Adicione uma seção de depoimentos de clientes"
"Deixe o header fixo ao rolar a página"

✅ link com desconto de 20% da Hostinger SITES

https://krtnfq.short.gy/iALNks

✅ link com desconto de 20% da Hostinger VPS

https://bit.ly/4hhXoJR Enviado para o Github:

O GitHub funciona como um "Google Drive para código". Você precisa de uma conta para armazenar o projeto gerado e conectá-lo ao serviço de hospedagem.

Crie uma conta gratuita no GitHub (use o mesmo e-mail do Google, fica mais fácil)

No AI Studio, clique em configurações (canto superior direito) e conecte to GitHub.

Autorize a conexão entre AI Studio e GitHub

Crie um novo repositório com o nome do seu projeto (ex:meu-restaurante)

Confirme o envio do código — o repositório ficará disponível em github.com/seu-usuario

Publicando na Hostinger

Para publicar um site em Next.js você precisa de uma hospedagem que suporte Node.js. A Hostinger tem o plano Business que cobre isso — e ainda inclui 5 e-mails profissionais com o domínio da sua empresa.

Acesse a Hostinger pelo link com desconto especial:

https://krtnfq.short.gy/iALNks

No painel da Hostinger, clique emSites→Node.js

Selecione o planoBusiness— único que suporta Next.jsobrigatório

Conecte o repositório GitHub criado no passo anterior

Configure o domínio (use um existente ou registre um novo)

Clique em Deploy— em minutos seu site estará no ar

Bônus especial

Além do deploy de Next.js, o plano inclui 5 e-mails com sua marca — ex: contato@seurestaurante.com.br. Isso passa muito mais credibilidade aos seus clientes.

Explorando Criar site com IA