UI/UX 设计资源导航 2025

灵感、组件库、图标、工具 - 开发设计必备资源大全

设计灵感 组件库 图标库 配色工具 字体资源 设计工具 素材资源
✨

设计灵感

顶级设计作品展示，获取 UI/UX 设计灵感

🌍 综合设计平台

Dribbble 免费+付费

全球最大的设计师作品分享平台，UI/UX 设计灵感首选，汇集顶尖设计师作品。

UI 设计 插画 动效
访问网站 →
Behance 免费

Adobe 旗下设计平台，项目展示更完整，涵盖 UI、品牌、摄影、插画等多领域。

项目展示 品牌设计 Adobe 集成
访问网站 →
Pinterest 免费

视觉搜索引擎，收藏整理灵感图片，支持按风格、颜色等筛选。

灵感收藏 图片搜索 Mood Board
访问网站 →

🏆 网页设计奖项

Awwwards 顶级

网页设计领域最高荣誉，每日评选最佳网站，获奖作品代表行业最高水准。

每日最佳 网站评分 创意设计
访问网站 →
CSS Design Awards 免费

专注 CSS 创意设计的评奖网站，评委打分系统，发现前沿网页设计趋势。

CSS 创意 动效设计 每日评选
访问网站 →
FWA 免费

Favourite Website Awards，历史悠久的网页设计奖项，记录互联网设计演变。

历史悠久 互动体验
访问网站 →

📱 移动端 UI 参考

Mobbin 推荐

移动端 App UI 设计模式库，收录主流 App 的真实界面截图，按功能分类检索。

App 截图 设计模式 用户流程
访问网站 →
Screenlane 免费+付费

App 界面截图和用户流程参考，按组件类型（登录、设置、支付等）分类。

UI 截图 组件分类 流程参考
访问网站 →
Pttrns 免费+付费

移动端设计模式库，按交互类型分类，iOS 和 Android 设计参考。

iOS Android 交互模式
访问网站 →

🖥️ 网页设计精选

One Page Love 免费

单页网站设计精选，Landing Page 灵感首选，附带模板资源。

单页设计 Landing Page 模板
访问网站 →
Lapa Ninja 免费

Landing Page 设计集合，按行业和风格分类，提供免费设计资源。

Landing Page 行业分类 免费资源
访问网站 →
SaaS Pages 免费

SaaS 产品网站设计灵感，按页面类型（定价、功能、关于）分类。

SaaS 产品页面 转化设计
访问网站 →
Godly 热门

精选优质网页设计，专注于视觉美学和交互创新的网站收录。

精选设计 视觉美学 高质量
访问网站 →

🇨🇳 国内设计平台

站酷 ZCOOL 国内

中国人气设计师互动平台，涵盖 UI、插画、品牌、摄影等多领域。

综合设计 中文社区 设计文章
访问网站 →
UI 中国 国内

图形交互与界面设计交流平台，专注 UI/UX 设计领域。

UI 专注 交互设计 学习平台
访问网站 →
花瓣网 国内

设计灵感收藏整理，类似 Pinterest 的图片收集平台。

灵感收藏 图片整理 素材采集
访问网站 →
🧩

UI 组件库

主流前端 UI 组件库，快速构建界面

⚛️ React 组件库

Ant Design 开源

蚂蚁集团出品的企业级 UI 设计语言，组件丰富，中文文档完善，适合中后台系统。

企业级 React TypeScript
访问官网 →
Material UI (MUI) 开源

Google Material Design 的 React 实现，组件成熟，主题系统强大。

Material Design 主题定制 Emotion
访问官网 →
Chakra UI 推荐

简洁易用的 React 组件库，默认可访问性，响应式设计友好，开发体验极佳。

简洁 API 可访问性 响应式
访问官网 →
Mantine 开源

现代 React 组件库，功能丰富，TypeScript 支持好，内置暗色模式。

100+ 组件 Hooks 表单处理
访问官网 →
Radix UI 开源

