Siteprint
Siteprint · 程式設計 · 提示詞
Siteprint 在真實瀏覽器裡量出任何網站的顏色、字體、間距與版面，再整理成提示詞、DESIGN.md 與主題檔案，讓 AI 編碼代理照著做。
關於 Siteprint
About
Siteprint 是什麼
Siteprint 是一套網站設計擷取工具。貼上網址，頁面會在服務端的真實瀏覽器裡打開，大約 20 秒後，色盤、字體堆疊、字級比例、間距級距、圓角、陰影、緩動曲線、斷點、標誌與框架全部列出來。所有數值都量在算繪後的頁面上，看到的是訪客眼中的樣子，不是樣式表上的承諾。
它解決的是每個 AI 建置工具遲早會收到的指令：照這個網站做。截圖帶得走長相，帶不走數值。代理只能猜十六進位色碼、行高與按鈕內距，接下來一小時你都在推像素。網站轉提示詞正是產品核心：Siteprint 把精確數值寫成給 Lovable、Claude Code 或 Cursor 的提示詞，另外附一份 DESIGN.md，把設計描述成一套方向，而不是一張固定的頁面。
開始前有兩個限制要先知道。Siteprint 量設計，不蓋網站，程式碼還是得有代理或人來寫。網頁版從自家伺服器讀取頁面，所以會擋自動化訪客的站、要登入的頁面，或只想抓某一張卡片時，就得靠 Mac 上的 Safari 擴充功能。
開始使用
- 打開 siteprint.app，貼上網站位址。這一步不需要帳號。
- 等掃描完成。Siteprint 會在真實瀏覽器開啟網站，大約 20 秒，然後把量到的數值填進頁面。
- 讀你需要的區塊：顏色與用途、字體與文字樣式、間距與形狀、陰影與動態、斷點、素材與技術。點任何一個數值就能複製。
- 想要重建提示詞與 DESIGN.md，請登入並升級 Pro。打開 Build with this design，把提示詞貼進 Lovable、Claude Code 或 Cursor。
- 若你在 Mac 上用 Safari，安裝擴充功能，就能掃要登入的頁面、單一區塊，或拒絕自動化訪客的網站，並讓代理透過 MCP 讀取已存的掃描。
產品資訊
快速了解 Siteprint 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端工程師與獨立開發者：拿到的是量好尺寸、字重與曲線的提示詞，不是一張得靠眼睛猜的截圖，前提是付費使用 Pro。
- 研究參考網站的設計師：免費版就能看色盤、字體與間距，不用註冊，足以應付多數競品觀察。
- 說得出感覺卻寫不出 CSS 的創辦人與行銷人員：數字由提示詞帶著走，代理不必再翻譯形容詞。
- 要讓多個產品維持一致視覺的團隊：存下來的 DESIGN.md 與匯出的設計變數，讓大家對著同一份參考檔案。
任務
- 在 AI 建置工具裡重做一頁著陸頁：提示詞涵蓋版面、動態與精確尺寸，對應 Lovable、Claude Code 或 Cursor。
- 從喜歡的網站抽出設計變數：匯出內容包含 Tailwind v4、shadcn/ui 與 CSS 變數。
- 讓做好的成品對齊參考網站：Match your build 會拿你的頁面跟掃描過的站比對，回一份補齊差距的提示詞。
情境
- 把內部儀表板改成團隊已經點頭的風格：掃描都存在 Library，代理用 list_designs 與 get_design 直接取用。
- 用兩個網站拼出新的視覺方向：Compose 把一家的顏色接上另一家的字體與版面。
- 改版前先檢查競品的字級比例與間距節奏：免費掃描會列出每個尺寸與間距級距，還有版面開始變化的斷點。
主要功能
帶用途的色盤
Siteprint 列出頁面上每個顏色，分成中性色與彩色，並給出 HEX、RGB 與 HSL 值。每一次掃描也等於這個網站的設計系統：除了顏色，還會標出畫布、表面、文字、淡色等用途，代理就知道哪個色該放哪裡。網站有深色模式與漸層時，會另外記錄。
字體與字級比例
字體面板會寫出每個字族、字重、載入的檔案與來源。文字樣式附上字級、行高、字距，以及套用在哪個元素上。這正是截圖給不了的東西，也是重建開始走鐘的地方。
間距、形狀與動態
間距級距、圓角與內容寬度都是從算繪後的版面讀出來的，不是推測。陰影、緩動曲線與持續時間都附預覽，滑過就播放，當按鈕在參考站上看起來對、在你的成品裡卻怪，這功能特別有用。
重建提示詞與 DESIGN.md
Pro 會把一次掃描變成單一提示詞，描述版面、動態與尺寸，格式配合你指定的 AI 建置工具。DESIGN.md 則把同一套設計寫成方向，而不是固定頁面，代理可以把它套用到參考站上還不存在的畫面。
匯出與設計變數
除了提示詞，Siteprint 也匯出 Tailwind v4 設定、shadcn/ui 主題、CSS 變數與一份變數檔。每個顏色與文字樣式都命名並定位好，省掉那段手動改名的下午。
透過 MCP 讓代理取用
Safari 擴充功能會啟動本機的 MCP 設計伺服器，提供三個工具：list_designs、get_design 與 get_reference_image。Claude Code、Cursor、Codex 或任何 MCP 用戶端，都能把存下來的掃描讀成提示詞、設計、版面、Tailwind 設定、shadcn 主題、CSS 或 JSON。網頁版則從 Library 連接代理，走擴充功能這條路時，檔案不會離開你的電腦。
Match your build
貼上自己版本的網址，Siteprint 會拿它跟參考站比對。輸出是一份修正清單加一段提示詞，把你的頁面往原版推，版面差幾個像素時，這比對色碼差異實用得多。
優缺點
優點
- 網站想掃幾個就掃幾個，免費、免註冊，點一下就複製數值。
- 數值來自真實算繪，包含靜態 HTML 看不出來的計算樣式。
- 重建提示詞直接點名 Lovable、Claude Code、Cursor 等代理，省下自己手寫提示詞的工。
- Safari 擴充功能在本機讀頁面，要登入的站與擋機器人的站都進得去，掃描結果也留在 Mac 上。
- Compose 與 Library 把一次性的查詢變成可重複使用的參考資料。
缺點
- 重建提示詞、DESIGN.md 與匯出都鎖在 Pro 後面，免費版只回答問題，不給你動工的素材。
- 網頁版每次掃描約 20 秒，遇到擋自動化訪客的站就失敗，Mac 使用者因此容易被推向付費擴充功能。
- 擴充功能限定 macOS 14 以上的 Safari，Windows 與 Chrome 使用者只剩較慢的伺服器路徑。
- 它只量不蓋，輸出仍然是一份需要代理正確解讀的指令。
常見問題
檢視網站免費，也不用帳號，顏色、字體、間距、素材與技術都包含在內。Pro 每月 9 美元或每年 69 美元，多了重建提示詞、DESIGN.md、匯出、動態背景與 Match your build。Safari 擴充功能另外買，19.99 美元一次付清。
相關內容
探索與 Siteprint 相關的工具、技能與文章。
Siteprint 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。