Aula 01 · Branding AI

O workflow de
branding com IA
que ninguém
está ensinando

Do zero ao seu primeiro cartão de visitas profissional — logos, assinaturas, rubricas e monogramas com Claude + Recraft + HTML.

Vitor Coletty · 2026

Role para começar

Seção 00

00

Ferramentas

Tudo que você precisa instalado e configurado antes de começar. Nenhuma dessas ferramentas requer programação — apenas uma conta em cada.

2

Ferramentas principais

3

Outputs do workflow

01

Arquivo HTML próprio

Modelo de linguagem

Claude — Anthropic

Claude no Browser recomendado · Claude Desktop recomendado · Claude Code avançado · Chrome Extension intermediário

Geração vetorial

Recraft

Geração de SVGs vetoriais — assinaturas, monogramas, rubricas · Modelo: V4.1 Pro Vector

Navegador

Chromium-based — obrigatório para impressão

Chrome · Comet Browser (Perplexity — usado pelo Vitor) · Safari (Apple) · Brave · Opera

Editor de texto

Editor de Texto (Apple) ou similar

Para abrir arquivos SVG e HTML e copiar o código — Bloco de Notas no Windows

Notas e workspace

Notion

Ferramenta usada para disponibilizar os materiais das aulas

Transcrição de áudio

Wispr Flow

Transcrição de áudio em tempo real — usado durante a gravação dos vídeos

Impressão gráfica

Printi

Cartões de Visita — gabarito 90×48mm paisagem · outros materiais gráficos disponíveis

Notas

Seção 01

01

Criação de documentos
HTML de teste

Antes de inserir assinaturas em documentos reais, criamos documentos-demonstração em HTML — contratos, prescrições, laudos. O modelo de linguagem gera o documento inteiro a partir de um único prompt. Esses arquivos servem como contexto visual para as etapas seguintes.

Prompt 1.1 — Contrato de prestação de serviços médicos

Prompt 1.1

        Crie, em HTML, um breve contrato fictício com dados fictícios de prestação de serviços médicos para uma clínica, como médico generalista ou em clínica médica com os campos ao final para a assinatura de ambas as partes **com paginação A4 pronto para impressão/salvar como PDF, sem cortes de conteúdo ao final de cada página nas bordas inferiores**, com linhas para assinaturas repousando sobre os nomes das partes contratante e contratada e espaço generoso acima dessas linhas para assinatura manuscrita futura nesses espaços pelas partes. **A estética deve ser minimalista, "fine lines", Times New Roman + fonte secundária, B&W, sem emojis, referências visuais - shadcn/ui + Notion**. Retorne apenas o HTML final e nada mais.
      

Enviar em nova janela do Claude · Output: arquivo HTML pronto para abrir no navegador

Prompt 1.2 — Prescrição médica C1

Prompt 1.2

        Crie, em HTML, uma prescrição médica do tipo C1 brasileira fictícia com dados fictícios, se assimilando ao máximo a uma prescrição real de dipirona para febre e soro fisiológico para lavagem nasal, para tratamento sintomático de síndrome gripal/resfriado com o campo centralizado ao final para a assinatura do médico **com paginação A4 pronto para impressão/salvar como PDF, sem cortes de conteúdo ao final de cada página nas bordas inferiores**, com linha para assinaturas repousando sobre o nome do médico, número de CRM e especialidade abaixo e espaço generoso acima dessas linhas para assinatura manuscrita futura nesses espaços pelo médico. **A estética deve ser minimalista, "fine lines", Times New Roman + fonte secundária, B&W, sem emojis, referências visuais - shadcn/ui + Notion**. Retorne apenas o HTML final e nada mais.
      

Enviar em nova janela do Claude · Variação: adapte para qualquer especialidade médica

Esses prompts podem ser adaptados para qualquer tipo de documento profissional — laudos, atestados, contratos jurídicos, propostas comerciais, apresentações. O padrão estético shadcn/ui + Notion é deliberado: produz documentos limpos, imprimíveis, de alta legibilidade.

