Squints: A Design Inspection Tool That Works Directly on Live Web Pages

A Design Tool That Overlays on Real Web Pages

For front-end developers and designers, verifying that a page is "pixel-perfect" against a design spec has always been a hassle. Browser DevTools let you inspect element properties, but measuring spacing, pulling out guides, or checking against a grid usually means toggling between panels and doing mental math. Squints, a new entry on ProductHunt, aims to solve exactly this — it overlays a full suite of design tools directly on top of any live, running web page.

According to its ProductHunt page, Squints positions itself as "Design tools for the live web." It's not a static prototyping tool — it operates on already-rendered, real pages, letting you use it like the inspection features in a design app, directly in production or on local pages.

Core Features: Bringing Design Inspection Into the Browser

Based on the official description, Squints covers several high-frequency inspection scenarios:

• Measure spacing: Measure the distance between elements directly on the page, eliminating manual alignment and guesswork.
• Drag out guides: Pull out alignment guides just like you would in Figma or Photoshop.
• Overlay a column grid: Superimpose a column grid over the page to quickly check whether the layout matches your design spec.
• Pick colours in any format: Sample a color from anywhere on the page and output it in multiple color formats — ready to paste straight into code.
• See the font that actually rendered: Display the font the browser actually rendered, not the one declared in CSS that may not have loaded.
• Slow down or scrub any animation: Slow down or manually scrub through page animations to debug transitions and timing.

These features target the parts of front-end implementation most prone to error and most time-consuming. The "see the font that actually rendered" feature in particular addresses a real pain point: visual discrepancies caused by web font load failures or fallback fonts.

---

Column Grid is a foundational spec in responsive design, typically defined by four parameters — number of columns, column width, gutter, and margin — with 12-column grids being the most common. In design tools like Figma and Sketch, designers set up grids on their artboards as a layout baseline. But once developers implement a design, there's no intuitive way to verify whether elements truly align to that grid — CSS has no built-in "show grid overlay" capability. Squints' grid overlay feature fills this gap, letting developers visually verify layout alignment directly in the browser without opening a design file or screenshotting for comparison.

Font Fallback is the key context behind the "see the font that actually rendered" feature. CSS's font-family property accepts a prioritized list of fonts; the browser tries each in order until it finds one available. When a custom font fails to load — due to a network error, unsupported format, or licensing restriction — the browser silently falls back to the next font in the list. This can cause visible differences in line height, font weight, or overall typography. While the browser DevTools "Computed" panel can show the final applied CSS, it doesn't clearly surface "which font is actually rendering right now." Squints provides a more direct answer to that question.

A Lightweight Tool That's Free, No Account Required, No Tracking

Squints emphasizes three things: Free, no account, no tracking. This low-barrier approach is well-received in developer tooling — users don't have to worry about data collection, and there's no sign-up gate before trying it out. For developers who just need to quickly inspect a page, this "open and use" experience significantly lowers the cost of giving it a shot.

From a category perspective, Squints is listed under Design Tools, Productivity, and Developer Tools — signaling that it aims to serve both designers and developers, acting as a "handoff bridge" between the two.

Market Reception and Positioning

On ProductHunt, Squints has received 65 upvotes and 12 comments, ranking 14th for the day. It was built solo by Andreas Katzmann. These numbers represent a solid mid-tier showing, reflecting genuine steady demand for this type of utility tool — though competition is significant.

In reality, the market already has Figma's Dev Mode, PerfectPixel, and various browser extensions doing similar things. Squints differentiates itself by consolidating measurement, guides, grids, color picking, font inspection, and animation debugging into a single overlay — and applying it directly to live web pages rather than imported screenshots or design files. This "all-in-one overlay" approach, if smooth enough to use, could meaningfully improve the efficiency of daily implementation review and QA.

For teams, the key question is whether it can fit into existing workflows. Free and tracking-free is certainly appealing to individual users, but enterprise environments tend to prioritize collaboration, annotation persistence, and permission management — none of which are clearly addressed in Squints' current public-facing information.

---

PerfectPixel is one of the longer-standing tools in this space. Its core idea is overlaying a semi-transparent screenshot of a design onto the page for pixel-by-pixel comparison — essentially an "image overlay" rather than a "tool overlay." Figma's Dev Mode takes a different approach: it provides annotation, asset export, and code snippet generation inside the design file itself, requiring developers to enter the Figma platform and have access to the original design file. Squints' differentiating strategy is to operate independently of any design file, acting directly on already-rendered live pages. This means it has no dependency on design tools, and works even when there's no original source file — such as when reviewing third-party pages or legacy projects. This positioning makes Squints complementary to those tools rather than in direct competition.

Summary

Squints is a well-conceived tool for developers and designers that brings familiar design inspection capabilities to any live web page. Its six core features — spacing measurement, guides, grid overlay, color picking, real font inspection, and animation debugging — address the core pain points of front-end implementation, and its free, no-account, no-tracking positioning makes it a lightweight utility worth bookmarking. Whether it can stand out in a crowded field will depend on how well it refines its interaction details and whether it eventually adds collaboration features.