🎨 FreeDesign

面向开发者的设计资源大全 —— 按开发场景分类，拿来即用

最后更新: 2026-09-14

---

TL;DR｜一句话：FreeDesign 是 AI 酋长 Andy 整理的开发者设计资源大全。适合做网站、小程序、APP、后台和 AI 产品的开发者。它按开发场景分类收录组件库、Figma 插件、配色、字体、动画、3D、图标、设计系统和 Landing Page 模板，资源可以直接拿来用或交给 AI 按样式开发。

作者：AI 酋长 Andy（GitHub @AIPMAndy · X @AIPMAndy · metaver.vip）

💡 为什么需要 FreeDesign？

开发时最头疼的问题：

• 🤔 开发小程序，去哪找 UI 组件？
• 🤔 做 React 项目，有什么现成的设计资源？
• 🤔 写网站，哪里有好看的模板？
• 🤔 开发 APP，有没有可以直接用的 UI Kit？
• 🤔 AI 生成代码，有哪些工具最好用？

FreeDesign 帮你解决：按开发场景分类，每个资源都可以直接拿来用，丢给 AI 就能按样式开发！

---

📋 快速导航

• 🤖 AI 代码生成与设计工具
• 🧩 Figma 设计插件
• 🌐 网站开发 - UI 组件库
• 🎨 现代设计风格
• 🌈 配色方案库
• ✏️ 字体组合库
• ✨ 微交互组件
• 🎮 3D 可视化
• 🎬 动画库
• 🎯 图标库
• 📱 小程序开发
• 📲 移动 APP 开发
• 💼 后台管理系统
• 📈 图表可视化
• 🎨 开源设计工具
• 🤖 AI Agents UI 框架
• 🎭 设计系统
• 🚀 Landing Page 模板
• 🎯 精选技术栈组合
• ⚠️ 设计避坑指南
• 📚 更多资源

---

🤖 AI 代码生成与设计工具

2026 年最热门的 AI 辅助开发工具

工具	说明	特点	链接
v0.dev 🔥	Vercel AI 组件生成器	文本/截图 → React 组件	查看
bolt.new ⭐	StackBlitz 全栈生成	提示词 → 完整项目	查看
lovable.dev	设计转代码平台	Figma → 生产代码	查看
Cursor AI	AI 代码编辑器	内置 GPT-4，智能补全	查看
Claude Code ⭐	Anthropic 开发工具	长上下文，精准理解	查看
Galileo AI	AI 生成 UI 设计	提示词 → 设计稿	查看
Framer AI	AI 生成网站	自然语言 → Landing Page	查看
21st.dev	AI 组件市场	提示词 → 可复制组件，对接 Cursor/v0	查看

---

🧩 Figma 设计插件

2026 年设计师与开发者必备的 Figma 插件，按工作流分类

🌟 必备五件套（先装这几个）

插件	说明	费用	链接
Iconify 🔥	80 万+ 图标聚合（Material/Lucide/Phosphor 等），可编辑矢量插入	免费	查看
Unsplash	海量免费高质量图片，直接插入设计稿	免费	查看
Stark ⭐	无障碍检查：对比度、色盲模拟、WCAG 合规	免费+Pro	查看
Tokens Studio ⭐	设计 Token 管理与同步（W3C 标准），打通设计-代码	免费+Pro	查看
Content Reel	真实占位内容填充（姓名/地址/头像），微软出品	免费	查看

🤖 AI 设计插件

插件	说明	费用	链接
UXPilot 🔥	文本 → 完整 UI 界面/线框图，带预测热力图	免费+付费	查看
Musho	文本 → 完整营销页面设计（含品牌风格）	付费	查看
Flowstep	AI 生成多套设计方案，解决空白画布问题	免费+付费	查看
BG Remover	AI 一键去背景，支持批量处理	免费	查看

🔄 设计-代码协作

插件	说明	费用	链接
Figma to Tailwind CSS	设计稿直接导出 Tailwind 类名	免费	查看
story.to.design	代码组件库变更自动同步回 Figma	免费+付费	查看
Design Lint	扫描缺失样式/未关联 Token，交付前质量关卡	免费	查看
EightShapes Specs	自动生成间距/字号/颜色标注文档	免费	查看

🛠️ 效率工具

插件	说明	费用	链接
Autoflow	页面间连线绘制用户流程图	免费	查看
Similayer	按属性批量选择同类图层	免费	查看
Google Sheets Sync	设计稿与表格数据实时绑定	免费	查看
Clean Document	一键清理未用样式和组件	免费	查看
Mesh Gradient	网格渐变背景生成器	免费	查看

