測量設計權杖
在 Safari 中讀取網站並辨識色彩及其角色，而不只是呈現取樣色票清單。
從網站到程式設計代理的測量式交接
Siteprint 是 Mac 專用 Safari 擴充功能，可測量你正在檢視的網站設計。它會記錄頁面的色彩配置與色彩角色、字體比例、間距、圓角、陰影，以及頁面區段的藍圖，為程式設計工作流程提供可直接使用的具體設計數值。
免費版本支援檢視、權杖匯出，以及用於儲存掃描結果的 Library。Pro 可將掃描結果轉為一則提示詞或 DESIGN.md 檔案，新增主題與 Compose 以組合兩個已儲存的網站，並讓支援的程式設計代理直接讀取掃描結果。Siteprint 本身不會建立網站；連接的程式設計代理會使用測量結果來建立新頁面。
Siteprint 的功能
檢視頁面結構
顯示色盤、字體排版，以及頁面區段的藍圖，讓你在匯出前檢視參考設計。
產生程式設計簡報
將測量值整理成一則給程式設計代理使用的提示詞；Pro 另提供 DESIGN.md 匯出功能。
匯出設計方向
匯出主題與權杖，以便用於新介面，並保留字體大小、字重、圓角與間距等具體數值。
組合兩個參考設計
將兩個已儲存的網站掃描結果組合成新的樣式，而不是將任一參考網站視為可直接複製的頁面。
與程式設計代理分享掃描結果
連接 Claude Code、Cursor、Codex 與其他程式設計代理，讓它們能直接在 Mac 上讀取已儲存的掃描結果。
Siteprint 的實際使用方式
從參考網站開始建立新介面
在 Safari 中掃描參考網站，檢視其字體排版、間距、色盤與區段藍圖，然後將測量出的設計方向交給 AI 程式設計工具，而不必手動描述外觀。
組合設計參考
將多個掃描結果儲存到 Library，並使用 Compose 將兩個設計參考組合成原創頁面的新樣式。
建立開發者交接資料
在開發者需要具體的色彩、字體、圓角與間距數值來進行實作或重新設計時，匯出權杖與主題。
提供設計脈絡給程式設計代理
讓 Claude Code、Cursor 或 Codex 直接存取已儲存的掃描結果，使程式設計代理能在其程式設計工作流程中使用測量出的設計脈絡。
分析現有視覺系統
使用檢視畫面研究現有網站如何組織其視覺系統，再決定要在其他獨立產品中調整哪些部分。
Pros and Cons
Pros
- 可測量色彩角色、字體比例、間距、圓角、陰影與區段結構等具體設計屬性。
- 提供免費方式來檢視網站、匯出權杖，並將掃描結果儲存到 Library。
- 可為程式設計工作流程建立包含精確數值的提示詞或 DESIGN.md，並支援 Claude Code、Cursor 與 Codex。
- 掃描結果會在 Mac 上本機處理；網站聲稱不會上傳資料或追蹤使用者。
- 支援 Compose，可將兩個已儲存的網站掃描結果組合成新的樣式。
Cons
- 目前是 Mac 專用的 Safari 擴充功能，且需要 macOS 14 或以上版本；不支援 Chrome 和 iPhone。
- 它會測量並匯出設計，但不會自行建立網站；這個步驟由獨立的程式設計代理執行。
- 直接使用程式設計代理的工作流程與產生的提示詞屬於 Pro 功能。
FAQ
如何設定 Siteprint？
從 Mac App Store 安裝 Siteprint，開啟 App 一次，然後在 Safari 的「設定」→「擴充功能」中啟用擴充功能。開啟一個 http 或 https 網站，按一下 Safari 工具列中的 Siteprint 按鈕，並允許 Safari 讀取該網站。如果分頁已經開啟，請重新載入頁面並選擇「重新掃描」。
我需要 Apple Intelligence 嗎？
不需要。測量工作會直接從頁面本身取得。在具備 Apple Intelligence 的 Mac 上，裝置端模型還能額外描述掃描結果，並透過 Ask this design 回答問題。
Siteprint 會自行建立網站嗎？
不會。Siteprint 會測量設計並產生提示詞或 DESIGN.md 匯出檔。Claude Code、Cursor 或 Codex 等程式設計代理會使用這些內容來建立頁面。
Free 和 Pro 方案包含哪些內容？
免費方案包含檢視、權杖匯出與 Library。Pro 方案新增產生的提示詞、DESIGN.md 與主題、Compose，以及程式設計代理存取功能。Pro 為一次性購買，價格為 $9.99。
程式設計代理可以直接讀取我的掃描結果嗎？
可以。在擴充功能中開啟「Generate」→「Coding agents」，然後複製 Claude Code、Cursor 或 Codex 的指令。啟用 Pro 後，程式設計代理就能在同一部 Mac 上要求存取你的掃描結果。
Quick Facts
- 類別
- 設計工具與開發者工具
- 平台
- Mac 專用 Safari 擴充功能；macOS 14 或以上版本
- 工作流程
- 掃描網站、檢視其設計，然後匯出提示詞或 DESIGN.md
- 程式設計代理
- Claude Code、Cursor、Codex、Lovable 與其他 AI 工具；Claude Code、Cursor 和 Codex 的直接掃描存取功能已有文件說明
- 價格
- 免費檢視方案；Pro 為一次性 $9.99 購買
- 資料處理
- 在 Mac 上執行；網站聲稱不會上傳資料
Siteprint 替代品
ByteAsk
ByteAsk 是專為 C 與 C++ 打造的終端機優先 AI coding agent，先編輯儲存庫再用真實編譯器、除錯器、sanitizer 與測試驗證變更，並提供免費方案與付費方案。
Epherem
Epherem 是適用於 Lovable、Bolt、v0、Replit、Cursor 與 Claude Code 等 AI 程式設計工具打造網頁應用程式的靜態安全掃描器，檢查原始碼與相依套件中的常見安全錯誤，分類呈現結果並提供修正建議，無須執行應用程式。
CreateOS Sandbox
CreateOS Sandbox 是以 Firecracker micro-VM 執行程式與 agent 工作負載的隔離運算環境，支援私有網路、SDK、CLI 與 MCP 程式化控制。
GitBot
GitBot 是以瀏覽器為基礎的本機工作區，可使用 Claude Code、Codex 或 OpenCode 建立可重複使用的程式設計機器人，並在儲存庫資料夾中執行，支援持續執行緒與可設定權限。
hob
hob 是一個獨立的 coding agents 工作區，整合 agent sessions、終端機、歷史紀錄與後續工作，並維持你既有的工具與供應商設定。適合想保有本機路由、歷史與工作區結構控制權的開發者。
Ably Chat
Ably Chat 是一個聊天 API 平台，適合打造自訂即時聊天應用程式。支援聊天室訊息、輸入中提示、在線狀態、表情回應與訊息更新，並提供依使用量計費選項。