設計靈感索引 是做什麼的？
一個檢索地圖：「我需要 X 的靈感，所以去 Y 來源」。這是一個公開圖庫和註冊表的索引，而非設計權威；一旦有了參考，請使用 ui 技能進行建構，並用 anti-slop 檢查結果。每個網站的詳細資訊（存取方式、格式、過濾條件、檢索提示）請見 references/galleries.md。
此處無任何要求。所有來源均為公開網站；其中兩個有 MCP 伺服器（Mobbin、Refero）是可選的，只有在經常使用時才值得配置。
當你需要 X 時，請前往 Y
| 你需要 | 前往 | 備註 |
|---|---|---|
| 一個完整的網站可供欣賞（廣泛品味輸入） | collected.li（隨機）、siteofsites.co（可篩選）、unmatchedstyle.com（編輯精選）、recent.design（每日） | collected 顯示 8 個隨機網站；siteofsites 可按平台篩選；unmatchedstyle 有趨勢文章 |
| 一個英雄區或全頁佈局 | landing.love（動畫）、craftwork.design/inspiration/websites（廣泛） | landing.love 錄製全頁影片 |
| 一個有動畫效果的登陸頁 | landing.love | 按 GSAP、WebGL 或 ThreeJS 收藏集篩選 |
| 一個 SaaS 行銷網站或某一 SaaS 頁面類型 | saaspo.com | 按頁面類型（定價、功能）和行業篩選 |
| 一個定價頁 | saaspo.com（頁面類型）和 cta.gallery（CTA 區塊） | |
| 一個導航欄、頁首或巨型選單 | navbar.gallery | 按固定、巨型選單、側邊欄、全螢幕篩選 |
| 一個行動呼籲、註冊或電子報區塊 | cta.gallery | 按行業以及按按鈕、表單、電子報、模態框篩選 |
| 一個動畫或微互動點子 | 60fps.design（動畫）、designspells.com（概念與原因） | designspells 解釋一個令人愉悅的細節，涵蓋手機和桌面 |
| 一個令人愉悅的細節、彩蛋或「魔法」觸感 | designspells.com | 標籤：彩蛋、五彩紙屑、過渡、404 |
| 真實產品 UI：頁面類型、流程、UX 模式（網頁） | refero.design | 按頁面類型、流程、模式、元素或字型篩選；有可選的 MCP 伺服器 |
| OG 圖片、App Store 截圖、應用圖標 | recent.design | 少數其他網站有專用分頁 |
| 一個標誌、品牌識別或品牌重塑 | rebrand.gallery | 此處唯一的品牌來源 |
| 如何建構或命名 UI 元件 | component.gallery | 跨系統參考，附有名稱別名（Accordion = Collapse = Disclosure） |
| 可直接貼上的元件程式碼（React） | shadcn/ui、mapcn（映射） | 從專案已使用的開始 |
| 預製的應用區塊（表單、驗證、側邊欄、表格） | blocks.so | 免費，複製貼上 |
| 預製的行銷和登陸區塊 | tailark.com（策展）、shadcnblocks.com（大量、免費增值）、shadcnspace.com | 免費增值 |
| 一個複雜的複合小工具（甘特圖、看板、編輯器、表格） | kibo-ui.com | 免費，shadcn CLI 註冊表 |
| 動畫元件或微互動程式碼 | smoothui.dev、ui-layouts.com | 基於 Motion 或 GSAP |
| shadcn 的主題生成 | shadcnstudio.com | 免費社群版 |
| 復古或像素藝術風格 | 8bitcn.com | shadcn 重新樣式，設計上很 niche |
| 基於 React Aria（非 Radix）的可存取元件 | intentui.com | 與基於 Radix 的 shadcn 混用效果不佳 |
| 一個圖標或 SVG | lucide.dev（預設）、react-icons、reicon.dev、hugeicons.com | Lucide 是 shadcn 預設，線條風格；react-icons 捆綁多個集合，包含品牌標誌；Reicon 有輪廓和填充；Hugeicons 量大且為免費增值 |
| 手機應用流程和畫面 | Mobbin | 需要登入；如果有其 MCP 伺服器則使用，否則直接瀏覽網站 |
| 一個知名品牌的設計系統文字說明 | awesome-design-md 儲存庫 (github.com/VoltAgent/awesome-design-md) | 在定義設計語言前先閱讀兩到三個 |
| 一個用於審查發現的命名 UX 原則 | lawsofux.com | 以名稱引用該法則：Fitts、Hick、Jakob、Peak-End |
| 元件搜尋或生成的 UI 變體 | 21st.dev | 在親手撰寫新 UI 前先搜尋 |
擁有自己註冊表的免費元件庫，在你親手撰寫區塊之前值得先行檢查。將任何你導入的內容調整為專案的標記和無障礙規則。
值得研究的設計工程師
其網站和開源作品值得研究與追蹤的高信號人物。
| 人物 | 網站 | 知名於 |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner、Vaul；網頁動畫工藝 |
| shadcn | shadcn.com | shadcn/ui；複製貼上元件與註冊表 |
| Paco Coursey | paco.me | cmdk、next-themes；鍵盤優先的極簡 UI |
| Rauno Freiberg | rauno.me | 介面不變性與精緻背後的原理 |
| Raphael Salaja | raphaelsalaja.com | 動畫豐富的作品集，俏皮的互動工藝 |
| Gavin Nelson | nelson.co | 產品與圖標設計 |
| floguo | floguo.com | 富有表現力的微互動，個性化 |
| Syed Subhan | syedsubhan.in | 微過渡；建立了 Amicro (amicro.vercel.app)，一個可重複使用的微過渡模式集合 |
Mobbin 和 Refero：可選的 MCP 伺服器
兩者都需要登入，如果已連接 MCP 伺服器，則透過其進行查詢效果最佳。Mobbin 提供畫面、流程和區段搜尋；Refero 的伺服器位於 https://api.refero.design/mcp（文件：https://doc.refero.design/mcp/getting-started）並回傳真實產品畫面。如果都沒有，請手動瀏覽網站。請勿爬取。
存取方式速查表
使用前請驗證；網站可能變更。
- 開放且免費，無需登入：landing.love、navbar.gallery、cta.gallery、60fps.design、collected.li、siteofsites.co、unmatchedstyle.com、recent.design、designspells.com、lucide.dev、reicon.dev、component.gallery、saaspo.com。
- 免費增值（免費瀏覽，付費獲取資產或完整庫）：craftwork.design、rebrand.gallery、hugeicons.com、refero.design。
- 需要登入或 MCP：Mobbin、refero.design。
其中幾個（saaspo.com、component.gallery、landing.love、designspells.com）會透過 403 或 429 錯誤阻止自動化擷取，但在一般瀏覽器中正常開啟。godly.website 現已重新導向至 recent.design。若要從被封鎖的網站以程式方式擷取，請驅動真實瀏覽器（例如，若已安裝，使用 Playwright MCP），而非使用純 HTTP 擷取。
如何擴展此索引
將新的圖庫加入 references/galleries.md，使用相同的欄位（名稱、URL、類別、最佳用途、存取方式、格式、檢索提示），然後將路由行加入上方的表格。