---

🌐 网站开发 - UI 组件库

React 生态

项目	Stars	说明	链接
shadcn-ui/ui 🔥⭐	123k+	复制粘贴组件，2026 默认底层已切换为 Base UI + Tailwind v4	查看
ant-design/ant-design	99k+	蚂蚁金服企业级 UI	查看
mui/material-ui	99k+	Google Material Design 实现	查看
chakra-ui/chakra-ui	40k+	简洁模块化，v3 基于 PandaCSS 零运行时	查看
motiondivision/motion	33k+	生产级动画库（原 framer/motion）	查看
mantinedev/mantine	31k+	功能全面，TypeScript 优先	查看
heroui-inc/heroui	30k+	现代化 React UI，v3 基于 React Aria + Tailwind v4 重写	查看
pmndrs/react-spring	29k+	基于物理的动画	查看
tailwindlabs/headlessui	28k+	Tailwind 官方无样式组件	查看
radix-ui/primitives	19k+	无样式可访问组件原语	查看
mui/base-ui ⭐新	10k+	MUI 团队无样式组件库，shadcn/ui 新默认底层	查看

Tailwind CSS 生态

项目	Stars	说明	链接
tailwindlabs/tailwindcss ⭐	97k+	原子化 CSS 框架，v4 零运行时 Oxide 引擎	查看
saadeghi/daisyui	42k+	最流行的 Tailwind 组件库	查看
markmead/hyperui	12k+	免费 Tailwind 组件集合	查看
themesberg/flowbite	9k+	Tailwind 组件库 + 模板	查看
preline	5k+	企业级 Tailwind 组件	查看

Vue 生态

项目	Stars	说明	链接
element-plus/element-plus	27k+	Element UI Vue 3 版本	查看
vueuse/vueuse	22k+	Vue 组合式 API 工具集	查看
primefaces/primevue	14k+	丰富 Vue 组件库	查看
unovue/shadcn-vue	10k+	Vue 版 shadcn/ui	查看
arco-design/arco-design-vue	3k+	字节跳动 Vue 组件库	查看

其他

项目	Stars	说明	链接
storybookjs/storybook	91k+	UI 组件开发环境	查看

---

🎨 现代设计风格

2026 年流行的 UI 设计风格与实现资源

风格	特点	适用场景	实现资源	预览
Glassmorphism 🔥	毛玻璃效果，透明层次	现代 Web 应用、Dashboard	CSS Glass	示例
Neomorphism	柔和阴影，浮雕效果	移动应用、简约界面	Neumorphism.io	生成器
Bento Grid ⭐	卡片网格布局，类似 iOS	SaaS 产品页、Portfolio	Bento Grids	Aceternity
Brutalism	粗犷、高对比度、破格	创意类网站、艺术项目	Brutalist Websites	示例集
Claymorphism	粘土质感，柔和 3D	插画类产品、儿童应用	Hype4	生成器
Aurora UI 🔥	极光渐变背景	Landing Page、Hero 区域	Aurora Backgrounds	CodePen
AI-Native UI	对话式、卡片流式	AI 应用、Chatbot	ChatGPT UI	v0.dev
Dark Mode First	深色优先设计	开发工具、代码编辑器	Tailwind Dark Mode	Radix Themes
Minimalism	极简主义，留白为主	企业网站、专业服务	Minimal Gallery	Awwwards Minimal
Y2K/Retro	复古未来主义	潮流品牌、创意项目	Y2K Aesthetic	Behance Y2K

风格组合推荐

组合	描述	适用
Glassmorphism + Dark Mode	透明玻璃 + 深色背景	高端科技产品
Bento Grid + Minimalism	卡片布局 + 极简	SaaS Landing Page
Aurora + Glassmorphism	极光渐变 + 玻璃效果	品牌首页 Hero 区域
Neomorphism + Pastel Colors	柔和浮雕 + 马卡龙配色	健康/美容类应用

---

🌈 配色方案库

精选配色方案，按行业和情绪分类

工具推荐

工具	说明	特点	链接
Coolors 🔥	AI 配色生成器	快速生成、导出多格式	查看
Realtime Colors ⭐	实时预览配色效果	在真实 UI 中预览配色	查看
UI Colors	Tailwind 配色工具	生成完整 Tailwind 色阶	查看
Palette Maker	从图片提取配色	上传图片自动提取	查看
Huemint	AI 机器学习配色	AI 生成品牌配色	查看
ColorSpace	渐变色生成器	3 色渐变、调色板	查看

按行业分类的配色方案

🏦 金融/Fintech

