GratisExtensión para Chrome y Firefox
Replica tu diseño píxel a píxel
Pixel Perfect Pro superpone la imagen de tu diseño a la página que estás construyendo, para que puedas alinearlas y ver cada punto en el que difieren. Sin cuenta, y tus diseños se quedan en tu navegador.
Capturas de pantalla
Cómo funciona
Abre la página que estás construyendo y haz clic en el icono de Pixel Perfect Pro. Si la página tiene marcos, elige dónde va la superposición.
Añade tu diseño como imagen: arrástralo y suéltalo, elige un archivo, pégalo desde el portapapeles o añádelo por URL.
Arrastra el diseño a su sitio, o muévelo píxel a píxel con el teclado.
Baja la opacidad o pon la fusión en «Difference» para que se ilumine cada discrepancia. Corrige la página y vuelve a revisar.
Qué hace
Modos de fusión
Pon la fusión en «Difference» y se ilumina cada píxel que no coincide con el diseño. También están «Multiply», «Overlay», «Screen» y «Exclusion».
Atenúa, invierte o compara
Atenúa el diseño para ver ambas capas a la vez, invierte sus colores en páginas oscuras o arrastra un control deslizante que alterna entre el diseño y la página.
Colocación exacta
Define la posición, la rotación, la escala y el ancho con números, céntralo en cualquiera de los ejes y bloquea el diseño para que los clics lleguen a la página.
Cuadrícula de columnas
Valores predefinidos de Bootstrap, Tailwind y Material, o tus propias columnas, separación, ancho, desplazamiento, color y opacidad, además de una cuadrícula de línea base. También funciona sin diseño.
Regla y guías
Mide distancias y arrastra líneas guía sobre la página.
Varios diseños por sitio
Cada sitio web guarda sus propios diseños. Agrúpalos con etiquetas, pásalos con siguiente y anterior, y vincula uno a un punto de corte para que la ventana se ajuste a su ancho.
Tus atajos y colores
Asigna a cada acción hasta dos combinaciones de teclas y elige tus propios colores de barra de herramientas para los temas claro y oscuro.
Resiste las recargas
Recarga la página y la superposición vuelve a abrirse con el mismo diseño en el mismo lugar. También funciona dentro de iframes y, en Chrome, en archivos HTML locales.
Privacidad por diseño
- Sin cuenta, sin analíticas, sin rastreo y sin anuncios.
- Tus diseños se guardan en tu navegador, por sitio web, y nunca se suben.
- La única solicitud de red que hace es descargar un diseño que añadas por URL.
- La superposición solo se carga en las pestañas donde la abres.
Gratis y sin cuenta
Todo incluido
- Varios diseños por sitio web, con etiquetas y puntos de corte
- Modos de fusión, opacidad, inversión y control deslizante de comparación
- Cuadrícula de columnas, cuadrícula de línea base, regla y guías
- Atajos personalizados y temas para la barra de herramientas
- Iframes, y archivos HTML locales en Chrome