Measure layout
Inspect an element’s box and read the gap to the next element on a live page.
Squints
Squints is a free Chrome extension for inspecting layout, typography, colour, grids, annotations, and motion on live web pages—built for design engineers.
Live-web design inspection
Squints is a Chrome extension that brings design-inspection tools to live web pages. It is aimed at design engineers working where layout, typography, colour, and motion are implemented in code rather than settled only in a design file.
The extension lets users inspect dimensions and spacing, place snapping guides, overlay a remembered column grid, annotate the page, identify rendered fonts and colour tokens, and slow or scrub animations. Results can be captured as screenshots or recordings, with annotations included or excluded.
Features
Use rulers and guides
Drag out rulers and guides that snap into place, similar to measuring tools in Figma.
Overlay site-specific grids
Overlay a column grid on the real page; the grid is remembered per site.
Annotate interfaces
Draw arrows, boxes, and notes directly over the page to mark areas for discussion or review.
Inspect colour
Pick colours to view them in every available format and identify the associated token.
Inspect type and motion
Identify the font that actually rendered, including its metrics, and slow animations to one-tenth speed for closer inspection.
Use cases
Review a coded interface
Check implemented spacing, element dimensions, and rendered type directly in the browser while refining a coded interface.
Check page alignment
Place a column grid, rulers, and snapping guides over a live page to compare its visual structure with an intended layout.
Prepare visual feedback
Mark up a specific area with arrows, boxes, and notes before sharing a visual review or implementation comment.
Trace visual details
Inspect the font that actually rendered, review its metrics, and sample colours or their tokens when diagnosing visual differences.
Review motion and transitions
Slow an animation to a tenth of its normal speed or scrub it, then record or capture the result for closer review.
Pros and Cons
Pros
- Combines layout measurement, typography, colour, grid, annotation, and motion-inspection tools in one browser workflow.
- Works directly on live web pages, including the spacing and type that actually render in the browser.
- Supports both visual annotation and capture through screenshots or recordings.
- Includes snapping rulers and guides plus a column grid remembered per site.
Cons
- The available source only documents Chrome support; coverage for other browsers and operating systems is not specified.
- Pricing tiers, usage limits, integrations, and team collaboration features are not documented on the available pages.
FAQ
How is Squints installed?
Squints is added through Chrome as a browser extension. The source describes it as a free Chrome extension, but does not document setup steps beyond adding it to Chrome.
What can Squints be used for?
It is designed for inspecting live web pages and includes tools for measuring layout, checking typography and colour, drawing annotations, overlaying grids, and examining motion.
Can Squints capture screenshots or recordings?
Yes. Squints can capture the inspected result as a screenshot or a recording, with annotations either included or omitted.
Which browsers does Squints support?
The source identifies Chrome as the supported browser. It does not specify support for other browsers or operating systems.
Quick Facts
- Category
- Design Tool
- Platform
- Chrome extension
- Primary audience
- Design engineers
- Core workflow
- Inspect and annotate live web pages
- Capture formats
- Screenshots and recordings
- Source domain
- squints.app
Squints Alternatives
图像大厨imgcook
图像大厨imgcook 是一款设计转代码工具，可将设计稿转换为前端代码，支持 Sketch、Photoshop、VS Code 和 CLI 工作流。
Beautiful.ai
Beautiful.ai is an AI presentation platform for teams and enterprises. Create branded slide decks with Smart Slides, collaboration, and export options.
SlideSpeak Onbrand
SlideSpeak Onbrand gives AI agents live access to approved brand assets and slide layouts so decks and collateral start on brand. Built for Claude Code, Codex, Cursor, and other MCP clients.
GitFig
GitFig syncs Figma design tokens and styles with GitHub in both directions, supporting repository files, branches, commits, and pull requests.
Decktopus AI
Decktopus AI is a web-based AI presentation maker that creates branded slide decks from prompts, text, or PDFs for teams and enterprises.
Chronicle
Chronicle is an AI presentation maker for teams to turn notes, docs, or decks into polished business presentations, with AI slides, brand controls, collaboration, and export to PPT, PDF, or website.