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 that brings layout, typography, colour, grid, annotation, and motion-inspection tools to live web pages. It is designed for design engineers reviewing and refining interfaces in the browser.
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
Alternative a Squints
图像大厨imgcook
imgcook is a design-to-code tool that converts design drafts into front-end code. It supports plugin-based and developer workflows for Sketch, Photoshop, VS Code, and CLI usage.
Beautiful.ai
Beautiful.ai is an AI presentation platform for individuals, teams, and enterprises. It helps users create branded slide decks with Smart Slides, collaborative editing, and export options while reducing manual formatting work.
SlideSpeak Onbrand
SlideSpeak Onbrand gives AI agents live access to approved brand assets and slide layouts so decks, one-pagers, and other collateral can start on brand. It is designed for Claude Code, Codex, Cursor, and other MCP clients.
GitFig
GitFig is a Figma plugin that syncs design tokens and styles with GitHub in both directions. It supports repository files, branches, commits, and pull requests from inside Figma.
Decktopus AI
Decktopus AI is a web-based AI presentation maker that generates branded slide decks from prompts, pasted text, or PDFs. It is aimed at individuals, teams, and enterprises that want to produce presentations faster while keeping layouts and branding consistent.
Chronicle
Chronicle is an AI presentation maker for teams that need to turn notes, docs, or existing decks into polished business presentations. It supports AI slide generation, brand controls, collaboration, and export to PPT, PDF, or a published website.