Este é o único case deste portfólio escrito ao mesmo tempo em que acontece. Os outros foram reconstruídos a partir de material antigo. Este tem um arquivo de log atualizado a cada sessão de trabalho, com data, e é de lá que sai cada episódio abaixo.
Isso muda o que ele pode provar. Não há reconstrução generosa de memória, e os erros estão registrados no mesmo lugar que os acertos, escritos no dia em que aconteceram.
O ponto de partida
Eu tinha um portfólio no Framer, funcionando. A decisão de refazer não veio de insatisfação com a ferramenta: veio de querer um portfólio que mostrasse o raciocínio por trás de cada decisão, e não só o resultado dela. O Framer não me impedia disso, mas também não me obrigava a nada.
A regra que criou este case foi definida antes da primeira linha de código: registrar enquanto acontece, e não reconstruir depois. Custa cinco minutos no fim de cada sessão, e é o que separa um case de um relato.
Três ferramentas, e uma documentação entre elas
O trabalho passou por três IAs, cada uma no papel em que rende mais. ChatGPT fez a fundação editorial num dia: dezesseis capítulos do documento que chamo de Book, os primeiros registros de decisão, o guia de voz. Nada de código. Claude pegou a curadoria e as decisões técnicas. Claude Code implementou.
O que fez isso funcionar não foi nenhuma das três, foi o Book. Quando o projeto mudou de ferramenta, não houve uma pergunta de contexto sequer: a documentação bastava para a sessão nova começar já escrevendo código.
É uma constatação sem glamour e é a mais útil do case. Documentação deixou de ser burocracia e virou a interface entre as ferramentas. Registrar decisão em formato de ADR era prática de engenharia; aqui virou o que permite qualquer IA entender o projeto em minutos.
O que a máquina fez melhor, e o que eu li errado
O design system da empresa vive num arquivo do Figma, e naquela sessão eu só tinha capturas salvas antes: imagens em que os rótulos com o código de cor têm uns quatro pixels de altura. Ilegíveis.
A saída foi parar de tentar ler o rótulo e passar a ler o pixel. Um script varreu as capturas procurando blocos de cor uniforme, tratou cada amostra como região conectada e devolveu o código exato de preenchimento com a posição na grade. Saíram as escalas completas: dez degraus da cor de marca em claro e escuro, doze de neutro e sete de acento.
Eu não teria pensado nisso, e não é sobre a cor: é sobre trocar a pergunta "como eu leio este texto minúsculo" por "eu preciso mesmo do texto?".
O rótulo é ilegível na origem e o código sai exato do outro lado, porque o que foi lido não foi o texto: foi a cor do pixel. Esta escala saiu certa nos vinte degraus. A de neutro, não.
Um dos degraus saiu #3381ff, exatamente o valor que eu já conhecia, e eu tomei
o encontro como prova de que o método estava certo. Conferida depois contra a
fonte real, a cor de marca estava exata nos vinte degraus. A de neutro, não: ela
vai até 1100, e eu tinha registrado até 1000, com um degrau que não existe
deslocando todos os outros.
O método confirma uma rampa cuja estrutura você já conhece. Ele não descobre a estrutura. Acertei onde eu já sabia a resposta, e foi exatamente ali que achei ter provado alguma coisa.
Eu achava que o trabalho seria pedir
Entrei achando que a habilidade nova seria escrever bons pedidos. O que apareceu foi outra coisa: a IA erra com confiança, e é a confiança que custa caro.
Ela explica antes de testar. Quando as chamadas ao Figma passaram a falhar, veio uma explicação segura sobre a causa. Errada. Veio uma segunda, também segura, também errada, e pelo mesmo motivo: formulada sem testar.
Ela confunde "eu não consigo verificar" com "não dá para verificar". Doze gravações de protótipo apareciam como imagem parada, e por três rodadas a resposta foi que não dava para conferir a reprodução. O Chrome estava instalado na máquina o tempo todo, e o defeito era um atributo faltando na tag de vídeo. Ferramenta que não enxerga o efeito não é prova de que o efeito não existe.
Ela corrige onde o erro foi apontado, e não o erro. Apontei que uma frase generalizava demais. A frase foi corrigida; a mesma afirmação, no mesmo arquivo, alguns parágrafos abaixo, ficou como estava por dias.
E ela mede uma coisa para concluir outra. Veio um alerta de que uma seção estava longa demais, com um número de pixels de rolagem como evidência. O que tinha sido medido era altura, e o que estava sendo afirmado era tempo.
O que sobrou para mim
Se a execução acelerou tanto, a pergunta honesta é o que resta. Três coisas, e nenhuma delas encolheu.
Escolher o problema. Quais projetos entram, o que cada um precisa provar, o que fica de fora. Um dos cases tinha quatro cartões de "principais aprendizados" prontos para usar, e três eram genéricos; ficaram de fora.
Ver o que está errado na tela. O nome de um case cortado no meio da palavra no cartão da home, uma capa que não conversava com a do case vizinho, um desenho de processo tecnicamente correto que não dizia o que precisava dizer. Nada disso quebra o build, nada aparece no console, e é exatamente onde um portfólio de design se decide.
Responder o que não está em arquivo nenhum. O case do Square parecia trabalho feito para a empresa real. Nenhuma leitura do material resolveria a dúvida: só eu sabia que o briefing tinha vindo de um desafio de bootcamp. Essa resposta virou a espinha do case: com o briefing declarado como externo, contrariá-lo com pesquisa deixa de ser incoerência e vira achado.
A revisão virou uma página
Ver o que está errado na tela só funciona se eu conseguir ver. E o que a máquina entrega não é uma tela, é um diff, e ler diff não é ler interface.
Então virou regra: pedaço de interface pronto, antes do commit, sai uma página de revisão. As fases do fluxo em captura, o que foi decidido em cada uma e por quê, e uma lista do que ainda depende de mim. Eu abro, aponto o que está errado, e só então vai.
A porta dos cases protegidos por senha passou por isso. A animação de abertura saiu sem uma ressalva minha. O botão logo abaixo dela levou duas: na primeira eu disse que faltava hover, e na segunda que fundo branco sozinho não bastava, faltava o contorno azul da marca. As duas correções estão anotadas na própria página, junto do que foi medido depois.
O que essa página resolve não é documentação. É o intervalo entre a máquina terminar e o código entrar, que antes não existia.
Recortes da própria página de revisão da porta dos cases. Parar libera a rolagem, para ler algum deles com calma.
Seis decisões, e você pode mexer em todas
Até aqui este case tratou de método. Esta parte trata do produto: seis decisões de interface que ninguém pediu, e que são a diferença entre um portfólio publicado e um portfólio feito. Cada uma vem com a peça de verdade, funcionando dentro do case. Uma captura provaria que a coisa existe; o que precisa ser provado é que ela funciona.
Um gato como marca
Steve é o meu gato, e virou a marca do site. É fácil de errar: bicho de estimação em portfólio profissional escorrega para o fofo em um segundo, e fofo é o contrário do que se procura em quem vai desenhar produto. O que segura não é a ideia, é o desenho, e ele foi desenhado três vezes antes de ficar de pé.
A segunda decisão é que ele se mexe, e que o movimento espontâneo é raro de propósito, para ser notado quando acontece.
Três desenhos, na ordem em que existiram. O pixel trava numa forma só; o vetor troca de pose inteira, e o controle acima é dele; o realista tem um rabo com física própria, que não para enquanto você lê. Passe o ponteiro nele.
O letreiro é um objeto, e não um texto colorido
A saudação podia ser uma linha de texto com fonte diferente. Virou um letreiro de LED, e o que muda é como ele é construído.
Num painel de verdade existe uma grade só, e cada célula está acesa ou apagada. A primeira versão aproximava isso com duas grades de CSS sobrepostas; como o texto rola, a grade acesa rolava junto e cortava cada letra pela metade. O painel de hoje pergunta a cada célula, uma por uma, se ela acende. As letras vêm de uma fonte desenhada ponto a ponto na própria grade: reduzir um desenho para menos linhas do que ele tem detalhes faz o algoritmo escolher a média em vez da forma, e é por isso que painel de aeroporto e placar de estádio usam fonte de matriz.
O Steve não está dentro do painel, anda em cima dele. Cinco desenhos tentaram caber na matriz e nenhum funcionou, porque uma matriz de pontos é um objeto tipográfico, e animal naturalista é o que ela faz pior. O que resolveu foi tirar o gato da grade em vez de desenhá-lo pela sexta vez. E é a sobreposição que faz a peça funcionar: as patas apagam os LEDs atrás enquanto ele passa.
Apague o letreiro. O que sobra é a grade de LEDs apagados, que está ali o tempo todo: cada célula do painel está acesa ou apagada, nunca meio ponto. O Steve continua aceso porque ele não é feito de LED: está sentado na frente do painel, e as patas dele tapam os pontos que ficam atrás.
O player, e os 99 dólares que ele não custou
O caminho oficial para ter música aqui custava noventa e nove dólares por ano. Para um detalhe de portfólio, é assinatura recorrente pagando enfeite. A saída foi ler uma playlist pública minha, com 299 faixas, e tocar as prévias de trinta segundos que já são abertas. Custa zero e não pede login de ninguém.
O que deu trabalho não foi tocar, foi o nome. Faixa brasileira acumula participação, sample creditado e colchete, e reticências escondem justamente o que interessa. Então o nome rola, mas só quando de fato não cabe, e não cabe é medido a cada mudança de tamanho, nunca suposto.
Arraste a largura. O nome da faixa só começa a rolar quando de fato não cabe, e a conta é refeita a cada mudança de tamanho. Larga o bastante, ele fica parado: rolar um texto que já cabe é movimento sem informação.
Dois níveis de leitura, e o seletor no lugar certo
Cada case tem duas versões: uma de dois minutos e uma completa. O erro não estava na ideia, estava na posição. O seletor ficava no fim, então funcionava como continuação e falhava como escolha: quem tem pressa decide nos primeiros segundos e nunca sabia que a versão curta existia.
Ele subiu para o topo e virou seletor de modo. E o tempo de leitura entrou dentro do controle, porque é ele que decide: entre dois rótulos sem mais nada a escolha vira chute; com os minutos ao lado, vira informada.
A integração com o Figma não estava autenticada, e sobraram capturas em que os rótulos de cor têm quatro pixels de altura. A saída foi parar de tentar ler o rótulo e ler o pixel. Saíram as escalas completas, e um dos valores bateu com o que a API já tinha confirmado dias antes.
O mesmo episódio deste case, nos dois níveis. O resumido responde o que aconteceu; o completo responde como e com que prova. Um não é o outro cortado, e é por isso que os dois existem.
A navegação, com o teclado em primeiro lugar
A fileira de cases rola com o mouse, arrasta com o dedo e anda com as setas. As três valem igual, e a terceira não é acessibilidade por obrigação: é o jeito mais rápido de percorrer a curadoria inteira.
O defeito que mais demorei a entender eu descrevi assim: o primeiro toque nunca funciona. Arrastar a fileira com o mouse não atualizava o índice, então o primeiro clique andava a partir de onde eu não estava mais.
Escrever a peça abaixo achou outro, de pé há semanas: a página do case escutava as setas sem perguntar de onde a tecla vinha, então seta dentro de um campo tirava a pessoa do case, e o site tem um campo de senha.
Clique na fileira e use as setas. Enter abriria o case selecionado. É o mesmo modelo da Home, e o teclado aqui não é acessibilidade cumprida por obrigação: é o jeito mais rápido de percorrer a curadoria inteira sem tirar a mão do lugar.
O detalhe que nenhum teste pega
O título comido pelo período, agora com a largura na sua mão.
Não é o título que é comprido demais: é o vizinho que nunca cede. O período estava marcado para não encolher, então toda a perda de largura caía no nome do case, e numa das telas que medi sobrava um pixel para ele.
Minha primeira ideia foi revelar o resto no hover. Trataria o sintoma no lugar errado: com um pixel de caixa não há o que deslizar, e quem chega por toque ou teclado continuaria vendo o texto cortado.
Antes
Depois
Julho a novembro de 2023
Square Register
Arraste e veja as duas versões divergirem da mesma largura. Em cima, o período nunca cede e come o nome do case. Embaixo, ele virou sobrelinha e o título fica com a linha inteira. Nenhum teste pega isto, e nenhum erro aparece no console.
Nenhuma dessas seis apareceria numa lista de requisitos. Todas aparecem quando alguém abre o site.
O gato levou mais tempo que o resto
Nenhuma outra parte deste site consumiu tanta sessão quanto a marca, e o motivo não é capricho: desenhar um bicho que se mexe sem parecer enfeite esbarra em problemas de geometria que eu não sabia que existiam. Duas versões foram reprovadas antes da atual, uma imagem realista gerada e recortada. Eu gero a imagem; o resto do caminho é código.
O rabo é uma fita rígida, e isso muda tudo
O rabo saiu do corpo: recortado uma vez, desenhado por baixo do animal e movido por uma corrente com física própria. Perto da ponta ele dobrava sobre si mesmo e o pelo saía espelhado, como se a fita virasse do avesso.
A causa não é de programação, é de geometria: uma fita rígida não faz curva de raio menor que a própria largura. Na ponta, cada elo tem 3,6 pixels de comprimento dentro de uma faixa de 81 de meia-largura, uma tira 22 vezes mais larga que comprida. Girá-la o suficiente para acompanhar a curva obriga a borda de dentro a passar por cima dela mesma.
E a primeira medição não achou nada. Medindo a área de cada elo em valor absoluto, os 55 davam 1,00 certinho, porque a corrente preserva comprimento e a emenda entre elos é um cisalhamento, que preserva área. O número estava correto e não dizia nada. Medindo a área com sinal, cinco elos apareceram invertidos, todos vizinhos.
O conserto virou um limite por junta, calculado a partir da largura naquele ponto, e não um teto único em graus. Vinte graus é frouxo no meio do rabo e impossível na ponta, porque o que decide não é o ângulo: é a curvatura dividida pela largura.
A medição que tinha aprovado o material errado
Fazer ele andar custou quatro tentativas. Deformar a foto virou um cavalo, porque deformar um quadro não inventa a silhueta que não está nele. Pedir poses geradas falhou duas vezes, e a segunda é a que ensina.
Eu tinha anunciado 51,9 pontos de curso de pata e comemorado. Aquele número pegava o extremo inferior do vulto, que inclui o rabo caído e o corte da imagem, e não a pata. Não foi erro de conta, foi erro de alvo: medi o envelope achando que media a coisa dentro dele. Custou uma rodada inteira.
Com o alvo certo, as oito imagens davam curso de pata entre 5% e 16% do corpo, contra os 35% a 45% de um gato de verdade, e cinco delas levantavam a mesma pata. No tamanho em que o Steve aparece, 52 pixels de altura, essa diferença vira três pixels. Eram oito vezes a mesma imagem.
O vídeo resolveu, e o último defeito estava entre as fases
A quarta tentativa trocou imagem por vídeo, e a diferença não é de qualidade, é de natureza: um vídeo nasce como um movimento, em que quadros vizinhos são fases do mesmo passo e não desenhos que saíram parecidos.
Com isso o teste que decide fica simples, e é em coordenada de mundo: a pata apoiada tem que ficar parada enquanto o corpo passa por cima dela. No vídeo saiu limpo, uma pata em 471, 471, 471, 473, 476 por 24 quadros seguidos. Nenhuma das doze imagens avulsas tinha como exibir isso, porque elas nunca foram uma sequência no espaço.
O último defeito não estava dentro de nenhuma fase, estava entre elas. Ele foi relatado quatro vezes seguidas, cada vez com um nome diferente, e nas três primeiras eu procurei dentro da saída. Na quarta comparei as fases: a caminhada mostrava 16 imagens por segundo e o sentar mostrava 12, uma queda de 25% de cadência duas vezes por volta. Uniformizar custou zero byte.
São 147 quadros no fim: 16 andando, 33 parando, 16 sentando e virando a cabeça, 82 levantando e indo embora.
Duas coisas ficaram dessa sequência, e valem para muito além de um gato. A primeira é que critério de aceite em número, escrito antes de encomendar o material, é o que impede a quarta rodada; nas três primeiras eu não tinha, então olhei para as imagens, e elas pareciam boas. A segunda é que o salto veio de material novo, não de mais engenharia sobre material ruim: quando o vídeo entrou, o rig de pernas inteiro saiu e o código encolheu para um terço.
As regras que a gente inventou no caminho
Três, e as três nasceram de um problema concreto.
Nunca inventar métrica. Quando falta informação, entra um marcador explícito de lacuna, e não um número plausível. É a regra mais fácil de escrever e a mais fácil de quebrar sem perceber, porque número plausível preenche o vazio sem fazer barulho.
O que não deu para confirmar fica marcado como não confirmado. Na extração do design system, três coisas não puderam ser verificadas. Estão anotadas em comentário no próprio código e listadas no registro da decisão. A alternativa seria preencher com um valor razoável e seguir.
Decisão relevante vira registro. Não é cerimônia: é o que permitiu este case existir sem eu precisar lembrar de nada.
O que ainda não terminou
Um case de trabalho ainda não foi escrito. A porta que protege esse material já está de pé, porque ele mostra produto real de empresa; falta o que vai atrás dela. Este case trata de um projeto que continua acontecendo, então ele vai mudar. O log segue aberto.
E há uma coisa que eu não sei responder, então fica registrada como pergunta: não dá para saber se o resultado teria sido melhor sem IA, porque não existe versão de controle. O que dá para afirmar é o que está registrado com data. O que acelerou, o que travou, e onde eu precisei estar.
O que acelerou foi a execução. O que decide se o resultado presta continua sendo meu, e essa parte não ficou menor. Ficou mais visível.