Notas

Seção 02

02

Font Signature
Previewer

Ferramenta HTML própria para visualizar e selecionar fontes caligráficas do Google Fonts como assinaturas digitais. O output é um prompt estruturado, pronto para ser colado no Claude junto ao documento já criado na etapa anterior.

↗ Font Signature Prompter Abrir ferramenta

Preencha o campo de nome, escolha a fonte que melhor representa o estilo do profissional e copie o bloco de prompt gerado automaticamente pela ferramenta. Cole em seguida no Claude, na mesma janela do documento da etapa anterior.

Prompt 2.1 — Implementar fonte de assinatura (nome completo)

Prompt 2.1

        Implemente o seguinte texto no seguinte local/contexto: Área de assinatura de Nome Sobrenome Completos no documento.

Texto: "Nome Sobrenome Completos"

Utilize exatamente a seguinte fonte, sem substituições:
— Nome: Herr Von Muellerhoff
— Link Google Fonts: https://fonts.google.com/specimen/Herr+Von+Muellerhoff?preview.text=Vitor%20Coletty&preview.script=Latn
— Importação CSS:
  @import url('https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&display=swap');
— Aplicação CSS:
  font-family: 'Herr Von Muellerhoff', cursive;

Garanta que a fonte está sendo carregada via Google Fonts e aplicada corretamente ao elemento.
      

Campos em destaque devem ser substituídos pelos dados reais · Fonte e links são gerados pela ferramenta

Prompt 2.2 — Implementar fonte de assinatura (com título)

Prompt 2.2

        Implemente o seguinte texto no seguinte local/contexto: Área de assinatura de Nome Sobrenome Completos no documento.

Texto: "Dr. Nome Sobrenome"

Utilize exatamente a seguinte fonte, sem substituições:
— Nome: Mrs Saint Delafield
— Link Google Fonts: https://fonts.google.com/specimen/Mrs+Saint+Delafield?preview.text=Vitor%20Coletty&preview.script=Latn
— Importação CSS:
  @import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');
— Aplicação CSS:
  font-family: 'Mrs Saint Delafield', cursive;

Garanta que a fonte está sendo carregada via Google Fonts e aplicada corretamente ao elemento.
      

Variação com título profissional · Trocar fonte e dados conforme o resultado do previewer

Notas

Seção 03

03

Cartão de Visitas
Editorial

O prompt completo para criação de um cartão de visitas profissional pronto para impressão na gráfica — gabarito Printi 90×48mm. Preencha os campos marcados com >>> antes de enviar ao Claude em uma nova janela.

editorial-goldpreto + dourado champagne

editorial-burgundypreto + bordô envelhecido

editorial-silvergrafite + prata frio

editorial-emeraldpreto + verde joalheria

custompaleta personalizada em CSS

Prompt 3 — Cartão de Visita Editorial Profissional

Prompt 3 · Preencha os campos >>> antes de copiar

        # CARTÃO DE VISITA EDITORIAL PROFISSIONAL

---

## 1. DADOS A SEREM PREENCHIDOS (após os indicadores ">>>")

### 1.1 Identidade do profissional/empresa
```
Nome completo (com ou sem título) >>>
Iniciais para monograma (2 a 3 letras) >>>
Iniciais para marca tipográfica do topo (2 letras separadas por ponto médio) >>>
```

### 1.2 Profissão e especialização
```
Profissão principal (caixa-baixa, p/ tagline curta no verso) >>>
Linha de atuação (caixa-alta, p/ frente, máx. 40 caracteres) >>>
Identificador profissional (registro/conselho) >>>
```

### 1.3 Localização
```
Cidade e UF (formato curto, caixa-alta) >>>
```

### 1.4 Contatos (verso)
```
Telefone principal (com DDD entre parênteses) >>>
E-mail >>>
```

