Por que este capítulo existe: os R$ 50 que quase me deram um infarto
O motivo para escrever este capítulo é simples: um amigo pagou 50 reais para alguém fazer uma simples roleta de sorteios em HTML.
Quando ouvi isso, quase tive um infarto.
Não que 50 reais seja caro, mas essa parada dá para fazer em 5 minutos com IA gratuita!
Sério, se você tiver essa necessidade, mesmo que me desse 50 reais de gorjeta e pedisse para te ensinar passo a passo, ainda seria melhor do que pagar esses serviços. Pelo menos meus tutoriais são gratuitos e explico cada etapa direitinho.
Então este capítulo é um extra especial, especificamente para te ensinar: como usar IA gratuita para criar uma página HTML simples, mas funcional.
Aviso Importante: Familiarize-se Primeiro com a Versão Web Gratuita
Antes de mergulharmos, quero enfatizar uma coisa:
As versões web de IA atuais já são muito poderosas. Não precisa de conhecimento em programação, não precisa instalar software, é só abrir o navegador e usar.
O que a versão web de IA consegue fazer?
- Conversar com você e responder perguntas
- Reconhecer imagens e analisar conteúdo
- Escrever código e criar páginas web
- Criar apresentações e relatórios
- Traduzir e resumir documentos
- E muito mais…
Minha sugestão: iniciantes devem primeiro dominar a IA web gratuita antes de considerar ferramentas avançadas como APIs.
Por quê? Porque a versão web:
- É totalmente gratuita (ou tem cotas generosas)
- É simples de usar, sem curva de aprendizado
- Já é poderosa o suficiente
- Permite perguntar diretamente à IA se tiver problemas
Agora vamos ao assunto principal: Use IA para Criar uma Roleta de Sorteios em HTML.
Use o AI Studio para Criar uma Página HTML
Passo 1: Acesse o Google AI Studio
Estamos usando o Google AI Studio, a plataforma gratuita oficial de IA do Google.
Por que escolhê-lo?
- Completamente gratuito
- Gemini 3 Pro é poderoso
- Adequado para tarefas complexas como criar páginas web
Passos:
- Abra https://aistudio.google.com
- Faça login com sua conta Google (requer VPN/proxy)
- Entre na interface principal
Passo 2: Selecione o Playground e o Modelo
Após o login, você verá a interface principal do AI Studio.
Passos:
- Clique em “Playground” no menu à esquerda
- No seletor de modelo no canto superior direito, escolha Gemini 3 Pro
- Não escolha Flash; o Pro é mais capaz
- Especialmente para tarefas complexas como escrever código
- Confirme que à esquerda está a interface de chat com uma caixa de entrada na parte inferior
Agora você está pronto para conversar com a IA.
Passo 3: Insira um Prompt para a IA Gerar a Página
Este passo é crucial: você precisa dizer claramente à IA o que deseja.
Quanto mais detalhado, melhor! Não diga apenas “Me ajude a fazer uma roleta de sorteios”; seja específico sobre:
- A aparência
- As funcionalidades
- Como usar
- O estilo
Exemplo de Prompt Completo
Copie o texto abaixo e cole na caixa de entrada do AI Studio:
Please help me generate a lottery wheel webpage.
If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.
Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again
Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop
After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability
Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again
Passos:
- Copie e cole o prompt acima na caixa de entrada
- Clique no botão “Executar” ou pressione Enter
- Aguarde a IA gerar (geralmente de 10 a 30 segundos)
Passo 4: A IA Retornará o Código HTML Completo
Após a IA terminar de gerar, você verá um grande bloco de código.
A resposta da IA geralmente inclui:
- Código HTML: um arquivo de página web completo
- Instruções de uso: como abrir e modificar
- Guia de personalização: como alterar prêmios e ajustar probabilidades
O código se parece com isto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottery Wheel</title>
<style>
/* Style code here */
</style>
</head>
<body>
<!-- Webpage content here -->
<script>
// Function code here
</script>
</body>
</html>
Não se assuste! A página já pode ser executada diretamente! Basta seguir as capturas de tela e clicar.
Passo 5: Modifique o Conteúdo da Página (Altere Prêmios, Ajuste Probabilidades)
A página gerada pela IA geralmente é bem completa, mas você pode querer:
- Alterar nomes dos prêmios
- Ajustar probabilidades de ganhar
- Mudar cores
Não se preocupe, você não precisa entender código. Basta continuar perguntando à IA!
Continue a Conversa, Deixe a IA Ajudar Você a Modificar
Passos:
- Não feche a janela de chat do AI Studio
- A IA se lembra da conversa anterior
- Você pode continuar fazendo perguntas abaixo
- Digite sua solicitação de modificação
Exemplo 1: Alterar Nomes dos Prêmios
Digite na caixa de entrada:
Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.
Itere até Ficar Satisfeito
Este é o processo central de criar coisas com IA:
- Diga claramente o que você quer
- A IA gera a primeira versão
- Teste, encontre problemas
- Conte o problema à IA, deixe ela corrigir
- Repita os passos 3-4 até ficar perfeito
Pontos-chave:
- Não tenha medo de tentar várias vezes
- Altere uma coisa de cada vez para facilitar o controle
- Se a IA mudar algo errado, diga “Não, volte para a versão anterior”
Passo 6: Baixe a Página Final
Agora você tem uma roleta de sorteios perfeita. Como baixá-la?
Basta clicar no botão de download, que será baixada para o seu computador, e você pode abrir e usar!
O que as Páginas HTML Podem Fazer? 10 Recomendações de Mini-Ferramentas Práticas
A esta altura, você deve estar pensando: além de roleta, que outras páginas posso fazer com IA?
A resposta é: quase qualquer mini-ferramenta simples!
Aqui estão 10 exemplos práticos que você pode pedir diretamente à IA para fazer:
1. Ferramenta de Tradução Online
Prompt:
Make an online translation webpage that supports Chinese-English translation with a clean interface.
2. Reconhecimento de Texto em Imagens (OCR)
Prompt:
Make a webpage that can upload an image, recognize text in the image, and allow copying.
3. Lista de Tarefas
Prompt:
Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.
4. Contagem Regressiva / Timer
Prompt:
Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.
5. Gerador de Senhas Aleatórias
Prompt:
Make a password generator that can set length and complexity, with one-click copy.
6. Calculadora de IMC
Prompt:
Make a BMI health calculator that inputs height and weight and displays health advice.
7. Gerador de QR Code
Prompt:
Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.
8. Seletor de Cores
Prompt:
Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.
9. Editor Markdown
Prompt:
Make a simple Markdown editor with input on the left and real-time preview on the right.
10. Controle de Gastos
Prompt:
Make a simple expense tracking webpage that can record income and expenses and display statistical charts.
Características comuns dessas ferramentas:
- Todas são arquivos HTML únicos
- Não precisam de servidor
- Basta abrir no navegador
- Completamente gratuitas
Perguntas Frequentes
P1: Não entendo nada de código, consigo mesmo fazer?
R: Sim, consegue! Tudo o que você precisa saber é:
- Copiar e colar
- Salvar um arquivo
- Abrir um arquivo com o navegador
Apenas esses três passos, até uma criança consegue.
P2: E se o código gerado pela IA não for perfeito?
R: Isso é normal! Continue a conversa com a IA:
- “Tem um bug aqui, clicar no botão não faz nada”
- “Essa cor é feia, mude para algo bonito”
- “Dá para adicionar um efeito sonoro?”
A IA vai melhorando com base no seu feedback.
P3: Posso usar páginas feitas com IA comercialmente?
R: Tecnicamente sim, mas observe:
- O código gerado por IA geralmente não tem restrições de direitos autorais
- Mas se for para um projeto de cliente, teste bem
- Para projetos comerciais complexos, ainda é recomendado contratar um desenvolvedor profissional
P4: Por que meu arquivo HTML não abre?
R: Motivos comuns:
- Extensão de arquivo incorreta: certifique-se de que é
.html, não.html.txt - Código incompleto: certifique-se de ter copiado todo o código
- Problema no navegador: tente outro navegador
P5: Posso usar no celular?
R: Sim! Dois métodos:
- Transfira o arquivo HTML para o celular e abra com um navegador móvel
- Faça upload em plataformas como Netlify e acesse via URL (recomendado)
P6: Quero modificar o código, mas não sei como?
R: Não modifique você mesmo! Pergunte à IA:
- “Quero mudar a cor de fundo para azul”
- “Quero aumentar a fonte do título”
- “Quero adicionar uma música de fundo”
Deixe a IA modificar para você, depois copie o novo código.
Resumo
Hoje você aprendeu:
- Como usar o Google AI Studio para gerar uma página HTML
- Como escrever prompts claros para dizer à IA suas necessidades
- Como salvar o arquivo HTML e abri-lo no navegador
- Como melhorar continuamente a página através da conversa
- Como compartilhar ou publicar sua página
Ideia central:
- Não precisa de conhecimento em programação
- Não precisa de dinheiro
- Só precisa saber se comunicar com a IA
- Faça uma ferramenta prática em 5 minutos
Da próxima vez que alguém te pedir para fazer uma página simples, você pode:
- Usar IA para fazer em 5 minutos
- Cobrar aqueles 50 reais (brincadeira)
- Ou ensinar a pessoa a fazer sozinha
Sério, pare de jogar dinheiro fora!