Recursos de IA
Prompt, imagem, vídeo e agentes. Cada exercício tem um resultado próprio.
OFICINA INTERMEDIÁRIA · 2 HORAS
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.
Ebook, apresentação completa, prompts e conteúdos.
Abrir pasta no Drive ↗ACESSO À ATIVIDADE
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 ↗
RESULTADO DA AULA
A primeira parte reúne exercícios curtos de imagem, vídeo e agentes. Na segunda, cada etapa alimenta a mesma página HTML.
Prompt, imagem, vídeo e agentes. Cada exercício tem um resultado próprio.
Briefing, logo, identidade, mockup, conteúdo e HTML em uma sequência contínua.
Um index.html que abre no navegador e pode ser publicado depois.
0–120 MIN
Marque as etapas durante a aula. O progresso fica salvo neste navegador.
UMA AULA, TRÊS CAMINHOS
PARTE 2 · ETAPA 1
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.
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
Copie os prompts, anexe as referências e compare o resultado com o original.
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.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.
Escolha uma direção antes de gerar as variações.
Atue como diretora de marca. Use o briefing abaixo para desenvolver uma identidade visual original. ETAPA 1 — antes de gerar qualquer imagem, apresente: 1. Essência da marca em uma frase. 2. Três conceitos visuais distintos. 3. Risco de clichê em cada conceito. 4. Recomendação fundamentada. ETAPA 2 — após minha escolha, crie: - símbolo simples e legível; - versão horizontal e vertical; - versão monocromática; - variação para fundo claro e fundo escuro; - orientação de margem e tamanho mínimo. Restrições: não copiar marcas existentes, não usar texto ilegível, não inventar slogan e não misturar mais de dois conceitos. O logo deve funcionar em ícone de perfil, WhatsApp, impressão simples e fundo claro ou escuro. BRIEFING: [cole o JSON do negócio]
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.
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.
Combina câmera, movimento, tempo, luz e acabamento.
Macro · close-up extremo · aérea/bird’s-eye · pan · tracking · FPV · dolly in/out · orbit · rack focus
Slow motion/120fps · timelapse · hyperlapse · speed ramp · loop contínuo
Fotorrealista · editorial · comercial de produto · 3D/Octane · cyberpunk · documental
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.
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
Recebe um objetivo, lê contexto, escolhe etapas permitidas, usa ferramentas, pede aprovação e registra o que fez.
Artifact atende ao protótipo visual. Claude Code é o caminho de agente de programação que trabalha sobre arquivos e comandos.
Trabalha com arquivos, comandos e testes. É adequado quando o site virou projeto e precisa ser corrigido, validado e entregue.
Objetivo → Contexto → Ferramentas permitidas → Ações proibidas → Aprovações → Critérios de aceite → Registro finalObjetivo: 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
index.htmlSó agora reúna o briefing em JSON, a identidade visual e o conteúdo. Cole tudo no prompt abaixo e peça o 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]
BÔNUS DEPOIS DA AULA
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.
index.html e mantenha os ativos na mesma pasta.index.html e confirme a URL seu-projeto.pages.dev.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.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.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.contato@seudominio.com.br → Gmail.FONTES