方案名	主色	辅色	强调色	适用
专业蓝	#0052CC	#172B4D	#00875A	传统银行、保险
科技蓝	#2563EB	#1E293B	#10B981	Fintech、加密货币
稳重灰蓝	#475569	#1E293B	#3B82F6	企业金融、B2B

💊 医疗/健康

方案名	主色	辅色	强调色	适用
医疗蓝	#4A90E2	#F0F4F8	#FF6B6B	医院、诊所
柔和绿	#A8D5BA	#FFF5F5	#E8B4B8	养生、Spa、瑜伽
活力橙	#FF9F43	#FFEAA7	#00B894	健身、运动

🛍️ 电商/零售

方案名	主色	辅色	强调色	适用
活力红	#E74C3C	#34495E	#F39C12	促销、快消品
高端黑金	#1A1A1A	#2C2C2C	#D4AF37	奢侈品、高端品牌
清新绿	#27AE60	#ECF0F1	#F39C12	环保、有机产品

💻 SaaS/科技

方案名	主色	辅色	强调色	适用
渐变紫	#667EEA	#764BA2	#F093FB	AI 产品、创新工具
极简蓝	#3B82F6	#F8FAFC	#10B981	B2B SaaS、生产力工具
深色模式	#0F172A	#1E293B	#38BDF8	开发工具、代码编辑器

情绪配色

情绪	配色	CSS 变量示例
专业/信任	蓝色系	--primary: #2563EB; --secondary: #1E40AF;
活力/热情	橙红系	--primary: #F97316; --secondary: #DC2626;
平静/舒适	绿色系	--primary: #10B981; --secondary: #059669;
奢华/高端	深色+金色	--primary: #1F2937; --accent: #F59E0B;
创意/年轻	渐变色	--gradient: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

---

✏️ 字体组合库

精选字体搭配，包含 Google Fonts 链接

经典组合

标题字体	正文字体	风格	适用场景	Google Fonts
Inter	Inter	现代、简洁	SaaS、科技产品	查看
Playfair Display	Source Sans Pro	优雅、专业	奢侈品、出版	查看
Montserrat	Open Sans	通用、易读	企业网站、教育	查看
Poppins	Roboto	友好、现代	电商、社交应用	查看
Space Grotesk	Space Grotesk	科技、未来感	科技公司、Crypto	查看
Cormorant Garamond	Montserrat	优雅、宁静	美容、Spa、艺术	查看
Bebas Neue	Lato	大胆、冲击力	运动、娱乐	查看
DM Sans	DM Sans	简约、几何	设计工具、创意	查看

代码/技术类

等宽字体	说明	适用	链接
JetBrains Mono	连字支持，适合代码	IDE、代码展示	查看
Fira Code	编程连字字体	技术文档、代码块	查看
IBM Plex Mono	IBM 设计，专业	企业开发工具	查看
Source Code Pro	Adobe 出品	代码编辑器	查看

中文字体推荐

字体	类型	适用场景	获取
思源黑体	无衬线	通用、现代感	Google Fonts
思源宋体	衬线	正式、传统	Google Fonts
霞鹜文楷	楷体	优雅、人文	GitHub
阿里巴巴普惠体	无衬线	商业、友好	官网

字体配对工具

工具	说明	链接
Font Pair	字体搭配灵感	查看
Fontjoy	AI 字体配对	查看
Typ.io	真实网站字体案例	查看

---

✨ 微交互组件

细节决定品质 —— 高质量的微交互资源

按钮与交互

项目	Stars	说明	链接
CSS Buttons	-	纯 CSS 按钮集合	查看
Magic UI 🔥	22k+	React 微交互组件库	查看
Aceternity UI ⭐	15k+	现代微交互组件	查看
motion-primitives	6k+	Motion 驱动的复制粘贴动效组件	查看

加载动画

项目	Stars	说明	链接
SpinKit	19k+	CSS 加载动画	查看
loading.io	-	加载动画生成器	查看
Epic Spinners	4k+	Vue 加载组件	查看
React Spinners	3k+	React 加载组件	查看

表单与输入

项目	Stars	说明	链接
Formkit	4k+	Vue 表单框架	查看
React Hook Form	44k+	React 表单库	查看
Floating UI	32k+	Tooltip/Popover 定位	查看

通知与提示

项目	Stars	说明	链接
React Hot Toast	10k+	React 通知组件	查看
Sonner ⭐	12k+	现代化 Toast 组件	查看
Notistack	4k+	Material-UI Toast	查看

骨架屏与占位符

