資源 / 主題 01
設計資源
我會實際回訪的介面、品牌、字體、元件、動態、視覺化與設計工程資源。
51 項資源
介面與網站靈感
從真實產品流程與精選網站中，研究版面、互動與視覺方向。
獨立精選的 Webflow、Framer 與 Shopify 範本庫，同時檢視視覺設計與實作品質。
適合用在 不必逐一檢查範本市集的所有項目，也能找到完成度高的起點。
每週更新的優秀網站畫廊，每則擷取都依其展示的細節歸類，如 hero、頁尾、按鈕、導覽、頁面轉場與捲動動畫，並附上可複製的程式碼片段。
適合用在 針對單一元素或互動，橫向比較多個網站的做法，不必逐頁翻找所需的片段。
品牌、編輯與社群設計
探索標誌、品牌規範、簡報與社群內容如何建立一致的視覺語言。
以 Threads 帳號形式免費發布配色卡片，每個色塊都標註色名與 hex 色碼；其推廣的付費色彩字典並非必要。
適合用在 在專案需要初步配色方向時，直接取用附帶 hex 色碼的現成調色盤。
字體排印
從真實案例與可用字體目錄中，研究字體如何影響作品的語氣與層次。
元件探索
跨設計系統比較模式，或從大型社群目錄尋找現成靈感。
免費且採 MIT 授權的元件庫，收錄 154 個可複製貼上的 React 與 Tailwind 元件，分為 26 個類別，涵蓋按鈕、小工具，以及裝置外框與註解標示等元件。
適合用在 取得風格一致且由自己掌握的元件原始碼，包含裝置外框與註解標示等簡報用元件，不需引入相依套件，也無須標註出處。
由社群共同建立的開源介面元素庫，收錄數千個元件，每個都可複製為純 HTML/CSS、Tailwind、React 或 Figma 格式。
適合用在 為單一元素借用視覺處理手法，再以無障礙基礎元件重新實作——社群投稿的元件通常未考量鍵盤操作與螢幕閱讀器。
基礎元件
建立產品介面時，負責結構、行為與無障礙的可靠起點。
動態與表現型介面
從產品微互動到行銷頁效果，快速探索不同動態語彙。
收錄 66 種純 CSS 文字動畫效果的工具庫，每個效果皆可獨立使用，並附上可直接交給編碼代理的提示詞。
適合用在 在不引入 JavaScript 動畫套件的前提下，為單一標題或字標加上具表現力的動態效果。
開源的 React 動態載入指示器套件，收錄 42 種文字、行內與圖片三類變體，每一種都可調整動畫速度。
適合用在 為 AI 生成介面填補等待時間，讓串流輸出搭配符合該內容型態的載入狀態。
收錄 210 個程序化 Three.js 與 WebGL 元件的目錄，涵蓋 hero、shader、背景與到達頁模板，每一項都能複製成程式碼或提示詞，並提供給 coding agent 使用的 MCP server。應用程式與 Community 層採 MIT 授權，其餘內容需訂閱 Pro。
適合用在 在不從零手寫 WebGL 的情況下，為頁面加上 3D 或 shader 驅動的 hero，並透過 MCP server 把這些元件直接交給 coding agent。
視覺化與圖解
快速畫出流程、系統關係與想法，讓複雜內容更容易討論與理解。
圖示與輔助工具
尋找一致的圖示素材，並製作小而有目的的視覺互動。
設計工程
把視覺品味、互動細節與前端實作放在同一個工作流程中。
在瀏覽器中標注介面元素的 React 開發模式覆蓋層，可將每則註記連同 CSS 選擇器、位置與脈絡匯出成 Markdown。
適合用在 與其用文字描述，不如直接把 coding agent 指向你想修改的那個元素。
開源框架，在建置階段直接從真實元件產生骨架載入畫面，並跨斷點擷取各自的版面，支援 React、Vue、Svelte、Angular 與 React Native。
適合用在 以自動產生的骨架取代手工測量的載入佔位畫面；這是需要建置步驟的正式相依套件，而非可直接複製的片段。
為網站設計工程師整理的分類工具目錄，涵蓋靈感、AI 程式開發、元件、動態、3D、實用工具等領域。
適合用在 已知要處理的工作或媒介，卻還不確定該用哪項工具時，用來快速瀏覽更完整的設計工程工具版圖。
為 AI coding agent 打造的開源設計語言，結合設計技能與指令，並以規則式偵測器找出常見的 AI 設計壞習慣。
適合用在 不必逐一手動檢視每個畫面，就能提升 agent 產生介面的設計品質。
產品設計師兼工程師的個人網站，可透過字體、顏色、圓角與背景控制面板即時改變頁面樣式，並展示 Transitions.dev、Border Beam、Liquid Metal 等已發布的動態元件。
適合用在 研究設計工程師如何讓作品集直接展現工藝本身而非只是描述，並取用其中發布的動態元件。
從真實產品網站萃取設計系統，並整理成程式開發代理可直接讀取的 DESIGN.md 檔案庫。
適合用在 把具體的視覺參考交給 AI 程式助理，讓產出的介面依循選定的設計系統，而不是落入千篇一律的預設樣貌。
可搜尋的 UI 模式資料庫，涵蓋導覽、版面、表單、回饋、商務、行動介面與其他產品介面需求。
適合用在 設計產品畫面，或向 AI 程式助理說明介面時，用來辨識與比較常見的介面模式。
以視覺化方式整理網站 UI 元件、樣式、互動與 CSS 基礎，幫助更清楚地向 AI 程式助理描述介面。
適合用在 學習把模糊的介面想法轉成精準 AI 網站製作提示所需的詞彙。
沒有符合此篩選條件的項目。