Como ele é
Imagine a janela do Safari no Mac, desenhada em traço limpo e sem nenhuma distração. No alto fica uma barra com três bolinhas cinza no canto, como os botões da janela, os ícones de barra lateral, voltar e avançar, e no centro o campo de endereço com cadeado, o texto que você define e o botão de recarregar. À direita aparecem os ícones de compartilhar, nova aba e abas. Abaixo da barra, a imagem que você passa ocupa toda a página, com os cantos de baixo arredondados. No modo claro, a moldura é cinza-claro e branca; no escuro, grafite. Não há animação.
Você pode estar procurando isto se pediu algo assim
- mostrar o print do meu site dentro de uma janela de navegador
- moldura de navegador para colocar a tela do sistema no portfólio
- aquela janela do Safari com o site dentro, tipo apresentação da Apple
- deixar o print do painel com cara de produto de verdade
- imagem do site num navegador desenhado com o meu domínio na barra
- mockup de browser para o estudo de caso do cliente
Também chamado de
- mockup de navegador
- browser mockup
- print dentro do navegador
- moldura de navegador
- browser frame
- mockup de site
Quando usar
- Estudo de caso de site ou sistema no portfólio
- Pitch ou proposta comercial com telas do produto web
- Seção de destaque mostrando o painel de um SaaS
- Páginas de lançamento que exibem o site novo do cliente
Quando evitar
- Quando a página precisa ser navegável, já que a moldura recebe só uma imagem
- Telas de celular, que ficam espremidas no formato largo da janela
Como pedir para a sua IA
Crie uma moldura de navegador Safari em SVG para o estudo de caso do meu portfólio, com o print do site preenchendo a página, o domínio do cliente na barra de endereço, cores que acompanhem o modo escuro e tamanho responsivo no celular.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Postigo
Dá para mudar o endereço que aparece na barra de Postigo?
Sim. Postigo recebe o texto da barra de endereço pela prop url e o mostra ao lado do cadeado, em letra pequena e cinza. Na demo aparece um domínio de exemplo; troque pelo domínio do cliente ou do seu produto para o print ficar coerente.
Dá para mostrar meu site funcionando dentro de Postigo?
Na versão do catálogo, não: Postigo exibe uma imagem pela prop src, recortada para preencher a área abaixo da barra. Para um site navegável, peça à IA para sobrepor um iframe ou o próprio HTML a essa área, com os cantos de baixo arredondados.
Postigo funciona no modo escuro?
Sim. Postigo usa a classe dark do Tailwind: moldura cinza-claro e barra branca no modo claro, grafite e quase preto no escuro, com ícones cinza nos dois. O prompt do THM Componentes orienta a IA a substituir esses tons fixos pelos tokens de cor do seu projeto.