无样式的 React 组件原语，完全控制样式，Shadcn/ui 的基础。

Headless 可访问性 无样式
访问官网 →
Shadcn/ui 大热

基于 Radix + Tailwind 的组件集合，复制粘贴式使用，高度可定制。

Radix Tailwind 复制使用
访问官网 →

💚 Vue 组件库

Element Plus 开源

Vue 3 企业级组件库，饿了么团队出品，组件丰富，文档完善。

Vue 3 企业级 TypeScript
访问官网 →
Vuetify 开源

Vue 的 Material Design 组件库，组件丰富，企业级支持。

Material Design Vue 3 SSR 支持
访问官网 →
Naive UI 推荐

尤雨溪推荐的 Vue 3 组件库，TypeScript 编写，主题定制强大。

Vue 3 TypeScript 主题系统
访问官网 →
Vant 开源

有赞出品的移动端 Vue 组件库，轻量高性能，适合移动端 H5。

移动端 轻量 Vue 3
访问官网 →

🎨 Tailwind CSS 组件

DaisyUI 热门

Tailwind CSS 最流行的组件库，语义化类名，多主题支持，简化 class 编写。

Tailwind 多主题 语义化
访问官网 →
Headless UI 开源

Tailwind Labs 官方无样式组件库，支持 React 和 Vue，可访问性优先。

Headless React/Vue 官方出品
访问官网 →
Flowbite 免费+付费

Tailwind CSS 组件库，提供丰富的 UI 块和模板，支持多框架。

Tailwind 多框架 UI 块
访问官网 →
Tailwind UI 付费

Tailwind Labs 官方付费组件库，高质量 UI 组件和模板，一次购买终身使用。

官方出品 高质量 模板
访问官网 →
🎯

图标库

免费和开源图标资源，支持 SVG 和字体格式

Lucide 推荐

Feather Icons 社区分支，1500+ 轻量 SVG 图标，持续更新，支持多框架。

1500+ 图标 轻量 多框架
访问官网 →
Heroicons 开源

Tailwind CSS 团队出品，300+ 简洁 SVG 图标，Outline 和 Solid 两种风格。

Tailwind 官方 简洁风格 MIT 协议
访问官网 →
Iconify 超全

聚合 200,000+ 图标的统一框架，支持 100+ 图标库，一个 API 用所有图标。

200K+ 图标 聚合平台 统一 API
访问官网 →
Phosphor Icons 开源

灵活的图标系统，1000+ 图标，6 种粗细可调，支持多种格式导出。

可调粗细 1000+ 图标 多格式
访问官网 →
Tabler Icons 免费

4900+ 免费 SVG 图标，线条风格统一，可自定义颜色和大小。

4900+ 图标 线条风格 MIT 协议
访问官网 →
Font Awesome 免费+付费

老牌图标库，26000+ 图标，支持字体和 SVG，品牌图标丰富。

26000+ 图标 品牌图标 字体/SVG
访问官网 →
Simple Icons 免费

3000+ 品牌 Logo 图标，包含官方品牌色，适合展示技术栈和社交链接。

品牌 Logo 官方品牌色 SVG
访问官网 →
Remix Icon 开源

2800+ 中性风格图标，线条和填充两种风格，适合各种设计场景。

2800+ 图标 中性风格 Apache 2.0
访问官网 →
🎨

配色工具

调色板生成、配色方案、颜色灵感

Coolors 推荐

最流行的配色方案生成器，按空格随机生成，支持锁定颜色和微调。

随机生成 导出多格式 App 支持
访问官网 →
Color Hunt 免费

精选配色方案集合，每天更新，可按流行度、新旧排序，一键复制。

精选方案 每日更新 一键复制
访问官网 →
Realtime Colors 免费

实时预览配色在真实 UI 中的效果，支持导出 CSS 变量和 Tailwind 配置。

实时预览 UI 预览 Tailwind
访问官网 →
Happy Hues 免费

配色灵感 + 实际应用示例，展示配色在真实网站中的效果。

