# Comments Layer Pins numerados que você solta sobre uma imagem ou tela para comentar, responder e marcar como resolvido. > O Comments Layer é um componente exclusivo do THM Componentes que adiciona comentários no estilo do Figma sobre qualquer conteúdo: com a tecla C, a pessoa clica e solta um pin numerado, abre uma conversa com respostas e marca como resolvido. Um painel lateral lista e filtra tudo. Serve para revisar artes, telas e documentos sem sair do produto. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/comments-layer/ ## Como ele é Uma barra no topo traz o botão de comentar, a dica de atalho e a contagem de comentários abertos. No modo comentar, o cursor vira uma mira e cada clique solta um pin em forma de gota, com as iniciais de quem comentou e um número pequeno no canto. Cada autor ganha uma cor fixa. Clicar num pin abre um balão branco com a conversa, os tempos relativos, o campo de resposta e o botão de resolver; resolvido, o pin esmaece e sai da arte. À direita fica um painel com abas de abertos e resolvidos e um filtro de busca. ## Você pode estar procurando isto se pediu algo assim - “deixar o cliente comentar em cima da arte, tipo Figma” - “clicar num ponto da imagem e escrever um comentário ali” - “bolinhas numeradas com comentários sobre a tela do protótipo” - “aprovação de layout com comentários e opção de marcar como resolvido” - “área de revisão de documentos com uma conversa em cada ponto” - “quero que a equipe aponte ajustes direto no print do site” - “feedback visual em cima da página sem usar ferramenta externa” ## Também chamado de camada de comentários, comentários com pins, comment pins, anotações sobre imagem, visual feedback, design review comments, comment threads ## Quando usar - Aprovação de artes, banners e peças de campanha com o cliente dentro do seu sistema - Revisão de telas e protótipos em portais de agência ou de produto - Comentários sobre plantas, contratos ou documentos exibidos como imagem - Fluxos de QA em que a equipe aponta defeitos visuais na própria tela ## Quando evitar - Comentários que precisam acompanhar um trecho de texto que muda de lugar, já que o pin guarda só uma posição em porcentagem - Telas de celular muito estreitas, em que o painel lateral fica escondido ## Como pedir para a sua IA ```text Coloque uma camada de comentários estilo Figma sobre a prévia das artes no meu portal de aprovação: pins numerados com conversa, resolver e reabrir, painel com filtro, atalho C para o modo comentar, navegação por teclado e eventos para salvar tudo na minha API. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Comments Layer ### Onde o Comments Layer guarda os comentários? No estado do seu app. O Comments Layer trabalha com v-model e emite um evento para cada novo pin, resposta, resolução, reabertura e movimento, com a posição em porcentagem. Para que todos vejam os mesmos comentários, ligue esses eventos à sua API ou a um banco em tempo real; o componente não traz servidor próprio. ### Posso usar o Comments Layer sobre qualquer conteúdo? Sim. O Comments Layer recebe o conteúdo pelo slot, então funciona sobre imagem, captura de tela, protótipo ou documento. Os pins ficam em porcentagem da área, por isso acompanham a área quando ela muda de tamanho. Sem slot, a demonstração mostra uma arte fictícia com quatro comentários. ### O Comments Layer funciona pelo teclado? Funciona. No Comments Layer, a tecla C liga e desliga o modo comentar, N e P ou as setas passam pelos pins abertos, Enter abre a conversa e Esc fecha. Criar, resolver e mover comentários gera um aviso para leitores de tela. ## Componentes relacionados - [Live Cursors](https://vibecode.thmtecnologia.com/componentes/live-cursors/): Setinhas coloridas com o nome de cada colega andando pelo documento, com trechos selecionados e recados no cursor. - [Whiteboard](https://vibecode.thmtecnologia.com/componentes/whiteboard/): Quadro branco sem bordas para colar notas, desenhar formas, ligar setas e rabiscar à mão, como numa oficina ao vivo. - [Version Timeline](https://vibecode.thmtecnologia.com/componentes/version-timeline/): Linha do tempo das versões de um documento, com régua para voltar no tempo, comparação lado a lado e botão de restaurar. - [Diff Viewer](https://vibecode.thmtecnologia.com/componentes/diff-viewer/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [Block Editor](https://vibecode.thmtecnologia.com/componentes/block-editor/): Editor de texto em blocos: digite barra para inserir títulos, listas e tarefas, e arraste cada bloco para reordenar. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.