Fudge
Fudge 是什麼？
Fudge 是一款由 AI 驅動的設計參考引擎，協助程式設計代理人透過搜尋與檢視數千個真實上線網站，打造更優質的網站。它除了提供網站截圖，也會呈現經過測量的設計資訊，例如字體、色彩、間距、版面配置、元件、頁面類型、媒體、互動效果、對比度、邊框、圓角、陰影與漸層。Fudge 透過 MCP 與 Codex、Cursor、Claude Code 等工具搭配使用；其 Chrome 擴充功能則能讓使用者儲存網站與設計細節，以便日後使用。代理人可以使用 Fudge 尋找靈感、比較視覺方向、檢視字型與色彩系統、比對截圖，並將設計系統匯出為 Tailwind CSS、CSS 變數或 JSON。
如何使用Fudge？
在相容的 AI 程式設計工具中，使用設定指令 npx -y @withfudge/design@latest setup 安裝 Fudge。你可以要求代理人尋找設計靈感、字體、色彩、版面配置、頁面類型，或尋找與某張截圖相似的網站。代理人可以檢視符合條件的參考資料，並在建置網站時運用其中的字體、色彩、間距、版面配置與元件細節。你也可以安裝 Chrome 擴充功能，儲存網站或頁面中選取的區塊，供日後搜尋與建立專案收藏集使用。
Fudge的核心功能
依照風格、版面配置、色彩、字體、頁面類型、元件、網域或視覺相似度，搜尋數千個真實上線網站
提供網站截圖，以及經過測量的字體、色彩、間距、版面配置、元件、對比度、邊框、圓角、陰影、漸層與媒體細節
檢視網站使用的字體，並探索相似字體或字體配對
尋找定價頁面、儀表板、文件網站、註冊引導流程、登入頁面、作品集與登陸頁面等頁面
比對上傳的截圖，尋找視覺外觀相似的網站
使用 Chrome 擴充功能儲存網站與頁面區塊
將儲存的參考資料整理到專案收藏集中，以便重複使用
在 AI 程式設計對話中搜尋與比較已儲存的設計參考資料
將字體、色彩、間距、圓角、陰影與漸層匯出為 Tailwind CSS、CSS 變數或 JSON
支援 Codex、Cursor、Claude Code 等相容 MCP 的 AI 程式設計工具
分析色彩角色、無障礙對比度、易讀文字色彩與色彩階調
在相關情況下保留媒體、影片、裁切方式、動態效果、互動、覆蓋層、裁切範圍、視窗大小與擷取情境
Fudge 的用例
為全新的 SaaS 登陸頁面尋找真實設計參考
為現有的無襯線字體探索襯線字體配對
尋找使用 Merriweather 或 Anthropic Serif 等特定字體的網站
將網站的字體與色彩匯出至 Tailwind 主題
尋找採用襯線標題字體、緊湊圓角、柔和陰影且 CTA 對比度符合無障礙要求的深色定價頁面
將截圖與視覺方向相似的網站進行比對
在建置金融產品前研究金融科技設計模式
在多個設計專案之間儲存與比較網站參考資料
為 AI 程式設計代理人提供具體的視覺指引，而不是只使用「現代」或「高級」等模糊提示
在重新製作相似介面前，檢視成熟產品網站的版面配置與設計系統
來自 Fudge 的常見問題解答
Fudge 能為 AI 程式設計代理人提供什麼？
哪些 AI 程式設計工具可以搭配 Fudge 使用？
Fudge 可以搜尋字體與字體配對嗎？
Fudge 可以匯出網站的設計系統嗎？
我可以儲存找到的網站嗎？
Fudge 支援以截圖為基礎的視覺搜尋嗎？
除了截圖之外，Fudge 還會儲存哪些內容？
Fudge 有免費方案嗎？
免費方案需要信用卡嗎？
Fudge 與設計靈感圖庫有什麼不同？
Fudge 評論 (0)
Fudge 定價
免費版
每月 0 美元
每天 25 次 Fudge 查詢、MCP 伺服器存取權，以及真實網站參考資料搜尋與檢視功能。不需要信用卡。
專業版
每月 29 美元
不限次數的 Fudge 查詢、網站與字體搜尋、截圖比對、色彩工具、Chrome 儲存功能、Tailwind v4、CSS 變數與 JSON 匯出、無限收藏集，以及優先支援。年繳可享 17% 折扣。
分析Fudge
Fudge 網站流量分析
地理流量
Top 2 Regions
Fudge 啟動嵌入
使用網站徽章來推動社區對 Toolify 發布的支持。 它們很容易嵌入您的主頁或頁腳。
社群媒體聆聽