### 1.5 Paleta de cores (uma das opções pré-definidas abaixo, ou customize)
```
Paleta >>>
```
**Opções disponíveis:**
- `editorial-gold` — fundo preto profundo + dourado champagne (advocacia, consultoria, finanças)
- `editorial-burgundy` — fundo preto profundo + bordô envelhecido (medicina, vinhos, gastronomia)
- `editorial-silver` — fundo grafite + prata frio (arquitetura, tecnologia, design)
- `editorial-emerald` — fundo preto profundo + verde escuro joalheria (consultoria estratégica, luxo)
- `custom` — especifique abaixo no formato `--bg-dark: #XXX; --gold: #XXX; --gold-light: #XXX; --gold-deep: #XXX; --ivory: #XXX; --ivory-soft: #XXX;`

---

## 2. ESPECIFICAÇÕES TÉCNICAS OBRIGATÓRIAS

### 2.1 Dimensões e impressão (Gabarito Printi 9×4,8cm paisagem)
- **Tamanho final (corte):** 90 × 48 mm
- **Sangria:** 3 mm em cada borda — **arquivo total: 96 × 54 mm**
- **Margem de segurança:** 3 mm a partir da linha de corte (conteúdo importante dentro de 84 × 42 mm)
- **`@page`:** `size: 96mm 54mm; margin: 0;`
- **Renderização de cores:** `-webkit-print-color-adjust: exact` e `print-color-adjust: exact` em TODOS os elementos
- **Quebras de página:** `page-break-after: always` entre frente e verso

### 2.2 Tipografia obrigatória (Google Fonts)
- **Importar via `<link href="https://fonts.googleapis.com/...">`:**
  - `Cormorant Garamond` — pesos 300, 400, 500
  - `Cinzel` — pesos 400, 500
- **NÃO usar:** Herr Von Muellerhoff, Great Vibes, Allura, ou qualquer fonte script genérica
- **Aplicações:**
  - Nome principal: Cormorant Garamond Light (300), caixa-alta, tracking ~0.22em, `white-space: nowrap`
  - Marca tipográfica do topo (ex.: "J · S"): Cinzel 400, ~5.5pt, tracking 0.55em
  - Linha de atuação: Cinzel 400, ~5.4pt, tracking 0.4em
  - Registro profissional: Cormorant Garamond italic, ~7pt
  - Cidade: Cinzel, ~5.2pt, tracking 0.32em
  - Lista de contatos do verso: Cormorant Garamond 400, ~7pt

### 2.3 Estrutura da FRENTE (de cima para baixo, centralizado verticalmente)
1. Marca tipográfica do topo (iniciais separadas por `·`), `position: absolute; top: 8mm`
2. **Slot SVG do ISOTIPO** (9×9mm, opcional, pode permanecer vazio)
3. **Slot SVG da ASSINATURA** — 38mm largura × 12.6mm altura, centralizada, `margin: -1.5mm auto 2.2mm auto`
4. Nome completo em tipografia (Cormorant Light, caixa-alta, ~11.5pt)
5. Filete horizontal dourado fino (16mm × 0.18mm, opacidade 0.75, `margin: 2.2mm 0 2mm`)
6. Linha de atuação (Cinzel caixa-alta)
7. Bloco unificado: `Registro Profissional | CIDADE · UF` — itálico + diamante dourado pequeno (0.8mm rotacionado 45°) + Cinzel maiúsculo

### 2.4 Estrutura do VERSO (grid de 2 colunas)
- **Grid:** `0.85fr 0.15mm 1.4fr`, gap 7mm, padding 7mm 10mm
- **Coluna esquerda:** Slot SVG do MONOGRAMA (20×20mm, em escala 1:1) + abaixo, registro profissional em Cinzel ~4.8pt
- **Divisor vertical central:** linha dourada de 0.15mm × 60% da altura, opacidade 0.55
- **Coluna direita:**
  - Nome completo em Cormorant Light caixa-alta (~10pt)
  - Tagline da profissão em Cinzel (~5pt, tracking 0.42em, dourado)
  - Filete horizontal dourado (10mm × 0.15mm)
  - Lista de contatos com ícones SVG inline (telefone + email)
