A ALÉM DO PROMPT

OFICINA INTERMEDIÁRIA · 2 HORAS

Da ideia ao site:
IA aplicada na prática

Uma aula portátil para participantes que usam Gemini, Claude ou GPT. No final, cada pessoa terá briefing, identidade visual, conteúdo e um site HTML de uma página.

08 OUT 2026quinta-feira
120 MINUTOShorário a definir
ENTREGAindex.html
Ver roteiro da aula
02:00:00
Capa do livro Além do Prompt
Base didática: ebook Além do Prompt
QR code para o ebook, apresentação completa, prompts e conteúdos no Google Drive
Materiais da aula

Ebook, apresentação completa, prompts e conteúdos.

Abrir pasta no Drive ↗

ACESSO À ATIVIDADE

Aponte a câmera e comece

Este QR code abre a página interativa da aula no celular. O endereço também está escrito abaixo para quem preferir digitar.

site.wilson-faria.workers.dev ↗
QR code da atividade: site.wilson-faria.workers.dev

RESULTADO DA AULA

Primeiro as técnicas. Depois, um site.

A primeira parte reúne exercícios curtos de imagem, vídeo e agentes. Na segunda, cada etapa alimenta a mesma página HTML.

Briefing→Logo→Identidade→Mockup→Conteúdo→HTML
00–48 MIN

Recursos de IA

Prompt, imagem, vídeo e agentes. Cada exercício tem um resultado próprio.

48–120 MIN

Projeto do site

Briefing, logo, identidade, mockup, conteúdo e HTML em uma sequência contínua.

ENTREGA

Arquivo revisável

Um index.html que abre no navegador e pode ser publicado depois.

0–120 MIN

Roteiro cronometrado

Marque as etapas durante a aula. O progresso fica salvo neste navegador.

PARTE 2 · UM PROJETO CONTÍNUO: O SITE

UMA AULA, TRÊS CAMINHOS

O prompt é o projeto. A plataforma é o ambiente.

PARTE 2 · ETAPA 1

Construa o briefing do negócio

Comece pelo formulário. Ele gera o briefing em JSON para usar nas próximas etapas; ainda não é hora de pedir o site HTML.

↳

Alternativa: montar o briefing com IA

Se preferir conversar com GPT, Claude ou Gemini, use este prompt em vez do formulário. Não é necessário fazer os dois.

Ajude-me a organizar o briefing de um site de uma página.

Negócio: [NOME E TIPO].
Público: [PÚBLICO].
Oferta: [OFERTA].
Objetivo: [AÇÃO DESEJADA].
Fatos confirmados: [FATOS].

Entregue um JSON com esses campos, tom da marca, dúvidas do público e informações ausentes. Não invente preços, endereço, resultados ou depoimentos; marque lacunas com [CONFIRMAR].

PARTE 1 · RECURSOS GERAIS

Imagem e vídeo

Copie os prompts, anexe as referências e compare o resultado com o original.

01

Extrair o DNA visual em JSON

Transforma uma imagem de referência em direção visual estruturada.

Analise a imagem anexada como referência visual. Não identifique a pessoa e não deduza atributos pessoais.

Entregue somente um JSON válido com estes campos:
{
  "objetivo_visual": "",
  "composicao": {"enquadramento":"", "angulo":"", "posicao_sujeito":"", "espaco_negativo":""},
  "camera": {"distancia":"", "lente_aparente":"", "profundidade_de_campo":""},
  "iluminacao": {"tipo":"", "direcao":"", "contraste":"", "temperatura":""},
  "paleta": [{"hex_estimado":"", "funcao":""}],
  "cenario": {"ambiente":"", "elementos":"", "texturas":""},
  "styling": {"roupa":"", "acessorios":"", "acabamento":""},
  "tratamento": {"realismo":"", "grao":"", "nitidez":"", "clima":""},
  "elementos_a_evitar": []
}

Descreva apenas características visuais observáveis. Quando não for possível determinar algo, use null.
02

Aplicar o visual preservando o rosto

Usa uma foto autorizada como referência de identidade e o JSON como direção artística.

Use a FOTO 1 como referência obrigatória de identidade da mulher e o JSON fornecido como referência de direção visual.

Preserve com alta fidelidade: geometria facial, formato dos olhos, nariz, boca, mandíbula, proporções, idade aparente, tom e textura natural da pele, linha do cabelo, expressão e características individuais. Não afine o rosto, não aumente olhos ou lábios, não rejuvenesça e não substitua a pessoa.

Aplique somente: composição, iluminação, paleta, cenário, styling e tratamento descritos no JSON. Mantenha aparência fotográfica natural.

Se alguma instrução visual entrar em conflito com a preservação da identidade, priorize a identidade. Não adicione texto, logotipos ou marcas. Gere uma variação e informe qualquer elemento que não pôde ser preservado.

