🖼️ Visual reference and rebranding

New here? Visual reference it’s showing the agent an existing website, layout, or image so it can understand the style you want—not the content, the style: where the blocks go, the size of the headings, the overall feel (understated, colorful, dense, airy). It's what an architect does when flipping through a home decor magazine before designing your house: they won't copy the cover house brick by brick — they gather ideas like "I like this living room layout," "I like this kind of lighting," and use them to design a new house of your own.

The agent sees a reference the same way it sees anything else in this track: through screenshot (a screenshot of the screen — module 5.3) or through a link it opens and analyzes. The difference between module 5.5 and 5.3 is what you do with what it learned: in 5.3 it compared its OWN work against the design. Here it looks at someone else's work someone else to learn a layout pattern — and this is a distinction that needs to be clear from the start, because it's easy to slip from "learning from" to "copying from."

Caption: the reference comes in from the left as a layout source only; the “brand filter” in the middle systematically changes the color, font, logo, and tone; what comes out on the right has the same arrangement but a new identity.

This is the explicit rule of Track 5, and it’s serious: reference is for learn and then build your own website with your own brand — never to copy someone else's entire website, including another company's design, text, and images. Copying a real brand's visual identity (its exact colors, logo, text, photos) may infringe intellectual property rights and, in practice, mislead visitors into thinking your site belongs to another company.

The good news: it’s easy to draw the line between the two once you know what to look for. Layout (section layout: large hero, then 3 cards, then testimonials), composition type (image on the left / text on the right) and navigation structure are widely used design patterns — no one "owns" the idea of having a menu at the top. But brand colors (the exact color palette that identifies that company), logo, original texts e photos/illustrations protected items are assets specific to that brand — those must not be touched.

New here? Rebranding, here, is the process of taking a reference layout and systematically replacing everything that identifies the original brand with your own: colors, typography, logo, and voice. It’s not “making do”—it’s a complete, deliberate replacement, point by point, until no trace of someone else’s identity remains.

New here? Color palette is the set of colors that represents your brand (usually 1 main color + 1–2 supporting colors + neutrals). Each color has a hex — a 6-character code like #0d9488 that identifies that exact shade, unambiguously. This is the code you give the agent—“blue” is vague, #2563eb it’s exact.

The reference reaches the agent in two ways: a link that it accesses and analyzes (using the same browser tools as module 5.3), or a screenshot that you attach directly to the conversation. A screenshot is more reliable when the reference site blocks automated access, or when you want to show just a specific section (the hero, not the whole site).

Caption: the ladder has 3 steps — choose, point out what to copy, explicitly point out what not to copy. Skipping step 3 is the most common mistake (see topic 6).

New here? Brand voice it’s how your company “speaks”—formal or casual, technical or simple, serious or humorous. Just as the palette needs exact hex codes, the voice needs a concrete description (“direct and jargon-free, as if explaining it to a friend” is better than “professional”).

A complete rebranding prompt has 4 ingredients: the reference (with scope), the hex palette, the brand name/logo, and the tone of voice. Leave one out, and the agent fills the gap with the module 5.1 "generic"—or worse, with a trait from the reference that should have been changed.

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.

The two mistakes that come up most often when someone starts using references: first, let the agent copy text and images — ask only to "make it look like this site" without explicitly saying that text/images/logo shouldn't be copied, and the agent (trying to follow your request faithfully) reuses what it found. Second, forget to change the palette — ask for a rebrand but don't provide the hex codes, so the agent keeps colors similar to the reference "because they worked with the layout."