Refero 是一個真實產品介面截圖的參考庫：它把 400 多個 Web 與 iOS 產品的介面逐屏截取、標註、歸類，讓設計師與開發者在動手之前查證「別人是怎麼做的」。與 Dribbble 一類展示概念稿的社群不同，Refero 收錄的全部是線上產品的真實介面；截至 2026 年 9 月，官方定價頁標註庫內共有 142,000 餘張截圖，並保持每週新增。近兩年它明顯朝「AI 輔助設計調研」轉型，陸續推出對話式調研模式、供 AI 程式工具讀取的設計系統庫與 MCP 介面。

站點速覽

  • 網址：https://refero.design/
  • 類型：UI/UX 設計參考庫（真實產品截圖）
  • 費用：免費檔功能受限；Pro 每月 17 美元（按月付）或 10 美元（按年付 120 美元）；Lifetime 一次性 250 美元；團隊版按席位計費
  • 註冊要求：瀏覽少量預覽無需註冊；查看完整檢索結果需要帳號（Google 登入或電子郵件一次性驗證碼）；僅限 18 歲以上使用者
  • 介面語言：英文

站點背景

Refero 由 Refero Inc. 營運，這是一家在美國德拉瓦州註冊的公司（見其使用條款與隱私權政策）。官網沒有 About 頁面，公開管道的上線時間等背景資訊在本文核查時（2026 年 9 月）無法確認，故不展開。從首頁展示的資訊看，它在 Product Hunt 上保有 4.9 分、16 則評價的紀錄。

截圖庫與檢索方式

Refero 的核心資產是一個持續更新的真實產品截圖庫，覆蓋 Mercury、Sunsama、Resend 等數百個知名產品的 Web 端與 iOS 端介面。它的價值主要在檢索的組織方式上——首頁給出的分類包括：

  • 頁面類型（Page Types）：儀表板、定價頁、登入頁、404 頁、部落格、徵才頁等；
  • 使用者流程（Flows）：註冊引導、訂閱、加入購物車、重設密碼、刪除帳號等跨屏連續步驟；
  • UX 模式（UX Patterns）：篩選排序、評價評分、深色模式、空狀態等；
  • UI 元素（UI Elements）：對話框、卡片、表格、骨架屏、側邊欄等元件級截圖；
  • 按產品（Sites）：直接查看某個產品的全部收錄介面。

按 Dashboard 頁面類型檢索的結果頁，未登入時只顯示少量預覽

匿名瀏覽只能看到極少量結果。以上圖所示的 Dashboard 分類為例，1,297 頁結果中未登入狀態僅展示十餘筆，其餘被標記為「登入後可見」。登入後的免費帳號也只能存取約 3% 的庫內容，並且只能按標籤或公司做基礎搜尋（官方方案說明）。

除關鍵字檢索外，Refero 還支援以圖搜圖（上傳截圖尋找相似設計）。2025 年以來新增的 Research mode（Beta）是對話式調研入口：描述設計任務，由 AI 回傳分析、相關參考與推理過程。

面向 AI 工具的開放能力

Refero 近年的產品重心明顯偏向「讓 AI 程式工具用上真實設計參考」：

  • Refero MCP：透過 MCP 協定把截圖庫、使用者流程與樣式資料接入 ChatGPT、Claude、Cursor、Codex 等 AI 工具，讓 Agent 在產生介面前先「調研」真實產品。即時調研能力需要付費方案。
  • Refero Skill：一套面向 AI Agent 的「調研先行」設計流程規範，可單獨安裝。
  • Styles（Beta）：獨立子站 styles.refero.design，收錄 2,000 餘份從知名產品網站提取的 AI 可讀設計系統（DESIGN.md），包含色彩、字體、間距與元件資訊，可直接提供給 Cursor、Claude Code、v0 等工具使用。
  • Figma 外掛：在 Figma 內直接檢索與引用 Refero 的截圖，僅限付費使用者。

Styles（Beta）子站，提供 2,000 餘份 AI 可讀的設計系統

費用與方案

以下價格核查於 2026 年 9 月，來自官網定價頁，可能隨時調整，以官網為準：

  • Free：0 美元。約 3% 的庫內容，基礎搜尋，無 MCP 與 Figma 外掛。
  • Pro：17 美元/月（按月付）或 10 美元/月（按年付 120 美元）。完整圖庫、使用者流程、下載、Figma 外掛、MCP 與 Skill。
  • Team：20 美元/席/月（按月）或 140 美元/席/年（1–5 席），席位越多單價越低（6–10 席 18 美元/月或 130 美元/年，11 席以上 16 美元/月或 120 美元/年）。增加協作書籤與團隊管理。
  • Lifetime：250 美元一次性買斷，含 Pro 與 MCP 使用權。
  • 學生憑在學證明可申請 Pro 月付/年付 6 折。

定價頁的三種自助方案（年付檢視）

兩點值得注意：官方明確表示不提供免費試用，免費檔就是唯一的體驗途徑；每個訂閱僅限一人使用，共享帳號違反條款。新訂單透過 Stripe 收款，除法定消費者權利外原則上不退款（見使用條款第 4、7 節）。

內容版權與使用邊界

截圖庫中的介面、商標歸各自產品公司所有。Refero 使用條款允許使用者將庫內內容用於設計研究、靈感參考、內部比對與日常產品設計工作，但明確禁止：爬取或系統性批量匯出、轉售或再分發、用於訓練機器學習模型或資料集。權利方認為內容不妥時，可以透過其 Copyright Policy 要求移除或更正。隱私方面，官方承諾在使用者未主動 opt-in 的情況下，不會用使用者上傳的內容訓練其控制的通用 AI 模型。

適用場景

  • UI/UX 設計師做競品調研、為特定頁面類型或元件尋找真實案例；
  • 獨立開發者在設計註冊引導、付費牆、設定頁等常見流程前，快速比對多個產品的成熟做法；
  • 使用 Cursor、Claude Code 等 AI 程式工具的團隊，透過 MCP 或 DESIGN.md 讓產生結果更接近成熟產品的設計水準；
  • 設計團隊用 Team 版的共享書籤沉澱團隊的參考集合。

侷限

  • 免費檔只能看到約 3% 的內容，匿名預覽更少，不付費很難評估庫的深度；且沒有免費試用。
  • 庫以英文世界的 SaaS 與消費產品為主，中文產品介面極少，對主要做國內產品的團隊參考價值有限。
  • 介面僅英文。
  • 條款禁止將內容用於模型訓練，想把它當設計資料集使用的場景不適用。
  • 截圖反映的是收錄時點的產品介面，產品改版後舊截圖可能過時（官方以每週新增緩解，但歷史介面仍保留在庫中）。

同類參考

  • Mobbin：同樣收錄真實產品介面與流程，行動端內容更全，也是付費為主的參考庫；
  • Dribbble / Behance：以設計師作品展示為主，多為概念稿，與「真實線上介面」的定位不同。

參考資料