網路資源
UNSECTION：尋找網頁區塊設計靈感的實用網站
UNSECTION 是一個收錄了許多網頁區塊設計範例的網站，你可以透過分類篩選的方式去尋找設計上的靈感。
網路資源
網路資源
Felix AI：結合 AI 提供即時的 UI 設計分析、建議和生成
Felix AI 是一個結合 ChatGPT 的 Figma 外掛，會根據您的設計情境利用人工智慧提供即時的設計分析、建議和生成。它通過提供基於您選定的設計元素的洞察、建議和生成，有助於改進您的工作流程。
網路資源
CSS Genius：透過 AI 生成 Tailwind UI 元件
CSS Genius 是一款令人驚嘆的工具，它利用人工智慧技術，輕鬆為您的應用程式創建漂亮的 UI 元件。透過 CSS Genius，您可以設計元件並根據您的喜好進行樣式設定，而無需編寫任何程式碼，只需使用簡單的文字提示。您可以預覽這些元件，然後通過文字對其進行更新。
網路資源
Pafolios：收錄來自世界各地的設計師的作品集網站，可以當作設計個人作品集的靈感
Pafolios 是一個專門展示設計作品集的網站。網站上收錄了來自世界各地的設計師的作品集，包括平面設計、網頁設計、UI/UX 設計、產品設計等。
網路資源
draw-a-ui：透過 AI 根據用戶繪製的線框和標註生成 UI 設計
draw-a-ui 使用開源數字畫板 tldraw 和 gpt-4-vision API 打造，可以根據用戶繪製的線框和標註生成 UI 設計。
網路資源
LangUI：為您的人工智慧專案量身訂製的開源 UI 元件
LangUI 是一個開源的 Tailwind 函式庫，為您的人工智慧和 GPT 專案提供度身訂製的免費元件。這個函式庫匯集了一系列漂亮、響應式、可重複使用的深色/淺色模式元件。專注於打造您的下一個最佳專案，將 UI 交由 LangUI。
網路資源
Landingfolio：收錄許多 Landing page 範例的網站
如果您正在尋找Landing page設計靈感，那麼您可以參考Landingfolio。Landingfolio提供網絡上最優秀的Landing page設計、模板、元件等資源。您可以受到網站精心挑選的實際登陸頁面示例的啟發，確保品質最高。無論您是想設計自己的Landing page還是參考其他成功案例，Landingfolio都能提供有價值的參考和靈感
網路資源
Kombai 評析：專為前端設計打造的 AI Agent，從 Figma 一鍵生成高品質 React / HTML＋CSS 程式碼
Kombai 是 AI 前端工具，可將 Figma、截圖或文字提示轉為 React 元件或 HTML＋CSS，支援 email 模板開發，提升設計到程式碼效率。
網路資源
UI Notes：收錄以中國為主的 App UI 網站
UI Notes 收集了大量中國線上優秀 App 的完整 UI 截圖的網站，都是實際的 APP 介面。你可以在這裡探索 UI 設計的最新趨勢、瀏覽競品的產品設計，快速找到工作中需要的靈感。
教學與資訊
什麼是 Overlapping Target？
「Overlapping Target」翻譯為繁體中文是「重疊目標」，這個詞語通常用於討論在使用者界面中，一個互動元素（如按鈕或連結）在視覺上重疊或部分覆蓋另一個元素的情況。這種情況可能會導致使用者難以正確點擊所需的目標元素，因此在設計界面時，需要避免重疊目標，以確保使用者體驗的可用性和易用性。
網路資源
HUDS+GUIS：互動設計師的靈感和資源網站
HUDS+GUIS成立作為互動設計師的靈感和資源網站。這是一個您可以找到最具創意和有趣的UI設計示例的地方。資源可以來自任何地方，如電影、遊戲、概念設計和實際世界的發展。
網路資源
Scroll-driven Animations：收錄許多網頁捲動時的特效實踐方法
滾動驅動的動畫在網頁上是一個常見的用戶體驗模式。這些動畫與滾動容器的滾動位置相關聯。這意味著當你向上或向下滾動時，相關聯的動畫會根據直接響應向前或向後滑動。想像一下有趣的效果，比如視差背景圖像或隨著滾動而移動的閱讀指示器。
網路資源
html.to.design：輸入網址，就能把網站轉成 Figma 的設計稿
html.to.design 是一個很厲害的 Figma Plugin，只要輸入網址，就能把該網址自動轉成 Figma 的設計稿，對於想要練習切版或是想要就某個網站風格進行改版的開發者而言是很方便的工具。
網路資源
Iconbuddy：20萬+開源SVG圖示免費下載平台
Iconbuddy 是一個收錄許多了上萬種 icon 的線上服務，你可以選擇自己喜歡的圖示並自訂樣式，網站也提供多種不同的格式可供選擇，這樣就可以按照個別的需求下載圖示。
網路資源
Vivid：從 Figma 生成可用的元件
Vivid 是一個 Figma 外掛，能夠讓您生成並交付可用的元件。透過讓設計師負責 UI，讓開發人員專注於功能，消除了多餘的開發工作。
教學與資訊
在寫功能前先把流程確認好：認識 UI Flow
當談到 UI Flow（使用者介面流程）時，通常是指使用者界面在應用程式或網站中的流程或導覽。這描述了使用者如何透過不同的界面元素和互動來完成特定任務或達成目標。UI Flow 是設計師和開發者間交流的重要工具，也是確保使用者體驗良好的關鍵步驟。
網路資源
Figma Export to Video：一鍵將 Figma 原型輸出為 MP4、WebM 或 GIF
Figma Export to Video是一款獨特的Figma擴充套件，能夠智能地將Figma原型匯出為GIF或MP4影片。這款擴充套件經過精心設計，完美配合你喜愛的設計應用程式。你可以與團隊共享影片，創建時尚的行銷影片或令人愉悅的微互動。
教學與資訊
什麼是 Wireframe（線框圖）？以及在規劃時該注意什麼？
Wireframe 是一種視覺化的設計工具，用於呈現網站、應用程式或數位產品的結構和布局。它通常是以簡單的線條和框架形式呈現，忽略了具體的設計風格、色彩和內容細節。