設計靈感網站怎麼用？我把參考變成自己設計的 4 個步驟（附 15 個網站依用途整理）

TL;DR：收集靈感不難，難的是把參考變成自己的設計。我的做法分四步：先收 3～5 張同品類的真實參考，拆成版面、配色、字體、資訊層級，再從裡面挑出 2～3 個真正要學的核心原理；回到 Figma 自己重新排，換掉骨架；最後把新稿和參考並排檢查，版面骨架、招牌元素、文案句型三項裡有兩項相同就重做。15 個靈感網站我依用途整理成一張表，先問「這次要找什麼」再挑網站。要注意三件事：參考不等於有授權、只看一張容易撞臉、靈感網站裡的 AI 生成圖越來越多。

很多設計師都有類似經驗：打開 Pinterest，滑了兩個小時，存了很多圖片；但真正要開始設計時，卻不知道哪一張能派上用場。收集靈感不難，難的是把靈感整理成「可以使用的參考」。

這篇原本是 2026 年 6 月寫的 15 個靈感網站整理。這次重新改寫，主角換成我自己「從參考到成品」的做法，用一張拆解示範走完整個過程；15 個網站縮成一張依用途整理的表，每站一句短評。網站的費用、登入規定和近期變動，都在 2026-10-14 逐一打開確認過，來源放在文末。

先講結論：參考要學的是「為什麼」，不是「長怎樣」

收集靈感不等於抄襲，前提是你看的不是表面，而是方法。

如果只是把別人的版面、配色、圖片位置、文字比例幾乎照搬，只換掉品牌名稱，那就是抄。如果你去觀察它為什麼這樣設計，例如標題為什麼放在這裡、圖片為什麼這樣裁切、留白為什麼這麼多，再把這些觀察放回自己的內容和品牌情境，那就是參考。

我在週報 #019 寫過，AI 時代品味會更重要：你不知道某種風格，就不會知道要跟 AI 去提。參考看得多、拆得細，你才有東西可以判斷，不管最後是自己排還是交給 AI 做。

一句話：參考不是問題，沒有消化就直接搬用，才是問題。

我怎麼把參考變成自己的設計

我的流程是「觀察、拆解、轉化、檢查」四步。下面用一張廣告圖示範，從找參考一路做到新稿。

步驟 1：觀察，先找同品類的真實參考

結論先講：參考要找同一個品類、真的有上線的設計。家電就找家電，美妝就找美妝，咖啡就找咖啡。

原因是每個品類都有自己的慣例。美妝廣告常用低彩度和大量留白，促銷電商圖會把價格放最大，這些慣例是消費者已經習慣的閱讀方式。拿跨品類的參考來做，畫面可能好看，但放進那個品類就顯得不對勁。

1. 開始前先問自己：這次要找的是風格、版型、字體、流程，還是資訊怎麼排？一次只找一件事。
2. 到對應的網站找同品類的參考（怎麼挑網站，看下一段的表）。
3. 先收 3～5 張就好。少數幾張圖，才看得出它們的共通點；收太多，方向反而會模糊。
4. 每張存下來時，寫一句為什麼留它，例如「這張的留白很舒服」「價格和品名的大小差很多」。

我收藏參考用的是 Eagle，一個裝在電腦上的素材管理軟體。我在週報 #030 推薦過它，因為它是買斷制，這種工具現在很少了。一般用法是：用瀏覽器擴充直接把網頁上的圖拖進來，加資料夾和標籤，在圖上寫註解，之後可以用顏色或標籤找回來。官網寫可以試用 30 天，買斷價 US$34.95，一組授權可以用在 2 台裝置（2026-10-14 查看）。

分類可以照用途（海報、網頁、品牌）、照元素（配色、字體、構圖），或照手上的專案分。每個案子開始前翻一次收藏，你會慢慢看出自己的品味傾向，這就是風格的雛形。

步驟 2：拆解，寫下要學的設計語言

結論先講：每張參考都拆成同樣幾個面向，各寫一句「它怎麼做」。我固定看的是字體、數字字型、配色、標籤造型和排版方向，整理起來就是下面四類。

• 版面：主體放哪、是對稱還是左右分、留白佔多少。
• 配色：用了幾個顏色、各佔多少比例、彩度高還是低。
• 字體：標題用什麼字型、數字用什麼字型、字重差多少、標籤長什麼樣子。
• 資訊層級：讀者第一眼看到什麼、第二眼看到什麼、最小的字是什麼。

每張都拆完之後，比對 3～5 張的筆記，挑出 2～3 個你這次真正要學的核心，例如「低彩度」「明朝體大標」「大量留白」。核心是原理，不是某一張的長相。

