DEV Community

Jerry Lee
Jerry Lee

Posted on

PixOK, A tool to aid web developers in design restoration

https://github.com/ha0z1/PixOK
https://chromewebstore.google.com/detail/khobdjijiochmoombmndbjhlampfpggk

As a Front-End Developer, have you ever been tormented by designers with magnifying glass and labeling rulers?

Image description

Today, it came, it really came. A front-end drawing assistant, support PC draft, Mobile draft, Lynx and HTML5.

It will turn web pages into a PS-like design tool that can pull guides, suck pixels, and stack design sketches.

Image description

Image description

Image description

Features currently supported:

  • [x] Support uploading and pasting the design draft, superimposing it on the webpage, and refreshing the page will not be lost.(Don't worry, the image is just only converted into a base64 string and stored locally, and it will not be transmitted to global network. )
  • [x] Support web version of devtool, automatically fit lynx canvas (press reset button to fit with one click)
  • [x] Support the development of H5 pages
  • [x] Supports visuals in SVG format (e.g. figma products)
  • [x] Support pull reference line
  • [x] Supports displaying all element box strokes
  • [x] Support anywhere to absorb color values, https page can be automatically copied to the sticker board
  • [x] Yijian adjusts the browser size (several commonly used grid sizes are built in 1024/1280/1440/1920)
  • [x] Automatic refresh, automatic refresh when the page or browser refocuses, suitable for scenarios where manual CMD + R is required to frequently switch between IDE and browser
  • [ ] TODO Multilingual
  • [ ] Support HEIC pic,it's usually a screenshot from an iPhone

Top comments (0)