免费Chrome 和 Firefox 扩展
逐像素比对你的设计稿
Pixel Perfect Pro 把你的设计图叠加在正在开发的页面上，让你对齐两者，看清每一处差异。无需账户，设计稿保存在你的浏览器中。
截图
使用方法
打开你正在开发的页面，点击 Pixel Perfect Pro 图标。如果页面包含框架（frame），请选择叠加层的放置位置。
以图片形式添加设计稿：拖放、选择文件、从剪贴板粘贴或通过 URL 添加。
把设计稿拖到合适的位置，或用键盘逐像素微调。
降低不透明度，或把混合模式设为“Difference”，让每处不一致都亮起来。修改页面后再检查一遍。
主要功能
混合模式
把混合模式设为“Difference”，与设计稿不一致的每个像素都会亮起来。还提供“Multiply”“Overlay”“Screen”和“Exclusion”。
淡化、反色或擦除对比
淡化设计稿以同时看清两层，在深色页面上反转其颜色，或拖动滑块在设计稿和页面之间擦除对比。
精确定位
用数值设置位置、旋转、缩放和宽度，可沿任一轴居中，还能锁定设计稿，让点击穿透到页面。
栅格系统
Bootstrap、Tailwind 和 Material 预设，或自定义列数、间距、宽度、偏移、颜色和不透明度，另有基线网格。没有设计稿也能使用。
标尺与参考线
测量距离，并把参考线拖到页面上。
每个网站多份设计稿
每个网站都有自己的设计稿。可用标签分组，用上一张和下一张切换，还能把设计稿关联到断点，让窗口自动调整到对应宽度。
自定义快捷键和颜色
每个操作最多可设置两组快捷键，还能为浅色和深色主题自选工具栏颜色。
刷新后依然保留
刷新页面后，叠加层会以相同的设计稿、在相同的位置重新打开。它也能在 iframe 中使用，在 Chrome 中还支持本地 HTML 文件。
隐私优先
- 无需账户，没有统计分析、没有追踪，也没有广告。
- 你的设计稿按网站保存在浏览器中，从不上传。
- 它唯一的网络请求，是下载你通过 URL 添加的设计稿。
- 叠加层只在你打开它的标签页中加载。
所有功能均已包含
- 每个网站多份设计稿，支持标签和断点
- 混合模式、不透明度、反色和对比滑块
- 栅格、基线网格、标尺和参考线
- 自定义快捷键和工具栏主题
- 支持 iframe，以及 Chrome 中的本地 HTML 文件