拆的時候分兩欄寫：一欄是「要學的原理」，例如低彩度、明朝體大標、大量留白；另一欄是「這張的招牌元素」，也就是讓人一眼認出是它的東西，例如示範圖裡左右兩道粉末噴濺、兩盒產品並排。第一欄可以學，第二欄不要帶走。

以示範圖來說，寫成筆記大概是這樣：

寫完這張表，你帶走的就不是一張圖，而是幾條之後能重複用的原理。下次做別的品類，這些原理一樣用得上。

步驟 3：轉化，回到 Figma 自己排

結論先講：拿著拆解筆記，自己在 Figma 重新排，換掉骨架，只留下原理。

我不會把參考圖直接丟給 AI 叫它「做一張像這樣的」。參考是給排版的人看的，我自己照著拆解筆記排。這樣做出來的東西，原理對了，長相是自己的。

1. 先決定骨架：參考是置中，我就試左右分割；參考是滿版照片，我就試色塊加去背商品。
2. 把要學的原理一條一條套上去：配色比例、字型、字重差、留白。
3. 文案用自己的內容寫，不改參考的句子。
4. 只用你挑出的 2～3 個核心，最好來自不同張參考，例如 A 的配色、B 的版面節奏、C 的字體層級。

步驟 4：檢查，把新稿和參考並排看

結論先講：交出去之前，把新稿和每一張參考並排看一次，檢查三件事。

三項裡有兩項和同一張參考一樣，就要改。改的時候先試最小改動：保留場景和風格，只換用詞、排版，或拿掉最有辨識度的那一個元素。如果最小改動還是很像，再考慮整張重做。

參考越單一，越容易撞。3～5 張參考是讓你找共通點的，不是讓你整張照抄；真正帶走的只有 2～3 個核心，而且分散在不同張，最後做出來的東西就比較不會像任何一張。

搭配 AI 時，參考一樣要先拆

結論先講：用 AI 做設計，拆解這一步更不能省。

我在週報 #019 寫過，各種 AI 做的 UI 頁面總是給人一種熟悉感。這不是 AI 的問題，是你沒有給它明確的方向。拆解筆記就是那個方向：把「要學的原理」寫成文字，比丟一張參考圖過去更準，也比較不會整組照抄。

我在週報 #044 也提過，用 AI 做圖卡前，第一次要花時間把字體、配色、行距這些規範整理好。如果前期不想花時間，做出來的東西會很普通，而這種普通也會跟別人很像。拆解參考，就是在幫這份規範找依據。

素材也是一樣。週報 #026 我分享過減少 AI 感的做法：不要讓素材 100% 是 AI，用高比例的真實照片，AI 拿來修局部。參考也盡量找真實上線的作品，不要拿 AI 生成圖當參考。

依用途挑網站：15 個網站一覽

網站清單本身不是重點，重點是先知道這次要找什麼。下面這張圖可以當成挑網站的起點。

三個網站，實際打開來看

下面挑三個網站，標出我實際會用的地方。都是 2026-10-14 沒有登入時的畫面。

Landbook（land-book.com）：網站名稱現在寫成 Landbook，網址沒變。它的好用之處是可以只看某一種區塊或某一種頁面，做銷售頁、課程頁時很適合。

Banner Library（design-library.jp）：Banner 看起來只是小圖，但很考驗資訊層級。標題要清楚，主視覺要吸引人，品牌也要被看見。前面拆解示範的參考圖就是在這裡找的。

Typewolf（typewolf.com）：字體選擇很花時間。Typewolf 的好處是讓你看到字體放在真實網站裡的樣子，每一筆下面都寫了用了哪些字體。不過首頁最新一筆停在 2025 年 12 月，更新變慢了，要找最新的字體趨勢，可以搭配 Landbook 的 Typography 篩選。

2026 年 10 月查核時的變動

• Page Flows 沒有免費方案。原文寫「部分內容需要付費」，查核時定價頁寫的是年繳、季繳和團隊方案，試用 3 天也要先付 US$2.95。
• Typewolf 更新變慢。首頁最新一筆是 2025-12-14，再往前是 2025 年 9 月。網站還在，字體清單和文章都能看。
• Landbook 改了名稱寫法，從 Land-book 變成 Landbook，網址還是 land-book.com，也多了 Mobile、Motion、OG Images、Headlines 這些分類。
• Savee 網址是 savee.com，舊的 savee.it 會轉過去。它現在也有 MCP，可以讓 AI 工具讀你的收藏（只能讀，不能改）。
• Mobbin 也有 MCP，包含在 Pro 方案裡；免費版不能用流程和搜尋，收藏最多 3 個。
• Cosmos 首頁可以依顏色找圖、找相似圖，也可以選擇顯示、模糊或隱藏被標成 AI 生成的圖。
• Pinterest 從 2025 年起會在 AI 生成或修改過的圖上標「AI modified」，也提供看少一點 AI 圖的選項。
• Dribbble 首頁的重心已經轉向接案媒合。2025 年它規定業主付款前，設計師不能在平台上交換聯絡方式，這件事當時引起不少討論。

