Vibecoding時代，怎麼提高設計審美。說一下我是如何系統地尋找設計參考的
整理版優先睇
AI時代審美要靠自己練，大量持續有目的地睇好作品係關鍵
呢篇文章係作者繼「用AI快速出設計稿」之後嘅續篇，佢留意到好多人以為AI可以幫手搞掂設計，但其實AI生成再多設計都冇用，如果你判斷唔到邊個好、邊個差。作者嘅背景係一個長期做產品同設計嘅人，佢想解決嘅問題係：點樣系統噉提升審美能力。佢嘅整體結論好明確——審美冇捷徑，必須靠大量、持續、有目的地睇好作品，建立自己嘅判斷標準。
作者強調，睇設計參考唔係為咗抄，而係要理解點解好睇、點解咁排版、點解留白，然後再結合自己產品嘅目標去運用。佢話如果淨係見到個炫酷效果就塞落產品，唔叫審美，叫堆砌。所以，佢提供咗一套完整嘅方法同網站清單，幫讀者由零開始建立審美直覺。
呢篇文章詳細列出咗十幾個設計靈感網站，分為Web、App同視覺概念三大類，每個網站都有具體用途同使用建議。最後仲分享咗佢自己嘅「高效刷設計」方法——每日20分鐘，定目標、限數量、問問題，長期堅持。作者認為，當你睇得夠多，設計決策就會變成直覺，而直覺就係審美嘅最終形態。
- 結論：AI可以生成設計，但判斷好壞嘅審美能力只能靠自己累積，冇捷徑。
- 方法：每日20分鐘刷設計，先定目標，再睇3個案例，每個案例問自己三個問題（版式、留白、感覺）。
- 差異：睇參考唔係為咗抄，而係理解「點解好睇」同「點樣用喺自己產品」，避免堆砌。
- 啟發：審美係可以練嘅，關鍵係建立判斷標準，睇得夠多就會變成直覺。
- 可行動點：收藏作者推薦嘅網站清單（Awwwards、Mobbin等），跟住佢嘅刷法每日練習。
Awwwards
收錄完整網站案例，適合研究Hero區、視頻動效、滾動體驗同品牌氣質。
CSS Design Awards
偏純設計審美，排版、色彩、留白、網格系統，乾淨耐看。
Site Inspire
可按Hero、Typography、Layout、Industry精確篩選，適合拆解結構，從好睇進階到專業感。
Godly Website
偏年輕化、前沿新鋭設計，好多AI/創意工具類網站，感受流行趨勢。
核心觀點：AI幫唔到你嘅審美判斷
作者話，AI時代好多嘢都可以叫AI幫手做，但產品能力同審美能力，AI幫唔到你。產品能力決定你嘅作品有冇用，審美能力決定好唔好睇。呢兩個都係長期累積嘅事，冇捷徑。
睇參考嘅正確姿勢：唔係抄，係理解
練審美嘅方法就一條路：大量、持續、有目的地睇好作品。注意三個關鍵詞：大量、持續、有目的。而且睇設計參考嘅目的係提高審美，唔係照抄。
正確姿勢係：知道咩係好睇 → 理解點解好睇 → 結合產品目標去運用。唔好見到一個炫酷效果就塞落自己產品，嗰啲叫堆砌，唔係審美。
Web設計靈感站
呢啲網站嘅共同點係真實可訪問嘅網站案例，而且經過篩選。以下係作者推薦嘅七個網站：
- Awwwards（https://www.awwwards.com）：如果你只收藏一個網站，就揀佢。收錄完整網站，適合研究Hero區、視頻動效、滾動體驗同品牌氣質。
- CSS Design Awards（https://www.cssdesignawards.com）：偏純設計審美，排版、色彩、留白、網格系統，乾淨耐看。
- Site Inspire（https://www.siteinspire.com）：可按Hero、Typography、Layout精確篩選，適合拆解結構，從好睇進階到專業感。
- Godly Website（https://godly.website）：偏年輕化、前沿，好多AI/創意工具類網站，感受流行趨勢。
- Lapa Ninja（https://www.lapa.ninja）：落地頁專用，Hero區結構豐富，CTA、文案、信息層級值得研究。
- One Page Love（https://onepagelove.com）：單頁網站，信息密度控制、滾動節奏、完整體驗。
- Minimal Gallery（https://minimal.gallery）：極簡剋制，校準審美用，覺得頁面太亂就刷佢。
App / UI設計靈感站
前面嘅網站偏品牌同視覺，呢啲更偏真實產品體驗，特別係Mobbin展示真實App流程，好適合做功能型產品嘅人。
- Mobbin（https://mobbin.com）：強烈推薦。展示真實App流程，可以直接睇到註冊、上傳、生成結果、支付等完整流程。
- Pttrns（https://pttrns.com）：專注UI Pattern，列表、表單、導航、彈窗，適合解決「呢個功能點樣做先合理」。
- Screenlane（https://screenlane.com）：更新快，App/Web UI都有，快速瞭解「而家大家點樣設計」。
視覺與概念類（養感覺）
呢類網站唔一定可以直接用，但對培養感覺好重要。作者提醒：Behance重點睇項目敍事、視覺體系、情緒氛圍；Dribbble只睇靈感，唔好睇結構，因為好多「飛機稿」唔落地。
- Behance（https://www.behance.net）：搜索Web Design、Landing Page等，重點睇項目敍事、視覺體系、情緒氛圍。
- Dribbble（https://dribbble.com）：當靈感睇可以，唔好當實際參考，結構唔可靠。
高效刷設計方法：每日20分鐘
作者分享自己用嘅方法，每日20分鐘就夠，關鍵係定明確目標、限數量、問問題。
- 1 先定一個明確目標：例如今日只睇「Hero區」或「落地頁」或「表單設計」。
- 2 每個網站只睇3個案例：貪多嚼唔爛。
- 3 每個案例問自己三個問題：版式點解咁排？點解呢個地方需要留白？第一眼點解有感覺？
之前有篇講過點樣用 AI 工具快速整設計稿，最後提到「審美能力真係好重要」，瀏覽量都算OK。
呢篇就詳細講下：審美能力點樣練？
先講一個我嘅觀察
AI 時代，好多嘢都可以交俾 AI 幫你做——寫 code、生成設計稿、配色排版。但係有兩樣嘢，AI 幫唔到你：
一個係產品能力，一個係審美能力。
產品能力決定你整嘅嘢有冇用，審美能力決定你整嘅嘢好唔好睇。呢兩個都係要長時間累積嘅事，冇捷徑。
你可以俾 AI 一秒鐘生成十個設計稿，但係如果你分唔清邊個好、邊個差、差喺邊度、點樣改更好——咁呢十個設計稿對你嚟講都係廢稿。
所以：工具可以提升效率，但判斷力要自己練。
點樣練審美？
講白咗就得一條路：大量、持續、有目的地睇好作品。
留意呢三個關鍵詞：
• 大量：偶爾睇一眼冇用，要累積 • 持續：三日打魚兩日曬網冇用，要養成習慣 • 有目的：漫無目的咁碌都冇用，要帶住問題去睇
呢篇文章我就分享一啲我長期用緊嘅設計參考網站。佢哋唔係教學，係用嚟「養眼」嘅地方。
但係開始之前，有一點好重要
睇設計參考嘅目的係提升審美，唔係照抄。
呢兩件事分別好大。
我睇過唔少網站，視覺上真係好驚豔，但你查嚇佢嘅流量——幾乎冇人用。點解？因為佢係「為設計而設計」，好睇係好睇，但唔實用、唔符合用戶習慣、資訊架構一塌糊塗。
所以睇設計參考嘅正確姿勢係：
1. 知道咩係好睇 2. 理解點解好睇 3. 做自己產品嘅時候，結合產品目標去運用
唔係見到一個好型嘅效果就塞落自己產品度。嗰啲唔叫審美，嗰叫堆砌。
好，下面正式開始。我按 Web / App 兩個方向嚟分。
一、Web 設計靈感站
呢類網站嘅共同點係：真實可以訪問嘅網站案例，而且經過篩選。
1. Awwwards
🔗 https://www.awwwards.com
如果你淨係收藏一個網站，揀佢。
• 收錄嘅係完整網站，唔係單個頁面 • 非常適合研究 Hero 區（首屏敍事）、影片動效、滾動體驗、品牌氣質 • 適合長期碌
用法：直接由分類入手（Fullscreen / Video / Minimal / Typography）
2. CSS Design Awards
🔗 https://www.cssdesignawards.com
相比 Awwwards，更偏向純設計審美：排版、色彩、留白、網格系統。
唔追求花巧，但非常乾淨、耐睇。
3. Site Inspire
🔗 https://www.siteinspire.com
非常適合「拆解結構」。
• 可以按 Hero / Typography / Layout / Industry 精確篩選 • 好多網站睇落唔係好型，但非常成熟
適合想由「好睇」進階到「專業感」嘅人。
4. Godly Website
🔗 https://godly.website
偏年輕化、偏前衞：新鋭設計、實驗性強、好多 AI / 創意工具類網站。
想感受「而家流行啲咩」，碌佢就啱喇。
5. Lapa Ninja（落地頁專用）
🔗 https://www.lapa.ninja
如果你關注嘅係 Landing Page / 首屏 / 轉化結構，必睇。
• Hero 區結構非常豐富 • CTA、文案、資訊層級值得研究 • 好適合產品型、工具型網站
6. One Page Love
🔗 https://onepagelove.com
專門收錄單頁網站：資訊密度控制、滾動節奏、首屏到尾嘅完整體驗。
適合研究「一頁講清楚一件事」。
7. Minimal Gallery
🔗 https://minimal.gallery
用嚟校準審美嘅地方。極簡、剋制、高級。
當你覺得自己頁面越整越「亂」，就嚟碌佢。
二、App / UI 設計靈感站
前面嘅站點偏「品牌同視覺」，下面呢啲更偏真實產品體驗。
8. Mobbin
🔗 https://mobbin.com
強烈推薦。
• 展示嘅係真實 App 流程 • 可以直接睇到註冊、上載、生成結果、支付等完整流程 • 非常適合做功能型產品嘅人
我上一篇都有提到佢，做手機端產品嘅必睇。
9. Pttrns
🔗 https://pttrns.com
專注於 UI Pattern（模式）：列表、表單、導航、彈出視窗。
適合解決「呢個功能到底點樣做先合理」嘅問題。
10. Screenlane
🔗 https://screenlane.com
更新快，App / Web UI 都有。適合快速瞭解「而家大家係點樣設計」。
三、視覺與概念類（唔好照抄，但一定要睇）
呢類網站唔一定可以直接用，但對培養感覺好重要。
Behance
🔗 https://www.behance.net
建議搜尋：Web Design、Landing Page、Concept Website、Motion Design
重點睇：項目敍事、視覺體系、情緒氛圍
Dribbble
🔗 https://dribbble.com
使用建議得一句話：淨係睇靈感，唔好睇結構。
Dribbble 上面好多作品「飛機稿」成分好重，好睇但唔落地。當靈感睇可以，唔好當實際參考。
四、我嘅「高效碌設計」方法
俾你一個我自己用緊嘅方法，每日 20 分鐘就夠：
1. 先定一個明確目標 今日淨係睇「Hero 區」或「落地頁」或「表單設計」
2. 每個網站淨係睇 3 個案例
貪多嚼唔爛3. 每個案例問自己三個問題 • 版式點解要咁樣排？ • 點解呢個地方需要留白？ • 第一眼點解會有感覺？
長期堅持，比臨時狂碌有用得多。
寫喺最後
設計參考網站嘅意義，從來都唔係「抄」。
而係幫你建立一個判斷標準：咩係好？咩係一般？咩係唔應該做嘅？
AI 可以幫你生成，但「呢個得唔得」要你自己判斷。呢個判斷力，就係審美。
審美呢樣嘢，急唔嚟。但好彩佢係可以練嘅——只要你願意每日花啲時間去睇、去想、去分析。
當你睇得夠多，好多設計決策會變成直覺。
而直覺，就係審美嘅最終形態。
之前有一篇聊了怎麼用 AI 工具快速出設計稿，最後提到"審美能力真的很重要"，瀏覽量還行。
這篇就來展開講講：審美能力怎麼練？
先說一個我的觀察
AI 時代，很多事情都可以讓 AI 幫你做了——寫代碼、生成設計稿、配色排版。但有兩樣東西，AI 幫不了你：
一個是產品能力，一個是審美能力。
產品能力決定你做的東西有沒有用，審美能力決定你做的東西好不好看。這兩個都是長期積累的事情，沒有捷徑。
你可以讓 AI 一秒鐘生成十個設計稿，但如果你分不清哪個好、哪個差、差在哪裏、怎麼改更好——那這十個設計稿對你來說都是廢稿。
所以：工具可以提效，但判斷力得自己練。
怎麼練審美？
說白了就一條路：大量、持續、有目的地看好作品。
注意這三個關鍵詞：
• 大量：偶爾看一眼沒用，得積累 • 持續：三天打魚兩天曬網沒用，得養成習慣 • 有目的：漫無目的地刷也沒用，得帶着問題看
這篇文章我就來分享一些我長期在用的設計參考網站。它們不是教程，是用來"養眼睛"的地方。
但在開始之前，有一點很重要
看設計參考的目的是提高審美，不是照抄。
這兩件事差別很大。
我看過不少網站，視覺上確實很驚豔，但你去查一下它的流量——幾乎沒人用。為什麼？因為它是"為了設計而設計"，好看是好看，但不實用、不符合用戶習慣、信息架構一塌糊塗。
所以看設計參考的正確姿勢是：
1. 知道什麼是好看的 2. 理解為什麼好看 3. 在做自己產品的時候，結合產品目標去運用
不是看到一個炫酷的效果就往自己產品裏塞。那不叫審美，那叫堆砌。
好，下面正式開始。我按 Web / App 兩個方向來分。
一、Web 設計靈感站
這類網站的共同點是：真實可訪問的網站案例，而且經過篩選。
1. Awwwards
🔗 https://www.awwwards.com
如果你只收藏一個網站，選它。
• 收錄的是完整網站，不是單個頁面 • 非常適合研究 Hero 區（首屏敍事）、視頻動效、滾動體驗、品牌氣質 • 適合長期刷
用法：直接從分類入手（Fullscreen / Video / Minimal / Typography）
2. CSS Design Awards
🔗 https://www.cssdesignawards.com
相比 Awwwards，更偏向純設計審美：排版、色彩、留白、網格系統。
不追求花哨，但非常乾淨、耐看。
3. Site Inspire
🔗 https://www.siteinspire.com
非常適合"拆解結構"。
• 可以按 Hero / Typography / Layout / Industry 精確篩選 • 很多網站看起來不炫，但非常成熟
適合想從"好看"進階到"專業感"的人。
4. Godly Website
🔗 https://godly.website
偏年輕化、偏前沿：新鋭設計、實驗性強、很多 AI / 創意工具類網站。
想感受"現在流行什麼"，刷它就對了。
5. Lapa Ninja（落地頁專用）
🔗 https://www.lapa.ninja
如果你關注的是 Landing Page / 首屏 / 轉化結構，必看。
• Hero 區結構非常豐富 • CTA、文案、信息層級值得研究 • 很適合產品型、工具型網站
6. One Page Love
🔗 https://onepagelove.com
專門收錄單頁網站：信息密度控制、滾動節奏、首屏到結尾的完整體驗。
適合研究"一頁講清一件事"。
7. Minimal Gallery
🔗 https://minimal.gallery
用來校準審美的地方。極簡、剋制、高級。
當你覺得自己頁面越做越"髒"，就來刷它。
二、App / UI 設計靈感站
前面的站點偏「品牌和視覺」，下面這些更偏真實產品體驗。
8. Mobbin
🔗 https://mobbin.com
強烈推薦。
• 展示的是真實 App 流程 • 可以直接看到註冊、上傳、生成結果、支付等完整流程 • 非常適合做功能型產品的人
我上一篇也提到過它，做移動端產品的必看。
9. Pttrns
🔗 https://pttrns.com
專注於 UI Pattern（模式）：列表、表單、導航、彈窗。
適合解決"這個功能到底該怎麼做才合理"的問題。
10. Screenlane
🔗 https://screenlane.com
更新快，App / Web UI 都有。適合快速瞭解"現在大家在怎麼設計"。
三、視覺與概念類（不要照抄，但一定要看）
這類網站不一定能直接用，但對培養感覺很重要。
Behance
🔗 https://www.behance.net
建議搜索：Web Design、Landing Page、Concept Website、Motion Design
重點看：項目敍事、視覺體系、情緒氛圍
Dribbble
🔗 https://dribbble.com
使用建議只有一句話：只看靈感，不看結構。
Dribbble 上很多作品"飛機稿"成分很重，好看但不落地。當靈感看可以，別當實際參考。
四、我的"高效刷設計"方法
給你一個我自己在用的方法，每天 20 分鐘就夠：
1. 先定一個明確目標 今天只看「Hero 區」或「落地頁」或「表單設計」
2. 每個網站只看 3 個案例
貪多嚼不爛3. 每個案例問自己三個問題 • 版式為什麼這樣排？ • 為什麼這個地方需要留白？ • 第一眼為什麼有感覺？
長期堅持，比臨時猛刷有用得多。
寫在最後
設計參考網站的意義，從來不是"抄"。
而是幫你建立一個判斷標準：什麼是好？什麼是一般？什麼是不該做的？
AI 可以幫你生成，但"這個行不行"得你自己判斷。這個判斷力，就是審美。
審美這東西，急不來。但好在它是可以練的——只要你願意每天花一點時間去看、去想、去分析。
當你看得足夠多，很多設計決策會變成直覺。
而直覺，正是審美的最終形態。