- **MARCA D'ÁGUA:** o MESMO SVG do monograma do verso, replicado em escala grande (55×55mm), `position: absolute; top: 50%; right: -8mm; transform: translateY(-50%); opacity: 0.055; z-index: 0`, vazando para fora pela borda direita

### 2.5 Paleta de cores (variáveis CSS no `:root`)
Para `editorial-gold` (padrão de referência):
```css
--bg-dark: #0b0b0d;
--bg-darker: #050507;
--gold: #b89968;
--gold-light: #d4b988;
--gold-deep: #8a7042;
--ivory: #efe9da;
--ivory-soft: #cfc7b3;
--line: rgba(184, 153, 104, 0.4);
```

### 2.6 Fundos das duas páginas
- `radial-gradient(ellipse at 50% 50%, #131215 0%, #0a0a0c 75%, #070708 100%)`
- Overlay sutil de textura diagonal: `repeating-linear-gradient(45deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 3px)`

### 2.7 Slots SVG (obrigatórios, com comentários no código)
1. **`.iso-mark`** (frente, opcional) — slot de 9×9mm para isotipo geométrico futuro
2. **`.signature-seal`** (frente, OBRIGATÓRIO) — slot de 38×12.6mm para a ASSINATURA manuscrita SVG
3. **`.back-mono-svg`** (verso, OBRIGATÓRIO) — slot de 20×20mm para o MONOGRAMA / RUBRICA ESTILIZADA, em escala 1:1
4. **`.watermark`** (verso, OBRIGATÓRIO) — slot de 55×55mm para o MESMO SVG colado em `.back-mono-svg`, replicado como marca d'água

Todos os slots devem ter regra CSS `svg path { fill: currentColor !important; }` para forçar a herança da cor dourada da paleta.

### 2.8 Comentários obrigatórios no HTML
- Bloco grande no topo com especificações de impressão
- Comentário acima de cada slot SVG indicando o tipo de arte esperada
- Comentário no slot da assinatura: `<!-- [SLOT ASSINATURA] — Aguardando o SVG da assinatura manuscrita. Será fornecido pelo usuário na próxima interação. -->`
- Comentário no slot do monograma do verso: `<!-- [SLOT MONOGRAMA] — Aguardando o SVG do monograma ou rubrica estilizada (escala 1:1). ESTE MESMO SVG será replicado na marca d'água abaixo. Será fornecido pelo usuário na próxima interação. -->`
- Comentário na marca d'água: `<!-- [MARCA D'ÁGUA] — Replicar AQUI o mesmo SVG colado no slot .back-mono-svg acima. Opacidade 5.5%. -->`

### 2.9 Visualização e impressão
- `@media screen` deve renderizar os dois cartões empilhados, com sombra, fundo escuro `#1a1a1c`, e labels "Frente"/"Verso" acima de cada um
- `@media print` deve esconder os labels
- Instruções de impressão: Chrome → Ctrl+P → Salvar como PDF → Tamanho personalizado 96×54mm → Margens: Nenhuma → Marcar "Gráficos de plano de fundo"

---

## 3. FLUXO DE EXECUÇÃO

A construção do cartão se dará em três etapas sucessivas:

**Etapa 1:** Entregar HTML completo com os 4 slots SVG vazios e comentados + solicitar ao usuário o envio dos dois SVGs.

**Etapa 2:** Receber os dois SVGs (assinatura e monograma) — identificar automaticamente qual é qual pela proporção do viewBox. Aplicar cada um no slot correto. Replicar monograma na marca d'água.

**Etapa 3:** Entregar versão final com ambos os SVGs integrados + confirmar que está pronto para impressão + repetir instruções de impressão.

