PixOK,助力前端切图仔

309 阅读1分钟

最近工作上的一些要求,设计师开始狠抓视觉还原,做为前端,你是否被设计师拿放大镜和标注尺抠像素折腾得痛苦经历?

做为一个前端,我实在不愿意在切图上花时间。为此,用了两个周末的时间,写了一个 PixOK 的插件,希望对大家有用。

chromewebstore.google.com/detail/pixo…

目前具备的功能

  • 支持上传和粘贴设计稿,叠加在网页上
  • 支持 SVG 格式的视觉稿,(如 figma)
  • 支持拉参考线
  • 支持显示所有 div 描边
  • 支持随地吸色值
  • 调整浏览器尺寸(内置了几大标准栅格尺寸)
  • TODO 自动刷新
  • TODO 多语言

image.png 移动网页支持

image.png 叠设计稿,支持 svg 格式(疯狂暗示)

image.png 常用设计视口支持

image.png 取色器

image.png

参考线

image.png

盒描边

本着一如既往的原则,插件绝不添加恶意代码,不在非工作状态下增加性能开销。 其他插件 chrome.google.com/webstore/de…