Desenhando minha mesa em isométrico, com Claude Code e algumas skills

A ideia

Eu queria uma página mostrando o que tem na minha mesa. Não uma lista de links pra loja, mas a mesa mesmo: o notebook, o monitor com a light bar em cima, o teclado, o mouse, o fone, até a garrafinha. E queria que ela combinasse com o resto do site: preto e branco, monoespaçado, meio brincalhão.

Então a página Setup virou um desenho isométrico interativo. Dá pra girar o monitor pra retrato, fechar o notebook, trocar a luz da light bar entre fria, quente e desligada (e usar a roda do mouse no controle como dimmer), digitar no seu teclado e ver as teclas afundando no desenhado, e dar zoom em qualquer lugar.

Fiz tudo em par com o Claude Code, e quase todo o visual vem de duas skills: instruções empacotadas que o Claude carrega pra um tipo de tarefa.

Duas skills, dois estilos

A iso-glow desenha figuras isométricas em traço fino, onde só o que está "vivo" brilha. Usei ela primeiro, pra protótipos: um armário de troféus pras conquistas, uma tecla como logo e um rack de servidor. O rack virou a página 404: ele procura a URL nos discos, um disco fica pendurado pra fora, um cabo solto solta faísca, sai fumaça das grades e a resposta é sempre 404. A tecla virou meu logo novo.

A anatomy é a mais pesada. Ela desenha figuras como objetos reais, montados com muitas peças sólidas pequenas: placas, cilindros, peças torneadas, tubos, botões recartilhados, parafusos como pontinhos. Cada peça é pintada de trás pra frente em quatro tons do mesmo cinza, com contorno fino, e toda linha precisa terminar em alguma coisa. Ela vem com checagens pra isso: uma que marca qualquer traço terminando no nada, e uma auditoria da geometria de tubos e cabos.

A primeira coisa que fiz com ela foi o cavalete do mural: umas 45 peças (pés de borracha, travessas, um mastro com régua, um grampo com parafuso recartilhado, um pote de pincéis). Passando o mouse os pincéis sobem do pote; clicando, a tela dele cresce até virar a tela de desenho, pela View Transitions API.

Medindo as coisas de verdade

A regra que fez os desenhos ficarem certos foi simples: montar o objeto real, com números reais. O notebook tem 360 × 280 mm porque o Predator Helios Neo 16 tem. O monitor tem 612 mm de largura, com a base em tripé e o anel vermelho do AOC, porque é assim que o 27G2 é visto de trás. A light bar e o controle redondo saíram direto dos desenhos técnicos do fabricante.

Algumas coisas não tinham desenho. Na garrafa, medi a silhueta pixel a pixel no mockup do próprio fabricante, escalei pro corpo de 70 mm e girei o perfil num sólido de revolução.

A parte difícil: o mouse e o fone

Um mouse gamer é o pior caso pra um kit de prismas e peças torneadas. Minhas primeiras tentativas pareciam um pão de forma.

Então usei modelos 3D grátis do Sketchfab ("Razer Basilisk V3", de thegraphicsgeek, e "Razer Headset", de harithsami01, os dois CC BY 4.0), mas não na página. Os modelos só existem no build, como régua.

A segunda tentativa desenhava os triângulos do modelo direto, nos tons do kit. Ficou pior: um mosaico de triângulos e buracos, porque faces vizinhas caíam em tons diferentes e a malha tinha cascas sobrepostas.

O que funcionou foi o caminho inverso. No build, a malha completa é rasterizada com um depth buffer. Cada pixel ganha a peça a que pertence (botão, roda, tampa, asa do polegar) e um tom a partir das normais suavizadas. Depois cada região é traçada de volta em poucos caminhos vetoriais limpos. A página recebe áreas chapadas em quatro tons, o contorno e as divisões entre as peças. Nenhum triângulo.

Cada objeto caiu de uns 600 KB de triângulos pra menos de 100 KB de caminhos, e finalmente ficou com a cara do resto do desenho.

Fazendo mexer

O desenho é SVG estático, gerado uma vez por um script em Node, então a página recebe o markup pronto e nenhum código de geometria. Isso complica o movimento: não dá pra reprojetar peças 3D no navegador sem mandar o kit junto.

O truque: o build desenha algumas poses-chave de cada peça que se mexe (sete pra tampa do notebook, oito pro monitor) e, pra cada instante entre elas, calcula a matriz afim 2D que leva a pose mais próxima até a verdadeira. A rotação rígida de uma peça plana projeta exatamente nisso, então o navegador só troca de pose e aplica um transform. Roda a 60 fps.

Teve um bug divertido: no meio do fechamento, a tampa fica quase de lado pra câmera, e a matriz pra desfazer essa pose fica quase singular. Num quadro, ela esticava a tampa num borrão preto pela tela. A correção foi sempre partir da pose vizinha que vê a tampa mais de frente.

O que eu levaria daqui

• Números reais primeiro. Toda vez que chutei um tamanho, o desenho ficou errado. Toda vez que medi, ficou certo.
• Use o 3D como régua, não como imagem. Os modelos me deram formas que eu nunca desenharia na mão, e a página continua mandando SVG puro.
• Olhe como um crítico. O Claude renderizava cada mudança num navegador headless e dava zoom de 4×. A maioria das correções saiu desses closes, não da leitura do código.

Tá tudo na página de setup. Experimenta digitar.