素材是設計作品的骨血：圖片、字體、圖標構成可見骨架；創意靈感注入隱性靈魂；小工具插件加速生產流程；設計外知識賦予生命力。整理 200+ 高質量網站，分類清晰，直達痛點，建議收藏備用。

🖼️ 圖片素材

免費商用（CC0/自有協議）

• Unsplash — 高顏值攝影圖庫，標桿級
• Picjumbo — 生活場景豐富
• Gratisography — 風格獨特、少見同質化
• Superfamous — 藝術感大片
• Little Visuals — 郵件訂閱獲取
• Split Shire — 生活美學風
• Pixabay — 量大、含向量/視頻
• I'm Free — 精選整理
• New Old Stock — 復古公共領域老照片
• Function Free Photos
• Paul Jarvis Free Photos
• Zoomy Images

付費高端庫

• Dollar Photo Club — 高性價比訂閱制
• Compfight — Flickr 搜索神器
• Stocksy — 藝術家合作社，質感極高
• Placeit Product Shots — 場景合成神器
• iStockphoto — 老牌微股巨頭
• Offset — 高端藝術商業攝影
• Corbis — 歷史/新聞/娛樂深度庫
• Facebox — 專注人臉/頭像素材

🔤 排版設計 / 字體

• Okay Type — 獨立字體廠牌
• Typekit (Adobe Fonts) — Creative Cloud 同步
• My Fonts — 商業字體最大聚合
• Fonts.com — Monotype 旗下
• Font Squirrel — 免費商用字體精選
• DaFont — 龐大免費字體社區
• Google Fonts — 開源 Web 字體標準
• 1001 Free Fonts
• Lost Type Co-op — 獨特付費制字體
• IcoMoon — 圖標字體生成器
• Font-To-Width — 響應式字體寬度工具

🛠️ 視覺稿/原型/協作工具

• InVision — 原型/協作/設計系統標桿
• Mockupr — 設備模型生成
• Flinto — 交互原型神器
• Flinto Icon Strike!
• Webflow — 視覺化開發平台
• Mockuuups — 免費設備模型庫
• Red Pen — 設計評審標註
• PSD Covers — 書本/設備智能對象模板

📐 線框圖 / 低保真原型

• Moqups
• Wireframe.cc — 極簡線框
• Mockflow
• Mockingbird
• Flair Builder
• Balsamiq — 手繪風經典
• Axure — 交互邏輯重度首選
• Justinmind
• UXPin — 代碼級原型

🔄 原型設計 / 高保真

• InVision、Flinto、Webflow、Red Pen、Mixture、Gridset、Marvel、Proto.io、Iconii、Macaw、Froont

📱 響應式設計工具鏈

• Responsive.is、Gridpak、Responsive Nav、Off Screen Navigation、Responsive Test、Media Queries、Foundation、Jetstrap、Webflow、Gridset、BrowserStack、Sassaparilla、Sidebar Transitions、Dimensions (Chrome 擴展)、Responsive Grid System、Responsi

🎨 色彩工具

• 0 to 255 — 快速生成色階
• Colour Lovers — 配色社區
• Brand Colors — 品牌色大全
• Adobe Color — 專業色輪
• Color Scheme Designer (現 Paletton)
• Hex to RGB Converter
• Coleure、Colllor、Palette for Chrome

💻 CSS / HTML5 / JavaScript 工具庫

• CSS：Animate.css、CSS3 Animation Cheat Sheet、Can I Use、Animation Fill Code、Pure.css、The Magic of CSS
• HTML5：HTML5 Please、Can I Use
• JS/jQuery：Unheap（插件精選）、Touchy Js、FitText、Touche.js、Cortado.js、FlickFeed、Heisenburg.js、Pickadate.js、Lettering.js、Freetile、Backstretch……

💡 使用建議

1. 按專案需求建立個人化資源儀表板（Notion/Figma Community/Bookmark 分組）。
2. 免費資源優先驗證授權協議，商用項目建議購買正版或使用明確 CC0 素材。
3. 定期清理失效鏈接，關注 Product Hunt、Designer News、優設導航獲取新資源。
4. 工具服務於設計思維，別陷入「收集癖」，核心還是解決問題的能力。

資源海洋茫茫，願這份地圖助你精準航行，直達設計彼岸。