📖 A revista de decoração, não a planta da casa do vizinho
Novo aqui? Referência visual é mostrar ao agente um site, um layout ou uma imagem já existente pra ele entender o estilo que você quer — não o conteúdo, o estilo: onde ficam os blocos, o tamanho dos títulos, o clima geral (sóbrio, colorido, denso, arejado). É a mesma coisa que um arquiteto faz folheando revista de decoração antes de projetar sua casa: ele não vai copiar a casa da capa tijolo por tijolo — ele reúne "gostei dessa disposição de sala", "gostei desse tipo de iluminação", e usa essas ideias pra desenhar uma casa nova, sua.
O agente enxerga referência do mesmo jeito que enxerga qualquer coisa nesta trilha: por screenshot (a captura de imagem da tela — módulo 5.3) ou por um link que ele acessa e analisa. A diferença do módulo 5.5 pro 5.3 é o que você faz com o que ele aprendeu: no 5.3 ele comparava o PRÓPRIO trabalho contra o design. Aqui ele olha o trabalho de outra pessoa pra aprender um padrão de layout — e essa é uma linha que precisa ficar clara desde já, porque é fácil escorregar de "aprender com" pra "copiar de".
Legenda: a referência entra pela esquerda só como fonte de layout; o "filtro de marca" no meio troca sistematicamente cor, fonte, logo e tom; o que sai à direita tem a mesma disposição, mas identidade nova.
💡 Conceito Principal
Referência visual = matéria-prima de layout. O que você constrói depois é seu — sempre passa pelo filtro de marca antes de publicar.
- •Um arquiteto olha 20 revistas e não constrói nenhuma das 20 casas — constrói a 21ª.
- •Sua referência pode ser um concorrente, um site que você admira, um exemplo de portfólio — desde que o resultado final não pareça o mesmo site.
⚖️ Inspirar-se × clonar: a linha que não se cruza
Esta é a regra explícita da Trilha 5, e ela é séria: referência é pra aprender e depois construir o próprio site com marca própria — nunca pra copiar um site alheio inteiro, com design, textos e imagens de outra empresa. Copiar a identidade visual de uma marca de verdade (as cores exatas dela, o logo, os textos, as fotos) pode ferir direitos de propriedade intelectual e, na prática, é enganar quem visitar seu site achando que é outra empresa.
A boa notícia: a linha entre os dois é simples de traçar quando você sabe o que olhar. Layout (disposição das seções: hero grande, depois 3 cards, depois depoimentos), tipo de composição (imagem à esquerda / texto à direita) e estrutura de navegação são padrões de design amplamente usados — ninguém é "dono" da ideia de ter um menu no topo. Já cores de marca (a paleta exata que identifica aquela empresa), logo, textos originais e fotos/ilustrações protegidas são ativos daquela marca especificamente — aí não se toca.
✓ Inspirar-se (ok)
- ✓Copiar a disposição: hero + 3 blocos + depoimentos + rodapé
- ✓Usar o mesmo tipo de composição (imagem grande de fundo, texto centralizado)
- ✓Adotar o "clima" visual: minimalista, denso, colorido, corporativo
- ✓Pegar a ideia de um recurso (carrossel, FAQ expansível) sem copiar o código-fonte protegido
✗ Clonar (não ok)
- ✗Usar as cores de marca exatas de outra empresa (o hex específico dela)
- ✗Copiar o logo, mesmo "adaptado"
- ✗Colar os textos originais dela (frases de efeito, descrições de produto)
- ✗Baixar e reusar as fotos/ilustrações protegidas do site de referência
⚠️ Atenção
Se ao terminar o site alguém que conhece a referência disser "isso é uma cópia de tal empresa", você cruzou a linha — mesmo que nenhum texto ou imagem tenha sido copiado literalmente. O teste é simples: o resultado tem que ter cara própria, não cara emprestada.
🎨 O que é rebranding, na prática do agente
Novo aqui? Rebranding, aqui, é o processo de pegar um layout de referência e trocar sistematicamente tudo que identifica a marca original pela sua: cores, tipografia, logo e tom de voz. Não é "dar um jeitinho" — é uma troca completa e deliberada, ponto por ponto, até nenhum traço de identidade alheia sobrar.
Novo aqui? Paleta de cores é o
conjunto de cores que representa sua marca (normalmente 1 cor principal + 1-2 de apoio + neutros). Cada cor tem
um hex — um código de 6 caracteres tipo #0d9488
que identifica exatamente aquele tom, sem ambiguidade. É esse código que você passa pro agente — "azul" é vago,
#2563eb é exato.
Cor sai, hex entra
Todo elemento que usava a cor da referência (botões, links, fundos, ícones) passa a usar a sua paleta, cor por cor.
Tipografia troca de família
A fonte do título e do corpo de texto vira a sua — mesmo que o "peso visual" (título grande e ousado, texto discreto) continue parecido.
Logo e nome próprios entram no lugar
Onde a referência tinha o logo dela, entra o seu (feito no módulo 5.6, "Pasta de marca").
Textos são escritos do zero, no seu tom
Nada de traduzir/parafrasear o texto da referência — cada frase do seu site é escrita pensando no seu negócio e no seu jeito de falar.
📎 Dando a referência certa ao agente
A referência chega ao agente de duas formas: um link que ele acessa e analisa (usando as mesmas ferramentas de navegador do módulo 5.3), ou uma captura de tela que você anexa direto na conversa. Screenshot é mais confiável quando o site de referência tem proteção contra acesso automatizado, ou quando você quer mostrar só um trecho específico (o hero, não o site inteiro).
Legenda: a escada sobe em 3 degraus — escolher, apontar o que copiar, apontar explicitamente o que não copiar. Pular o degrau 3 é o erro mais comum (ver tópico 6).
🔍 Por dentro
- Referência boa: um site do mesmo TIPO de negócio ou objetivo que o seu — landing de serviço, portfólio, loja — não precisa ser do mesmo nicho exato.
- Instrução de escopo: sempre diga em que PARTE olhar ("o cabeçalho e a seção de preços"), não "copie o site inteiro" — isso reduz a chance do agente puxar detalhes de marca junto.
📝 Instruções de marca: o prompt que faz o rebranding funcionar
Novo aqui? Tom de voz da marca é o jeito como sua empresa "fala" — formal ou descontraído, técnico ou simples, sério ou bem-humorado. Assim como a paleta precisa de hex exato, o tom de voz precisa de descrição concreta ("direto e sem jargão, como explicando pra um amigo" é melhor que "profissional").
Um prompt de rebranding completo tem 4 ingredientes: a referência (com escopo), a paleta em hex, o nome/logo da marca, e o tom de voz. Falta um desses e o agente preenche a lacuna com o "genérico" do módulo 5.1 — ou pior, com um traço da referência que deveria ter sido trocado.
Objetivo: pedir ao agente um rebranding completo, usando um site de referência só como fonte de layout e passando as 3 instruções de marca (paleta, nome/logo, tom).
Anexei uma captura de tela do site <referência.com>. Quero que você use APENAS o layout dessa referência como inspiração: a disposição do cabeçalho fixo, o hero com título grande + botão, e a seção de 3 colunas com ícones logo abaixo. NÃO copie cores, logo, textos ou imagens da referência — construa a versão da minha marca do zero, com estes dados: - Nome da marca: <Nome da Sua Empresa> - Paleta: cor principal <#0d9488>, cor de apoio <#38bdf8>, fundo <#0f172a> - Tom de voz: <direto e caloroso, como um consultor explicando pra um amigo, sem jargão técnico> - Textos: escreva do zero pro meu negócio de <descreva seu negócio em 1 frase>, não traduza nem parafraseie nada da referência Ao terminar, tire um screenshot do resultado e me mostre lado a lado com a referência, apontando o que veio do layout e o que é 100% meu.
Como verificar: compare o resultado com a referência — se alguém que não conhece nenhum dos dois sites olhar o seu e não reconhecer a marca original, o rebranding funcionou. Confira também se cada hex da paleta foi realmente aplicado (não só a cor principal).
💡 Dica Prática
Guarde esse bloco de "paleta + nome + tom" — ele é o esqueleto da "pasta de marca" que você vai formalizar no módulo 5.6, pra não precisar reescrever tudo isso a cada projeto novo.
🚫 Erros comuns e checklist final
Os dois erros que mais aparecem quando alguém começa a usar referência: primeiro, deixar o agente copiar textos e imagens — pedir só "faça parecido com este site" sem dizer explicitamente que textos/imagens/logo não entram na cópia, e o agente (que está tentando ser fiel ao pedido) reaproveita o que encontrou. Segundo, esquecer de trocar a paleta — pedir o rebranding mas não passar os hex, então o agente mantém tons parecidos com os da referência "porque combinavam com o layout".
✓ Prompt bem montado
- ✓Diz "apenas o layout" e lista o que exatamente copiar
- ✓Passa hex exatos da paleta, não nomes de cor vagos
- ✓Pede textos escritos do zero pro seu negócio
- ✓Pede confirmação visual comparando resultado × referência
✗ Prompt arriscado
- ✗"Faça igual a este site" sem nenhuma ressalva
- ✗Sem paleta em hex — o agente adivinha as cores
- ✗Sem pedir textos próprios — o agente reaproveita frases da referência
- ✗Sem revisão final comparando os dois lado a lado
✅ Checklist antes de publicar algo inspirado numa referência
- ☐ A paleta do resultado é a SUA, com hex conferidos — nenhuma cor "parecida" com a da referência ficou.
- ☐ O logo e o nome são 100% seus (feitos ou trocados, não os da referência).
- ☐ Todo texto foi escrito para o seu negócio — nenhuma frase é tradução/paráfrase da referência.
- ☐ Nenhuma imagem/foto/ilustração da referência foi reaproveitada.
- ☐ Você revisou lado a lado e confirmaria em voz alta: "isso é meu, inspirado em, não uma cópia".
Checagem rápida (opcional): o que é seguro reaproveitar de um site de referência?
🏋️ Exercício
Escolha um site que você admira (concorrente ou não). Tire um screenshot só do cabeçalho + hero. Monte o prompt de rebranding do tópico 5 usando esse screenshot, com uma paleta e nome fictícios (ou os seus, se já tiver). Rode no Claude Code e confira o resultado contra o checklist acima.
Guarde o hex da paleta que você usou — ele volta no módulo 5.6, "Pasta de marca".