Sampo: Design de UI, Movimento e 3D

O que Sampo: Design de UI, Movimento e 3D faz?

Um caminho único para qualquer trabalho relacionado a como uma tela parece ou se move: uma página web, uma tela de aplicativo, um componente, uma animação, uma cena 3D, ou "deixar bonito". Ele roteia para os playbooks de UI (os caminhos abaixo são relativos a esta skill; os mesmos arquivos são exibidos com sampo playbooks show ui/NAME) e para os verbos do sampo que medem o resultado. O objetivo é uma UI com um ponto de vista, nunca um kit de cartão genérico: cada etapa abaixo define uma decisão ou a comprova. Uma UI de terminal ou um mod do Claude Code usa ../playbooks/references/ui/terminal-ui.md.

Trabalhe dentro de uma tarefa focada (cada etapa edita arquivos). Por etapa, leia apenas o playbook que ela nomeia.

1. Direção: decida qual a sensação desejada

• O repositório já tem uma (um DESIGN.md com uma seção ## Direction, um guia de marca, um design system publicado): ela vence. Leia-a e vá para a etapa 2, a menos que o usuário tenha pedido um novo visual.
• Sem direção, ou o usuário quer opções visuais ou estilos para escolher: carregue: Skill sampo:directions (seis cartões de uma tela a partir de uma frase, a escolha salva como DESIGN.md com um nível de audácia).
• Mostre espécimes reais em vez de descrevê-los: sampo page looks escreve uma galeria com um espécime vivo por cartão de estilo; sampo looks classifica os vinte pelos mantidos e revertidos anteriores do usuário, então ofereça a partir do seu topo.
• A postura, as palavras de gosto, o banco de direções e "Padrões a evitar": ../playbooks/references/ui/design-direction.md.

2. Tokens: tipo, cor, espaço

• ../playbooks/references/ui/type-and-colour.md: escala tipográfica e pareamento, papéis da paleta OKLCH, modo escuro como um passe próprio.
• CSS existente: sampo design extract SRC escreve a tabela de tokens a partir de suas propriedades personalizadas na seção ## Tokens do DESIGN.md (--out - imprime em vez disso). Do nada: sampo design palette SEED --out tokens.css cria uma paleta clara e escura a partir de uma cor (--format css|dtcg|tailwind); ele imprime no stdout, então redirecione com >. Tokens do Figma ou de um .json DTCG: sampo design tokens tokens.json --to md --out DESIGN.md. Valores codificados: sampo design infer SRC propõe tokens.
• Ativos da marca: sampo design tokens DESIGN.md --to brand --out public/ escreve favicon.svg e card.svg.
• Desvio de token: sampo design xray PAGE --out xray.png contorna cada elemento em verde (cor do token) ou vermelho.
• Prove antes de construir: sampo design contrast TOKENS verifica os pares de papéis (texto do corpo 7:1 no escuro).

3. Construção: layout e comportamento

• Comece a partir de um modelo rigoroso: sampo new list, depois sampo new web DIR (uma página) ou sampo new scene DIR (uma cena 3D); sampo new check PATH mantém o rigor.
• ../playbooks/references/ui/composition.md: ritmo, grids, profundidade a partir de uma luz, o herói, um atlas de estados.
• ../playbooks/references/ui/interaction.md: prazos de feedback, navegação por teclado, erros de formulário, regras de toque a 360px.
• Gráficos: ../playbooks/references/ui/data-viz.md. Páginas de história: ../playbooks/references/ui/scrollytelling.md.
• Cartões do lado do código: sampo lib show NAME (os playbooks nomeiam quais).

4. Movimento: projetado, não salpicado

• ../playbooks/references/ui/motion.md: tokens de tempo, uma tabela de estado para movimento, storyboards, movimento reduzido como seu próprio caminho.
• Escreva a Pontuação de Movimento (motion.toml na raiz do repositório), depois sampo motion check (um formulário reduzido ausente, uma suavização desconhecida, um token que o DESIGN.md não possui) e sampo motion compile --to css|waapi|three|lab --out FILE para emitir o código.
• Jogos e UI lúdica: ../playbooks/references/ui/game-feel.md. Som: ../playbooks/references/ui/sound-design.md.

5. 3D: uma cena que nunca quebra a página

• ../playbooks/references/ui/scene-3d.md: composição, luz e material, um orçamento de quadro, o contrato de sobrevivência (sem WebGL, movimento reduzido, contexto perdido), triagem de tela preta.
• Descreva a cena uma vez como dados (câmera, luzes, materiais, malhas, animações) em scene.json, depois sampo scene compile scene.json --to three --out scene.js (um módulo three.js) ou --to component (um componente).
• Sem dependências: o modelo WebGL2 de um arquivo ../playbooks/references/ui/templates/scene.html (sampo new scene).
• Rigs de luz e predefinições PBR: sampo lib show light-and-material; uma textura de shader para uma superfície, nunca a direção inteira: sampo lib list --area looks, depois sampo lib show shader-NAME; bibliotecas: sampo lib show three-js, sampo lib show react-three-fiber.

6. Verificação: prove olhando

• sampo design lint SRC: problemas genéricos de design e deslizes de execução; corrija cada um ou diga por que permanece. Sua última linha nomeia tokens do DESIGN.md que nenhum arquivo usa: conecte-os ou remova-os da tabela.
• sampo design check: portões opcionais do DESIGN.md (## Gates, - brief: advisory|blocking): as cores, famílias tipográficas e durações dos Knobs, encontrados no código; - a11y: …: pares de contraste de token, um caminho de movimento reduzido, sem flashes rápidos, alt de img e um estilo de foco que apareça; - debt: advisory 40: cores, durações e raios não tokenizados por arquivo, abaixo do orçamento.
• sampo design contrast TOKENS novamente após qualquer alteração de cor; sampo motion check após qualquer alteração de movimento.
• sampo critique URL: os estilos que a página realmente usa contra os tokens do DESIGN.md (sem nome, quase duplicados, únicos); --why SELECTOR mostra qual regra venceu. --bingo pontua nove sinais de um visual modelizado (exit 1 em uma linha completa); --marks shot.png transforma traços de lápis vermelho desenhados em uma captura de tela em um FIX capturado por elemento marcado (--note diz o que cada um pede); --brief [ID] verifica se as frases que o briefing cita estão na página.
• ../playbooks/references/ui/visual-qa.md: sampo smoke captura a matriz de quadros (360/768/1440, claro e escuro, movimento reduzido); Leia os PNGs e observe. Antes e depois: sampo img diff A.png B.png --out diff.png.
• Os estados de um componente (padrão, hover, erro, vazio, carregando): sampo stories CHART captura cada um em uma única página de matriz. sampo shot e sampo stories aceitam --profile tv|eink|car|wrist (tamanho e escala dessa superfície) e --reduced-motion (prefers-reduced-motion: reduce, para cartazes e estados estáticos).
• Registre cada um como evidência na etapa da tarefa; uma alteração de UI não está concluída apenas com testes verdes.

7. Gosto

O usuário mantém ou reverte um visual: sampo looks keep LOOK ou sampo looks revert LOOK, para que a próxima classificação aprenda com isso.