Pular para o conteudo
MÓDULO 2.5

👁️ Visão pra interfaces + segurança defensiva

Use a visão do Fable 5 pra auditar telas, prints e criativos de verdade — e, em segurança, peça revisão defensiva em vez de exploração, pra não travar a resposta e ainda sair com um diagnóstico útil.

6
Tópicos
~35
Minutos
2.4
Pré-req
Prático
Tipo
Progresso: 0% 0 de 6
1

👁️ O Fable 5 enxerga a tela, não só o texto

🧠 Imagine assim: voce chama um designer de conversao pra olhar seu print e diz so "deixa mais bonito". Ele vai mexer na cor do botao e parar por ai. Agora imagine que voce diz "me conta pra onde o olho vai primeiro, o que confunde e o que corta a venda" — e o mesmo designer devolve um diagnostico de verdade. A diferenca nao esta na ferramenta, esta no pedido.

Modelos com boa capacidade visual conseguem analisar prints de tela, fotos de interface, PDFs de proposta e pecas de criativo do mesmo jeito que analisam texto: identificando hierarquia, ponto de atencao, ruido e ausencia. Isso muda o tipo de tarefa que vale a pena delegar — nao e so "gerar texto sobre a imagem", e avaliar a imagem como um revisor treinado avaliaria.

O erro mais comum e pedir pouco: "deixa mais bonito", "melhora esse design", "da uma olhada nisso". Sao pedidos vagos que devolvem respostas vagas — o modelo nao sabe contra qual criterio esta avaliando, entao chuta ajustes esteticos genericos (cor, espacamento) em vez de mirar no que realmente importa pro seu objetivo: a pessoa entender e agir.

A dica 9 desta trilha resolve isso trocando o pedido vago por um roteiro de auditoria: onde o olho para primeiro, o que confunde, o que gera desejo, o que gera duvida, o que cortar e o que mudar pra aumentar conversao. Seis perguntas objetivas — o prompt pronto vem no proximo topico.

Print da tela 👁️ entrada visual 1º olhar confusão desejo/dúvida o que cortar o que mudar Relatório 6 pontos objetivos

Leitura do diagrama: o mesmo print, quando passa pelas 5 perguntas certas em vez de "deixa mais bonito", sai como um relatorio de 6 pontos acionaveis.

Em 1 frase: o Fable 5 le a tela como um revisor treinado, mas so entrega isso se voce perguntar como um revisor treinado perguntaria.

2

🔍 O prompt de auditoria visual, pronto pra colar

🧠 Imagine assim: este nao e um trecho da doc oficial da Anthropic — e um template testado na pratica, pensado pra revisao de interfaces, prints e criativos. Anexe a imagem e cole o texto abaixo junto.

A ideia e simples: em vez de descrever o que voce quer em adjetivos ("mais limpo", "mais moderno"), voce descreve o objetivo de negocio da peca — "fazer uma pessoa entender rapidamente o valor da proposta" — e pede uma lista fixa de seis observacoes. Isso funciona pra landing page, tela de app, PDF de proposta comercial, post de anuncio, print de dashboard.

Objetivo: anexar um print/imagem e receber uma auditoria estruturada de clareza e conversao, em vez de um elogio ou ajuste estetico solto.
PT-BR · prompt testado na prática — dica 9
Analise este print ou imagem. Compare com o objetivo: fazer uma pessoa entender
rapidamente o valor da proposta.

Diga:
1. onde o olho para primeiro;
2. o que está confuso;
3. o que gera desejo;
4. o que gera dúvida;
5. o que cortar;
6. o que mudar para aumentar conversão.
Como verificar: anexe um print real (uma tela do seu produto, uma landing, um slide) junto com esse texto e confira se a resposta cita elementos concretos da imagem (posicao, cor, texto especifico) em cada um dos 6 pontos — nao frases genericas que serviriam pra qualquer print.

✗ "Deixa mais bonito"

  • Resposta generica de estetica (cor, espacamento)
  • Nao diz onde o olho vai nem o que confunde
  • Sem ligacao com conversao ou objetivo real

✓ Roteiro de 6 perguntas

  • Aponta elemento especifico da imagem em cada item
  • Separa "confuso" de "gera duvida" — sao coisas diferentes
  • Termina em acao: o que cortar, o que mudar

Em 1 frase: troque "deixa mais bonito" por seis perguntas objetivas e voce transforma opiniao vaga em auditoria acionavel.

3

🛡️ Pedir exploit trava a resposta; pedir revisão defensiva não

