面向开发者的设计资源大全 —— 按开发场景分类，拿来即用
开发时最头疼的问题：
🤔 开发小程序 ，去哪找 UI 组件？
🤔 做 Mac 应用 ，有什么现成的设计资源？
🤔 写网站 ，哪里有好看的模板？
🤔 开发 APP ，有没有可以直接用的 UI Kit？
FreeDesign 帮你解决 ：按开发场景分类，每个资源都可以直接拿来用 ，丢给 AI 就能按样式开发！
项目
描述
Stars
链接
shadcn-ui/ui 可复制粘贴的 React 组件（最推荐）
80k+
查看
nextui-org/nextui 现代化 React UI 库，支持暗黑模式
25k+
查看
mantinedev/mantine 功能最全的 React 组件库
28k+
查看
chakra-ui/chakra-ui 简单易用的 React 组件库
38k+
查看
radix-ui/primitives 无障碍组件原语
16k+
查看
tremor-raw/tremor 数据可视化组件库
18k+
查看
aceternity-ui 炫酷动画组件库（2024 新）
15k+
查看
magic-ui 动画组件库（2024 新）
12k+
查看
项目
描述
Stars
链接
saadeghi/daisyui 最流行的 Tailwind 组件库
35k+
查看
markmead/hyperui 免费 Tailwind 组件集合
10k+
查看
preline-ui/preline 企业级 Tailwind 组件
5k+
查看
tailwindlabs/headlessui Tailwind 官方无头组件
26k+
查看
flowbite Tailwind 组件库 + 模板
8k+
查看
项目
描述
Stars
链接
element-plus/element-plus Vue 3 最流行的组件库
25k+
查看
primefaces/primevue 功能最全的 Vue 组件库
12k+
查看
unovue/shadcn-vue Vue 版 shadcn/ui
5k+
查看
vueuse/vueuse Vue 组合式 API 工具集
22k+
查看
arco-design/arco-design-vue 字节跳动 Vue 组件库
3k+
查看
工具
描述
适用场景
链接
v0.dev Vercel AI 生成 UI 组件
快速原型
查看
Galileo AI AI 生成完整 UI 设计
设计稿生成
查看
Uizard 手绘草图转 UI
快速原型
查看
Figma AI Figma 内置 AI 功能
设计优化
查看
Framer AI AI 生成网站
Landing Page
查看
Relume AI AI 生成网站结构
网站规划
查看
项目
描述
Stars
链接
framer/motion 最流行的 React 动画库
25k+
查看
pmndrs/react-spring 基于物理的动画库
28k+
查看
auto-animate 自动动画库（超简单）
13k+
查看
theatre-js 专业动画编辑器
12k+
查看
项目
描述
Stars
链接
animate-css 经典 CSS 动画库
81k+
查看
animista CSS 动画生成器
-
查看
hover-css CSS 悬停效果集合
29k+
查看
项目
描述
Stars
链接
lottie-web Lottie 动画播放器
31k+
查看
gsap 专业级动画库
20k+
查看
anime-js 轻量级动画库
50k+
查看
项目
描述
Stars
链接
Tencent/weui 微信官方 UI 库
27k+
查看
weilanwl/colorui 高颜值小程序组件库
13k+
查看
dcloudio/uni-ui uni-app 官方组件库
2k+
查看
youzan/vant-weapp 有赞小程序 UI 组件库
18k+
查看
TaleLin/lin-ui Lin UI 小程序组件库
3k+
查看
wux-weapp 微信小程序自定义组件
5k+
查看
项目
描述
Stars
链接
Dimillian/MovieSwiftUI SwiftUI 完整应用示例
6k+
查看
Dimillian/RedditOS SwiftUI macOS 应用
4k+
查看
siteline/swiftui-introspect 访问底层 UIKit
6k+
查看
Shubham0812/SwiftUI-Animations SwiftUI 动画集合
2k+
查看
jordansinger/SwiftUI-Kit 系统组件演示
2k+
查看
SwiftUIX SwiftUI 扩展组件库
7k+
查看
📱 移动 APP 开发 - React Native/Flutter
项目
描述
Stars
链接
react-native-elements 最流行的 RN 组件库
25k+
查看
GeekyAnts/NativeBase 跨平台 UI 组件库
20k+
查看
akveo/react-native-ui-kitten 可定制的 RN 组件库
10k+
查看
callstack/react-native-paper Material Design RN 组件
13k+
查看
tamagui 跨平台 UI 库（Web + Native）
12k+
查看
项目
描述
Stars
链接
flutter/gallery Flutter 官方组件示例
6k+
查看
mitesh77/Best-Flutter-UI-Templates Flutter UI 模板集合
21k+
查看
flutter-form-builder-ecosystem Flutter 表单构建器
1.5k+
查看
flutterchina/flukit Flutter UI 组件库
6k+
查看
项目
描述
Stars
技术栈
链接
vbenjs/vue-vben-admin 最现代化的 Vue 后台
26k+
Vue 3 + Vite
查看
PanJiaChen/vue-element-admin 最流行的 Vue 后台
88k+
Vue 2
查看
ant-design/ant-design-pro 蚂蚁金服 React 后台
37k+
React
查看
ColorlibHQ/AdminLTE 免费 Bootstrap 后台
44k+
Bootstrap
查看
coreui/coreui-free-bootstrap-admin-template CoreUI 免费后台
12k+
Bootstrap
查看
akveo/ngx-admin Angular 后台模板
25k+
Angular
查看
refine-dev/refine 无头后台框架（2024 新）
30k+
React
查看
项目
描述
Stars
技术栈
链接
cruip/open-react-template Cruip React Landing 模板
4k+
React
查看
cruip/tailwind-landing-page-template Cruip Tailwind Landing
4k+
Tailwind
查看
leoMirandaa/shadcn-landing-page shadcn Landing Page
3k+
Next.js
查看
ixartz/Next-JS-Landing-Page-Starter-Template Next.js Landing 模板
4k+
Next.js
查看
saasfly/saasfly SaaS Landing 模板（2024 新）
2k+
Next.js
查看
公司
设计系统
组件库
链接
Ant Design 蚂蚁金服设计语言
React/Vue
查看
Material Design Google 设计语言
多框架
查看
Fluent UI 微软设计语言
React
查看
Carbon Design IBM 设计语言
React/Vue
查看
Atlassian Design Atlassian 设计语言
React
查看
Polaris Shopify 设计语言
React
查看
Lightning Design Salesforce 设计语言
Web Components
查看
选择 WeUI 或 ColorUI
复制组件代码到你的小程序项目
告诉 AI："按照 WeUI 的样式实现一个登录页面"
选择 shadcn/ui 或 DaisyUI
浏览组件库，找到需要的组件
复制代码，粘贴到项目中
告诉 AI："用 shadcn/ui 的 Card 组件实现产品展示"
参考 MovieSwiftUI 或 RedditOS
查看完整应用的代码结构
告诉 AI："参考 MovieSwiftUI 的布局实现一个列表页"
选择 React Native Elements 或 NativeBase
查看组件文档
告诉 AI："用 React Native Elements 实现一个设置页面"
选择 Framer Motion 或 Auto Animate
查看动画示例
告诉 AI："用 Framer Motion 实现卡片进入动画"
| 组件库 | 为什么推荐 | 适用场景 |
|--------|-----------|---------|\n| shadcn/ui | 可复制粘贴，AI 最容易理解 | React 网站开发 |
| DaisyUI | 纯 Tailwind，代码简洁 | 任何 Tailwind 项目 |
| WeUI | 微信官方，小程序标准 | 微信小程序 |
| Framer Motion | 动画代码简洁直观 | React 动画 |
| v0.dev | AI 直接生成组件 | 快速原型 |
项目
描述
Stars
链接
lucide-icons/lucide 最流行的开源图标库
15k+
查看
tabler/tabler-icons 5000+ 免费图标
19k+
查看
phosphor-icons 灵活的图标库
8k+
查看
akveo/eva-icons 480+ 精美图标
9k+
查看
iconify 200,000+ 图标集合
5k+
查看
项目
描述
链接
undraw 免费 SVG 插画
查看
storyset 免费可定制插画
查看
humaaans 可定制人物插画
查看
blush 插画集合平台
查看
工具
描述
链接
Coolors 配色方案生成器
查看
Gradient Hunt 渐变色集合
查看
UI Colors Tailwind 配色工具
查看
Realtime Colors 实时预览配色
查看
欢迎提交 PR 添加更多可直接使用 的设计资源！
提交标准 ：
✅ 有完整代码示例
✅ 可以直接复制粘贴使用
✅ 文档清晰，AI 友好
✅ 开源免费或有免费版本
✅ 2024-2026 年仍在维护
收录项目 : 100+ 个精选项目分类 : 9 大开发场景更新频率 : 每月更新最后更新 : 2026-05-11
如果这个项目对你有帮助，请给个 Star ⭐️
MIT License
💡 提示 ：收藏本项目，开发时随时查阅！
🔔 Star 本项目以获取更新通知！
🚀 出海开发者必备 ：所有资源都支持国际化！