Confirme que possuo autorização para editar e usar a foto antes de iniciar.
02

Criar o conceito da logo

Escolha uma direção antes de gerar as variações.

03

Fechar a identidade visual

Transforma a logo em regras de cor, tipografia e uso.

Com o briefing e a logo escolhida, crie uma ficha visual para o site.

Defina: paleta com códigos HEX e função de cada cor; tipografia principal e alternativa segura; estilo de imagem; espaçamento; botões; regras de contraste e usos proibidos da logo.

Entregue em tópicos curtos e um JSON de design para colar no prompt do site. Se alguma escolha prejudicar a legibilidade, indique uma alternativa.
04

Gerar mockup com fidelidade

Aplica a marca sem deformar embalagem, fachada ou produto.

Crie um mockup fotorrealista usando o LOGO ANEXADO sem redesenhar, trocar letras ou alterar proporções.

Aplicação: [cartão / fachada / embalagem / uniforme / tela de celular].
Material real: [descrever].
Ambiente: [descrever].
Enquadramento: [frontal / 3/4 / close-up].
Iluminação: [softbox / natural / golden hour].

Preserve integralmente o arquivo do logo, suas cores e área de proteção. Respeite a física do material, a perspectiva e as sombras. Não acrescente slogan, telefone, endereço, selos ou textos não fornecidos. Gere uma apresentação principal e uma aproximação de detalhe.
05

Dirigir um vídeo com precisão

Combina câmera, movimento, tempo, luz e acabamento.

Câmera

Macro · close-up extremo · aérea/bird’s-eye · pan · tracking · FPV · dolly in/out · orbit · rack focus

Tempo

Slow motion/120fps · timelapse · hyperlapse · speed ramp · loop contínuo

Acabamento

Fotorrealista · editorial · comercial de produto · 3D/Octane · cyberpunk · documental

Luz

Golden hour · volumétrica/god rays · chiaroscuro · softbox · rim light · luz prática

Gere um vídeo de [DURAÇÃO] segundos, proporção [9:16 / 16:9 / 1:1].

SUJEITO: [quem ou o quê].
AÇÃO: [movimento principal].
AMBIENTE: [local, clima e elementos].
CÂMERA: [enquadramento + ângulo + movimento].
TEMPO: [velocidade normal / slow motion / timelapse].
ILUMINAÇÃO: [tipo, direção, contraste e cor].
ESTILO: [fotorrealista/editorial/3D/outro].
SEQUÊNCIA: descreva início, desenvolvimento e encerramento.

Preserve [produto/rosto/logo] sem alterações. Mantenha continuidade de forma, cor, mãos, objetos e cenário entre os quadros. Evite texto deformado, objetos surgindo, câmera instável e mudança de identidade.

Antes de gerar, transforme este briefing numa lista de planos com duração de cada tomada.
06

Gerar conteúdo com histórico e pesquisa

Separa fatos internos, fontes externas e hipóteses.

Crie o conteúdo do site em duas fases.

FASE 1 — HISTÓRICO E ARQUIVOS
Extraia somente fatos confirmados sobre: negócio, público, oferta, diferenciais, processo, perguntas frequentes, tom e chamada para ação. Liste lacunas. Não invente depoimentos, números, endereço, certificações ou resultados.

FASE 2 — PESQUISA ONLINE
Pesquise apenas o que precisa estar atualizado. Priorize fontes oficiais e registre título, URL, data da fonte e data da consulta. Separe claramente:
- fato do negócio;
- fato externo com fonte;
- hipótese;
- sugestão editorial.

ENTREGA
Produza: proposta de valor, hero, seção de serviços, processo em 3 passos, FAQ, sobre e CTA. Ao lado de cada afirmação factual, indique a origem. Se não houver evidência, use [CONFIRMAR].

MATERIAL DO NEGÓCIO:
[cole o briefing e trechos relevantes]

AGENTES EM 10 MINUTOS

Objetivo + ferramentas + limites + aprovação

CLAUDE

Chat, Artifact e Claude Code

Artifact atende ao protótipo visual. Claude Code é o caminho de agente de programação que trabalha sobre arquivos e comandos.

  • Na aula: Artifact ou HTML em texto
  • Para projetos: pasta, plano e testes
  • Revise permissões antes de agir
CODEX

Agente de construção

Trabalha com arquivos, comandos e testes. É adequado quando o site virou projeto e precisa ser corrigido, validado e entregue.

  • Peça plano e critérios de aceite
  • Restrinja a pasta do projeto
  • Exija evidências de teste
Objetivo → Contexto → Ferramentas permitidas → Ações proibidas → Aprovações → Critérios de aceite → Registro final
PROMPT PARA UM AGENTE
Objetivo: preparar um rascunho de [ENTREGA].
Fontes: somente [ARQUIVOS OU PASTA].
Pode: ler, criar rascunhos e testar.
Não pode: publicar, enviar mensagens, comprar ou apagar.
Antes de agir, mostre um plano. Pare se faltarem dados ou permissão. Ao terminar, liste arquivos usados, alterações, testes e dúvidas.