🧠 Imagine assim: "me ensina a invadir esse sistema" e "revisa esse codigo procurando falha de seguranca" pedem, no fundo, pra olhar pro mesmo problema — mas um deles soa a um pedido de ataque, e o outro soa a um pedido de defesa. A Fable 5 reage de forma bem diferente a cada um.

Quando o pedido e enquadrado como exploracao ou ataque — "como eu exploro essa falha", "me da o passo a passo pra invadir" — o modelo pode classificar isso como um pedido de dano cibernetico e recusar de vez, mesmo quando sua intencao real e proteger o proprio sistema.

Quando o mesmo assunto e enquadrado como revisao defensiva — "procure bugs, validacoes ausentes, exposicao de dados" — o modelo entende que o objetivo e proteger, nao atacar, e entrega uma analise completa: risco, arquivo afetado, causa provavel, correcao. E literalmente o mesmo assunto tecnico, com um enquadramento diferente na entrada.

Isso nao e um truque pra "enganar" o modelo — e o enquadramento correto pra quem esta, de fato, cuidando de um sistema proprio ou de um cliente. Trabalho legitimo de ciberseguranca (pentest autorizado, auditoria, revisao de codigo) e diferente de pedir uma receita de ataque generica, e a forma como voce escreve o pedido e o que deixa isso claro pro modelo.

Pedido de exploração Pedido de revisão defensiva "Como eu exploro essa falha X?" 🚫 bloqueado refusal · categoria cyber "Revise este código como defesa" ✅ diagnóstico risco + arquivo + correção sem exploit, sem passo a passo

Leitura do diagrama: o mesmo assunto tecnico, pedido como ataque, e bloqueado; pedido como revisao defensiva, vira diagnostico util — sem exploit e sem passo a passo de ataque.

⚠️ O que evitar no enquadramento

Pedir "passo a passo de ataque", "como escrever um exploit", "como invadir X" — mesmo com boa intencao — cai direto na categoria de recusa que protege contra dano cibernetico. O objetivo (proteger seu sistema) fica em segundo plano se o texto do pedido soa como pedido de ofensa.

Em 1 frase: mesmo assunto, enquadramento diferente — ataque trava, defesa entrega diagnostico.

4

🔐 O prompt de revisão defensiva, pronto pra colar

🧠 Imagine assim: de novo, template testado na pratica — nao citacao oficial. Cole junto com o codigo do servidor que voce quer revisar.

O prompt abaixo pede explicitamente uma revisao defensiva: bugs, validacoes ausentes, problemas de autorizacao, exposicao acidental de dados, falhas de configuracao, riscos operacionais. E fecha com duas negacoes claras — nada de exploit, nada de passo a passo de ataque — que reforcam o enquadramento do topico anterior.

Objetivo: revisar codigo de servidor em busca de riscos de seguranca reais, recebendo risco + arquivo + causa + correcao, sem disparar recusa e sem gerar material ofensivo.
PT-BR · prompt testado na prática — dica 10
Analise meu código de servidor como revisão defensiva. Procure bugs, validações
ausentes, problemas de autorização, exposição acidental de dados, falhas de
configuração e riscos operacionais.

Não crie exploit. Não mostre passo a passo de ataque. Apenas indique o risco, o
arquivo afetado, a causa provável e a correção defensiva.
Como verificar: cole junto com um arquivo de servidor real (rota de API, middleware de autenticacao, handler de upload) e confira se a resposta lista achados com arquivo/linha, causa provavel e correcao — sem nenhum trecho de exploit funcional ou receita de ataque.

🔗 Cruzamento com a trilha 1

Esta dica cruza direto com o módulo 1.6 da trilha 1, que explica tecnicamente a categoria de recusa cyber com respaldo oficial da doc da Anthropic refusals-and-fallback:

"The request could enable cyber harm, such as malware or exploit development. Benign cybersecurity work can also trigger this category."

Traduzindo: mesmo trabalho legitimo de ciberseguranca pode disparar essa categoria se o pedido soar como ataque. O prompt de revisao defensiva acima e literalmente a estrategia pratica para nao disparar esse refusal — ele descreve o mesmo módulo 1.6 do ponto de vista tecnico/API; aqui e a versao aplicada, pronta pra colar.

Em 1 frase: pedir revisao defensiva, com as duas negacoes explicitas, e a forma pratica de conseguir uma analise de seguranca real sem esbarrar no refusal cyber.

5