---

## 4. PROIBIÇÕES EXPLÍCITAS

O assistente NÃO DEVE:
- Substituir Cormorant Garamond + Cinzel por outras fontes
- Usar fontes script genéricas (Herr Von Muellerhoff, Great Vibes, Pacifico, Allura, etc.) para simular assinaturas
- Adicionar ícones literais da profissão (cruzes médicas, balanças jurídicas, engrenagens, etc.)
- Usar gradientes coloridos, sombras dramáticas, ou efeitos visuais como glassmorphism, neon, etc.
- Simplificar a estrutura de 4 slots SVG
- Omitir a marca d'água do verso
- Mudar as dimensões 96×54mm (gabarito Printi é fixo)
- Adicionar elementos não solicitados como QR code, redes sociais, sites, slogans
- Entregar a versão final sem ter recebido ambos os SVGs do usuário
      

Preencha todos os campos >>> antes de copiar · Enviar em nova janela do Claude

Fluxo de 3 etapas: o Claude entrega primeiro o HTML com slots vazios e solicita os SVGs. Você fornece a assinatura e o monograma gerados no Recraft (Seção 04) e ele finaliza o cartão completo.

Notas

Seção 04

04

Criação de imagens
vetoriais no Recraft

Geração dos SVGs de assinatura e monograma usando o Recraft com modelo V4.1 Pro Vector. Configuração: Image · Manual · V4.1 Pro Vector · No styles · Ratio Auto · 4 images. Crie um novo projeto no Recraft antes de começar.

Estrutura dos assets: a frente do cartão recebe obrigatoriamente a assinatura (Prompt 4.1). O verso recebe ou a rubrica caligráfica (Prompt 4.3) ou o monograma geométrico (Prompt 4.2) — escolha apenas um dos dois estilos para o verso conforme a identidade do profissional.

Prompt 4.1 — Assinatura manuscrita autêntica → frente do cartão (obrigatório)

Prompt 4.1 · Preencha o campo <texto>

        Crie um **SVG vetorial monocromático** de uma **rubrica/assinatura manuscrita autêntica** com _o texto exato contido abaixo_, no estilo de uma **assinatura real feita à caneta-tinteiro de aço por um calígrafo profissional contemporâneo** — não uma fonte caligráfica digital, não copperplate clássico, não Spencerian floreado.

<texto>

</texto>

Pense na **rubrica pessoal de um arquiteto, de um designer de alta-costura, de um escritor moderno**: **rápida, confiante, gestual, com personalidade**, levemente inclinada para a direita (entre 8 e 12 graus de inclinação), com **variação dramática de espessura** entre os traços ascendentes (extremamente finos, quase capilares) e os descendentes ou tracejados horizontais (grossos e firmes, como se a pena tivesse pressionado o papel). A assinatura deve ter **caráter idiossincrático**, como se realmente pertencesse a uma pessoa real: a **primeira letra maiúscula** do nome pode ter um **floreio inicial discreto e contido** (um pequeno laço ou uma entrada angular), as letras minúsculas devem ser **conectadas em ligaduras fluidas**, mas com **algumas letras propositalmente abreviadas ou simplificadas** (como acontece em assinaturas reais — pessoas raramente escrevem cada letra completamente). Caso haja **iniciais do meio** (como "B." ou similar), elas devem aparecer como **letras maiúsculas seguidas de um ponto enérgico**, ligeiramente menores que as maiúsculas das palavras inteiras adjacentes. A **letra inicial maiúscula de cada palavra principal** (nome e sobrenome) deve ter sua própria personalidade, com uma **curva inicial pronunciada** ou entrada característica. O ponto crítico: ao final da assinatura, deve haver um **traço terminal característico** — pode ser uma **linha horizontal que se estende para a direita por baixo de toda ou parte da última palavra do nome** (como um sublinhado integrado à assinatura, comum em rubricas latinas), ou um **floreio descendente curto que termina em corte agudo**. Algumas letras podem ter **interrupções sutis no traço** (lift-offs naturais de quem ergue a pena por uma fração de segundo) — isso adiciona autenticidade. **Evite a qualquer custo**: simetria perfeita, letras todas conectadas de forma uniforme, floreios barrocos, laços decorativos excessivos, qualidade de "fonte caligráfica padrão", aparência de wedding-invitation. **Busque**: imperfeição controlada, ritmo visual, energia gestual, a sensação de que foi escrito **em três segundos** por alguém que assina seu nome dez vezes por dia há trinta anos. Use fill="currentColor", stroke="none" (é uma forma preenchida, não um traço — a variação de espessura é construída na própria geometria do path), stroke-linecap="round" e stroke-linejoin="round" onde aplicável. O viewBox deve ser "0 0 600 140" (proporção horizontal alongada, como uma assinatura real numa linha). O peso visual deve estar **na metade inferior** do viewBox, com os ascendentes (alturas de letras como "b", "t", e letras maiúsculas) ocupando a metade superior. **Nenhum elemento gráfico além da própria assinatura**: sem ornamentos, sem sublinhados separados, sem datas, sem nada. A assinatura é o produto inteiro.