限制與注意

• 看得到不代表能用。靈感網站上的作品都有各自的著作權，Banner Library、Pinterest、Behance 上的圖只能拿來參考，不能改字直接用。Figma Community 的檔案要看每個檔案標的授權，正式專案還是要依品牌重做。
• 只看一張，最容易撞臉。參考越單一，做出來越像它。用前面的三項檢查並排看一次，比事後被留言指出來好處理得多。
• AI 生成圖越來越多。Pinterest 和 Cosmos 都開始標示 AI 生成圖，但標示不一定抓得到全部。AI 生成圖常常結構對不起來、字是糊的，也不是真的上線過的設計。要學品類慣例時，優先看 Mobbin、Banner Library、Siteinspire 這種收錄真實上線作品的網站。
• 網站會變。方案、價格、登入規定都可能改，表格是 2026-10-14 的狀態，用之前回官網看一次。
• 這是我的做法。不同類型的案子要拆的面向不一樣，例如 UI 還要看流程和狀態，四個面向是起點，不是全部。

相關資源

本文網站方案、價格與功能於 2026-10-14 對照各網站官方頁面查核，之後可能變動。

小結

靈感網站沒有魔法，它們只是原料庫。真正有用的，不是收藏了多少網站，而是你能不能把看到的東西拆解，再用回自己的設計裡。

1. 觀察：先問這次要找什麼，收 3～5 張同品類的真實參考。
2. 拆解：拆成版面、配色、字體、資訊層級，從裡面挑出 2～3 個要學的核心，招牌元素不帶走。
3. 轉化：自己在 Figma 重新排，換掉骨架，文案用自己的內容寫。
4. 檢查：和每張參考並排看，骨架、招牌元素、文案句型有兩項相同就改。

別當收藏家，當使用者。收藏一千張圖不會讓你變厲害，把其中三張真的用進作品、而且做得更好，才會。下次開案前，挑一張參考，照上面四步走一次。

---

常見問題 FAQ

參考別人的設計算抄襲嗎？

看你拿走的是什麼。學原理（配色比例、字體層級、留白）是參考；版面骨架、招牌元素、文案句型照搬，只換品牌名稱，就是抄。交件前把新稿和參考並排看，三項裡有兩項一樣就要改。

參考要找幾張？

先收 3～5 張同品類的參考，再從裡面挑出 2～3 個真正要學的核心，例如字體、配色、版面方向這類原理。張數是用來找共通點的，不是 3～5 張整張照抄。

靈感網站看太多，反而不知道怎麼做怎麼辦？

先縮小範圍。這次找配色，就不要同時看版型和字體；找網站首屏，就不要滑到海報和包裝。收集只是手段，可以給自己訂一個逛和做的時間比例，例如 1 比 3，收集只為手上的案子服務。

Dribbble 和 Behance 差在哪？

Dribbble 適合快速看視覺表現，通常是一張畫面或概念稿；Behance 適合看完整專案，包含設計脈絡、應用方式和提案呈現。想找畫面感看 Dribbble，想看品牌案怎麼延伸看 Behance。

做 UI 設計只看 Dribbble 夠嗎？

不夠。Dribbble 很多作品不是真實產品。做 UI 時搭配 Mobbin 或 Page Flows 看真實上線的畫面和流程，因為產品設計還要考慮使用者怎麼完成任務。

這些網站都免費嗎？

大部分可以免費瀏覽。Page Flows 沒有免費方案；Mobbin 免費版看不到流程、不能搜尋；Savee 免費版最多存 150 張。2026-10-14 的狀態整理在網站一覽表，用之前回官網確認。

可以把參考圖直接丟給 AI，請它做一張類似的嗎？

不建議。這樣最容易撞臉，也學不到原理。比較好的做法是自己先拆解，把「要學的原理」寫成文字，再決定自己排或交給 AI；招牌元素和文案句型一樣不要帶走。

---

關於作者｜Kevin Kuo

Kevin Kuo / 郭政佑是 凱文設計 Kevin Design 與 創作邦 CreatorHome 的內容創作者，長期整理 AI 工具、設計方法、創作者工作流與個人品牌經營。

更多公開介紹可參考 Kevin on CreatorHome、Kevin Design AI Guide。

---

延伸閱讀：網頁設計靈感網站：26 個網站案例與互動參考｜平面設計靈感網站：25 個海報、品牌、字體參考｜設計師工具與素材總整理｜設計 LOGO 我踩過的 4 個坑｜週報 #019：品味將變得更重要