Posez votre maquette sur la page que vous avez construite
Déposez un export de maquette sur votre page et alignez-le. Passez en Difference : les pixels identiques deviennent noirs, et seul ce qui est décalé reste visible.
Gratuit et open source (MIT). Version 0.2.2. Pas encore sur le Chrome Web Store : installez-le depuis la source, comme indiqué ci-dessous.
Voyez-le sur une vraie page
Ce qu'il fait
Calques illimités
Maquettes desktop, tablette et mobile côte à côte, gratuitement. Réglez le niveau de transparence et l'échelle de chacune, avec un clic pour les maquettes exportées en 2x.
Quatre façons de comparer
Difference rend noirs les pixels identiques, pour que seuls les écarts apparaissent. Il y a aussi Multiply, Screen et Invert.
Alignez vite
Faites glisser, tapez X et Y, décalez avec les flèches du clavier (Maj pour 10 px), ou cliquez sur Center ou Fit width.
Groupes
Nommez un groupe par page, et la liste n'affiche que les maquettes de cette page.
En-têtes fixes, pages étroites
Épinglez un calque à la fenêtre pour un en-tête fixe, ou déplacez les commandes dans le panneau latéral de Chrome.
Exporter et importer
Enregistrez les calques et images d'un site dans un seul fichier, et ajoutez-les sur n'importe quel ordinateur.
L'installer depuis la source
Pixel Veil n'est pas encore sur le Chrome Web Store. Le compiler prend environ une minute, avec Git et Node.js :
git clone https://github.com/Ank-KhoaHo/pixel-overlay
cd pixel-overlay
npm ci
npm run buildOuvrez ensuite chrome://extensions, activez le Mode développeur (Developer mode), choisissez Charger l'extension non empaquetée (Load unpacked), puis sélectionnez le dossier .output/chrome-mv3.
Vos maquettes restent dans votre navigateur
Pixel Veil n'a ni compte, ni outil d'analyse, ni serveur. À l'installation, il ne peut lire aucun site ; il ne dessine sur un onglet qu'après que vous avez cliqué sur son icône dans cet onglet.
Lire la politique de confidentialité