UI照妖镜 is a Chrome add-on and tool that serves as a valuable aid for UI designers and front-end developers. With this tool, UI designers can easily perform UI visual inspections and switch to H5 view to preview web pages without the need to open Chrome DevTools. Additionally, it helps front-end developers closely match the design drafts and quickly identify any differences during the page reconstruction phase, reducing communication costs with designers.

This tool offers several useful features. Users can view, import, and delete design drafts. The drafts are displayed on top of web pages and can be moved, hidden or shown, and adjusted for transparency. Imported design drafts are cached locally in the browser for easy access.

UI照妖镜 also provides convenient keyboard shortcuts for efficient navigation. Lowercase "wsad" keys allow users to move the design drafts by 1 pixel in different directions, while uppercase "WSAD" keys move them by 10 pixels. The numeric keys 0-9 can be used to adjust transparency with a double press (pressing "00" sets the transparency to 100%). The uppercase "H" key toggles the visibility of the design drafts, and the uppercase "Z" key switches between PC and H5 views.

Please note that the tool automatically detects the network environment and can only be used when its icon is active. It only supports image file uploads, with a maximum file size of 2MB per file and a limit of 3 uploads.