测量布局
检查元素的盒模型，并读取实时页面中该元素与下一个元素之间的间距。
实时网页设计检查
Squints 是一款 Chrome 扩展，为实时网页提供设计检查工具。它面向设计工程师，适用于布局、字体、颜色和动效通过代码实现，而不只是确定在设计文件中的工作场景。
该扩展可以检查尺寸和间距、放置可吸附的参考线、叠加记忆的列网格、为页面添加批注、识别已渲染的字体和颜色 token，以及减慢或拖动查看动画。结果可以捕获为截图或录制内容，并可选择包含或排除批注。
功能
使用标尺和参考线
拖出可自动吸附到位的标尺和参考线，使用方式类似于 Figma 中的测量工具。
叠加网站专属网格
在真实页面上叠加列网格；网格会按网站保存。
为界面添加批注
直接在页面上绘制箭头、方框和备注，用于标记需要讨论或审查的区域。
检查颜色
拾取颜色，以各种可用格式查看颜色，并识别关联的 token。
检查字体与动效
识别实际渲染的字体及其度量信息，并将动效减速至十分之一，以便仔细检查。
使用场景
审查代码实现的界面
在优化代码实现的界面时，直接在浏览器中检查已实现的间距、元素尺寸和实际渲染的字体。
检查页面对齐
在实时页面上放置列网格、标尺和可吸附的参考线，将其视觉结构与预期布局进行比较。
准备视觉反馈
在分享视觉审查意见或实现备注之前，使用箭头、方框和备注标记特定区域。
追踪视觉细节
检查实际渲染的字体及其度量信息，并采样颜色或颜色 token，以诊断视觉差异。
审查动效与过渡
将动效减速至正常速度的十分之一或拖动查看，然后录制或捕获结果以便进一步审查。
Pros and Cons
Pros
- 将布局测量、字体、颜色、网格、批注和动效检查工具整合到一个浏览器工作流中。
- 可直接在实时网页上使用，包括检查浏览器中实际渲染的间距和字体。
- 同时支持通过截图或录制内容进行视觉批注和捕获。
- 包含可吸附的标尺和参考线，以及按网站保存的列网格。
Cons
- 现有来源仅记录了对 Chrome 的支持；未说明对其他浏览器和操作系统的支持范围。
- 现有页面未记录价格层级、使用限制、集成和团队协作功能。
FAQ
如何安装 Squints？
Squints 通过 Chrome 以浏览器扩展的形式添加。来源将其描述为免费的 Chrome 扩展，但未记录除添加到 Chrome 之外的设置步骤。
Squints 可以用于什么？
Squints 用于检查实时网页，并提供测量布局、检查字体和颜色、绘制批注、叠加网格以及检查动效的工具。
Squints 可以捕获截图或录制内容吗？
可以。Squints 能将检查结果捕获为截图或录制内容，并可选择包含或排除批注。
Squints 支持哪些浏览器？
来源确认支持 Chrome，但未说明是否支持其他浏览器或操作系统。
Quick Facts
- 类别
- 设计工具
- 平台
- Chrome 扩展
- 主要受众
- 设计工程师
- 核心工作流
- 检查并批注实时网页
- 捕获格式
- 截图和录制内容
- 来源域名
- squints.app
Squints 替代品
图像大厨imgcook
图像大厨imgcook是一款设计转代码工具，可将设计稿转换为前端代码，支持Sketch、Photoshop、VS Code及CLI等插件化与开发者工作流。
Beautiful.ai
Beautiful.ai 是一款面向个人、团队和企业的 AI 演示平台，可通过 Smart Slides、协作编辑和导出选项快速创建品牌化幻灯片，并减少手动排版工作。
SlideSpeak Onbrand
SlideSpeak Onbrand 为 AI agents 提供已批准品牌资产和幻灯片版式的实时访问，让演示文稿、one-pager 及其他物料一开始就符合品牌规范，适用于 Claude Code、Codex、Cursor 等 MCP clients。
GitFig
GitFig 是一款 Figma 插件，可双向同步设计令牌与样式到 GitHub，支持仓库文件、分支、提交和拉取请求，助力团队在 Figma 内管理 Git 工作流。
Decktopus AI
Decktopus AI 是一款基于网页的 AI 演示文稿制作工具，可根据提示、粘贴文本或 PDF 快速生成带品牌风格的幻灯片，适合个人、团队和企业高效制作一致的演示文稿。
Chronicle
Chronicle 是一款面向团队的 AI 演示文稿制作工具，可将笔记、文档或现有演示稿快速转为精美商务幻灯片。支持 AI 生成、品牌控制、协作，并可导出为 PPT、PDF 或发布网站。