🧭 As duas dicas juntas: auditoria visual de um painel admin

🧠 Imagine assim: um dashboard interno mistura os dois mundos — e uma interface (dica 9) que pode estar vazando informacao sensivel na propria tela, e por tras dela existe codigo de servidor que decide o que aparecer ali (dica 10). Auditar so a interface, ou so o codigo, deixa metade do risco de fora.

Um caso realista: voce tem um painel de admin/dashboard interno e quer saber se ele esta expondo dados sensiveis na propria tela — email completo de cliente, token, chave de API, ID interno, campo de debug esquecido em producao. Isso e ao mesmo tempo um problema de interface (o que aparece pro olho) e um problema de seguranca (o que o servidor decidiu mandar pro navegador).

1

Tire o print do painel

Capture a tela como um usuario real veria — tabelas, modais, paineis de debug abertos

Inclua telas com dados reais (ou uma copia mascarada, se for compartilhar fora do time) — nao so a tela vazia, e nos estados que realmente aparecem no dia a dia.

2

Rode o prompt de auditoria visual (dica 9)

Mesmo texto do topico 2, mas com um adendo

Alem das 6 perguntas padrao, peca explicitamente: "aponte tambem qualquer dado que pareca sensivel e nao deveria estar visivel nessa tela (token, email completo, chave, ID interno)".

3

Ache o codigo por tras do que apareceu

Toda exposicao na tela nasce de uma rota ou query no servidor

Se a auditoria visual apontou um dado sensivel na tela, localize a rota/endpoint que devolve aquele campo — normalmente e um SELECT * generoso demais ou uma resposta de API sem filtro por permissao.

4

Rode o prompt de revisão defensiva (dica 10) nesse arquivo

Mesmo texto do topico 4, aplicado so no arquivo suspeito

O resultado combina os dois lados: "a tela X expoe o campo Y (achado visual) porque a rota Z devolve o objeto inteiro sem filtrar por permissao (achado de codigo) — corrija projetando o DTO de resposta".

Note que em nenhum momento voce pediu "como um atacante exploraria esse painel" — voce pediu clareza da interface e revisao defensiva do codigo. E exatamente essa combinacao que evita o refusal e ainda cobre o risco de ponta a ponta: da tela ate a linha de codigo que a alimenta.

Em 1 frase: auditoria visual acha o que vaza na tela; revisao defensiva acha por que o codigo deixou vazar — as duas dicas juntas cobrem o painel inteiro.

6

✅ Erros comuns e checklist rápido

🧠 Imagine assim: as duas dicas desta aula falham quase sempre pelo mesmo motivo — o pedido ficou vago ou ficou ofensivo demais. Este checklist e o antidoto rapido pros dois casos.

Antes de colar qualquer um dos dois prompts, confira estes pontos — sao os erros que mais fazem a dica 9 devolver opiniao vaga ou a dica 10 disparar recusa.

✗ Evite

  • "Deixa mais bonito" sem dizer o objetivo da peca
  • Pedir o print sem anexar a imagem de verdade
  • "Me ensina a explorar/invadir X"
  • Pedir "passo a passo" de qualquer coisa relacionada a ataque
  • Revisar so a tela ou so o codigo, nunca os dois juntos

✓ Faça

  • Diga o objetivo da peca + anexe a imagem real
  • Use as 6 perguntas fixas da dica 9, sempre nessa ordem
  • Enquadre seguranca como "revisao defensiva", nunca como ataque
  • Feche o prompt com as duas negacoes: sem exploit, sem passo a passo
  • Em telas com dados, cruze visual (dica 9) com codigo (dica 10)

Em 1 frase: objetivo claro + imagem real (dica 9) e enquadramento defensivo + duas negacoes (dica 10) resolvem quase todo erro comum desta aula.

🧾 Resumo do Modulo

Visao vira auditoria — as 6 perguntas fixas da dica 9 transformam "deixa mais bonito" num relatorio acionavel de qualquer print, tela ou PDF.
Enquadramento decide o refusal — pedir exploracao trava com refusal categoria cyber; pedir revisao defensiva do mesmo assunto entrega diagnostico completo.
Dois prompts prontos — auditoria visual (topico 2) e revisao defensiva de codigo (topico 4), testados na pratica.
As duas se combinam — auditoria de painel admin cruzando o que vaza na tela com o codigo que deixou vazar.

Proximo modulo:

2.6 — Loops com verificacao + memoria externa: como transformar revisao pontual em ciclo continuo, com criterio, teste e licao registrada.