Kit · Teu link na bio com Claude Code

curl -fsSL https://claude.ai/install.sh | bash

irm https://claude.ai/install.ps1 | iex

claude --version

# Brief do link na bio

## 1. Quem é
- Nome:
- O que faz, em uma frase:
- Cidade/região (se importar pro negócio):
- @ do Instagram:

## 2. Objetivo da página (UM só)
- O objetivo nº 1:            (ex.: pedir orçamento no WhatsApp, comprar o curso, agendar, entrar no grupo)
- Como eu sei que deu certo:  (ex.: cliques no botão de orçamento por semana)

## 3. Pra quem é
- Quem chega aqui, de onde vem e o que quer resolver:
- Em que aparelho (quase sempre celular):

## 4. Voz da marca
- 3 adjetivos:
- Palavras que a marca usa:
- Palavras que a marca NUNCA usa:
- Tratamento (você / vocês / a gente):

## 5. Visual
- O clima em uma frase:       (ex.: revista de praia, fundo areia, títulos serifados, detalhes em azul-petróleo)
- Cores (código ou nome):
- Fonte: (se não souber, "fontes do sistema", carrega mais rápido)
- Uma referência que eu gosto: (site ou perfil, opcional)
- Logo ou foto: (nome do arquivo na pasta, ou "sem foto por enquanto")

## 6. Links (na ordem do objetivo)
Os textos de botão escritos aqui são os que vão pro ar. A IA não troca.
DESTAQUE (um só):
- Texto do botão | link

Seção "________":
- Texto do botão | link
- Texto do botão | link

Seção "________":
- Texto do botão | link

Redes (rodapé, sem UTM):
- Instagram | link
- TikTok | link

## 7. Métricas
- Campanha: bio
- ID do Google Analytics (se for usar): G-

Eu quero criar a página de link na bio do meu negócio (ou de um cliente meu). Antes de criar qualquer coisa, me entrevista.

Faz UMA pergunta por vez, espera a minha resposta e só então faz a próxima. Pergunta, nesta ordem:
1. O nome do negócio e o que ele faz, em uma frase.
2. O objetivo número 1 da página (um só: vender, pedir orçamento, agendar, entrar num grupo, baixar um material...).
3. Quem chega nessa página, de onde vem e o que quer resolver.
4. Três adjetivos da voz da marca, palavras que a marca usa e palavras que ela nunca usa.
5. As cores (código ou nome) e se tem logo ou foto.
6. O link de DESTAQUE (um só) e o texto do botão.
7. Os outros links, com o texto de cada botão. Se forem mais de 6, me pergunta como agrupar em seções.
8. As redes sociais que vão no rodapé.

No fim, escreve tudo num arquivo brief.md nesta pasta, no formato do modelo de brief da aula, e me mostra o arquivo pra eu conferir. Não crie a página ainda.

Você vai criar a minha página de link na bio. Leia o arquivo brief.md nesta pasta antes de qualquer coisa.

Crie uma pasta chamada site e, dentro dela, um arquivo só, chamado index.html. Só isso vai pra internet, então nada de rascunho, brief ou anotação dentro da pasta site.

Regras da página:
1. Um arquivo só, com o CSS dentro dele. Sem framework, sem biblioteca externa, sem JavaScript de terceiros. Fontes do sistema.
2. Mobile primeiro: pensada pra tela de 390 pixels de largura, centralizada e com largura máxima de 480 pixels no computador.
3. No topo: o nome e uma frase curta na voz da marca descrita no brief. Depois o link DESTAQUE, maior e com a cor de destaque. Depois as seções na ordem do brief, cada uma com um título pequeno. Redes sociais no rodapé, discretas.
4. Botões grandes, fáceis de tocar com o dedo (pelo menos 48 pixels de altura), com texto que diz o que acontece ao clicar.
5. UTM: em todo link que leva pra um site, acrescente utm_source=instagram&utm_medium=social&utm_campaign=bio&utm_content=NOME-CURTO, onde NOME-CURTO é o nome do botão em minúsculas, sem acento, palavras separadas por hífen. Se o link já tiver "?", use "&" pra juntar. NÃO coloque UTM em link de WhatsApp (wa.me), de telefone, de e-mail nem de rede social.
6. Em cada botão, coloque id igual ao NOME-CURTO (é com ele que a gente vai contar clique depois).
7. Acessibilidade: lang="pt-BR"; contraste de pelo menos 4,5 para 1 entre o texto e o fundo de CADA botão, inclusive o destaque (se a cor da marca não passar com texto branco, use texto escuro ou escureça a cor e me avise); sem transparência (opacity) em texto, porque ela derruba o contraste; foco visível quando navega pelo teclado; texto alternativo se tiver imagem.
8. No head: title com o nome do negócio, meta description com a frase da marca e meta viewport.
9. Não invente link, telefone, preço nem informação que não está no brief. Se faltar algo, deixe um comentário no HTML dizendo o que falta.

Quando terminar, me mostre: (a) a lista de todos os links finais, um por linha; (b) o contraste calculado de cada combinação de cor de texto e fundo que você usou.