应用示例 实际效果 学习资源
访问官网 →
Adobe Color 免费

Adobe 出品的专业配色工具，支持色轮、提取图片颜色、探索趋势。

色轮工具 图片取色 Adobe 集成
访问官网 →
Tailwind CSS Colors 免费

Tailwind 官方调色板，精心设计的颜色系统，适合现代 Web 开发。

Tailwind 色阶系统 可访问性
访问官网 →
🔤

字体资源

免费商用字体和字体配对工具

Google Fonts 免费

最大的免费字体库，1500+ 字体家族，CDN 托管，支持可变字体。

1500+ 字体 CDN 托管 可变字体
访问官网 →
Font Pair 免费

字体配对灵感，展示标题和正文字体的搭配效果。

字体配对 Google Fonts 预览效果
访问官网 →
Fontshare 免费商用

ITF 出品的高质量免费字体，可商用，设计感强。

高质量 免费商用 设计感
访问官网 →
猫啃网 国内

中文免费商用字体聚合站，收录大量可商用的中文字体。

中文字体 免费商用 授权明确
访问官网 →
🛠️

设计工具

UI 设计和原型工具

Figma 行业标准

云端协作设计工具，UI 设计行业标准，支持原型、设计系统、开发交付。

云端协作 免费版可用 Dev Mode
访问官网 →
Framer 热门

设计 + 发布一体化工具，可直接发布为网站，支持 CMS 和动效。

无代码建站 动效强大 SEO 友好
访问官网 →
Sketch 付费

Mac 专属 UI 设计工具，曾经的行业标准，插件生态丰富。

Mac 专属 插件丰富 Symbol 系统
访问官网 →
Penpot 开源

开源的 Figma 替代品，支持自托管，基于 Web 技术，完全免费。

开源免费 可自托管 SVG 原生
访问官网 →
即时设计 国内

国产云端设计工具，Figma 替代方案，中文环境，免费额度充足。

国产 云端协作 免费可用
访问官网 →
MasterGo 国内

国产协作设计平台，企业级功能，AI 辅助设计，蓝湖出品。

国产 企业级 AI 功能
访问官网 →
📦

素材资源

UI Kit、Mockup、插画、3D 素材

🎁 免费 UI 资源

Figma Community 免费

Figma 官方社区资源，海量免费 UI Kit、图标、插件、模板。

UI Kit 插件 模板
访问官网 →
UI Store Design 免费

300+ 免费 UI 资源下载，UI Kit、Mockup、Icons、Illustrations。

免费下载 多种格式 商用可用
访问官网 →
Freebiesbug 免费

精选免费设计资源，PSD、Sketch、Figma 格式，定期更新。

精选资源 多格式 定期更新
访问官网 →

🖼️ 插画素材

unDraw 免费

开源 SVG 插画库，可自定义主题色，MIT 协议，适合产品页面。

SVG 插画 自定义颜色 MIT 协议
访问官网 →
Storyset 免费

Freepik 出品的可定制插画，支持动画导出，多种风格可选。

可定制 动画导出 多风格
访问官网 →
Humaaans 免费

可自由组合的人物插画库，混搭不同的姿势、服装、发型。

人物插画 可组合 多样性
访问官网 →
Blush 免费+付费

艺术家创作的插画合集，可自定义组合，支持 Figma 插件。

艺术家作品 Figma 插件 可定制
访问官网 →

📱 Mockup 样机

Mockup World 免费

最大的免费 Mockup 资源站，iPhone、Mac、包装、场景应有尽有。

设备样机 场景样机 PSD 格式
访问官网 →
Previewed 免费+付费

在线 Mockup 生成器，无需 PS，上传图片即可生成高质量样机。

在线生成 无需 PS 高质量
访问官网 →
Shotsnapp 免费+付费

App 截图美化工具，添加设备框架和背景，适合应用商店展示。

截图美化 应用商店 设备框架
访问官网 →

💡 资源使用建议