GrátisExtensão para Chrome e Firefox
Iguale seu design pixel por pixel
O Pixel Perfect Pro sobrepõe a imagem do seu design à página que você está construindo, para você alinhar os dois e ver cada ponto em que eles diferem. Sem conta, e seus designs ficam no seu navegador.
Capturas de tela
Como funciona
Abra a página que você está construindo e clique no ícone do Pixel Perfect Pro. Se a página tiver frames, escolha onde a sobreposição vai ficar.
Adicione seu design como imagem: arraste e solte, escolha um arquivo, cole da área de transferência ou adicione por URL.
Arraste o design até o lugar certo, ou mova um pixel por vez pelo teclado.
Diminua a opacidade ou mude a mesclagem para “Difference”, para que cada diferença se destaque. Corrija a página e confira de novo.
O que faz
Modos de mesclagem
Use a mesclagem “Difference” e cada pixel que não bate com o design se acende. “Multiply”, “Overlay”, “Screen” e “Exclusion” também estão lá.
Esmaecer, inverter ou comparar
Esmaeça o design para ver as duas camadas ao mesmo tempo, inverta as cores em páginas escuras ou arraste um controle que alterna entre o design e a página.
Posição exata
Defina posição, rotação, escala e largura em números, centralize em qualquer eixo e trave o design para que os cliques passem para a página.
Grade de colunas
Predefinições de Bootstrap, Tailwind e Material, ou suas próprias colunas, gutter, largura, deslocamento, cor e opacidade, além de uma grade de linha de base. Funciona até sem design.
Régua e guias
Meça distâncias e arraste linhas-guia para a página.
Vários designs por site
Cada site guarda os próprios designs. Agrupe-os com tags, passe de um para outro com próximo e anterior, e vincule um a um breakpoint para a janela se ajustar à largura dele.
Seus atalhos e cores
Defina até duas combinações de teclas para cada ação e escolha as cores da barra para os temas claro e escuro.
Resiste a recargas
Recarregue a página e a sobreposição volta com o mesmo design no mesmo lugar. Também funciona dentro de iframes e, no Chrome, em arquivos HTML locais.
Feito para ser privado
- Sem conta, sem analytics, sem rastreamento e sem anúncios.
- Seus designs ficam salvos no seu navegador, por site, e nunca são enviados.
- A única requisição de rede que ele faz é baixar um design que você adiciona por URL.
- A sobreposição só carrega nas abas em que você a abre.
Tudo incluído
- Vários designs por site, com tags e breakpoints
- Modos de mesclagem, opacidade, inversão e controle de comparação
- Grade de colunas, grade de linha de base, régua e guias
- Atalhos personalizados e temas da barra
- Iframes e arquivos HTML locais no Chrome