项目	Stars	说明	链接
React Loading Skeleton	4k+	React 骨架屏	查看
Vue Content Loader	3k+	Vue 骨架屏	查看

---

🎮 3D 可视化

WebGL / WebGPU 前端 3D 开发

项目	Stars	说明	链接
mrdoob/three.js 🔥	115k+	JavaScript 3D 库标准	查看
pmndrs/react-three-fiber ⭐	32k+	Three.js React 渲染器	查看
Three.js Journey	-	Three.js 最佳学习资源	查看

---

🎬 动画库

React 动画

项目	Stars	说明	链接
motiondivision/motion	33k+	最流行的 Web 动画库（原 framer/motion）	查看
pmndrs/react-spring	29k+	基于物理的动画库	查看
formkit/auto-animate	13k+	自动动画库（超简单）	查看
theatre-js/theatre	12k+	专业动画编辑器	查看

CSS 动画

项目	Stars	说明	链接
animate-css/animate.css	82k+	即用型 CSS 动画	查看
IanLunn/Hover	29k+	CSS3 悬停效果集合	查看
animista	-	CSS 动画生成器	查看

通用动画

项目	Stars	说明	链接
juliangarnier/anime	72k+	轻量 JavaScript 动画	查看
airbnb/lottie-web	32k+	AE 动画转 Web	查看
greensock/GSAP	28k+	专业级动画平台（现已完全免费）	查看

---

🎯 图标库

项目	Stars	说明	链接
lucide-icons/lucide ⭐	24k+	Feather Icons 继任者	查看
tabler/tabler-icons	21k+	5000+ SVG 图标	查看
akveo/eva-icons	8k+	480+ 精美图标	查看
phosphor-icons	7k+	灵活的图标库（9000+ 图标）	查看
iconify/iconify	6k+	200,000+ 图标集合	查看
iconoir-icons/iconoir	4k+	简洁线性图标库	查看

---

📱 小程序开发

项目	Stars	说明	链接
Tencent/weui	27k+	微信官方 UI 库	查看
youzan/vant-weapp	18k+	有赞小程序 UI	查看
weilanwl/ColorUI	12k+	高颜值小程序 UI	查看
wux-weapp/wux-weapp	5k+	微信小程序自定义组件	查看
TaleLin/lin-ui	4k+	Lin UI 小程序组件库	查看
dcloudio/uni-ui	2k+	uni-app 官方组件库	查看

---

📲 移动 APP 开发

React Native

项目	Stars	说明	链接
react-native-elements/react-native-elements	25k+	跨平台 UI 工具包	查看
GeekyAnts/NativeBase	20k+	通用组件库	查看
callstack/react-native-paper	14k+	Material Design 实现	查看
tamagui/tamagui	14k+	React Native + Web 通用 UI	查看
akveo/react-native-ui-kitten	10k+	可定制的 RN 组件库	查看

Flutter

项目	Stars	说明	链接
mitesh77/Best-Flutter-UI-Templates	22k+	Flutter UI 模板集合	查看
flutter/gallery	6k+	Flutter 官方组件示例	查看
flutterchina/flukit	6k+	Flutter UI 组件库	查看
flutter-form-builder-ecosystem/flutter_form_builder	1.5k+	Flutter 表单构建器	查看

SwiftUI (iOS/macOS)

项目	Stars	说明	链接
SwiftUIX/SwiftUIX	8k+	SwiftUI 扩展组件库	查看
Dimillian/MovieSwiftUI	6k+	SwiftUI 完整应用示例	查看
siteline/swiftui-introspect	6k+	访问底层 UIKit	查看
Dimillian/RedditOS	4k+	SwiftUI macOS 应用	查看
Shubham0812/SwiftUI-Animations	3k+	SwiftUI 动画集合	查看
jordansinger/SwiftUI-Kit	2k+	系统组件演示	查看

---

💼 后台管理系统

项目	Stars	技术栈	说明	链接
PanJiaChen/vue-element-admin	90k+	Vue 2	最流行的 Vue 后台	查看
ColorlibHQ/AdminLTE	45k+	Bootstrap	免费 Bootstrap 后台	查看
ant-design/ant-design-pro	38k+	React	企业级中后台脚手架	查看
refinedev/refine ⭐	35k+	React	无头后台框架（2026 热门）	查看
vbenjs/vue-vben-admin	33k+	Vue 3 + Vite	最现代化的 Vue 后台	查看
akveo/ngx-admin	25k+	Angular	Angular 后台模板	查看
coreui/coreui-free-bootstrap-admin-template	12k+	Bootstrap	CoreUI 免费后台	查看

---

📈 图表可视化