Preencha o campo <texto> com o nome completo · Gere 4 variações e selecione a melhor

Prompt 4.2 — Monograma geométrico → verso do cartão (opção A)

Prompt 4.2 · Preencha o campo <letras>

        Crie um **SVG vetorial monocromático** de um **isotipo monogramático ultra-moderno e minimalista** _das letras exatas contidas abaixo_, fundidas em **uma única forma contínua**, no exato estilo descrito a seguir: **traços médios, quase grossos, mais para médios, sólidos, geométricos, com terminais cortados em diagonais agudas**, sem serifas, sem floreios, sem moldura, sem qualquer elemento decorativo adicional.

<letras>

</letras>

**A construção é a estrela** — pense em marcas de luxo contemporâneas como Bottega Veneta, Saint Laurent, COS ou Jacquemus: a beleza vem da geometria pura, do peso visual ousado e da maneira como duas letras se **entrelaçam estruturalmente como se compartilhassem traços**. A **primeira letra** deve ser construída respeitando sua arquitetura geométrica fundamental — hastes verticais grossas, curvas fechadas formando bojos característicos (sem "olhos" internos preenchidos quando aplicável — é apenas o contorno externo que importa, formando curvas sólidas), e quaisquer pernas, diagonais ou terminais descendo até a base com **terminação cortada em ângulo de aproximadamente 30 graus** (não horizontal, não vertical — em diagonal, como se a forma fosse seccionada por um corte de katana). A **segunda letra** deve **emergir do interior ou da estrutura da primeira**, compartilhando ou tangenciando alguma curva ou haste da primeira letra, desenvolvendo-se em uma **única curva ou sequência de traços fluidos geometrizados** — não a forma clássica e simétrica da letra, mas uma versão **arquitetônica, possivelmente alongada horizontalmente ou verticalmente conforme a composição pedir**, com sua extremidade se estendendo **além do ponto de origem da primeira letra**, terminando também em **corte diagonal agudo** (espelhando o corte da primeira letra, criando equilíbrio visual). O ponto mais crítico: deve existir **uma intersecção visual única** onde as duas letras se cruzam, e nessa intersecção a forma deve ser **sólida e contínua**, como se as duas letras fossem fundidas em um único objeto escultórico — **não duas letras sobrepostas, mas um único símbolo**. O traço deve ter espessura **uniforme e generosa** (proporcionalmente equivalente a 10-12% da altura total da figura), com fill="currentColor" e stroke="none" (é uma forma sólida, não um contorno). O viewBox deve ser "0 0 100 100", com a marca ocupando aproximadamente 80% da área, perfeitamente centralizada óptica (não matematicamente — a percepção de centro importa mais que o cálculo). **Nada de gradientes, nada de sombras, nada de moldura, nada de pontos decorativos, nada de balança ou símbolos jurídicos óbvios**. A profissão se manifesta na seriedade arquitetônica da forma, não em ícones literais. O resultado final deve parecer ter sido desenhado em **2024 em um estúdio de branding de Antuérpia ou Tóquio**, não em um cartório de 1890.