Agora revisa a página site/index.html como se fosse outra pessoa. Não mude nada ainda: só me entrega uma lista do que está errado ou arriscado, em ordem de gravidade, olhando:
1. Algum link quebrado, sem https ou diferente do brief.md?
2. Algum link de site sem UTM, ou algum link de WhatsApp, telefone, e-mail ou rede social COM UTM?
3. Algum botão sem id, ou dois botões com o mesmo id?
4. Contraste de cada botão e de cada texto, inclusive títulos pequenos e texto com transparência (calcula e me diz o número). Só conta como texto grande, com mínimo de 3 para 1, o que tiver pelo menos 24 pixels, ou 18,66 pixels em negrito.
5. Algum texto que não soa como a voz da marca do brief, ou alguma palavra da lista do "nunca usa"?
6. Tamanho do arquivo em KB.
7. Alguma informação inventada que não está no brief?
Depois da lista, me pergunta quais itens eu quero que você corrija.

Coloque a tag do Google Analytics 4 na página site/index.html, com o ID de medição G-COLE-O-SEU-AQUI, logo depois da abertura do <head>, no formato padrão do gtag.js do Google. Não coloque mais nenhum script.

Depois, no rodapé, acrescente uma linha pequena: "Este site usa cookies do Google Analytics pra contar visitas e cliques." Essa linha também precisa ter contraste de pelo menos 4,5 para 1 com o fundo (calcula e me diz o número). Não mexa no id de nenhum botão.

Me mostre o trecho que você acrescentou.

Na página site/index.html, troque o link de DESTAQUE por este: [texto do botão] | [link]. O destaque antigo desce pra seção [nome da seção] como botão normal (ou sai da página, se eu disser "remove"). Mantém a regra de UTM e de id dos outros botões. Me mostre o antes e o depois do trecho alterado.

Minha página tem muitos links. Reorganiza a site/index.html assim:
1. Um destaque só no topo (o do objetivo nº 1 do brief).
2. No máximo 3 seções, cada uma com no máximo 4 botões. Se não couber, me diz quais links você tiraria e por quê (não tira sem eu aprovar).
3. Uma faixa "da temporada" logo abaixo do destaque, pra um link sazonal que eu troco quando acabar (feriado, alta temporada, promoção). Deixa um comentário no HTML marcando onde trocar.
Me mostra a nova ordem antes de aplicar.

Quero colocar a minha página de link na bio, que já está publicada na Cloudflare Pages no endereço [COLE AQUI O SEU ENDEREÇO .pages.dev], num domínio próprio .com.br. Me guie passo a passo.

Como você deve me guiar:
- UM passo por vez. Explique o que vamos fazer e por quê em no máximo 3 linhas, diga exatamente onde clicar, e espere eu responder "feito" antes do próximo passo.
- Não invente nome de menu nem de botão. Se você não tiver certeza de como a tela está hoje, me peça um print e me guie a partir dele.
- Nunca me peça senha, código de verificação, dados de cartão ou documento. Eu digito isso sozinho, direto no site oficial.
- Linguagem simples: eu não sou da área de tecnologia.

O caminho:
1. DOMÍNIO: me ajude a ver se o nome que eu quero está livre no site oficial do Registro.br (https://registro.br) e, se eu decidir comprar, a registrar. Pela tabela oficial (https://registro.br/ajuda/pagamento-de-dominio/), 1 ano custa R$ 40,00. Se eu já tiver o domínio, pule este passo.
2. SUBDOMÍNIO: vamos usar um subdomínio, por exemplo links.[meudominio].com.br. É o caminho mais simples: não precisa mudar os servidores (nameservers) do domínio. Se eu pedir o domínio sem nada na frente (o "raiz"), me avise que isso exige transferir o DNS pra Cloudflare e que é outro tutorial.
3. CLOUDFLARE PRIMEIRO: no painel da Cloudflare, em Workers & Pages, abra o meu projeto, vá em Custom domains, escolha Set up a domain, digite o subdomínio e continue. Isso tem que vir ANTES de mexer no Registro.br: a documentação oficial avisa que criar o CNAME sem associar o domínio no projeto antes faz o endereço falhar (erro 522). Fonte: https://developers.cloudflare.com/pages/configuration/custom-domains/
4. CNAME NO REGISTRO.BR: na área do meu domínio no Registro.br, na parte de DNS, crie um registro do tipo CNAME com o nome "links" (ou o subdomínio que eu escolhi) apontando para o meu endereço .pages.dev, sem https e sem barra no fim. Se a tela pedir alguma opção que você não sabe qual é, me peça um print.
5. ESPERAR E TESTAR: me explique que a verificação e o cadeado (SSL) podem levar um tempo. Depois me peça para abrir https://links.[meudominio].com.br no celular e confirmar que a página abre com o cadeado.
6. INSTAGRAM: me ajude a trocar o link do perfil (Editar perfil > Links) pelo endereço novo com a etiqueta: https://links.[meudominio].com.br/?utm_source=instagram&utm_medium=social&utm_campaign=bio

Se algo der erro, me pergunte a mensagem exata que apareceu antes de sugerir qualquer coisa.

utm_source=instagram&utm_medium=social&utm_campaign=bio&utm_content=nome-do-botao