Avante Digital2 dias · 3 horas por dia
Crie seu primeiro site com IA.
Da ideia ao site: você orienta Claude ou Codex, avalia a prévia e pede melhorias em linguagem natural. Nenhuma edição de código é necessária.
IdeiaReferênciasPromptPréviaMelhorias
Resultado da turma: cada aluno sai com uma página de apresentação de um negócio, projeto ou portfólio criada por IA e revisada por ele.
IA
Plano de aula
Seis horas, um projeto.
Dia 1 · 180 minutosIdeia e primeira versão
Escolher o projeto, estudar referências, preencher o briefing, conversar com a IA e avaliar a primeira prévia.
Dia 2 · 180 minutosMelhorias e entrega
Definir o estilo, pedir ajustes, testar no celular, revisar informações e apresentar o site.
Ferramentas: Claude ou Codex com acesso para criar páginas, navegador para ver o resultado e este planejador de prompt. Não usaremos editor de texto.
Antes da aula: teste as contas e a conexão de internet. Peça aos alunos que entrem em uma ferramenta de IA antes de começar. Abra o planejador e o site de exemplo para a demonstração.
Dia 115 min
Comece com uma ideia real.
O que você gostaria de mostrar para alguém em uma única página?
Opção 1Negócio local
Ex.: salão, café, oficina.
Opção 2Portfólio
Quem sou, o que faço e como me encontrar.
Opção 3Evento ou projeto
Convite, informações e contato.
Primeira tarefa: diga o nome do projeto, para quem é e o que a pessoa deve fazer no site.
Como conduzir: peça respostas rápidas em voz alta. Conduza ideias amplas para uma página simples com objetivo e contato claros.
Dia 120 min
Você dirige. A IA constrói.
Você informaObjetivo e fatos
Nome, público, serviços reais e contato autorizado.
A IA criaPrimeira versão
Organiza textos, visual e página conforme o pedido.
Você confereQualidade
Lê, testa e pede correções até fazer sentido.
PedidoPréviaComentárioNova versão
Demonstração: mostre o
site de exemplo e peça à turma para identificar nome, oferta e botão principal. Esses são os elementos que a IA deverá criar.
Como conduzir: apresente a IA como ferramenta de produção e explique a responsabilidade de quem publica: conferir se as informações são verdadeiras e se o site funciona.
Dia 125 min
Pesquise referências com a IA.
Peça ideias e exemplos para o seu tipo de projeto. Abra as referências reais no navegador e observe o que funciona.
Vou criar um site de uma página para [tipo de projeto]. Sugira 3 tipos de sites para eu buscar como referência. Para cada um, diga o que observar na abertura, nos serviços e no botão principal. Se você tiver acesso à web, inclua links reais e identifique a fonte. Não invente links.
Procure
Uma frase inicial clara, seções fáceis de entender e contato visível.
Registre
Duas ideias que combinam com seu projeto e uma coisa que você faria diferente.
Regra da aula: use a referência para aprender. Peça à IA textos e visual próprios, sem copiar outra marca.
Como conduzir: mostre que sugestões de IA podem estar erradas. Abra os links recebidos e descarte os que não existem ou não servem. Sem navegação web na IA, use os termos de busca sugeridos.
Dia 125 min
Descreva o site antes de pedir.
Um briefing simples evita que a IA invente o negócio ou produza uma página genérica.
ConteúdoO que informar
Nome, público, oferta, diferencial e contato verdadeiro.
DireçãoO que escolher
Uma ação principal, o tom do texto e o estilo visual desejado.
Exercício: abra o
planejador de prompt, preencha os campos e leia o pedido gerado. Corrija dados imprecisos antes de enviar à IA.
Como conduzir: mostre o exemplo fictício do planejador. Depois peça que cada aluno preencha seu caso. Confira se a ação principal é específica, como “agendar horário”.
Dia 110 min
Pausa.
Na volta, vamos usar o briefing para gerar a primeira versão do site.
Ao voltar: deixe o planejador preenchido e a conversa com a IA pronta para receber o prompt.
Dia 135 min
Transforme o briefing em site.
Cole o prompt do planejador no Claude ou Codex. A IA deve entregar uma prévia ou um arquivo que você possa abrir, conforme os recursos disponíveis.
Copiar promptEnviar à IAEsperar a páginaAbrir prévia
Pedido vago
“Faça um site bonito.” A IA não sabe para quem, com qual conteúdo nem qual ação importa.
Pedido completo
Informa público, oferta, contato, estilo, seções e o formato da entrega.
Exercício: envie seu prompt e verifique se a primeira versão representa seu projeto. Peça uma prévia visual caso a IA mostre apenas código.
Como conduzir: demonstre uma geração inteira. Se a ferramenta não oferecer prévia, peça um arquivo HTML único para baixar e abrir no navegador. Não peça à turma que copie ou edite o código.
Dia 150 min
Converse para melhorar a primeira versão.
Olhe como visitante
- Entendi o que o projeto oferece?
- O botão principal está claro?
- Há informações inventadas?
- Falta alguma seção importante?
Peça uma alteração concreta
“Na primeira seção, troque a frase genérica por uma explicação de quem atendemos. Mantenha as cores e as outras seções.”
Revise a página que você criou. O problema que encontrei foi: [descreva o problema]. Corrija apenas isso e preserve o restante. Atualize a prévia ou o arquivo final. Depois me diga o que mudou em uma frase.
Meta do dia: uma primeira versão com conteúdo próprio, visualização aberta e pelo menos duas melhorias feitas por conversa.
Como conduzir: faça uma melhoria ao vivo. Reserve os últimos 10 minutos para uma revisão em duplas: uma pessoa vê o site da outra e sugere uma correção específica.
Dia 215 min
Volte à sua versão mais recente.
Abra a conversa e a prévia do dia anterior. Se necessário, envie o arquivo do site à IA para continuar a partir dele.
- O projeto e o público estão claros?
- As informações são verdadeiras?
- O botão principal leva ao lugar certo?
- Qual melhoria visual faria mais diferença?
Em duplas: um aluno vê a página do outro e responde: “O que este projeto oferece?” e “O que devo fazer agora?”.
Como conduzir: peça que todos encontrem sua versão mais recente antes de começar. Se alguém perdeu a conversa, use o prompt guardado no planejador para gerar novamente.
Dia 230 min
Defina um visual com palavras.
Escolha uma sensação para o site e descreva como ela aparece nas cores, letras, espaços e imagens.
CoresClima e leitura
Ex.: acolhedor, com fundo claro e verde escuro.
TipografiaTom
Ex.: títulos fortes e texto fácil de ler.
ComposiçãoOrganização
Ex.: abertura ampla e três cartões de serviços.
Proponha duas direções visuais para este site, considerando o público e a oferta já definidos. Descreva cores, estilo das letras, uso de imagens e organização da primeira tela. Não altere o site ainda. Vou escolher uma opção.
Exercício: peça duas opções à IA, escolha uma e explique por que ela combina com seu público.
Como conduzir: compare as duas opções de um aluno voluntário. Peça justificativas concretas: legibilidade, confiança, energia, proximidade ou clareza.
Dia 240 min
Peça mudanças que você consegue conferir.
Bom pedido
“Aplique a opção visual 2. Na abertura, destaque o botão de contato. Mantenha textos e seções. Mostre a nova prévia.”
Depois confira
- A mudança pedida apareceu?
- Algo importante desapareceu?
- O texto continuou correto?
- O botão ainda funciona?
Uma mudançaPréviaComparaçãoPróxima mudança
Exercício: faça duas rodadas: uma mudança visual e uma mudança no texto. Salve ou mantenha acessível a versão que funcionou melhor.
Como conduzir: se uma versão piorar, peça à IA para recuperar a anterior e aplicar somente o ajuste escolhido. Evite pedidos amplos como “refaça tudo”.
Dia 210 min
Pausa.
Na volta, vamos conferir a página em tela estreita e finalizar os detalhes.
Ao voltar: deixe a versão mais recente aberta na prévia ou no navegador.
Dia 230 min
Teste como se estivesse no celular.
Estreite a janela ou abra a prévia no telefone. Observe o título, os cartões, o menu e o botão.
- O texto está legível sem ampliar?
- Alguma parte sai da tela?
- O botão é fácil de tocar?
- O contato continua visível?
Na versão para celular, encontrei este problema: [descreva e, se possível, anexe uma captura de tela]. Corrija o problema mantendo o visual e o conteúdo atuais. Mostre a nova prévia em largura pequena e confirme o que mudou.
Exercício: encontre um problema na tela estreita e peça à IA que o resolva. Confira a nova versão.
Como conduzir: demonstre como estreitar a janela. Uma captura de tela pode tornar o pedido mais claro, mas não é obrigatória.
Dia 235 min
Faça uma revisão de verdade.
Conteúdo
- O título explica a página?
- Há erros de escrita?
- Contato e links estão corretos?
- Não há fatos inventados?
Uso
- Os botões funcionam?
- O celular mostra tudo?
- O texto tem contraste?
- É fácil achar o próximo passo?
Avalie a versão atual como um visitante. Aponte até cinco problemas concretos de clareza, leitura, navegação e celular. Não faça alterações ainda. Vou escolher quais corrigir. Não invente testes que você não executou.
Exercício: peça a avaliação da IA, escolha duas correções e depois teste pessoalmente os links e a versão final.
Como conduzir: a opinião da IA não substitui a inspeção do aluno. Confira no navegador, em especial informações reais, links de contato e legibilidade.
Dia 220 min
Mostre o que você criou.
Cada aluno ou dupla apresenta a página em até 2 minutos.
01Objetivo
Para quem é o site e o que a pessoa deve fazer nele?
02Uma escolha
Que pedido à IA mais melhorou o resultado?
03Uma melhoria
O que você ainda mudaria depois?
Fechamento: guarde o link da prévia ou baixe o arquivo final, conforme a ferramenta. Para publicar de forma aberta, peça à IA ajuda com a plataforma escolhida e confira o endereço e a visibilidade antes de compartilhar.
Como conduzir: ajuste o formato conforme o tamanho da turma: apresentação geral ou grupos de quatro. Encerre destacando boas decisões e capacidade de revisar, não apenas aparência.
Apoio para o professor
Roteiro e referências.
Dia 1 · 3 horas15 + 20 + 25 + 25 + 10 + 35 + 50 = 180 minIdeia, papel da IA, referências, briefing, pausa, primeiro prompt e revisão.
Dia 2 · 3 horas15 + 30 + 40 + 10 + 30 + 35 + 20 = 180 minRetomada, direção visual, iterações, pausa, celular, revisão e apresentações.