项目	Stars	说明	链接
d3/d3	113k+	数据驱动文档	查看
chartjs/Chart.js	67k+	简洁 HTML5 图表	查看
apache/echarts	67k+	强大的可视化库	查看
recharts/recharts	27k+	React 图表库	查看
FormidableLabs/victory	11k+	React 可组合图表	查看

---

🎨 开源设计工具

项目	Stars	说明	链接
penpot/penpot 🔥	59k+	开源 Figma 替代品	查看
Figma	-	设计协作平台（商业），2026 原生 AI 能力成熟	查看

---

🤖 AI Agents UI 框架

构建 AI 对话、Agents 交互界面

项目	Stars	说明	链接
CopilotKit/CopilotKit ⭐	37k+	AI Agents 前端栈	查看
vercel/ai ⭐	26k+	流式 AI 对话 UI（AI SDK）	查看
langchain-ai/langchainjs	18k+	JavaScript AI 链式调用	查看
assistant-ui/assistant-ui 🔥新	12k+	AI 聊天界面 React 组件库	查看
vercel/ai-elements ⭐新	2k+	Vercel 官方 AI 界面组件（推理/工具调用/代码块）	查看

---

🎭 设计系统

大厂设计规范参考

公司	设计系统	组件库	链接
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	查看

---

🎯 精选技术栈组合

按场景推荐完整的技术栈，拿来即用

🚀 SaaS 产品推荐栈

现代 SaaS (2026 推荐)