Verso do cartão · Opção A — estilo geométrico, moderno, traços sólidos · Preencha <letras> com as 2–3 iniciais

Prompt 4.3 — Rubrica manuscrita artística → verso do cartão (opção B)

Prompt 4.3 · Preencha o campo <iniciais>

        Crie um **SVG vetorial monocromático** de uma **rubrica manuscrita artística autêntica** com _as iniciais exatas contidas abaixo_, no estilo de uma **assinatura abreviada feita à caneta-tinteiro de aço por um calígrafo profissional contemporâneo** — não uma fonte caligráfica digital, não copperplate clássico, não Spencerian floreado, **não wedding invitation**.

<iniciais>

</iniciais>

A referência mental correta é a **rubrica pessoal de um arquiteto modernista, de um diretor criativo de uma maison parisiense, de um designer industrial japonês** — alguém que assina dezenas de vezes por dia há décadas e desenvolveu uma **rubrica curta, gestual, confiante, com identidade marcante**. As letras devem aparecer **conectadas em um único gesto fluido e contínuo**, como se a caneta jamais tivesse sido erguida do papel — uma única ligadura escultórica do começo ao fim. A composição deve ter **inclinação dramática para a direita** (entre 12 e 18 graus), criando movimento e velocidade visual. A **letra inicial** deve ter uma **entrada gestual marcante**: pode ser um pequeno laço de entrada ou um traço inicial angular que mergulha no corpo da letra com energia — mas **nada barroco, nada floreado**, apenas um gesto natural de quem inicia a escrita com confiança. As **letras intermediárias** (caso existam) devem ser **simplificadas e abreviadas**, como acontece em rubricas reais — podem ser representadas quase como **laços ou traços condensados** que conectam a letra inicial à final, sem necessariamente parecerem perfeitamente legíveis (rubricas reais sacrificam legibilidade por ritmo). A **letra final** deve ter sua própria personalidade: uma **curva inicial pronunciada** e, ao terminar, deve ser seguida por um **traço terminal característico** — uma **linha horizontal que se estende para a direita por baixo das letras**, funcionando como um sublinhado integrado e gestual à rubrica (típico de assinaturas latinas, especialmente brasileiras), terminando em **corte agudo diagonal** ou em um pequeno gancho ascendente. **Variação dramática de espessura é absolutamente essencial**: os traços ascendentes (subidas) devem ser **extremamente finos, quase capilares**, enquanto os descendentes e horizontais devem ser **grossos e firmes**, como se a pena tivesse pressionado o papel com força nesses momentos — essa modulação é o que distingue uma rubrica autêntica de uma fonte script qualquer. **Imperfeições controladas são bem-vindas**: uma ou duas **interrupções sutis no traço** (lift-offs naturais), uma **assimetria proposital** entre os laços, um **terminal levemente irregular** — esses detalhes adicionam autenticidade humana. **Evite a qualquer custo**: simetria perfeita entre as letras, traços de espessura uniforme, conexões mecânicas e regulares, floreios decorativos excessivos, qualquer aparência de "fonte caligráfica padrão", letras todas igualmente legíveis. **Busque**: gesto, ritmo, velocidade, personalidade, a sensação de que foi escrito **em dois segundos** por alguém que conhece sua própria rubrica de memória. Use fill="currentColor", stroke="none" (a forma é preenchida, não traçada — a variação de espessura é construída diretamente na geometria do path), stroke-linecap="round" e stroke-linejoin="round" onde houver stroke residual. O viewBox deve ser **quadrado**: "0 0 200 200". A rubrica deve ocupar cerca de **75-80% da área do viewBox**, perfeitamente centralizada **opticamente** (o centro percebido importa mais que o matemático — considere que o sublinhado terminal puxa o peso visual para baixo, então a rubrica deve estar levemente acima do centro geométrico para compensar). **Nenhum elemento gráfico além da própria rubrica**: sem moldura, sem ornamento, sem ponto, sem data, sem ano, sem nada. A rubrica é o produto inteiro — pura, isolada, autossuficiente, como uma assinatura registrada em cartório.

