PROJETO REAL · DESIGN SYSTEM, ACESSIBILIDADE E CÓDIGO
O link da bio era alugado. A audiência era nossa — e o dado, de ninguém.
O Canaltech distribuía oito destinos por um Linktree. Funcionava como índice e falhava como produto: sem marca, sem estado, sem consentimento e sem um único evento de clique que voltasse para casa. Refiz como página própria — design system, acessibilidade, telemetria e um HTML único que o time publica sem build.
Sobre os números.
A página está pronta e testada, não publicada. Tudo o que está medido aqui é de construção — tokens, componentes, estados, cobertura de teste e peso. Não há dado de tráfego nem de conversão, e a seção 06 diz isso em vez de estimar.
CLIENTE
Canaltech
hub de links próprio
PAPEL
Design system
e design engineer
ENTREGAS
Design system · UI
HTML único · acessibilidade
FEITO COM
Claude Code ⇄ Figma via MCP
HTML, CSS e JS · Playwright
PERÍODO
2026 · solo
3ª geração da página
01 · O PROBLEMA
A página existia. A propriedade dela, não.
A bio manda a audiência para um Linktree: bom como índice, incapaz como produto. Oito destinos com o mesmo peso, e o clique ficava de fora.
3
gerações da mesma página; as duas primeiras alugadas
8
destinos concorrendo no mesmo peso visual
0
eventos de clique no analytics da própria casa
0
controle sobre consentimento, marca e estados
02 · ANTES E DEPOIS
A mudança não foi de layout. Foi de propriedade.
O mesmo objetivo — da bio até oito destinos — pelos dois caminhos. O que aparece no meio é tudo o que a página alugada não fazia de dentro.
COMO ERA
Lista hospedada por terceiro, oito destinos com o mesmo peso e a marca reduzida a um avatar redondo. Sem faixa de campanha, sem estado de foco, sem rota de teclado. Consentimento e dado de clique ficavam com a plataforma, e qualquer ajuste dependia do painel de outra empresa.
Nenhum desses quatro últimos é resolvível de dentro da ferramenta. É o custo de alugar.
COMO FICOU
Uma página do Canaltech, com campo de marca no topo e hierarquia real: faixa de campanha, CTA, seções e oito destinos com pesos diferentes. Clique, newsletter e consentimento viram evento no analytics da casa.
É um arquivo. Sobe no domínio do Canaltech sem build, responde a hover, press, foco e teclado, e degrada sozinha se um asset faltar.
03 · RESTRIÇÕES
As regras que existiam antes do primeiro pixel.
Não era um projeto de tela livre. O que dava para fazer já estava cercado por quem publica, por onde publica e por quanto custa manter depois que eu sair.
Publicação
O time de dev publica, não constrói. Sem build, sem bundler, sem dependência: chega como arquivo pronto.
Hospedagem
Sem servidor de aplicação. Tem que funcionar como estático em qualquer lugar que o Canaltech já use.
Desempenho
O tráfego vem da bio, no celular, muitas vezes em rede ruim. Nenhuma requisição a terceiro — fonte inclusiva.
Privacidade
Consentimento é requisito, não enfeite. A página mede clique, então pergunta antes e guarda a resposta.
Resiliência
Se um asset faltar no deploy, a linha não pode quebrar. Todo ícone e imagem têm plano B no próprio HTML.
Campanha
A faixa de evento entra e sai sem tocar no layout, porque a votação tem data para acabar.
04 · DECISÕES DE PRODUTO
Quatro decisões que o frame estático não respondia.
O Figma entrega a página parada. Produto acontece no que ele não desenha: o que o botão faz sem destino, o que a página faz se o arquivo some.
01
Estados viraram regra. Onze regras derivadas dos próprios tokens — hover, press, foco, inválido, aceito e o toggle ligado.
02
O painel de consentimento foi construído do zero. O Figma só previa o botão; montei o diálogo modal, o foco preso, o ESC e a trava de rolagem.
03
Sem destino, o botão se declara desligado. Perde o href, vira aria-disabled e para de responder, em vez de virar âncora morta.
04
O grão do hero saiu como código. Reproduzido em CSS com feTurbulence — sem arquivo e sem requisição a terceiro.
05 · SISTEMA E ENTREGA
Dez componentes, 35 variantes, e nenhum hover para inventar.
O sistema não é paleta bonita: é o contrato que faz a próxima pessoa acertar o estado sem perguntar. Variável no Figma é custom property no CSS.
16
tokens de cor, com o mesmo nome no Figma e no CSS
11
regras de estado especificadas, não improvisadas
10
conjuntos de componentes · 35 variantes
176
asserções automatizadas em Playwright
Um arquivo. Zero dependência. Zero build.
O time recebe um index.html de 55 KB e uma pasta de assets. Abre no navegador, sobe em qualquer estático, não tem nada para instalar — porque quem publica não é quem constrói. A fonte vem do próprio repositório: nenhuma requisição sai para terceiro. Todo <img> tem um onerror que troca pelo sprite inline e mantém a linha de pé.
O sistema volta para o Figma.
O frame foi lido por MCP — nós, variáveis, tipografia, grade e assets, nada descrito de memória. O que saiu do código voltou como dois boards 16:9 neste mesmo arquivo. Num fluxo de mão única o Figma morre no handoff e vira imagem que desatualiza no primeiro ajuste; fechando o ciclo, o sistema do arquivo e o do HTML são o mesmo.
06 · MEDIÇÃO E HONESTIDADE
A página passou a responder perguntas que antes ninguém conseguia fazer.
Três eventos saem da página para o analytics do próprio Canaltech. Não é painel de vaidade: é saber qual destino paga a próxima pauta.
ct:link
id · href · label
Qual destino a audiência realmente usa, por posição na lista e por campanha no ar.
ct:newsletter
Quanto da audiência que vem de social vira base própria, sem intermediário.
ct:cookies-consentimento
escolha · audiencia · publicidade · data
Que fatia da base aceita medição — e o que pode ser atribuído com honestidade.
O que não está aqui.
Nenhum número de tráfego, clique ou conversão — a página está pronta e testada, não publicada. Quando subir, os três eventos acima passam a alimentar exatamente essas colunas, e aí o case ganha uma seção de resultado que hoje seria chute. Duas coisas ficaram conscientemente pendentes: sem dado de produção a hierarquia dos oito destinos é hipótese, a ser revista no primeiro mês; e não houve teste com leitor de tela real — só verificação de foco, rótulo, ordem de teclado e contraste.
07 · MAIS
Outros projetos
ThumbDrop
Ferramenta interna que tirou a thumbnail da fila do time de design. Duas versões testadas com seis pessoas cada, IA dentro do editor, e o custo por thumb visível antes de cada clique.
Nega Nagô
O catálogo de uma trancista virou agendamento sem sair do WhatsApp. Pesquisa, design system e front-end — no ar em neganago.com, com a disponibilidade saindo da agenda dela.
Disponível para trabalhar
Desenho, escrevo o código e digo o que não deu certo.
Treze anos de design, cinco deles no Canaltech entre design system, marketing e comercial. Se você tem uma superfície que precisa sair pronta e medida, e não especificada, me chama.
© 2026 Erick Teixeira
oerickteixeira@gmail.com · São Paulo