• 框架: Next.js 15+ (App Router)
• 组件库: shadcn/ui（Base UI 底层）+ Tailwind CSS v4
• 动画: Motion（原 Framer Motion）
• 图标: Lucide Icons
• 配色: 科技蓝 (#2563EB, #1E293B, #10B981)
• 字体: Inter (标题+正文)
• 风格: Glassmorphism + Minimalism
• 反模式: ❌ 避免过度动画、AI 紫粉渐变

传统企业级 SaaS

• 框架: React + TypeScript
• 组件库: Ant Design
• 图表: ECharts
• 配色: 专业蓝 (#0052CC, #172B4D)
• 字体: Roboto
• 风格: 稳重、层级清晰
• 反模式: ❌ 避免过于花哨、炫技式动画

---

🛍️ 电商网站推荐栈

时尚电商

• 框架: Next.js
• 组件库: Headless UI + Tailwind
• 图片: Next Image (优化)
• 配色: 高端黑金 (#1A1A1A, #D4AF37)
• 字体: Playfair Display + Source Sans Pro
• 风格: 大图、留白、优雅
• 反模式: ❌ 避免拥挤布局、廉价感配色

快消电商

• 框架: Vue 3 + Nuxt
• 组件库: DaisyUI
• 配色: 活力红橙 (#E74C3C, #F39C12)
• 字体: Poppins + Roboto
• 风格: 卡片式、促销标签、CTA 突出
• 反模式: ❌ 避免过慢加载、弹窗过多

---

💊 医疗健康推荐栈

医院/诊所

• 框架: React
• 组件库: Material-UI
• 配色: 医疗蓝 (#4A90E2, #F0F4F8)
• 字体: Open Sans (易读性优先)
• 风格: 清晰、专业、高对比度
• 可访问性: WCAG AA 级以上
• 反模式: ❌ 避免过度装饰、复杂动效

健康养生/Spa

• 框架: Next.js
• 组件库: Chakra UI
• 配色: 柔和绿粉 (#A8D5BA, #E8B4B8, #FFF5F5)
• 字体: Cormorant Garamond + Montserrat
• 风格: Soft UI、圆角、柔和阴影
• 反模式: ❌ 避免鲜艳色彩、尖锐边角

---

🏦 金融/Fintech 推荐栈

传统金融

• 框架: Angular
• 组件库: Fluent UI
• 配色: 稳重蓝灰 (#475569, #1E293B, #3B82F6)
• 字体: IBM Plex Sans
• 风格: 专业、稳重、数据可视化
• 安全性: 双因素认证、HTTPS
• 反模式: ❌ 避免深色模式作为默认、AI 渐变

加密货币/Web3

• 框架: Next.js
• 组件库: Radix UI + Tailwind
• 配色: 渐变紫 + 深色模式 (#667EEA, #0F172A)
• 字体: Space Grotesk
• 风格: 科技感、Glassmorphism、动态渐变
• 反模式: ❌ 避免过于传统、过度复杂

---

📱 移动应用推荐栈

iOS 风格应用

• 框架: React Native
• 组件库: React Native Paper
• 配色: 系统色 + Bento Grid 布局
• 字体: SF Pro (系统字体)
• 风格: Neomorphism、卡片化
• 反模式: ❌ 避免 Android Material 风格

跨平台通用应用

• 框架: Flutter
• 组件库: Flutter Material
• 配色: 根据品牌定制
• 字体: Roboto (Android) / SF Pro (iOS)
• 风格: 遵循平台设计规范
• 反模式: ❌ 避免两个平台使用完全相同的 UI

---

🎨 创意/Portfolio 推荐栈

• 框架: Astro / Next.js
• 组件库: 自定义 + Tailwind
• 3D: Three.js + React Three Fiber
• 动画: GSAP
• 配色: 大胆、高对比度
• 字体: 独特字体组合
• 风格: Brutalism / Y2K / 实验性
• 反模式: ❌ 避免过于传统、通用模板感

---

🤖 AI 产品推荐栈

• 框架: Next.js 15+
• 组件库: shadcn/ui + Base UI
• AI UI: Vercel AI SDK + AI Elements / assistant-ui
• 动画: Motion
• 配色: 渐变紫蓝 + 深色模式
• 字体: Inter + JetBrains Mono (代码)
• 风格: 对话式、流式输出、卡片化
• 特性: 打字机效果、流式响应、代码高亮
• 反模式: ❌ 避免传统表单式交互

---

⚠️ 设计避坑指南

常见设计误区与行业特定反模式

通用设计误区

❌ 过度使用动画

问题: 每个元素都加动画，用户眩晕 正确做法:

• 只在关键交互点添加动画
• 遵循 prefers-reduced-motion 媒体查询
• 动画时长: 150-300ms (快速)，300-500ms (正常)

❌ 对比度不足

问题: 文字与背景对比度低于 4.5:1 正确做法:

• 正文文字对比度 ≥ 4.5:1 (WCAG AA)
• 大标题对比度 ≥ 3:1
• 使用工具: WebAIM Contrast Checker

❌ 字体过多

问题: 一个页面使用 3 种以上字体 正确做法:

• 标题字体 + 正文字体 (最多 2 种)
• 通过字重和大小区分层级
• 代码字体单独算

❌ 颜色传递唯一信息

问题: 只用颜色区分状态 (色盲用户无法识别) 正确做法:

• 颜色 + 图标
• 颜色 + 文字说明
• 颜色 + 形状变化

❌ 点击目标过小

问题: 按钮/链接小于 44x44px (移动端) 正确做法:

• 移动端最小触摸目标: 44x44px
• 桌面端最小点击目标: 32x32px
• 相邻可点击元素间距 ≥ 8px

---

行业特定反模式

🏦 金融/银行类

❌ 避免:

• 深色模式作为默认 (信任感不足)
• AI 紫粉渐变 (太过时尚，不够稳重)
• 过度动画 (给人不靠谱感)
• 低对比度设计 (专业度不足)

✅ 推荐:

• 浅色模式默认，提供深色切换
• 蓝色系为主，稳重配色
• 清晰的层级和信息架构
• 数据加密标识清晰可见

---

💊 医疗健康类

❌ 避免:

• 鲜艳的红色 (引发焦虑)
• 复杂动效 (患者可能身体不适)
• 纯黑背景 (压抑感)
• 过小的文字 (老年人难阅读)

✅ 推荐:

• 柔和的蓝绿色系 (平静、信任)
• 大字号、高对比度 (可访问性)
• 简洁明了的信息层级
• 清晰的操作反馈

---

🛍️ 电商类

❌ 避免:

• 加载时间 > 3 秒 (用户流失)
• 弹窗过多 (影响体验)
• 结账流程过长 (> 3 步)
• 不清晰的退换货政策

✅ 推荐:

• 图片懒加载 + WebP 格式
• CTA 按钮颜色突出 (高对比度)
• 一键购买流程
• 信任标识清晰 (评价、认证)

---

🎓 教育/在线学习

❌ 避免:

• 自动播放音视频 (打扰学习环境)
• 没有进度保存 (用户焦虑)
• 过于游戏化 (分散注意力)
• 付费墙过早出现

✅ 推荐:

• 清晰的学习进度条
• 笔记和书签功能
• 倍速播放控制
• 免费试学部分内容

---

🍔 餐饮/外卖

❌ 避免:

• 食物图片不真实 (期望落差)
• 没有过敏源标识
• 配送时间不准确
• 评价造假明显

✅ 推荐:

• 高质量实拍美食图
• 营养成分和过敏源清晰
• 实时配送跟踪
• 真实用户评价展示

---

🤖 AI/科技产品

❌ 避免:

• 过度使用"AI"、"智能"等词汇
• 黑盒操作 (用户不知道 AI 在做什么)
• 没有错误重试机制
• 生成结果无法编辑

✅ 推荐:

• 透明的 AI 工作流程展示
• 流式输出 (打字机效果)
• 清晰的 Loading 状态
• 可编辑、可重新生成

---

可访问性检查清单

必须做到 (WCAG AA)

• 文字对比度 ≥ 4.5:1
• 所有功能可键盘访问 (Tab 键导航)
• 表单有清晰的 label
• 图片有 alt 文本
• 页面有清晰的标题结构 (h1-h6)
• 颜色不是传递信息的唯一方式
• 支持 prefers-reduced-motion
• Focus 状态清晰可见
• 链接文字有意义 (不只是"点击这里")

推荐做到 (WCAG AAA)

• 文字对比度 ≥ 7:1
• 提供音频/视频的文字描述
• 支持屏幕阅读器 (ARIA 标签)
• 支持语音导航
• 最小字号 16px

---

🚀 Landing Page 模板

项目	Stars	技术栈	说明	链接
cruip/open-react-template	4k+	React	Cruip React Landing 模板	查看
cruip/tailwind-landing-page-template	4k+	Tailwind	Cruip Tailwind Landing	查看
ixartz/Next-JS-Landing-Page-Starter-Template	2k+	Next.js	Next.js Landing 模板	查看
leoMirandaa/shadcn-landing-page	1.9k+	Next.js	shadcn Landing Page	查看
saasfly/saasfly	2k+	Next.js	SaaS Landing 模板（2026 新）	查看

---

📚 更多资源

插画 & 素材

项目	说明	链接
undraw	免费 SVG 插画	查看
storyset	免费可定制插画	查看
humaaans	可定制人物插画	查看
blush	插画集合平台	查看

设计灵感网站

网站	说明
Dribbble	设计师社区，UI/UX 灵感
Mobbin	移动端设计参考（付费）
Land-book	Landing Page 灵感
UI Movement	UI 设计灵感
Awwwards	网站设计灵感
SaaS Pages	SaaS 页面设计参考

免费图片 & 视频

网站	说明
Unsplash	免费高质量图片
Pexels	免费图片 + 视频
Pixabay	免费图片 + 视频 + 音乐
LottieFiles	免费动画素材

颜色 & 渐变

工具	说明	链接
Coolors	配色方案生成器	查看
Gradient Hunt	渐变色集合	查看
UI Colors	Tailwind 配色工具	查看
Realtime Colors	实时预览配色	查看

---

🎯 使用指南

场景 1: 开发现代 SaaS 产品

1. 选择 shadcn/ui + Motion
2. 参考 精选技术栈组合 的 "现代 SaaS" 方案
3. 使用科技蓝配色 + Inter 字体
4. 告诉 AI：「用 shadcn/ui 构建一个 SaaS Dashboard，使用 Glassmorphism 风格」

场景 2: 开发电商网站

1. 选择技术栈：时尚电商用 Headless UI，快消用 DaisyUI
2. 参考 配色方案库 选择配色
3. 查看 设计避坑指南 的电商注意事项
4. 告诉 AI：「用 Next.js + DaisyUI 实现一个电商首页，活力红配色」

场景 3: 开发医疗健康应用

1. 选择 Material-UI 或 Chakra UI
2. 使用柔和配色 (蓝绿色系)
3. 必读 设计避坑指南 的医疗类反模式
4. 告诉 AI：「创建一个医疗预约界面，要求高对比度和可访问性」

场景 4: 添加微交互动画

1. 选择 Motion (原 Framer Motion) 或 Auto Animate (通用)
2. 参考 微交互组件 找灵感
3. 告诉 AI：「用 Motion 实现卡片悬停放大效果，动画 200ms」

场景 5: AI 快速原型

1. 使用 v0.dev 或 bolt.new
2. 描述具体场景 + 风格 + 配色
3. 示例：「创建一个 AI 聊天界面，使用渐变紫配色，流式输出效果」

---

🔥 推荐资源

最适合 AI 开发的组件库

组件库	为什么推荐	适用场景	特点
shadcn/ui	可复制粘贴，AI 最容易理解	React 网站开发	无需安装，直接复制代码
DaisyUI	纯 Tailwind，代码简洁	任何 Tailwind 项目	语义化类名，快速上手
WeUI	微信官方，小程序标准	微信小程序	官方支持，生态完善
Motion	动画代码简洁直观	React 动画	声明式 API，易于理解
v0.dev	AI 直接生成组件	快速原型	文本/截图 → 代码

2026 年最热门的新资源

资源	类型	为什么火	链接
Base UI	无样式组件库	shadcn/ui 新默认底层，MUI 团队出品	查看
assistant-ui	AI 聊天 UI	快速搭建 ChatGPT 级对话界面	查看
AI Elements	AI 界面组件	Vercel 官方，推理/工具调用组件开箱即用	查看
UXPilot	Figma AI 插件	文本生成 UI 界面 + 预测热力图	查看
Magic UI	微交互组件	React 动画组件，复制即用	查看
Sonner	Toast 组件	最现代的通知组件	查看

按行业快速查找

行业	推荐查看章节	关键资源
金融/Fintech	配色 + 避坑指南	专业蓝配色、Material-UI
医疗健康	技术栈组合 + 避坑指南	柔和配色、高对比度
电商零售	Landing Page + 微交互	活力配色、快速加载
SaaS 产品	现代设计风格 + AI 工具	shadcn/ui、Glassmorphism
AI 产品	AI Agents UI + 技术栈组合	Vercel AI SDK、流式输出
创意/Portfolio	3D 可视化 + 动画库	Three.js、GSAP

---

🤝 贡献指南

欢迎提交 Issue 或 PR 补充更多优质资源！

提交标准：

• ✅ 有完整代码示例
• ✅ 可以直接复制粘贴使用
• ✅ 文档清晰，AI 友好
• ✅ 开源免费或有免费版本
• ✅ 2024-2026 年仍在维护
• ✅ Stars 数 > 5k（特别优质可放宽）

---

📊 项目统计

• 收录项目: 220+ 个精选项目
• 分类: 20 大开发场景
• 新增内容: Figma 设计插件、Base UI、assistant-ui、AI Elements、21st.dev
• Stars 数据: 2026-09 基于 GitHub API 全量刷新
• 更新频率: 每月更新
• 最后更新: 2026-09-14

---

📄 License

MIT License

---

⭐ Star History

如果这个项目对你有帮助，请给个 Star ⭐

---

💡 提示：收藏本项目，开发时随时查阅！

🔔 Star 本项目以获取更新通知！

🚀 AI 开发者必备：所有资源都经过验证，适合 AI 辅助开发！

---

关键词: UI 组件库, 设计资源, 前端开发, React, Vue, 动画库, 图标库, AI 代码生成, shadcn/ui, Base UI, Three.js, Tailwind CSS, Figma 插件, 开源设计工具, 后台管理模板, 图表可视化, AI Agents, 小程序开发, React Native, Flutter

推荐 GitHub Topics: ui-components, design-resources, frontend, react, vue, animation, icons, ai-tools, design-systems, 3d-visualization, tailwindcss, shadcn-ui

---

常见问题 FAQ

FreeDesign 收录哪些资源？

AI 代码生成与设计工具、Figma 插件、React/Vue/Tailwind 组件库、现代设计风格、配色、字体、微交互、3D、动画、图标、小程序、移动 APP、后台管理、图表、开源设计工具、AI Agents UI 框架、设计系统和 Landing Page 模板。

怎么使用？

按「快速导航」找到你的开发场景，资源可以直接拿来用，也可以丢给 AI 按样式开发；README 还有按场景推荐的精选技术栈组合（SaaS、电商、医疗、金融等）和设计避坑指南。

多久更新一次？

README 标注最后更新为 2026-09-14，欢迎按 CONTRIBUTING.md 提交新资源。

作者 / About the author

AI 酋长 Andy（Andy Liu，GitHub/X @AIPMAndy）：前腾讯/百度 AI 产品专家，大模型独角兽前 VP，现专注 AI + 产品方法论创业。

微信 AIPMAndy（备注「FreeDesign」） · X @AIPMAndy · Telegram @AIPMAndy · 个人官网 metaver.vip

AI Chief Andy (Andy Liu, @AIPMAndy on GitHub and X) is a former Tencent and Baidu AI product expert and former VP at an LLM unicorn, now a serial entrepreneur focused on AI and product methodology.

作者的其他项目

• AndySoul：CLAUDE.md / AGENTS.md 规则模板，让 Claude Code、Codex、Cursor 少犯错
• DNA Memory：Claude Code、Codex 共用的本地 AI Agent 记忆 MCP
• SafeSkill：装 AI Skill 之前，先扫危险命令、提示注入和密钥泄露
• OpenClaw Skills 中文精选：OpenClaw Skills 分类整理，附国产模型接入指南
• Grok Bot 中文攻略：AI Agent 中文教程