UI para vídeo (e páginas simples)

Data: 2026-10-22 · Tipo: guia · Status: vigente

Resumo: a tela "cara" é o que torna o motion crível. Esta skill reúne regras universais de interface (hierarquia, espaço, tipografia, cor, estados) e o que muda quando a tela vai para um vídeo: legível no celular, recriada em camadas, cada peça animável. Serve também para página simples (landing, link na bio). Números e exemplos em references/regras-detalhadas.md.

Duas formas de uso:

Criar: desenhar uma tela nova ou recriar a de um produto real para o vídeo.
Revisar: auditar uma tela pronta, apontar o que quebra cada regra e corrigir se o pedido incluir.

1. Contexto antes de desenhar

Ache o sistema visual do projeto ou da marca do assunto: tokens (cores, fontes, espaçamentos, raios) e componentes. Para marca de terceiros, tire do site oficial (método na video-referencias, seção 3). As regras abaixo ajustam a execução, não trocam a marca.
Defina o tipo de tela: landing/site (amplitude grande de tipografia) ou app/dashboard (densidade alta, texto até 24 px).
Liste o que cada bloco precisa comunicar e qual é o elemento mais importante de cada um. Em vídeo: o que a narração diz naquele momento.

2. Referências antes de desenhar

Precisa de	Fonte
Tela de app ou site, seção de landing (hero, preço, FAQ, depoimento), dashboard, fluxo (onboarding, checkout)	Mobbin, se a pessoa tiver (MCP com `search_sections`, `search_screens`, `search_flows`)
Sem Mobbin, ou o Mobbin não tem	Dribbble e Pinterest (palavras-chave curtas em inglês) e capturas reais do produto
Motion, efeito animado, estética, foto, ambiente	Pinterest
Produto real citado no vídeo	o próprio produto: grave a tela ou capture as telas oficiais
Transição pronta, ícone que muda de forma, microinteração, tela de agente de IA	bibliotecas de componentes: references/motion-e-componentes.md

Como buscar e guardar: references/referencias.md. Junte de 3 a 6 referências por tela e anote o padrão aproveitado de cada uma. Use a referência para estrutura, hierarquia, espaçamento e comportamento; não copie marca, texto ou imagem de terceiros.

3. Regras (resumo)

Signifiers: a tela se explica sozinha. Agrupe com contêiner, destaque o selecionado, acinzente o inativo. Clicável mostra hover, pressionado e item ativo; ícone sem texto ganha tooltip.
Hierarquia: tamanho, posição e cor. O mais importante no topo, maior e em negrito; o secundário menor e cinza. Um destaque de cor por bloco. Imagem, logo e ícone no lugar de rótulos ("De:", "Restaurante:"). Lista "rótulo: valor" toda igual é planilha, não design.
Espaço: espaço em branco antes de grade. Múltiplos de 4 (4 a 40 px). Um espaçamento base entre blocos (ex.: 32 px) e metade (16 px) entre itens que andam juntos.
Tipografia: uma família sans-serif. Texto grande com espaçamento entre letras de −2% a −3% e altura de linha de 110 a 120%. Landing: até 6 tamanhos. Dashboard: até 24 px.
Cor: uma primária, com versões claras para fundo e escuras para texto (rampa 50–950). Outras cores só com função: azul foco, vermelho erro, amarelo aviso, verde sucesso.
Modo escuro: borda clara quase sumindo; profundidade por superfície mais clara que o fundo; chip com fundo escuro dessaturado e texto claro da mesma cor.
Sombra: opacidade baixa, desfoque alto. Se a sombra é a primeira coisa que se nota, está errada.
Ícones e botões: ícone do tamanho da altura de linha do texto, perto dele. Padding horizontal = 2× o vertical. Par de CTA: primário preenchido + secundário fantasma.
Feedback: botão com padrão, hover, pressionado, desabilitado e carregando. Campo com foco, erro com mensagem e aviso. Toda ação responde.
Imagem com texto: degradê localizado atrás do texto, não camada escura na foto toda.
Animações sutis em toda interface: card sobe ~2 px com sombra larga e fraca no hover, ripple leve no clique, blocos entram subindo com fade, skeleton com brilho no carregamento. Curto e discreto: nada se mexe sozinho fora do carregamento.
Design caro é decidir fácil, não só parecer limpo: a imagem que vende é o maior elemento do card; 3 degraus de texto, com o dado de decisão em peso ou cor; botão que diz a consequência ("Ver 41 imóveis", "Pagar R$ 239,90"); um selo por tela; navegação mais quieta que o conteúdo; uma escala de raio. Tabelas em references/design-caro.md.
Tela escaneável: ninguém lê a tela, caça a resposta. Cada elemento encosta em 2 ou mais arestas (texto à esquerda, valor e hora à direita; centralizado só o que não é para ler). Densidade se resolve diferenciando (avatar, grupo com cabeçalho, chip com ícone), não espaçando. Ênfase é a diferença com os vizinhos: para destacar, neutralize o entorno. Sem caixa dentro de caixa.

4. Tela dentro do vídeo

Legível no celular: corpo de interface com pelo menos ~22 px num quadro de 1080 de largura; títulos de impacto bem maiores. Teste: pare o quadro 1 s no tamanho do celular. O que se vê primeiro é o que a narração está dizendo?
Recriada em camadas, nunca print colado: cada botão, texto, ícone e balão é uma camada própria, para animar sozinho (entrar com mola, acender, ser clicado). Print entra só como prova (notícia, post real).
Fiel ao produto real: mesmas cores, fonte, raios, ícones e componentes do app que o público conhece (WhatsApp, Gmail, banco). Ícones oficiais (SF Symbols, Material Symbols ou o SVG da marca).
Estados de verdade em movimento: digitação com o teclado real do sistema subindo e teclas acendendo, nunca texto "esticando" por máscara; botão que aperta no clique; carregamento que carrega; notificação no formato real da plataforma.
Dados de exemplo plausíveis: nomes, valores e horários que fazem sentido no nicho; nada de "Lorem ipsum", e nenhum dado pessoal real, e-mail ou credencial na tela.
Uma ideia por tela no quadro: se a tela tem 10 informações e a fala cita uma, as outras ficam neutras e a câmera fecha na que importa.

5. Modo Revisar

Renderize a tela (navegador, prévia do motor ou quadro do vídeo) e capture desktop e celular, ou o quadro no tamanho do celular.
Passe o checklist e registre cada problema com: onde, regra quebrada, valor atual e correção proposta.
Ordene por impacto: hierarquia e legibilidade, depois espaço e tipografia, depois polimento (sombra, estados, microinteração).
Corrija em mudanças pequenas e verificáveis, preservando a marca e o texto.

Checklist (cada item é também um "cheiro de IA")

6. Verificação

Renderize e olhe: desktop (1440 px) e celular (390 px), claro e escuro se existir; em vídeo, o quadro no tamanho do celular.
Confira no código os números das regras (tamanhos, alturas de linha, espaçamentos, sombras).
Interaja: hover, clique, foco e envio mostram resposta.
Compare antes e depois e liste o que mudou e por quê.

iamjeffia/estudio-ia

O que é estudio-ia?

Perguntar na sua IA favorita

Documentação