Stack Sorted 是一個網頁設計靈感庫，它的收錄單位是「局部」而非整站：把優秀網站上的具體介面元素——按鈕、卡片、懸停效果、捲動效果等——截取出來，按元素類型分類陳列。它解決的痛點很具體：當你只想參考「按鈕可以怎麼做」時，不必在整站靈感畫廊裡逐一打開網站尋找對應部分。專案程式碼公開在 GitHub（倉庫建立於 2023-07-18），由設計類 YouTube 創作者 Juxtopposed 建立，官網自述為「an open-source project that categorizes websites, not by general design or topic but specific elements」（來源：網站頁尾）。
上圖是 Stack Sorted 首頁（2026-09-21 截取）。造訪根網域會自動跳轉到 Buttons 分類：左側邊欄列出全部元素分類，右側網格是該分類下的收錄卡片，每張卡片標註來源網站名稱；右上角有「Add a Site」投稿入口與「Collecting designs... Join in!」的徵集提示。
站點速覽
- 網址：https://stacksorted.com/
- 類型：按介面元素分類的網頁設計靈感庫（開放投稿的公開專案）
- 費用：免費，無付費項目
- 註冊要求：無需註冊，無帳號體系
- 介面語言：僅英語（2026-09-21 核查）
- 技術棧：Svelte 3 + Rollup 建構，收錄資料直接維護在倉庫的 src/database.js（來源：package.json）
站點背景
作者 Juxtopposed 是設計與開發方向的內容創作者，GitHub 資料指向其 YouTube 頻道，其個人網站的專案列表除 Stack Sorted 外還包括配色工具 Realtime Colors、Color Gamut Test 等。2023-07-23，她發佈影片 world's shortest UI/UX design course，在片中設計了這個網站，影片簡介寫道「Check out the site we just designed together: stacksorted.com」；GitHub 倉庫建立於 2023-07-18，專案由此公開（2026-09-21 核查）。
專案程式碼對公眾開放，截至 2026-09-21 有 313 個 Star、35 個 Fork、17 位貢獻者。需要注意的是：儘管 README 和官網都自稱 open-source，但倉庫至今沒有附帶 LICENSE 檔案——2024 年 11 月曾有貢獻者提交新增 LICENSE 的 PR，截至 2026-09-21 仍未合併。也就是說，程式碼「公開可見」並不等同於獲得了法律意義上的開源授權，想直接複用其程式碼的讀者應留意這一點。
瀏覽方式與收錄內容
Stack Sorted 沒有搜尋框，全部瀏覽都透過左側分類進行。截至 2026-09-21，database.js 中共有 17 個元素分類：buttons（按鈕，41 條）、grids（網格，20 條）、cards（卡片，15 條）、custom-cursor（自訂游標，14 條）、text-effects（文字效果，14 條）、interactive-elements（互動元素，13 條）、scroll-effects（捲動效果，10 條）、hover-effects（懸停效果，9 條）、links（連結，9 條），以及 border-effects、image-effects、loading-animation、hamburger-menu、headers、progress-bar、icons、search 等較小分類。全站共 180 條收錄，去重後約 115 個不同網站——同一個網站可以因不同元素出現在多個分類下。
上圖是 Hover Effects 分類（2026-09-21 截取），側邊欄會突顯目前分類。收錄對象以設計感較強的真實產品站、工作室站和作品集為主，例如 Linear、Cuberto、Vercel 等。
點擊卡片會開啟一個彈出視窗：主體是該元素的 GIF 動畫預覽（180 條收錄中有 124 條帶 GIF，無 GIF 時顯示靜態截圖），底部提供「Visit Site」直達原站；如果收錄時附帶了程式碼實作，還會出現「Check Code」按鈕，跳轉到對應的 CodePen 演示（共 45 條帶程式碼連結）。彈出視窗支援鍵盤操作（Esc 關閉、左右方向鍵切換同類條目），並且帶有 /<分類>/<站點名> 形式的獨立 URL，可以直接分享某個具體條目。
上圖是 Send Potion 條目的彈出視窗（2026-09-21 截取），GIF 循環播放按鈕的懸停動畫，底部左側為 CodePen 程式碼連結，右側為原站連結。
投稿與維護方式
投稿有兩條管道（2026-09-21 核查）：
- 站內右上角的「Add a Site」按鈕指向一個 Google 表單，填寫網站連結和分類（可提議新分類）即可；表單說明稱「they'll be added in less than 48 hours if they look good」，可留信箱接收收錄通知。
- 直接向 GitHub 倉庫的 database.js 提交 Pull Request，截圖放入
public/images。貢獻規則要求只收錄「最優秀、最有創意的設計」，不收通用元件設計；程式碼連結目前只接受 CodePen；截圖需精確截取元素（200×344），GIF 不超過 10MB。
實際維護節奏需要注意：倉庫最後一次合併提交停留在 2025-03-31，截至 2026-09-21 仍有 8 個未合併的 Pull Request（PR 列表），其中包括 2026 年 6 月的收錄投稿和 2026 年 8 月的捲動修復。表單承諾的「48 小時內收錄」與目前實際處理速度已有明顯出入，投稿後長期未獲處理的可能性存在。
版權與內容政策
Stack Sorted 展示的是第三方網站的截圖與設計片段，其版權立場寫在網站頁尾：「All screenshots, designs, and codes are © of their respective owners.」——即截圖、設計和程式碼的版權歸各自所有者所有，Stack Sorted 只做收錄展示。網站本身沒有獨立的隱私政策或服務條款頁面，僅使用了 Google Analytics（2026-09-21 核查）。
上圖是頁尾區域（2026-09-21 截取）：左下角是「What is Stack Sorted?」的專案自述和 © 聲明，其餘連結依序指向作者推特、database.js 投稿入口、GitHub 倉庫、Ko-fi 贊助和推特分享。
收錄由人工篩選（表單說明「if they look good」），沒有公開的自動化審核或授權核驗流程說明。被收錄方如果希望自己的網站被移除，公開途徑是 GitHub Issues：未關閉的 issue 列表中目前有兩條站點移除請求（2024 年 8 月和 10 月各一條，截至 2026-09-21 仍處於 open 狀態），這一管道的實際回應速度同樣有限。收錄條目的有效性也依賴人工維護，已有專門修復失效連結的 PR長期未合併，個別收錄網站可能已改版或下線。
適用場景
- 做具體元件時找參考：需要設計按鈕、卡片、載入動畫、懸停回饋等單一元素時，可以一次性瀏覽幾十個真實產品的做法，比整站畫廊更聚焦。
- 想看實作程式碼：約四分之一的條目帶 CodePen 連結，能直接檢視或改寫實現。
- 網頁設計教學：按元素組織的結構適合作為講解 UI 細節時的案例索引。
局限
- 收錄更新實際停滯：最後一次合併提交為 2025-03-31，2026 年的投稿 PR 尚未被處理（截至 2026-09-21），收錄規模在短期內大概率維持現狀。
- 規模有限且分佈不均：全站約 180 條收錄，部分分類只有 3–6 條（icons 3 條、search 3 條、hamburger-menu 4 條），覆蓋面無法與大型靈感平台相比。
- 只有分類、沒有搜尋和篩選：無法按關鍵詞、配色或技術棧檢索，只能逐類瀏覽。
- 僅英文介面，且收錄以英文網站為主。
- 程式碼無 LICENSE：倉庫公開但未附開源授權條款，複用程式碼存在法律不確定性。
同類參考
整站級靈感平台如 Awwwards 按完整網站收錄和評獎，適合參考整體視覺風格與站點結構；Stack Sorted 的差異化在於元素級粒度，兩者更多互補而非替代。同作者的 Realtime Colors 則是配色方向的工具，可與本站搭配使用。
