Design & Creativity
Magic Guide Tool
3h agoMagic Guide Tool is a Chrome extension that lets users design, compare, and QA webpages directly in the browser. It offers on‑page rulers and reference lines, area annotations with numbering and notes, vector drawing tools, custom icon stamps, full‑page long screenshots, design‑mock overlay for pixel‑perfect comparison, and one‑click export of annotations and screenshots to the user’s own Google Sheet. All data stays locally in the browser unless the user explicitly exports it.
Ruler & Reference LinesArea AnnotationVector DrawingCustom Icon StampsLong Screenshot CaptureDesign Overlay ComparisonReport ExportLocal Data Storage
Key Capabilities
01
Ruler & Reference Lines
Drag horizontal or vertical lines onto any page, see real‑time coordinates and spacing, and have them auto‑saved per URL.
02
Area Annotation
Select page regions, automatically number them, add customizable notes and colors, and hide numbers as needed.
03
Vector Drawing
Draw arrows, lines, shapes (boxes, ellipses, triangles, stars, checkmarks, crosses) with optional notes and lock‑aspect‑ratio.
04
Custom Icon Stamps
Upload personal images to use as reusable vector stamps within the page.
05
Long Screenshot Capture
Capture full‑page scrolling screenshots stitched into a single image.
06
Design Overlay Comparison
Overlay semi‑transparent design mockups on the live page for pixel‑by‑pixel verification.
07
Report Export
Export annotated regions and screenshots row‑by‑row into the user’s own Google Sheet via a Google Apps Script.
08
Local Data Storage
All reference lines, annotations, and images remain in the browser; only user‑initiated exports leave the local environment.
Use Cases
Web Design QAMark layout issues, compare designs against live pages, and generate reports for developers.Web designers and UI/UX teams
Bug Reporting for DevelopersCreate pinpointed annotations with screenshots to communicate bugs directly in the browser.Front‑end developers and QA engineers
Product Management ReviewOverlay design mockups on live sites to verify implementation fidelity and track feedback.Product managers and stakeholders
Freelance Portfolio DocumentationCapture annotated screenshots of client sites and export reports to Google Sheets for record‑keeping.Freelancers and agencies
Accessibility ChecksUse rulers and annotations to assess spacing and layout compliance for accessibility standards.Accessibility auditors
Update History
Updated 3h ago▲ 0% mentionsProduct HuntWeb