照着设计稿还原网页，或者反过来研究别家页面的排版，量间距、拉参考线这些动作通常要来回切工具。哥本哈根的设计师兼前端工程师 Andreas Katzmann 九月底放出一个免费 Chrome 扩展 Squints，把一整套设计工具直接摞在真实网页上，官网给自己的定义是给设计工程师的免费 Chrome 扩展。我把官网、商店页和 Product Hunt 的讨论过了一遍。
主要功能
官网列了八件事。任意元素都能检查，读出盒模型和与相邻元素的间距，不用再心算边距减边框。标尺与参考线像 Figma 里那样拖出来，带吸附，松手就定住。分栏网格覆盖在真实页面上，栏数间距自己定，设置按站点记忆，下次打开还在。页面上可以直接画箭头、方框和批注，评审意见画在截图上发过去，比写一段文字描述直观。任意位置取色，给出多种格式，还显示背后用了哪套设计 token。识别字体给出实际渲染的那款连同字身参数，官方特意强调是真正渲染的字体，前端字体栈回退时这一手很实用，代码里写的是 A，屏幕上落的可能是 B。页面动画能降到十分之一速度慢慢看，下拉菜单的缓动、悬停过渡都逃不过慢放。最后是截图或录屏，带不带标注都行。
形态是纯浏览器扩展，Chrome 应用商店已上架，商店页描述的开头就写明它离线可用，免费、无账号、无追踪是官方描述。装完即用，没有登录流程，也没有账号体系。目前只支持 Chrome，其他浏览器官方没有提及。Chrome 生态里同类工具零散，量距、取色、查字体往往要装好几个，Squints 把这些收进一个扩展。
作者背景可以多说两句。Andreas Katzmann 今年 23 岁，住在哥本哈根附近，个人作品集里有 Nørgård Mikkelsen、Huscompagniet 这些公司的项目，职业就是产品设计师加前端工程师，Squints 属于把自己每天的手感做成了工具。他把联系邮箱直接挂在个人站上，有意见发信就行，独立开发者的做派。
解决了什么需求
这些事浏览器开发者工具理论上都办得到，为什么还要装个扩展，Product Hunt 评论区有人直接把这个问题抛给了作者。用户 Daniel Carter 问 Squints 和 DevTools 差在哪，DevTools 好像技术上都能做。作者回复承认这一点，但摩擦本身就是问题，DevTools 面向调试而生，看字体要翻计算样式，量间距要手动加减，Squints 给的是更宽容、设计优先的查看方式。打个比方，量一个元素到相邻元素的间距，DevTools 里要把两组数字抄下来手算，这里点一下就出数。用户 Matthew Schapiro 的评价更直接，光字体识别一项就值了。Grace Gui 夸它做得漂亮又实用，Nathan Holdstein 的评语是想法简单有用、执行到位，Sharayu Sathe 注意到 UI 干净，Manuel Lorenzo Bouzada 说完成度很高，Trevor Loy 的原话是 This looks tight，利落。当日它排在 Product Hunt 日榜第 15 位，拿到 78 分，48 人关注，评论区的互动集中在字体识别与 DevTools 对比这两条线上。
用法上几类人各取所需。设计验收的拿它量间距核对实现，照稿还原的把网格和参考线铺在页面上比着写。研究排版的人用得最多，字体与取色一查一个准，翻源码的功夫全省了。走查记录攒下来，截图带标注就是现成的验收档案。
注意事项
Chrome 商店页面确认存在，但评分、安装量、版本号这些数据我没能抓到，页面渲染受限，装之前看不到社区口碑。同名不同物的情况要留神，Firefox 上有一个叫 Squint 的扩展，是另一个产品，别装错。无账号无追踪是官方自述，没有第三方审计背书，介意的可以看它申请的权限再决定，浏览器扩展的权限清单在商店页都查得到。免费是现在的状态，作者没有承诺永远免费，好在没有账号体系，真要变化，迁移成本也低。
总结
小而准的工具，没有宏大的路线图，就是把网页走查时的十来件小事做得顺手。作者自己拿它干日常活，自用转公开的小工具，维护意愿通常比商业承诺可靠。天天做设计还原、排版研究的人，装一个不亏。
来源
- 官网 https://squints.app
- Product Hunt 页面 https://www.producthunt.com/products/squints
- Chrome 应用商店 https://chromewebstore.google.com/detail/squints/aapcfeiigjccdealkigbpnjdpanpfolb
- 作者个人站 https://ktz.dk