Verso do cartão · Opção B — estilo gestual, caligráfico, com variação de espessura · Preencha <iniciais> com 2–3 letras

Notas

Seção 05

05

Incorporação dos
vetores no cartão

Com os SVGs gerados no Recraft em mãos, o passo final é integrá-los ao HTML do cartão de visitas e exportar o PDF pronto para a gráfica. O mesmo processo se aplica a qualquer arquivo HTML — apresentações, contratos, laudos, propostas.

Princípio transferível: tudo que você aprende aqui se aplica a qualquer documento HTML. Não só o cartão — uma apresentação comercial, uma aula em slides, um relatório. O método é o mesmo.

Passo a passo

No Recraft, selecione as melhores variações de cada geração clicando sobre as imagens.
Na barra lateral direita, clique em "Remove Background" para cada imagem selecionada.
Clique com o botão direito sobre as imagens sem fundo → Export → SVG → salve os arquivos.
Você deverá ter dois arquivos: um de assinatura (para a frente do cartão) e um de monograma ou rubrica (para o verso).
Abra cada arquivo SVG no Editor de Texto (Apple) ou Bloco de Notas (Windows).
Copie todo o conteúdo de texto de cada arquivo e envie ao Claude na janela em que o cartão foi criado — um arquivo por vez.
O Claude identificará automaticamente qual SVG é assinatura e qual é monograma pela proporção do viewBox, aplicando cada um no slot correto.
Corrija inconsistências e faça ajustes finos conforme necessário (tamanho, opacidade, espaçamento).
Baixe o arquivo HTML final resultante.
Abra no Chrome, Brave ou Comet (obrigatório — navegadores Chromium para renderização correta de impressão).
Menu do navegador → Arquivo → Imprimir → no canto inferior esquerdo, selecione Salvar como PDF.
O Chromium detecta automaticamente o formato do documento — landscape, dimensões e margens já vêm configurados. Não mexa em nada. Basta clicar em "Salvar como PDF".
Envie o PDF ao Printi ou à sua gráfica preferida para impressão.

Onde usar os mesmos princípios

Documentos médicos

Contratos, prescrições, laudos, atestados, receituários

Documentos jurídicos

Contratos, procurações, propostas, termos

Branding

Cartão de visitas, papelaria, identidade visual completa

Apresentações

Slides de aula, propostas comerciais, pitch decks

Notas finais

Exemplo de resultado · Aula 01 Cartão de Visitas Editorial Output completo do workflow descrito nesta aula — assinatura manuscrita gerada no Recraft, monograma geométrico integrado como marca d'água, tipografia Cormorant Garamond + Cinzel. Gabarito Printi 90×48mm, pronto para impressão. ↗

Vitor Coletty

Branding AI · Aula 01 · 2026

fim da apresentação

O workflow debranding com IAque ninguémestá ensinando

Ferramentas

Criação de documentosHTML de teste

Font SignaturePreviewer

Cartão de VisitasEditorial

Criação de imagensvetoriais no Recraft

Incorporação dosvetores no cartão

O workflow de
branding com IA
que ninguém
está ensinando

Criação de documentos
HTML de teste

Font Signature
Previewer

Cartão de Visitas
Editorial

Criação de imagens
vetoriais no Recraft

Incorporação dos
vetores no cartão