/breakdown: seu produto, desmontado, cada peça etiquetada
O usuário anexa uma foto do produto e/ou nomeia um produto. Você descobre do que ele é feito, descreve-o como partes 3D simples (tamanhos em milímetros), verifica dois quadros, renderiza-o girando, desmontando e etiquetando, e devolve um MP4 silencioso (cerca de 6 segundos).
${CLAUDE_SKILL_DIR} abaixo é a pasta desta skill (a que contém este SKILL.md). Se seu ambiente não preencher, use o caminho dessa pasta. Salve tudo na pasta atual do usuário, ou na pasta que ele nomear. A página 3D carrega three.js da internet, então precisa de conexão.
0. Verificação de configuração
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Leva alguns segundos; execute se não tiver certeza se este computador está configurado. "ready": true significa que pode prosseguir. Caso contrário, execute os comandos listados em "fix", informando ao usuário que é uma instalação única: python3 -m pip install playwright (driver do navegador), python3 -m playwright install chromium (apenas quando Google Chrome ou Edge não estiver instalado, cerca de 150 MB) e python3 -m pip install imageio-ffmpeg (apenas quando ffmpeg estiver faltando). Se o pip recusar com "externally managed environment", crie um ambiente privado uma vez e use seu Python para todos os comandos: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, depois ~/.animate-skills/bin/python -m playwright install chromium se necessário. No Windows, use py em vez de python3. Sem navegador possível aqui (por exemplo, no sandbox do app Claude)? Veja o final deste arquivo.
1. Descobrir o produto
- A partir da foto: forma geral, proporções, cores e acabamentos (vidro brilhante, metal escovado, plástico fosco, tecido), e a disposição dos detalhes visíveis (lentes de câmera, botões, portas). Não reproduza logotipos de marcas.
- Suas partes reais principais, em ordem de montagem de um lado ao outro: 5 a 9 partes que valem a pena etiquetar (capa, tela, moldura, bateria, placa, chip, alto-falante, unidade, almofada...). Use o que este tipo de produto realmente contém; se não tiver certeza sobre um modelo específico, use as partes que sua categoria sempre tem, e não invente partes exóticas.
- O kit constrói produtos a partir de formas simples, então ele brilha em coisas feitas de camadas e peças rígidas (telefones, teclados, fones de ouvido, alto-falantes, controles, relógios, câmeras, eletrodomésticos). Produtos macios e orgânicos (sapatos, roupas, comida) ficam com aspecto de brinquedo: diga isso se o usuário pedir um.
- Tamanhos reais aproximados em mm (um telefone tem ~72 x 150 mm e 8 mm de espessura; um teclado completo ~440 x 130 mm).
2. Escrever a especificação
Salve breakdown-<produto>.json. Cada parte é uma forma simples colocada onde fica no produto montado; level diz o quanto ela se desloca quando o produto se desmonta (0 fica parado, 1 move um passo, 2 dois passos; partes com o mesmo level se movem juntas; metades como 3.5 funcionam, e níveis negativos movem para o outro lado). Exemplo (examples/smartphone.json, abreviado):
{
"title": "Inside a smartphone",
"theme": "dark",
"parts": [
{"name": "Cover glass", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "Display", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "Frame", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "Battery", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5,000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "Logic board", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "Cameras", "shape": "lens", "radius": 4.6, "size": [9.2, 4.2, 9.2], "copies": [[-23.2, -62.2], [-23.2, -45.5], [-8, -53.8]], "y": 6.6, "level": 4},
{"name": "Back glass", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
]
}
Coordenadas: size é [largura x, altura y, profundidade z] em mm; y é para cima. pos: [x, y, z] (ou apenas "y") é onde o centro inferior da parte fica no produto montado. Partes podem se sobrepor levemente; tudo bem.
Formas: slab (placa retangular arredondada; radius = raio do canto), frame (uma slab com um furo; espessura wall), box (cantos vivos), cylinder/disc (radius, altura = size[1]), ring (radius, inner), lens (uma lente de câmera com seu anel metálico), sphere (escalada por size), capsule, cone (radiusTop), torus/cushion (radius, tube; fica plana com o furo para cima: almofadas de fone, anéis de vedação, pneus), band (radius, tube, arc: um arco vertical sobre o topo: arcos de headphone, alças, pegador de chaleira), tube (uma haste de from: [x, y, z] a to: [x, y, z], com radius e opcional radiusTo: tubos de moldura, pernas de cadeira e mesa, tirantes, canudos), lathe (profile: [[radius, y], ...] girado em torno do eixo vertical: garrafas, copos, botões, cones de alto-falante, cúpulas; ambos os lados são desenhados, então a ordem dos pontos não importa). arc (graus, padrão 360) faz um ring, torus, band ou lathe parcial (começa no lado +x; gire com rot). spokes: n em um ring ou torus adiciona n raios e um cubo (rodas, ventoinhas). stretch: [x, y, z] escala uma parte (uma almofada oval: [0.85, 1, 1.15]). rot: [x, y, z] graus gira uma parte em torno do seu centro inferior ([90, 0, 0] coloca um cilindro deitado, [0, 90, 0] gira uma slab para que o texto impresso seja lido ao longo do outro lado).
Repetições: copies: [[x, z], ...] (ou [x, y, z]) coloca a mesma parte várias vezes (câmeras, parafusos, botões); uma cópia também pode ser {"pos": [x, y, z], "rot": [x, y, z]} para girar cada uma (cápsulas auriculares esquerda e direita viradas para fora). grid: {"nx": 14, "nz": 5, "pitch": 19} dispõe uma grade (teclas, células, LEDs). O ponto da etiqueta vai na primeira cópia.
Materiais: glass (transparente), glass-tint (vidro colorido), aluminum, steel, gold, copper, black, white, plastic (qualquer color), ceramic, rubber, foam, fabric (grade de malha), wood, leather, pcb (placa de circuito verde), chip, battery (célula escura; text é impresso nela, | para novas linhas), coil (bobina de carregamento sem fio de cobre), lens, screen (tela iluminada), magnet, emissive (brilha). color (hex) tinge a maioria deles. text imprime uma etiqueta na face superior de uma slab. A iluminação de estúdio clareia um pouco as cores: compare o primeiro quadro de verificação com a foto e escureça color se parecer desbotado. Para metal escuro use steel ou black (aluminum é para tons prateados), e para um produto predominantemente preto use o tema claro para que suas partes não desapareçam no fundo escuro.
A foto do usuário: use-a para acertar a forma, cores e layout. Se mostrar uma face plana de frente (o verso ou tela de um telefone, um cartão, uma tampa), você pode também mapeá-la naquela parte: "photo": "caminho/para/foto.jpg" no nível superior, depois "texture": "photo" na parte, com "crop": [x0, y0, x1, y1] (frações 0-1 da foto) em torno dessa face. Para uma foto angular ou em perspectiva, use apenas cores e layout.
Etiquetas: cada parte é etiquetada com seu name (mantenha nomes curtos: até ~14 caracteres ficam em tamanho completo); "label": "Outro texto" muda o texto, "label": false esconde a etiqueta (use para peças decorativas pequenas, de modo que apenas 5-9 etiquetas apareçam).
A vista: o produto gira em um prato giratório: seu ângulo em radianos é spin - spinSpeed × segundos (padrões 0.95 e 0.07, então termina em cerca de três quartos de vista). Ângulo 0 olha direto para o lado +z do produto; ângulos positivos o giram para que você veja mais do seu lado −x (1.57 olha para a extremidade −x). Para coisas longas e planas onde partes se escondem umas às outras, termine de lado: ex.: "spin": 1.9, "spinSpeed": 0.06. elevation0/elevation1 são a altura da câmera em graus (38 → 24 por padrão). zoom (padrão 1, ex.: 1.2) amplia o produto se parecer pequeno. Produtos longos ou largos (uma bicicleta, um sofá, um sapato deitado) ficam pequenos em um vídeo vertical: use "size": "1080x1080" ou "1920x1080", ou zoom. As etiquetas mantêm uma ordem (a ordem das partes na vista explodida final).
Produtos que não são uma pilha (fones de ouvido, uma chaleira, um controle): desmontar para cima preenche melhor um vídeo vertical, então disponha o produto da forma como suas camadas empilham verticalmente. Para fones over-ear, apoie-os de lado (o eixo das cápsulas na vertical) e separe as camadas de uma cápsula para cima (almofada, malha, driver, placa, bateria, carcaça) enquanto a haste e a outra cápsula permanecem montadas; use explode: [x, y, z] por parte para o deslocamento exato.
Outros campos: title (ex.: "Inside a ..."), subtitle, theme (dark padrão, light), axis ("y" desmonta para cima, padrão; "x" ou "z" desmonta lateralmente, para coisas longas e finas como canetas ou uma garrafa deitada; lateralmente fica menor em um quadro vertical), gap (mm entre níveis; padrão ~19% do tamanho do produto), explode: [x, y, z] em uma parte (seu próprio deslocamento em mm, em vez de seu nível), apartAt (segundos; padrão 1.5), size, duration (padrão ~6-7 s, suficiente para ler as etiquetas), fps. Um segundo exemplo: examples/mechanical-keyboard.json.
3. Verificar dois quadros
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produto>.json --still 0.5 --out breakdown-<produto>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produto>.json --still end --out breakdown-<produto>-check2.png
--still recebe segundos, ou end (adicione um terceiro em cerca de 3.5 s, quando as etiquetas chegam, se as partes estiverem próximas). O primeiro é o produto montado: parece com o produto (forma, proporções, cores)? O segundo é a vista explodida com etiquetas: partes em uma ordem sensata, nada escondido dentro de outra coisa, o ponto de cada etiqueta em sua parte, etiquetas legíveis. Corrija tamanhos, posições, níveis ou a vista e verifique novamente (duas ou três rodadas é normal).
4. Renderizar o vídeo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produto>.json --out breakdown-<produto>.mp4
Cerca de 10-20 segundos. Se um render 3D sair preto, adicione --no-gpu. Delete as imagens de verificação.
5. Entregar
Forneça ao usuário o caminho do MP4 (mostre-o se seu ambiente puder exibir arquivos). Não tem som. Diga em uma linha que as partes são um modelo simplificado do produto, e ofereça uma variação (o tema claro, uma parte renomeada).
Sem navegador aqui? (por exemplo, no sandbox do app Claude)
Se a verificação de configuração não conseguir executar um navegador, escreva a animação como uma página: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produto>.json --html breakdown-<produto>.html. A página é reproduzida em qualquer navegador (mostre-a como um artefato se puder). Informe ao usuário que o MP4 precisa do Claude Code em um computador, ou de uma gravação de tela da página.