Designeer
Dhruv Jaradi · 程式設計 · 生產力 · AI 學習
Designeer 是人工審核的設計資源網站，收錄設計靈感、介面元件、設計工具與設計師作品集，分成四個可免費瀏覽的集合。
關於 Designeer
About
Designeer 是什麼
Designeer 是給介面開發者用的網頁設計目錄。Dhruv Jaradi 親自審每一筆收錄，決定哪些能上架。沒有任何項目靠自動抓取進站，付費也不保證佔到位置。
四個集合對應工作階段的不同需求：設計靈感區放藝廊與編輯型網站，設計資源區放介面元件、圖示與字型，設計工具區放建置與上線用的軟體，設計師作品集區則收已經在交付產品的人的作品。每筆收錄都有短描述與預錄的預覽畫面。
限制在於深度。Designeer 每個集合只挑幾百筆，不追求把所有東西都索引進來，所以冷門題目可能只有個位數條目。它適合當短名單，不適合當完整目錄。
如何開始
- 打開 designeer.xyz，從靈感、資源、工具、作品集四個集合裡挑一個。
- 如果心裡已有具體目標，直接在集合內篩選。以工具區為例，分成開發、AI 與代理、設計與畫布、擷取與媒體、生產力與桌面五類。
- 播放收錄頁的預覽影片，看版面、節奏與動態。接著再點進原始網站。
- 想要收藏、整理資料夾或追蹤投稿進度時，再註冊免費帳號。
產品資訊
快速了解 Designeer 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 產品與網頁設計師：靈感區與資源區直接給參考案例和現成的介面元件，不必先搜一輪。已經知道要做什麼、只缺對得上方向的例子時特別好用。
- 前端開發者：工具區偏重開發輔助，從 Playwright 到 Vite 都有，比較容易找到能接進現有技術堆疊的東西，而不是一份通用清單。
- 學生與轉職者：作品集區可以看到在線設計師怎麼安排案例，自己重做網站時，這比一篇建議文更有用。
任務
- 專案初期做視覺研究：翻靈感區找藝廊與編輯型網站，把方向對的存下來。
- 找特定類型的素材：圖示、字型、色彩與動態資源放在同一區，比對選項時不用開五個分頁。
- 註冊前先確認工具內容：短描述與預覽影片會說明它做什麼、實際用起來是什麼樣子。
- 替團隊整理設計資源網站清單：每筆收錄都有固定網址可以引用，也有一行描述可以直接沿用。
情境
- 客戶專案要開跑：做 moodboard 之前先花二十分鐘逛靈感區，起點就是參考案例，不是空白畫布。
- 重做個人網站：看同領域的作品集怎麼拆解案例，再把同樣的結構套到自己的頁面。
- 跟上 AI 設計工具的變化：AI 與代理分類收錄代理、MCP 伺服器與提示驅動的工具，這些在舊清單裡幾乎不會出現。
主要功能
四個集合，按用途分開
靈感、資源、工具、作品集各自有獨立區塊，首頁就看得到數量。搜尋時這個切分很實際：找參考、下載素材、挑軟體是三件不同的事，全部塞進同一個動態牆只會讓三種需求都變慢。
每一筆都由人審過
審核看的是執行品質、實用性、清楚程度，以及對設計師與前端開發者的相關性。沒達到標準的投稿會被退回，目錄因此維持在精簡規模。你花在過濾失效連結與空殼著陸頁的時間也跟著減少。
收錄頁附預覽影片
每筆收錄都有一段從原始網站錄下的影片，呈現版面、節奏與動態。靜態截圖看不出頁面怎麼動，短片則能判斷轉場、捲動行為與字級層次撐不撐得住。
持續更新的發現動態
發現動態收集設計師與開發者的單件作品，依時間新到舊排列，撰稿時已發布 157 件。讀起來更像設計靈感的動態流，而不是目錄，新的視覺作品通常先在這裡出現。
收藏與資料夾
免費帳號可以收藏收錄、放進資料夾，也能追蹤投稿狀態。資料夾是最實用的部分：一個放進行中的專案，一個放客戶的參考，一個放待試的工具。
工具分類含 AI 與代理
設計工具區分成五類，AI 與代理有 38 筆，擷取與媒體有 33 筆。AI 類收的是代理、MCP 伺服器與代理工作流程，目前設計工具市場變動最快的就是這一塊。
優缺點
優點
- 每筆收錄都經過人工審核，失效連結與自動生成的頁面少很多。
- 預覽影片先展示動態與節奏，不必離開目錄就能判斷。
- 瀏覽免費，也不需要註冊帳號。
- 四個集合對應真實的搜尋方式：參考、素材、軟體、範例。
缺點
- 深度有限。冷門主題可能只有幾筆，新分類補得慢。
- 沒有公開 API，也不能批次匯出，收錄清單無法直接匯進研究文件或設計系統。
- 精選位置每週 49 美元，獨立開發者想多一點曝光就得付費。
- 審核只有一個人，投稿量大時就得排隊等通過。
常見問題
不用。四個集合都能免費瀏覽，開收錄頁或看預覽影片也不需要帳號。
相關內容
探索與 Designeer 相關的工具、技能與文章。
Designeer 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。