Design reference // 15 sites
不是不會設計，
是沒看過足夠的範例
這頁收十五個公開的設計參考站，都不用註冊。重點不是站台清單，是什麼時候該開哪一個——做簡報、做內部工具、做儀表板的人比設計師更用得到。
你現在卡在哪
先看你手上是哪一種問題，再決定開哪一站。三種問題要去的地方完全不同。
CASE 01
版面不知道怎麼排
有內容但畫面空空，或每一塊都想放大。看別人怎麼分層、留白。
全部十五站
每張圖就是那個站現在的樣子（2026-09-15 實際開啟截圖）。點圖進站，「什麼時候開」那一行才是重點。
主流 App 的實機動效錄影，依 App 與元件分類。
什麼時候開要做互動效果，想知道別人的節奏與時間長度。
60 種元件、95 套設計系統、2,671 個實例的對照表。
什麼時候開查元件的正式英文名，或比較各家同一元件怎麼做。
各家網站的導覽列與側邊欄，按型態分類（下拉、巨型選單、側邊）。
什麼時候開做工具型頁面，卡在選單要放哪、分幾層。
排版精緻的網站收錄，可按類型與產業篩。
什麼時候開要整體版面的靈感，尤其是字級階層與間距。
極簡風格網站，每天更新，可按產業與版型篩。
什麼時候開內容少但想做得體面，不靠裝飾撐畫面。
極簡網站目錄，母站 DesEngs 收的是設計工程師的作品與資源。
什麼時候開同上，想一次看很多個做比較。
單頁式網頁合集，站上寫累積 9,130 個站、5,960 個範例。
什麼時候開做活動頁、專案介紹頁，只有一頁要講完。
網站首屏（hero 區）範例庫，只收開場那一塊。
什麼時候開第一屏不知道怎麼開場、標語與圖要怎麼擺。
把社群上熱門的設計貼文匯總成一條動態。
什麼時候開想知道最近大家在討論什麼，不用自己刷。
580 多個品牌實際發在社群的貼文與短片，含上市宣傳。
什麼時候開要做一支宣傳素材，看別人怎麼分鏡、怎麼下標。
Adobe、Spotify、Slack 等品牌的規範全本，多數可下載原始檔。
什麼時候開要訂自己專案的色票字級，或當自查清單。
品牌級簡報與品牌手冊，另有付費模板市集。
什麼時候開做對外簡報，不想用內建模板。
logo 與商標大集合，按字母、形狀、物件、自然、產業分類。
什麼時候開要做標誌或圖形符號，先看幾百個再動手。
顆粒感漸層底圖，部分免費、進階要付費。
什麼時候開簡報封面、頁首缺一張不搶戲的底圖。
字型與圖形素材站，多為付費；有「用圖找字型」的功能。
什麼時候開找字型風格參考，或看到一張圖想知道用了什麼字。
怎麼真的用上，而不是收藏就忘
看完覺得很棒、隔天全忘，是這類清單的正常結局。這四件事是我們自己在用的接法。
-
先查名字，再跟 AI 講
在 component.gallery 找到那個元件叫
popover還是tooltip，再去下指令。名字對了，生出來的東西一次就接近；名字錯了會來回三輪。 -
把品牌規範當自查清單
brandguidelines.net 上任何一本都會寫：主色幾個、字級幾階、logo 周圍留多少白。照那個結構檢查自己的頁面，缺哪一項馬上看得出來。
-
抄結構，不要抄畫面
可以抄的是「先講問題再給證據」這種順序；不能抄的是別人的字體搭配、插畫、標語。畫面照搬會踩版權，也會做出跟公司無關的東西。
-
存成自己的一句話樣本庫
看到好的就截圖，旁邊寫一句「為什麼好」。下次做同類東西，把那張圖和那句話一起給 AI 當參考，比重新形容一次快得多。
這些站幫不了你什麼
先知道邊界，省下白繞的時間。
- 不會告訴你要傳達什麼
- 版面問題背後常常是內容還沒想清楚。訊息沒定案時看再多範例都排不出來。
- 不是公司的品牌規範
- 站上是別人家的 CI。公司自己的用色、字體、logo 用法要問品牌窗口，不要照抄別人的。
- 素材多數要付費
- 字型與圖形站的授權要看清楚，商用與內部使用是不同條款。付費前先問清楚採購流程。
- 不要把內部資料貼上去
- 參考站只是看。做圖、改稿要用外部 AI 服務時，未公開的數字、名單、企劃一律不要貼。
站台清單來自 YouTube 頻道 @Rofix 的影片 〈海外最火的幾個設計類網站〉。 我們逐站開啟確認、補上兩個影片沒報出名稱的站，並修正影片講錯的部分（supahero.io 是首屏範例庫，不是作品集）。 截圖為各站 2026-09-15 的實際畫面，版權屬各站所有；「什麼時候開它」與四個接法是我們自己的整理。