PARTE 2 · ETAPA 6 · ENTREGA FINAL

Gere um único arquivo index.html

Só agora reúna o briefing em JSON, a identidade visual e o conteúdo. Cole tudo no prompt abaixo e peça o HTML.

PROMPT PARA O SITE HTML
Crie um site de uma página para o negócio descrito abaixo.

ENTREGA TÉCNICA
- Não faça alterações cegamente. Primeiro investigue o projeto e o briefing, depois estabeleça um plano de alteração e somente então implemente.
- Entregue um único arquivo index.html completo.
- Inclua HTML, CSS e JavaScript no mesmo arquivo.
- Não use bibliotecas, fontes, imagens ou APIs externas.
- O arquivo deve abrir localmente com duplo clique.
- Use HTML semântico, layout responsivo e navegação por teclado.

ESTRUTURA
1. Cabeçalho com nome e navegação.
2. Hero com proposta de valor, explicação e CTA.
3. Serviços ou oferta em cards.
4. Processo em três passos.
5. Sobre com fatos confirmados.
6. FAQ com perguntas reais.
7. CTA final e rodapé.

DESIGN
- Aplique a identidade visual fornecida.
- Garanta contraste, foco visível e texto legível no celular.
- Use formas e gradientes em CSS como apoio visual.
- Evite aparência de template genérico e animações excessivas.

CONTEÚDO E LIMITES
- Use somente fatos confirmados.
- Não invente depoimentos, números, selos, endereço ou resultados.
- Onde faltar informação, use [CONFIRMAR] no código.
- Todos os botões devem ter ação clara; não crie links falsos.
- Peça o WhatsApp do negócio com DDD. Para números brasileiros, remova espaços e sinais; se não houver código do país, acrescente 55. Monte https://wa.me/NUMERO?text=MENSAGEM com a mensagem codificada para URL.
- Inclua um balão flutuante de WhatsApp no canto inferior direito, visível no celular e no desktop, com rótulo acessível, foco visível e abertura em nova aba. Não crie botão com número fictício ou não confirmado.

QUALIDADE
Antes de entregar, revise: largura de 320px, 768px e desktop; menu; botões; contraste; ortografia; conteúdo; console sem erros. Entregue primeiro o arquivo e depois uma lista curta do que foi verificado.

BRIEFING + IDENTIDADE + CONTEÚDO:
[cole aqui]

Conteúdo

Visual

Técnico

BÔNUS DEPOIS DA AULA

Do arquivo ao endereço próprio

Para usar um domínio .com.br, registre-o no Registro.br. Depois, configure o DNS na Cloudflare e conecte o endereço ao seu projeto Pages.

  1. SalvarNomeie o arquivo como index.html e mantenha os ativos na mesma pasta.
  2. TestarAbra localmente, teste celular, links, ortografia, acessibilidade e dados reais.
  3. Publicar no PagesEm Workers & Pages, crie um projeto por Drag and drop, envie a pasta que contém index.html e confirme a URL seu-projeto.pages.dev.
  4. Registrar o .com.brAcesse Registro.br, pesquise seudominio.com.br e confirme que está disponível. Entre ou crie sua conta, informe o titular com CPF ou CNPJ, aceite os termos e acompanhe as pendências e as instruções de pagamento. Se já possui o domínio, pule este passo. Pode manter o DNS padrão do Registro.br por enquanto.
  5. Preparar a CloudflareNo painel da Cloudflare, adicione seudominio.com.br como domínio/site. Antes de trocar o DNS, revise os registros importados e preserve os que já usa, especialmente os de e-mail. Anote os dois servidores DNS atribuídos à sua conta — eles são específicos do seu domínio.
  6. Alterar DNS no Registro.brEm Registro.br > Acessar Conta > selecione seu domínio > DNS, substitua os servidores atuais pelos dois nomes fornecidos pela Cloudflare e salve. Aguarde até a Cloudflare mostrar o domínio como ativo. O registro continua no Registro.br; o DNS passa a ser administrado na Cloudflare.
  7. Conectar ao PagesNo projeto em Workers & Pages, abra Custom domains > Set up a domain, informe seudominio.com.br e conclua a configuração. Se quiser usar também www.seudominio.com.br, adicione-o como outro domínio personalizado e teste os dois endereços.
  8. Encaminhar e-mailEm Compute > Email Service > Email Routing, ative o domínio, adicione e confirme o Gmail como destino e crie a regra, por exemplo contato@seudominio.com.br → Gmail.
  9. VerificarTeste HTTPS, domínio com e sem “www”, links do site e o recebimento de um e-mail externo no Gmail.

FONTES

Documentação das plataformas