測量版面
檢查元素的方框，並讀取即時頁面上與下一個元素之間的間距。
即時網頁設計檢查
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 代理即時存取已核准的品牌素材與投影片版型，讓簡報、one-pager 與其他素材從一開始就保持品牌一致，適用於 Claude Code、Codex、Cursor 與其他 MCP 用戶端。
GitFig
GitFig 是 Figma 外掛，可雙向同步設計代幣與樣式至 GitHub，並在 Figma 內管理儲存庫檔案、分支、提交與合併請求，簡化設計協作流程。
Decktopus AI
Decktopus AI 是一款網頁版 AI 簡報製作工具，可依提示、貼上文字或 PDF 生成品牌一致的投影片，協助個人、團隊與企業更快完成簡報。
Chronicle
Chronicle 是專為團隊打造的 AI 簡報製作工具，可將筆記、文件或現有簡報快速轉成精美商務簡報，支援 AI 投影片生成、品牌控管、協作與匯出為 PPT、PDF 或網站。