搜尋真實的正式上線網站
根據描述、版面、字體、色彩、螢幕截圖或網域搜尋真實網站，而不是依賴 mockup 或通用靈感板。
Fudge 是什麼
Fudge 是一款設計參考搜尋工具，可協助使用者從真實上線網站中搜尋、檢視、儲存並重用範例。該網站將其定位為一種可查詢字體、色彩調色盤、UI 模式與版面細節的方式，而不是從通用靈感或 mockup 開始。
它結合了可搜尋的網站資料庫、瀏覽器擷取與匯出工作流程。使用者可以依樣式搜尋、查看頁面如何組成、從 Chrome 儲存範例，並將擷取到的視覺細節轉成 Tailwind、CSS variables、JSON 與設計 token 等格式，供程式碼或 AI 輔助工作流程使用。
核心功能
將設計拆解為設計系統資料
檢視頁面的字體、色彩值、間距、邊框、圓角、陰影、漸層、版面層級、媒體角色與其他從來源網站擷取的結構細節。
擷取並整理參考資料
從 Chrome 儲存網站，並將螢幕截圖、字體、色彩、間距、版面與來源脈絡保存在可重用的資料庫或集合中。
匯出為適合程式碼的格式
將觀察到的樣式匯出為 Tailwind、CSS variables、JSON、DTCG 與 Figma tokens，並支援結構化結果與可重建的版面資料。
將設計參考連接到 AI 工具
透過相容 MCP 的 AI 用戶端在 Fudge 中使用，讓代理程式可查詢已擷取的參考資料，並處理螢幕截圖、調色盤、字體與來源脈絡。
Fudge 的常見使用方式
為新的 UI 蒐集參考資料
設計師可以搜尋具有特定風格的定價頁、儀表板、註冊導引流程或登陸頁，然後檢視其背後的字體、色彩與版面選擇。
將網站轉成便於實作的樣式
工程師可以從 Chrome 儲存範例網站，並將其視覺屬性匯出為 Tailwind 或 CSS variables，作為實作的起點。
為代理程式提供正式上線的設計脈絡
AI 使用者可以透過相容 MCP 的用戶端連接 Fudge，讓模型使用已擷取的螢幕截圖、調色盤、字體與來源脈絡來回答問題，而不是猜測。
整理可重用的設計參考資料
團隊可以建立一個已儲存網站與集合的個人資料庫，方便日後重新查看範例，而不是每次都從零開始搜尋。
研究字體搭配與替代方案
比較字體選擇的人可以搜尋使用特定字體或相近替代字體的真實網站，然後查看這些字體在正式上線產品中的搭配方式。
Pros and Cons
Pros
- 建立在真實上線網站之上，而不是 mockup。
- 支援依字體、色彩、版面、螢幕截圖與網域等實用設計屬性搜尋。
- 將擷取、檢視、儲存與匯出整合於單一工作流程。
- 提供對實作有用的輸出格式，包括 Tailwind、CSS variables、JSON 與設計 token。
- 提供可在 AI 工具中使用已擷取設計脈絡的 MCP 途徑。
Cons
- 公開頁面未提供完整且詳細的整合對照表，也沒有針對每個工作流程面向的完整文件。
- 部分能力描述較為概括，並未在所提供的頁面中深入說明，因此僅從來源本身仍無法釐清進階設定細節。
FAQ
Fudge 是用來做什麼的？
Fudge 可用於搜尋已儲存的正式上線網站設計參考，例如版面、字體、色彩調色盤、間距與 UI 模式。定價頁與 MCP 頁面也顯示，它可透過相容 MCP 的用戶端在 AI 工具中使用。
實際上要怎麼使用 Fudge？
來源頁面顯示有一個 Chrome 擴充功能可從瀏覽器儲存網站，也有一個 MCP 設定可將 Fudge 連接到 AI 工具。網站也說你可以從真實網站中搜尋、檢視、儲存並重用設計。
Fudge 可以匯出什麼？
可以。定價頁說 Fudge 可將網站的字體、色彩、間距與設計 token 匯出為 Tailwind、CSS variables、JSON，而 tokens 頁面也提到可匯出為 Figma tokens 與 CSS。
Fudge 的費用是多少？
定價頁指出訂閱方案為每月 US$15 或每年 US$150，且年繳價格顯示為 83 折。頁面也說此方案供你自己的設計工作使用，商業授權需聯絡公司。
Fudge 支援整合嗎？
來源中沒有顯示詳細的公開整合清單。不過確實有提到 Chrome 擴充功能、訂閱制產品，以及可供 AI 代理使用的相容 MCP 工作流程。
Quick Facts
- 類別
- 設計工具 / 開發者工具
- 主要用途
- 設計靈感、參考搜尋與設計 token 擷取
- 平台
- 附 Chrome 擴充功能的網頁應用程式
- AI 工作流程
- 支援相容 MCP 的用戶端供代理程式使用
- 匯出
- Tailwind、CSS variables、JSON、DTCG 與 Figma tokens
- 價格
- 已公布方案為每月 US$15 或每年 US$150
Fudge 替代品
图像大厨imgcook
圖像大厨imgcook 是一款設計轉程式碼工具，可將設計稿轉換為前端程式碼，支援 Sketch、Photoshop、VS Code 與 CLI 的外掛及開發流程。
ByteAsk
ByteAsk 是專為 C 與 C++ 打造的終端機優先 AI coding agent，先編輯儲存庫再用真實編譯器、除錯器、sanitizer 與測試驗證變更，並提供免費方案與付費方案。
CreateOS Sandbox
CreateOS Sandbox 是以 Firecracker micro-VM 執行程式與 agent 工作負載的隔離運算環境，支援私有網路、SDK、CLI 與 MCP 程式化控制。
hob
hob 是一個獨立的 coding agents 工作區，整合 agent sessions、終端機、歷史紀錄與後續工作，並維持你既有的工具與供應商設定。適合想保有本機路由、歷史與工作區結構控制權的開發者。
Ably Chat
Ably Chat 是一個聊天 API 平台，適合打造自訂即時聊天應用程式。支援聊天室訊息、輸入中提示、在線狀態、表情回應與訊息更新，並提供依使用量計費選項。
Manta AI
Manta AI 是一款自動化網頁應用測試工具，從 URL 即可開始探索、建立行為地圖，並以自然語言產生測試與回歸檢查，無需撰寫腳本或維護 selector。