Squints

Squints is a free Chrome extension that puts design tools on top of any live web page, built for design engineers. It bundles a set of utilities that let you look closely at a page that is actually running in the browser: measure spacing, drag out guides, overlay a column grid, pick colours in any format, see the font that actually rendered, and slow down or scrub any animation. Rather than working inside a static design file, Squints operates on the real, live page, so the things you examine are the things users see. The extension is free, requires no account, and does no tracking. You add it to Chrome and the tools are available over the pages you visit, without a separate design canvas or an export step in between. The product exists because design is moving into code. Decisions that used to be settled in a design file, such as spacing, type, colour and motion, now get made in the browser, where the tools for looking closely never followed. A designer or design engineer reviewing a built page can see the result, but measuring the gap between two elements, checking which font actually rendered, or slowing down an animation to inspect it is awkward without the right tooling. Squints closes that gap by bringing Figma's measuring tools and more to any live web page. The result is that the same kind of close inspection that happens in a design canvas can happen on the production page itself. Two of the core capabilities are inspection and measurement. With Squints you can inspect anything on the page and read its box, along with the gap to the next one. That means selecting an element and seeing its boundaries and the distance between it and a neighbouring element, rather than estimating by eye. Alongside inspection, Squints provides rulers and guides that you drag out just like in Figma, and they snap. Snapping matters because it turns a rough drag into an exact alignment reference; you pull a guide to the edge of an element and it locks onto the right position, giving you a reliable line to measure against. Together these tools make spacing decisions visible and precise on a live page. Squints also lays a column grid over the real page, and the grid is remembered per site. That means once you set up the column structure for a given site, Squints keeps it for that site, so repeat visits do not require setting the grid up again. Overlaying a grid on the live page lets you judge whether content lines up with the intended columns as it actually renders. On top of that, Squints lets you draw on the page, using arrows, boxes and notes, where it matters. This turns the extension into a lightweight annotation layer, so you can mark up a specific spot on a rendering with a pointer, an outline or a written note instead of describing its location in words. Colour and type are handled directly on the live page as well. Squints lets you pick any colour, showing it in every format, plus the token behind it. Picking a colour from a rendered page means you capture the value that is actually being displayed, and getting the token behind it connects that value back to the design system it came from. For type, Squints identifies any font, the one that really rendered, with metrics. This matters because what a page specifies and what a browser renders are not always the same thing; a fallback may be in use without being obvious. Squints reports the font that actually rendered and includes its metrics, so typography can be checked against what users truly see. Motion and capture round out the toolset. Squints slows motion down, running every animation at a tenth of its speed. Animations often move too quickly to judge by eye, so slowing them to a tenth of their speed makes it possible to watch a transition play out and see what it does. Squints can also scrub any animation, as the product description notes, alongside slowing it down. The extension can also capture the result: a screenshot or a recording, with or without the marks you have made. Capturing a screenshot with marks included produces an annotated visual you can share, while capturing without marks gives a clean view of the page. A recording captures motion over time. These outputs make it easy to document what you found and pass it along. Overall, Squints works by layering design tooling on top of live web pages rather than inside a separate design file. It is delivered as a Chrome extension, so it runs in the browser next to the page you are examining. The tools are applied to the real rendered output, which is the same output users encounter. It is free, needs no account, and does no tracking. That combination keeps the workflow lightweight: there is nothing to sign up for and nothing being collected, so the extension can be used as a quick inspection layer whenever a page needs a closer look. The tools echo Figma's measuring approach, but they are pointed at the live web. The benefit for users is that close inspection becomes possible wherever the work actually lives. Instead of estimating spacing, you read the box and the gap. Instead of guessing at a colour, you pick it in every format and see the token behind it. Instead of wondering which font rendered, you identify it with metrics. Instead of trying to catch a fast animation by eye, you slow it down to a tenth of its speed. Guides that snap give exact alignment references, an overlaid column grid is remembered per site, and annotations plus screenshots or recordings let you document findings. The result is a tighter loop between looking at a live page and making a decision about it. Use cases follow from those capabilities. A design engineer reviewing a built page can measure the spacing between elements and check it against the intended values with rulers and guides that snap. Someone auditing a site's typography can identify the font that actually rendered and inspect its metrics. A designer checking colour can pick any colour on the page, see it in every format, and find the token behind it. When a layout needs verification against a grid, a column grid can be overlaid on the real page and remembered for that site. Animations can be slowed to a tenth of their speed to inspect motion, and the whole result can be captured as a screenshot or a recording, with or without marks, to share. Squints is described as a free Chrome extension for design engineers. It is intended for people who work where design meets code and who need to examine live pages closely. The extension is free, requires no account, and does no tracking, so there is no pricing tier, signup, or data collection to consider. Because it installs in Chrome and operates over web pages, it fits into an existing browser workflow rather than adding a separate application. The Product Hunt listing categorises it under design tools, productivity and developer tools, which matches the mix of design inspection and engineering-facing utility that the extension provides. In short, Squints brings design tools to the live web. It puts inspection, rulers and snapping guides, a remembered column grid, drawing and annotation, colour picking with tokens, font identification with metrics, slowed-down motion, and screenshot or recording capture on top of any live page. For design engineers, that means the close looking that once happened only in a design file can now happen in the browser, free and without an account.