{"id":136875,"url":"https://github.com/aipmandy/freedesign","name":"freedesign","description":"🎨 面向开发者的设计资源大全 - 120+ 精选项目 | 按开发场景分类 | 2026 最新 | AI 工具 + 组件库 + 3D 可视化 + 设计系统","projects_count":172,"last_synced_at":"2026-07-13T19:03:00.897Z","repository":{"id":357375275,"uuid":"1229416945","full_name":"AIPMAndy/FreeDesign","owner":"AIPMAndy","description":"🎨 面向开发者的设计资源大全 - 120+ 精选项目 | 按开发场景分类 | 2026 最新 | AI 工具 + 组件库 + 3D 可视化 + 设计系统","archived":false,"fork":false,"pushed_at":"2026-06-21T16:07:30.000Z","size":28,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-21T18:06:59.197Z","etag":null,"topics":["3d-graphics","ai-tools","awesome-list","design-resources","design-systems","developer-tools","frontend-development","react-components","ui-components","vue-components"],"latest_commit_sha":null,"homepage":"https://github.com/AIPMAndy/FreeDesign#readme","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AIPMAndy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-05T02:50:53.000Z","updated_at":"2026-06-21T16:09:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/AIPMAndy/FreeDesign","commit_stats":null,"previous_names":["aipmandy/freedesign"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AIPMAndy/FreeDesign","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AIPMAndy%2FFreeDesign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AIPMAndy%2FFreeDesign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AIPMAndy%2FFreeDesign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AIPMAndy%2FFreeDesign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AIPMAndy","download_url":"https://codeload.github.com/AIPMAndy/FreeDesign/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AIPMAndy%2FFreeDesign/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35432821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-13T02:00:06.543Z","response_time":119,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2026-07-13T19:02:58.480Z","updated_at":"2026-07-13T19:03:00.897Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["📚 更多资源","✏️ 字体组合库","🎬 动画库","📲 移动 APP 开发","✨ 微交互组件","🎨 现代设计风格","🚀 Landing Page 模板","📱 小程序开发","🤖 AI 代码生成与设计工具","🌐 网站开发 - UI 组件库","🎨 开源设计工具","🎯 图标库","🌈 配色方案库","🎮 3D 可视化","💼 后台管理系统","📈 图表可视化","🤖 AI Agents UI 框架","🎭 设计系统","⚠️ 设计避坑指南","🔥 推荐资源","⭐ Star History"],"sub_categories":["免费图片 \u0026 视频","经典组合","代码/技术类","通用动画","SwiftUI (iOS/macOS)","中文字体推荐","Flutter","骨架屏与占位符","其他","可访问性检查清单","Tailwind CSS 生态","工具推荐","表单与输入","设计灵感网站","React Native","插画 \u0026 素材","React 生态","Vue 生态","字体配对工具","按钮与交互","加载动画","通知与提示","React 动画","CSS 动画","通用设计误区","颜色 \u0026 渐变","2026 年最热门的新资源","按行业快速查找"],"readme":"# 🎨 FreeDesign\n\n\u003e **面向开发者的设计资源大全** —— 按开发场景分类，拿来即用\n\n[![GitHub stars](https://img.shields.io/github/stars/yourusername/FreeDesign?style=social)](https://github.com/yourusername/FreeDesign)\n[![Last Update](https://img.shields.io/badge/last%20update-2026--06--21-brightgreen)](https://github.com/yourusername/FreeDesign)\n[![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n\n**最后更新**: 2026-07-03\n\n---\n\n## 💡 为什么需要 FreeDesign？\n\n开发时最头疼的问题：\n- 🤔 **开发小程序**，去哪找 UI 组件？\n- 🤔 **做 React 项目**，有什么现成的设计资源？\n- 🤔 **写网站**，哪里有好看的模板？\n- 🤔 **开发 APP**，有没有可以直接用的 UI Kit？\n- 🤔 **AI 生成代码**，有哪些工具最好用？\n\n**FreeDesign 帮你解决**：按开发场景分类，每个资源都可以**直接拿来用**，丢给 AI 就能按样式开发！\n\n---\n\n## 📋 快速导航\n\n- [🤖 AI 代码生成与设计工具](#-ai-代码生成与设计工具)\n- [🌐 网站开发 - UI 组件库](#-网站开发---ui-组件库)\n- [🎨 现代设计风格](#-现代设计风格)\n- [🌈 配色方案库](#-配色方案库)\n- [✏️ 字体组合库](#️-字体组合库)\n- [✨ 微交互组件](#-微交互组件)\n- [🎮 3D 可视化](#-3d-可视化)\n- [🎬 动画库](#-动画库)\n- [🎯 图标库](#-图标库)\n- [📱 小程序开发](#-小程序开发)\n- [📲 移动 APP 开发](#-移动-app-开发)\n- [💼 后台管理系统](#-后台管理系统)\n- [📈 图表可视化](#-图表可视化)\n- [🎨 开源设计工具](#-开源设计工具)\n- [🤖 AI Agents UI 框架](#-ai-agents-ui-框架)\n- [🎭 设计系统](#-设计系统)\n- [🚀 Landing Page 模板](#-landing-page-模板)\n- [🎯 精选技术栈组合](#-精选技术栈组合)\n- [⚠️ 设计避坑指南](#️-设计避坑指南)\n- [📚 更多资源](#-更多资源)\n\n---\n\n## 🤖 AI 代码生成与设计工具\n\n\u003e 2026 年最热门的 AI 辅助开发工具\n\n| 工具 | 说明 | 特点 | 链接 |\n|------|------|------|------|\n| **v0.dev** 🔥 | Vercel AI 组件生成器 | 文本/截图 → React 组件 | [查看](https://v0.dev) |\n| **bolt.new** ⭐ | StackBlitz 全栈生成 | 提示词 → 完整项目 | [查看](https://bolt.new) |\n| **lovable.dev** | 设计转代码平台 | Figma → 生产代码 | [查看](https://lovable.dev) |\n| **Cursor AI** | AI 代码编辑器 | 内置 GPT-4，智能补全 | [查看](https://cursor.sh) |\n| **Claude Code** ⭐ | Anthropic 开发工具 | 长上下文，精准理解 | [查看](https://claude.ai) |\n| **Galileo AI** | AI 生成 UI 设计 | 提示词 → 设计稿 | [查看](https://galileo.ai) |\n| **Framer AI** | AI 生成网站 | 自然语言 → Landing Page | [查看](https://framer.com) |\n\n---\n\n## 🌐 网站开发 - UI 组件库\n\n### React 生态\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **shadcn-ui/ui** 🔥⭐ | 117k+ | Radix UI + Tailwind，复制粘贴组件，2026 年最火 | [查看](https://ui.shadcn.com) |\n| **mui/material-ui** | 98k+ | Google Material Design 实现 | [查看](https://mui.com) |\n| **ant-design/ant-design** | 98k+ | 蚂蚁金服企业级 UI | [查看](https://ant.design) |\n| **chakra-ui/chakra-ui** | 38k+ | 简洁模块化，易上手 | [查看](https://chakra-ui.com) |\n| **mantinedev/mantine** | 31k+ | 功能全面，TypeScript 优先 | [查看](https://mantine.dev) |\n| **heroui-inc/heroui** | 29k+ | 现代化 React UI，原 Next UI | [查看](https://heroui.com) |\n| **framer/motion** | 28k+ | 生产级动画库 | [查看](https://framer.com/motion) |\n| **pmndrs/react-spring** | 28k+ | 基于物理的动画 | [查看](https://react-spring.dev) |\n| **tailwindlabs/headlessui** | 26k+ | Tailwind 官方无样式组件 | [查看](https://headlessui.com) |\n\n### Tailwind CSS 生态\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **tailwindlabs/tailwindcss** ⭐ | 95k+ | 原子化 CSS 框架 | [查看](https://tailwindcss.com) |\n| **saadeghi/daisyui** | 35k+ | 最流行的 Tailwind 组件库 | [查看](https://daisyui.com) |\n| **markmead/hyperui** | 10k+ | 免费 Tailwind 组件集合 | [查看](https://hyperui.dev) |\n| **flowbite** | 8k+ | Tailwind 组件库 + 模板 | [查看](https://flowbite.com) |\n| **preline-ui/preline** | 5k+ | 企业级 Tailwind 组件 | [查看](https://preline.co) |\n\n### Vue 生态\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **element-plus/element-plus** | 25k+ | Element UI Vue 3 版本 | [查看](https://element-plus.org) |\n| **vueuse/vueuse** | 22k+ | Vue 组合式 API 工具集 | [查看](https://vueuse.org) |\n| **primefaces/primevue** | 12k+ | 丰富 Vue 组件库 | [查看](https://primevue.org) |\n| **unovue/shadcn-vue** | 5k+ | Vue 版 shadcn/ui | [查看](https://shadcn-vue.com) |\n| **arco-design/arco-design-vue** | 3k+ | 字节跳动 Vue 组件库 | [查看](https://arco.design/vue) |\n\n### 其他\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **storybookjs/storybook** | 90k+ | UI 组件开发环境 | [查看](https://storybook.js.org) |\n\n---\n\n## 🎨 现代设计风格\n\n\u003e 2026 年流行的 UI 设计风格与实现资源\n\n| 风格 | 特点 | 适用场景 | 实现资源 | 预览 |\n|------|------|---------|---------|------|\n| **Glassmorphism** 🔥 | 毛玻璃效果，透明层次 | 现代 Web 应用、Dashboard | [CSS Glass](https://css.glass) | [示例](https://ui.glass/generator) |\n| **Neomorphism** | 柔和阴影，浮雕效果 | 移动应用、简约界面 | [Neumorphism.io](https://neumorphism.io) | [生成器](https://neumorphism.io) |\n| **Bento Grid** ⭐ | 卡片网格布局，类似 iOS | SaaS 产品页、Portfolio | [Bento Grids](https://bentogrids.com) | [Aceternity](https://ui.aceternity.com/components/bento-grid) |\n| **Brutalism** | 粗犷、高对比度、破格 | 创意类网站、艺术项目 | [Brutalist Websites](https://brutalistwebsites.com) | [示例集](https://brutalistwebsites.com) |\n| **Claymorphism** | 粘土质感，柔和 3D | 插画类产品、儿童应用 | [Hype4](https://hype4.academy/tools/claymorphism-generator) | [生成器](https://hype4.academy) |\n| **Aurora UI** 🔥 | 极光渐变背景 | Landing Page、Hero 区域 | [Aurora Backgrounds](https://www.aurorauikit.com) | [CodePen](https://codepen.io/tag/aurora) |\n| **AI-Native UI** | 对话式、卡片流式 | AI 应用、Chatbot | [ChatGPT UI](https://github.com/mckaywrigley/chatbot-ui) | [v0.dev](https://v0.dev) |\n| **Dark Mode First** | 深色优先设计 | 开发工具、代码编辑器 | [Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode) | [Radix Themes](https://radix-ui.com/themes) |\n| **Minimalism** | 极简主义，留白为主 | 企业网站、专业服务 | [Minimal Gallery](https://minimal.gallery) | [Awwwards Minimal](https://awwwards.com/websites/minimal) |\n| **Y2K/Retro** | 复古未来主义 | 潮流品牌、创意项目 | [Y2K Aesthetic](https://github.com/topics/y2k) | [Behance Y2K](https://behance.net/search/projects?search=y2k) |\n\n### 风格组合推荐\n\n| 组合 | 描述 | 适用 |\n|------|------|------|\n| **Glassmorphism + Dark Mode** | 透明玻璃 + 深色背景 | 高端科技产品 |\n| **Bento Grid + Minimalism** | 卡片布局 + 极简 | SaaS Landing Page |\n| **Aurora + Glassmorphism** | 极光渐变 + 玻璃效果 | 品牌首页 Hero 区域 |\n| **Neomorphism + Pastel Colors** | 柔和浮雕 + 马卡龙配色 | 健康/美容类应用 |\n\n---\n\n## 🌈 配色方案库\n\n\u003e 精选配色方案，按行业和情绪分类\n\n### 工具推荐\n\n| 工具 | 说明 | 特点 | 链接 |\n|------|------|------|------|\n| **Coolors** 🔥 | AI 配色生成器 | 快速生成、导出多格式 | [查看](https://coolors.co) |\n| **Realtime Colors** ⭐ | 实时预览配色效果 | 在真实 UI 中预览配色 | [查看](https://realtimecolors.com) |\n| **UI Colors** | Tailwind 配色工具 | 生成完整 Tailwind 色阶 | [查看](https://uicolors.app) |\n| **Palette Maker** | 从图片提取配色 | 上传图片自动提取 | [查看](https://palettemaker.com) |\n| **Huemint** | AI 机器学习配色 | AI 生成品牌配色 | [查看](https://huemint.com) |\n| **ColorSpace** | 渐变色生成器 | 3 色渐变、调色板 | [查看](https://mycolor.space) |\n\n### 按行业分类的配色方案\n\n#### 🏦 金融/Fintech\n| 方案名 | 主色 | 辅色 | 强调色 | 适用 |\n|--------|------|------|--------|------|\n| **专业蓝** | `#0052CC` | `#172B4D` | `#00875A` | 传统银行、保险 |\n| **科技蓝** | `#2563EB` | `#1E293B` | `#10B981` | Fintech、加密货币 |\n| **稳重灰蓝** | `#475569` | `#1E293B` | `#3B82F6` | 企业金融、B2B |\n\n#### 💊 医疗/健康\n| 方案名 | 主色 | 辅色 | 强调色 | 适用 |\n|--------|------|------|--------|------|\n| **医疗蓝** | `#4A90E2` | `#F0F4F8` | `#FF6B6B` | 医院、诊所 |\n| **柔和绿** | `#A8D5BA` | `#FFF5F5` | `#E8B4B8` | 养生、Spa、瑜伽 |\n| **活力橙** | `#FF9F43` | `#FFEAA7` | `#00B894` | 健身、运动 |\n\n#### 🛍️ 电商/零售\n| 方案名 | 主色 | 辅色 | 强调色 | 适用 |\n|--------|------|------|--------|------|\n| **活力红** | `#E74C3C` | `#34495E` | `#F39C12` | 促销、快消品 |\n| **高端黑金** | `#1A1A1A` | `#2C2C2C` | `#D4AF37` | 奢侈品、高端品牌 |\n| **清新绿** | `#27AE60` | `#ECF0F1` | `#F39C12` | 环保、有机产品 |\n\n#### 💻 SaaS/科技\n| 方案名 | 主色 | 辅色 | 强调色 | 适用 |\n|--------|------|------|--------|------|\n| **渐变紫** | `#667EEA` | `#764BA2` | `#F093FB` | AI 产品、创新工具 |\n| **极简蓝** | `#3B82F6` | `#F8FAFC` | `#10B981` | B2B SaaS、生产力工具 |\n| **深色模式** | `#0F172A` | `#1E293B` | `#38BDF8` | 开发工具、代码编辑器 |\n\n### 情绪配色\n\n| 情绪 | 配色 | CSS 变量示例 |\n|------|------|-------------|\n| **专业/信任** | 蓝色系 | `--primary: #2563EB; --secondary: #1E40AF;` |\n| **活力/热情** | 橙红系 | `--primary: #F97316; --secondary: #DC2626;` |\n| **平静/舒适** | 绿色系 | `--primary: #10B981; --secondary: #059669;` |\n| **奢华/高端** | 深色+金色 | `--primary: #1F2937; --accent: #F59E0B;` |\n| **创意/年轻** | 渐变色 | `--gradient: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);` |\n\n---\n\n## ✏️ 字体组合库\n\n\u003e 精选字体搭配，包含 Google Fonts 链接\n\n### 经典组合\n\n| 标题字体 | 正文字体 | 风格 | 适用场景 | Google Fonts |\n|---------|---------|------|---------|-------------|\n| **Inter** | **Inter** | 现代、简洁 | SaaS、科技产品 | [查看](https://fonts.google.com/specimen/Inter) |\n| **Playfair Display** | **Source Sans Pro** | 优雅、专业 | 奢侈品、出版 | [查看](https://fonts.google.com/specimen/Playfair+Display) |\n| **Montserrat** | **Open Sans** | 通用、易读 | 企业网站、教育 | [查看](https://fonts.google.com/specimen/Montserrat) |\n| **Poppins** | **Roboto** | 友好、现代 | 电商、社交应用 | [查看](https://fonts.google.com/specimen/Poppins) |\n| **Space Grotesk** | **Space Grotesk** | 科技、未来感 | 科技公司、Crypto | [查看](https://fonts.google.com/specimen/Space+Grotesk) |\n| **Cormorant Garamond** | **Montserrat** | 优雅、宁静 | 美容、Spa、艺术 | [查看](https://fonts.google.com/specimen/Cormorant+Garamond) |\n| **Bebas Neue** | **Lato** | 大胆、冲击力 | 运动、娱乐 | [查看](https://fonts.google.com/specimen/Bebas+Neue) |\n| **DM Sans** | **DM Sans** | 简约、几何 | 设计工具、创意 | [查看](https://fonts.google.com/specimen/DM+Sans) |\n\n### 代码/技术类\n\n| 等宽字体 | 说明 | 适用 | 链接 |\n|---------|------|------|------|\n| **JetBrains Mono** | 连字支持，适合代码 | IDE、代码展示 | [查看](https://jetbrains.com/lp/mono) |\n| **Fira Code** | 编程连字字体 | 技术文档、代码块 | [查看](https://github.com/tonsky/FiraCode) |\n| **IBM Plex Mono** | IBM 设计，专业 | 企业开发工具 | [查看](https://fonts.google.com/specimen/IBM+Plex+Mono) |\n| **Source Code Pro** | Adobe 出品 | 代码编辑器 | [查看](https://fonts.google.com/specimen/Source+Code+Pro) |\n\n### 中文字体推荐\n\n| 字体 | 类型 | 适用场景 | 获取 |\n|------|------|---------|------|\n| **思源黑体** | 无衬线 | 通用、现代感 | [Google Fonts](https://fonts.google.com/noto/specimen/Noto+Sans+SC) |\n| **思源宋体** | 衬线 | 正式、传统 | [Google Fonts](https://fonts.google.com/noto/specimen/Noto+Serif+SC) |\n| **霞鹜文楷** | 楷体 | 优雅、人文 | [GitHub](https://github.com/lxgw/LxgwWenKai) |\n| **阿里巴巴普惠体** | 无衬线 | 商业、友好 | [官网](https://alibabafont.taobao.com) |\n\n### 字体配对工具\n\n| 工具 | 说明 | 链接 |\n|------|------|------|\n| **Font Pair** | 字体搭配灵感 | [查看](https://fontpair.co) |\n| **Fontjoy** | AI 字体配对 | [查看](https://fontjoy.com) |\n| **Typ.io** | 真实网站字体案例 | [查看](https://typ.io) |\n\n---\n\n## ✨ 微交互组件\n\n\u003e 细节决定品质 —— 高质量的微交互资源\n\n### 按钮与交互\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **whoisryosuke/ui-buttons** | 2k+ | 100+ 创意按钮样式 | [查看](https://ui-buttons.web.app) |\n| **CSS Buttons** | - | 纯 CSS 按钮集合 | [查看](https://cssbuttons.app) |\n| **Magic UI** 🔥 | 8k+ | React 微交互组件库 | [查看](https://magicui.design) |\n| **Aceternity UI** ⭐ | 15k+ | 现代微交互组件 | [查看](https://ui.aceternity.com) |\n\n### 加载动画\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **SpinKit** | 19k+ | CSS 加载动画 | [查看](https://tobiasahlin.com/spinkit) |\n| **loading.io** | - | 加载动画生成器 | [查看](https://loading.io) |\n| **Epic Spinners** | 4k+ | Vue 加载组件 | [查看](https://epic-spinners.epicmax.co) |\n| **React Spinners** | 3k+ | React 加载组件 | [查看](https://mhnpd.github.io/react-loader-spinner) |\n\n### 表单与输入\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **Formkit** | 4k+ | Vue 表单框架 | [查看](https://formkit.com) |\n| **React Hook Form** | 42k+ | React 表单库 | [查看](https://react-hook-form.com) |\n| **Floating UI** | 31k+ | Tooltip/Popover 定位 | [查看](https://floating-ui.com) |\n\n### 通知与提示\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **React Hot Toast** | 10k+ | React 通知组件 | [查看](https://react-hot-toast.com) |\n| **Sonner** ⭐ | 9k+ | 现代化 Toast 组件 | [查看](https://sonner.emilkowal.ski) |\n| **Notistack** | 4k+ | Material-UI Toast | [查看](https://notistack.com) |\n\n### 骨架屏与占位符\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **React Loading Skeleton** | 4k+ | React 骨架屏 | [查看](https://github.com/dvtng/react-loading-skeleton) |\n| **Vue Content Loader** | 2k+ | Vue 骨架屏 | [查看](https://github.com/egoist/vue-content-loader) |\n\n---\n\n## 🎮 3D 可视化\n\n\u003e WebGL / WebGPU 前端 3D 开发\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **mrdoob/three.js** 🔥 | 113k+ | JavaScript 3D 库标准 | [查看](https://threejs.org) |\n| **pmndrs/react-three-fiber** ⭐ | 31k+ | Three.js React 渲染器 | [查看](https://docs.pmnd.rs/react-three-fiber) |\n| **Three.js Journey** | - | Three.js 最佳学习资源 | [查看](https://threejs-journey.com) |\n\n---\n\n## 🎬 动画库\n\n### React 动画\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **framer/motion** | 28k+ | 最流行的 React 动画库 | [查看](https://framer.com/motion) |\n| **pmndrs/react-spring** | 28k+ | 基于物理的动画库 | [查看](https://react-spring.dev) |\n| **formkit/auto-animate** | 13k+ | 自动动画库（超简单） | [查看](https://auto-animate.formkit.com) |\n| **theatre-js/theatre** | 12k+ | 专业动画编辑器 | [查看](https://theatrejs.com) |\n\n### CSS 动画\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **animate-css/animate.css** | 81k+ | 即用型 CSS 动画 | [查看](https://animate.style) |\n| **IanLunn/Hover** | 29k+ | CSS3 悬停效果集合 | [查看](https://ianlunn.github.io/Hover) |\n| **animista** | - | CSS 动画生成器 | [查看](https://animista.net) |\n\n### 通用动画\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **juliangarnier/anime** | 50k+ | 轻量 JavaScript 动画 | [查看](https://animejs.com) |\n| **airbnb/lottie-web** | 31k+ | AE 动画转 Web | [查看](https://airbnb.design/lottie) |\n| **greensock/GSAP** | 20k+ | 专业级动画平台 | [查看](https://greensock.com/gsap) |\n\n---\n\n## 🎯 图标库\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **lucide-icons/lucide** ⭐ | 23k+ | Feather Icons 继任者 | [查看](https://lucide.dev) |\n| **tabler/tabler-icons** | 20k+ | 5000+ SVG 图标 | [查看](https://tabler-icons.io) |\n| **phosphor-icons/homepage** | 8k+ | 灵活的图标库 | [查看](https://phosphoricons.com) |\n| **akveo/eva-icons** | 9k+ | 480+ 精美图标 | [查看](https://akveo.github.io/eva-icons) |\n| **iconoir-icons/iconoir** | 4k+ | 简洁线性图标库 | [查看](https://iconoir.com) |\n| **iconify/iconify** | 5k+ | 200,000+ 图标集合 | [查看](https://iconify.design) |\n\n---\n\n## 📱 小程序开发\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **Tencent/weui** | 27k+ | 微信官方 UI 库 | [查看](https://weui.io) |\n| **youzan/vant-weapp** | 18k+ | 有赞小程序 UI | [查看](https://vant-contrib.gitee.io/vant-weapp) |\n| **weilanwl/ColorUI** | 13k+ | 高颜值小程序 UI | [查看](https://github.com/weilanwl/ColorUI) |\n| **wux-weapp/wux-weapp** | 5k+ | 微信小程序自定义组件 | [查看](https://wux-weapp.github.io/wux-weapp-docs) |\n| **TaleLin/lin-ui** | 3k+ | Lin UI 小程序组件库 | [查看](https://github.com/TaleLin/lin-ui) |\n| **dcloudio/uni-ui** | 2k+ | uni-app 官方组件库 | [查看](https://uniapp.dcloud.io) |\n\n---\n\n## 📲 移动 APP 开发\n\n### React Native\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **react-native-elements/react-native-elements** | 25k+ | 跨平台 UI 工具包 | [查看](https://reactnativeelements.com) |\n| **GeekyAnts/NativeBase** | 20k+ | 通用组件库 | [查看](https://nativebase.io) |\n| **callstack/react-native-paper** | 13k+ | Material Design 实现 | [查看](https://callstack.github.io/react-native-paper) |\n| **tamagui/tamagui** | 12k+ | React Native + Web 通用 UI | [查看](https://tamagui.dev) |\n| **akveo/react-native-ui-kitten** | 10k+ | 可定制的 RN 组件库 | [查看](https://akveo.github.io/react-native-ui-kitten) |\n\n### Flutter\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **mitesh77/Best-Flutter-UI-Templates** | 21k+ | Flutter UI 模板集合 | [查看](https://github.com/mitesh77/Best-Flutter-UI-Templates) |\n| **flutter/gallery** | 6k+ | Flutter 官方组件示例 | [查看](https://gallery.flutter.dev) |\n| **flutterchina/flukit** | 6k+ | Flutter UI 组件库 | [查看](https://github.com/flutterchina/flukit) |\n| **flutter-form-builder-ecosystem/flutter_form_builder** | 1.5k+ | Flutter 表单构建器 | [查看](https://github.com/flutter-form-builder-ecosystem/flutter_form_builder) |\n\n### SwiftUI (iOS/macOS)\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **SwiftUIX/SwiftUIX** | 7k+ | SwiftUI 扩展组件库 | [查看](https://github.com/SwiftUIX/SwiftUIX) |\n| **Dimillian/MovieSwiftUI** | 6k+ | SwiftUI 完整应用示例 | [查看](https://github.com/Dimillian/MovieSwiftUI) |\n| **siteline/swiftui-introspect** | 6k+ | 访问底层 UIKit | [查看](https://github.com/siteline/swiftui-introspect) |\n| **Dimillian/RedditOS** | 4k+ | SwiftUI macOS 应用 | [查看](https://github.com/Dimillian/RedditOS) |\n| **Shubham0812/SwiftUI-Animations** | 2k+ | SwiftUI 动画集合 | [查看](https://github.com/Shubham0812/SwiftUI-Animations) |\n| **jordansinger/SwiftUI-Kit** | 2k+ | 系统组件演示 | [查看](https://github.com/jordansinger/SwiftUI-Kit) |\n\n---\n\n## 💼 后台管理系统\n\n| 项目 | Stars | 技术栈 | 说明 | 链接 |\n|------|-------|--------|------|------|\n| **PanJiaChen/vue-element-admin** | 88k+ | Vue 2 | 最流行的 Vue 后台 | [查看](https://panjiachen.github.io/vue-element-admin) |\n| **ColorlibHQ/AdminLTE** | 44k+ | Bootstrap | 免费 Bootstrap 后台 | [查看](https://adminlte.io) |\n| **ant-design/ant-design-pro** | 37k+ | React | 企业级中后台脚手架 | [查看](https://pro.ant.design) |\n| **refinedev/refine** ⭐ | 30k+ | React | 无头后台框架（2026 热门） | [查看](https://refine.dev) |\n| **vbenjs/vue-vben-admin** | 26k+ | Vue 3 + Vite | 最现代化的 Vue 后台 | [查看](https://vben.pro) |\n| **akveo/ngx-admin** | 25k+ | Angular | Angular 后台模板 | [查看](https://akveo.github.io/ngx-admin) |\n| **coreui/coreui-free-bootstrap-admin-template** | 12k+ | Bootstrap | CoreUI 免费后台 | [查看](https://coreui.io) |\n\n---\n\n## 📈 图表可视化\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **d3/d3** | 110k+ | 数据驱动文档 | [查看](https://d3js.org) |\n| **chartjs/Chart.js** | 65k+ | 简洁 HTML5 图表 | [查看](https://www.chartjs.org) |\n| **apache/echarts** | 62k+ | 强大的可视化库 | [查看](https://echarts.apache.org) |\n| **recharts/recharts** | 24k+ | React 图表库 | [查看](https://recharts.org) |\n| **FormidableLabs/victory** | 11k+ | React 可组合图表 | [查看](https://formidable.com/open-source/victory) |\n\n---\n\n## 🎨 开源设计工具\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **penpot/penpot** 🔥 | 52k+ | 开源 Figma 替代品 | [查看](https://penpot.app) |\n| **Figma** | - | 设计协作平台（商业） | [查看](https://figma.com) |\n\n---\n\n## 🤖 AI Agents UI 框架\n\n\u003e 构建 AI 对话、Agents 交互界面\n\n| 项目 | Stars | 说明 | 链接 |\n|------|-------|------|------|\n| **CopilotKit/CopilotKit** ⭐ | 15k+ | AI Agents 前端栈 | [查看](https://copilotkit.ai) |\n| **vercel/ai** ⭐ | 12k+ | 流式 AI 对话 UI | [查看](https://sdk.vercel.ai) |\n| **langchain-ai/langchainjs** | 6k+ | JavaScript AI 链式调用 | [查看](https://js.langchain.com) |\n\n---\n\n## 🎭 设计系统\n\n\u003e 大厂设计规范参考\n\n| 公司 | 设计系统 | 组件库 | 链接 |\n|------|---------|--------|------|\n| **Ant Design** | 蚂蚁金服设计语言 | React/Vue | [查看](https://ant.design) |\n| **Material Design** | Google 设计语言 | 多框架 | [查看](https://material.io) |\n| **Fluent UI** | 微软设计语言 | React | [查看](https://fluent2.microsoft.design) |\n| **Carbon Design** | IBM 设计语言 | React/Vue | [查看](https://carbondesignsystem.com) |\n| **Atlassian Design** | Atlassian 设计语言 | React | [查看](https://atlassian.design) |\n| **Polaris** | Shopify 设计语言 | React | [查看](https://polaris.shopify.com) |\n| **Lightning Design** | Salesforce 设计语言 | Web Components | [查看](https://lightningdesignsystem.com) |\n\n---\n\n## 🎯 精选技术栈组合\n\n\u003e 按场景推荐完整的技术栈，拿来即用\n\n### 🚀 SaaS 产品推荐栈\n\n#### 现代 SaaS (2026 推荐)\n- **框架**: Next.js 14+ (App Router)\n- **组件库**: shadcn/ui\n- **动画**: Framer Motion\n- **图标**: Lucide Icons\n- **配色**: 科技蓝 (`#2563EB`, `#1E293B`, `#10B981`)\n- **字体**: Inter (标题+正文)\n- **风格**: Glassmorphism + Minimalism\n- **反模式**: ❌ 避免过度动画、AI 紫粉渐变\n\n#### 传统企业级 SaaS\n- **框架**: React + TypeScript\n- **组件库**: Ant Design\n- **图表**: ECharts\n- **配色**: 专业蓝 (`#0052CC`, `#172B4D`)\n- **字体**: Roboto\n- **风格**: 稳重、层级清晰\n- **反模式**: ❌ 避免过于花哨、炫技式动画\n\n---\n\n### 🛍️ 电商网站推荐栈\n\n#### 时尚电商\n- **框架**: Next.js\n- **组件库**: Headless UI + Tailwind\n- **图片**: Next Image (优化)\n- **配色**: 高端黑金 (`#1A1A1A`, `#D4AF37`)\n- **字体**: Playfair Display + Source Sans Pro\n- **风格**: 大图、留白、优雅\n- **反模式**: ❌ 避免拥挤布局、廉价感配色\n\n#### 快消电商\n- **框架**: Vue 3 + Nuxt\n- **组件库**: DaisyUI\n- **配色**: 活力红橙 (`#E74C3C`, `#F39C12`)\n- **字体**: Poppins + Roboto\n- **风格**: 卡片式、促销标签、CTA 突出\n- **反模式**: ❌ 避免过慢加载、弹窗过多\n\n---\n\n### 💊 医疗健康推荐栈\n\n#### 医院/诊所\n- **框架**: React\n- **组件库**: Material-UI\n- **配色**: 医疗蓝 (`#4A90E2`, `#F0F4F8`)\n- **字体**: Open Sans (易读性优先)\n- **风格**: 清晰、专业、高对比度\n- **可访问性**: WCAG AA 级以上\n- **反模式**: ❌ 避免过度装饰、复杂动效\n\n#### 健康养生/Spa\n- **框架**: Next.js\n- **组件库**: Chakra UI\n- **配色**: 柔和绿粉 (`#A8D5BA`, `#E8B4B8`, `#FFF5F5`)\n- **字体**: Cormorant Garamond + Montserrat\n- **风格**: Soft UI、圆角、柔和阴影\n- **反模式**: ❌ 避免鲜艳色彩、尖锐边角\n\n---\n\n### 🏦 金融/Fintech 推荐栈\n\n#### 传统金融\n- **框架**: Angular\n- **组件库**: Fluent UI\n- **配色**: 稳重蓝灰 (`#475569`, `#1E293B`, `#3B82F6`)\n- **字体**: IBM Plex Sans\n- **风格**: 专业、稳重、数据可视化\n- **安全性**: 双因素认证、HTTPS\n- **反模式**: ❌ 避免深色模式作为默认、AI 渐变\n\n#### 加密货币/Web3\n- **框架**: Next.js\n- **组件库**: Radix UI + Tailwind\n- **配色**: 渐变紫 + 深色模式 (`#667EEA`, `#0F172A`)\n- **字体**: Space Grotesk\n- **风格**: 科技感、Glassmorphism、动态渐变\n- **反模式**: ❌ 避免过于传统、过度复杂\n\n---\n\n### 📱 移动应用推荐栈\n\n#### iOS 风格应用\n- **框架**: React Native\n- **组件库**: React Native Paper\n- **配色**: 系统色 + Bento Grid 布局\n- **字体**: SF Pro (系统字体)\n- **风格**: Neomorphism、卡片化\n- **反模式**: ❌ 避免 Android Material 风格\n\n#### 跨平台通用应用\n- **框架**: Flutter\n- **组件库**: Flutter Material\n- **配色**: 根据品牌定制\n- **字体**: Roboto (Android) / SF Pro (iOS)\n- **风格**: 遵循平台设计规范\n- **反模式**: ❌ 避免两个平台使用完全相同的 UI\n\n---\n\n### 🎨 创意/Portfolio 推荐栈\n\n- **框架**: Astro / Next.js\n- **组件库**: 自定义 + Tailwind\n- **3D**: Three.js + React Three Fiber\n- **动画**: GSAP\n- **配色**: 大胆、高对比度\n- **字体**: 独特字体组合\n- **风格**: Brutalism / Y2K / 实验性\n- **反模式**: ❌ 避免过于传统、通用模板感\n\n---\n\n### 🤖 AI 产品推荐栈\n\n- **框架**: Next.js 14+\n- **组件库**: shadcn/ui + Radix UI\n- **AI UI**: Vercel AI SDK\n- **动画**: Framer Motion\n- **配色**: 渐变紫蓝 + 深色模式\n- **字体**: Inter + JetBrains Mono (代码)\n- **风格**: 对话式、流式输出、卡片化\n- **特性**: 打字机效果、流式响应、代码高亮\n- **反模式**: ❌ 避免传统表单式交互\n\n---\n\n## ⚠️ 设计避坑指南\n\n\u003e 常见设计误区与行业特定反模式\n\n### 通用设计误区\n\n#### ❌ 过度使用动画\n**问题**: 每个元素都加动画，用户眩晕\n**正确做法**: \n- 只在关键交互点添加动画\n- 遵循 `prefers-reduced-motion` 媒体查询\n- 动画时长: 150-300ms (快速)，300-500ms (正常)\n\n#### ❌ 对比度不足\n**问题**: 文字与背景对比度低于 4.5:1\n**正确做法**:\n- 正文文字对比度 ≥ 4.5:1 (WCAG AA)\n- 大标题对比度 ≥ 3:1\n- 使用工具: [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker)\n\n#### ❌ 字体过多\n**问题**: 一个页面使用 3 种以上字体\n**正确做法**:\n- 标题字体 + 正文字体 (最多 2 种)\n- 通过字重和大小区分层级\n- 代码字体单独算\n\n#### ❌ 颜色传递唯一信息\n**问题**: 只用颜色区分状态 (色盲用户无法识别)\n**正确做法**:\n- 颜色 + 图标\n- 颜色 + 文字说明\n- 颜色 + 形状变化\n\n#### ❌ 点击目标过小\n**问题**: 按钮/链接小于 44x44px (移动端)\n**正确做法**:\n- 移动端最小触摸目标: 44x44px\n- 桌面端最小点击目标: 32x32px\n- 相邻可点击元素间距 ≥ 8px\n\n---\n\n### 行业特定反模式\n\n#### 🏦 金融/银行类\n\n**❌ 避免**:\n- 深色模式作为默认 (信任感不足)\n- AI 紫粉渐变 (太过时尚，不够稳重)\n- 过度动画 (给人不靠谱感)\n- 低对比度设计 (专业度不足)\n\n**✅ 推荐**:\n- 浅色模式默认，提供深色切换\n- 蓝色系为主，稳重配色\n- 清晰的层级和信息架构\n- 数据加密标识清晰可见\n\n---\n\n#### 💊 医疗健康类\n\n**❌ 避免**:\n- 鲜艳的红色 (引发焦虑)\n- 复杂动效 (患者可能身体不适)\n- 纯黑背景 (压抑感)\n- 过小的文字 (老年人难阅读)\n\n**✅ 推荐**:\n- 柔和的蓝绿色系 (平静、信任)\n- 大字号、高对比度 (可访问性)\n- 简洁明了的信息层级\n- 清晰的操作反馈\n\n---\n\n#### 🛍️ 电商类\n\n**❌ 避免**:\n- 加载时间 \u003e 3 秒 (用户流失)\n- 弹窗过多 (影响体验)\n- 结账流程过长 (\u003e 3 步)\n- 不清晰的退换货政策\n\n**✅ 推荐**:\n- 图片懒加载 + WebP 格式\n- CTA 按钮颜色突出 (高对比度)\n- 一键购买流程\n- 信任标识清晰 (评价、认证)\n\n---\n\n#### 🎓 教育/在线学习\n\n**❌ 避免**:\n- 自动播放音视频 (打扰学习环境)\n- 没有进度保存 (用户焦虑)\n- 过于游戏化 (分散注意力)\n- 付费墙过早出现\n\n**✅ 推荐**:\n- 清晰的学习进度条\n- 笔记和书签功能\n- 倍速播放控制\n- 免费试学部分内容\n\n---\n\n#### 🍔 餐饮/外卖\n\n**❌ 避免**:\n- 食物图片不真实 (期望落差)\n- 没有过敏源标识\n- 配送时间不准确\n- 评价造假明显\n\n**✅ 推荐**:\n- 高质量实拍美食图\n- 营养成分和过敏源清晰\n- 实时配送跟踪\n- 真实用户评价展示\n\n---\n\n#### 🤖 AI/科技产品\n\n**❌ 避免**:\n- 过度使用\"AI\"、\"智能\"等词汇\n- 黑盒操作 (用户不知道 AI 在做什么)\n- 没有错误重试机制\n- 生成结果无法编辑\n\n**✅ 推荐**:\n- 透明的 AI 工作流程展示\n- 流式输出 (打字机效果)\n- 清晰的 Loading 状态\n- 可编辑、可重新生成\n\n---\n\n### 可访问性检查清单\n\n#### 必须做到 (WCAG AA)\n\n- [ ] 文字对比度 ≥ 4.5:1\n- [ ] 所有功能可键盘访问 (Tab 键导航)\n- [ ] 表单有清晰的 label\n- [ ] 图片有 alt 文本\n- [ ] 页面有清晰的标题结构 (h1-h6)\n- [ ] 颜色不是传递信息的唯一方式\n- [ ] 支持 `prefers-reduced-motion`\n- [ ] Focus 状态清晰可见\n- [ ] 链接文字有意义 (不只是\"点击这里\")\n\n#### 推荐做到 (WCAG AAA)\n\n- [ ] 文字对比度 ≥ 7:1\n- [ ] 提供音频/视频的文字描述\n- [ ] 支持屏幕阅读器 (ARIA 标签)\n- [ ] 支持语音导航\n- [ ] 最小字号 16px\n\n---\n\n## 🚀 Landing Page 模板\n\n| 项目 | Stars | 技术栈 | 说明 | 链接 |\n|------|-------|--------|------|------|\n| **cruip/open-react-template** | 4k+ | React | Cruip React Landing 模板 | [查看](https://github.com/cruip/open-react-template) |\n| **cruip/tailwind-landing-page-template** | 4k+ | Tailwind | Cruip Tailwind Landing | [查看](https://github.com/cruip/tailwind-landing-page-template) |\n| **ixartz/Next-JS-Landing-Page-Starter-Template** | 4k+ | Next.js | Next.js Landing 模板 | [查看](https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template) |\n| **leoMirandaa/shadcn-landing-page** | 3k+ | Next.js | shadcn Landing Page | [查看](https://github.com/leoMirandaa/shadcn-landing-page) |\n| **saasfly/saasfly** | 2k+ | Next.js | SaaS Landing 模板（2026 新） | [查看](https://github.com/saasfly/saasfly) |\n\n---\n\n## 📚 更多资源\n\n### 插画 \u0026 素材\n\n| 项目 | 说明 | 链接 |\n|------|------|------|\n| **undraw** | 免费 SVG 插画 | [查看](https://undraw.co) |\n| **storyset** | 免费可定制插画 | [查看](https://storyset.com) |\n| **humaaans** | 可定制人物插画 | [查看](https://humaaans.com) |\n| **blush** | 插画集合平台 | [查看](https://blush.design) |\n\n### 设计灵感网站\n\n| 网站 | 说明 |\n|------|------|\n| [Dribbble](https://dribbble.com) | 设计师社区，UI/UX 灵感 |\n| [Mobbin](https://mobbin.com) | 移动端设计参考（付费） |\n| [Land-book](https://land-book.com) | Landing Page 灵感 |\n| [UI Movement](https://uimovement.com) | UI 设计灵感 |\n| [Awwwards](https://awwwards.com) | 网站设计灵感 |\n| [SaaS Pages](https://saaspages.xyz) | SaaS 页面设计参考 |\n\n### 免费图片 \u0026 视频\n\n| 网站 | 说明 |\n|------|------|\n| [Unsplash](https://unsplash.com) | 免费高质量图片 |\n| [Pexels](https://pexels.com) | 免费图片 + 视频 |\n| [Pixabay](https://pixabay.com) | 免费图片 + 视频 + 音乐 |\n| [LottieFiles](https://lottiefiles.com) | 免费动画素材 |\n\n### 颜色 \u0026 渐变\n\n| 工具 | 说明 | 链接 |\n|------|------|------|\n| **Coolors** | 配色方案生成器 | [查看](https://coolors.co) |\n| **Gradient Hunt** | 渐变色集合 | [查看](https://gradienthunt.com) |\n| **UI Colors** | Tailwind 配色工具 | [查看](https://uicolors.app) |\n| **Realtime Colors** | 实时预览配色 | [查看](https://realtimecolors.com) |\n\n---\n\n## 🎯 使用指南\n\n### 场景 1: 开发现代 SaaS 产品\n1. 选择 **shadcn/ui** + **Framer Motion**\n2. 参考 [精选技术栈组合](#-精选技术栈组合) 的 \"现代 SaaS\" 方案\n3. 使用科技蓝配色 + Inter 字体\n4. 告诉 AI：「用 shadcn/ui 构建一个 SaaS Dashboard，使用 Glassmorphism 风格」\n\n### 场景 2: 开发电商网站\n1. 选择技术栈：时尚电商用 **Headless UI**，快消用 **DaisyUI**\n2. 参考 [配色方案库](#-配色方案库) 选择配色\n3. 查看 [设计避坑指南](#️-设计避坑指南) 的电商注意事项\n4. 告诉 AI：「用 Next.js + DaisyUI 实现一个电商首页，活力红配色」\n\n### 场景 3: 开发医疗健康应用\n1. 选择 **Material-UI** 或 **Chakra UI**\n2. 使用柔和配色 (蓝绿色系)\n3. **必读** [设计避坑指南](#️-设计避坑指南) 的医疗类反模式\n4. 告诉 AI：「创建一个医疗预约界面，要求高对比度和可访问性」\n\n### 场景 4: 添加微交互动画\n1. 选择 **Framer Motion** (React) 或 **Auto Animate** (通用)\n2. 参考 [微交互组件](#-微交互组件) 找灵感\n3. 告诉 AI：「用 Framer Motion 实现卡片悬停放大效果，动画 200ms」\n\n### 场景 5: AI 快速原型\n1. 使用 **v0.dev** 或 **bolt.new**\n2. 描述具体场景 + 风格 + 配色\n3. 示例：「创建一个 AI 聊天界面，使用渐变紫配色，流式输出效果」\n\n---\n\n## 🔥 推荐资源\n\n### 最适合 AI 开发的组件库\n\n| 组件库 | 为什么推荐 | 适用场景 | 特点 |\n|--------|-----------|---------|------|\n| **shadcn/ui** | 可复制粘贴，AI 最容易理解 | React 网站开发 | 无需安装，直接复制代码 |\n| **DaisyUI** | 纯 Tailwind，代码简洁 | 任何 Tailwind 项目 | 语义化类名，快速上手 |\n| **WeUI** | 微信官方，小程序标准 | 微信小程序 | 官方支持，生态完善 |\n| **Framer Motion** | 动画代码简洁直观 | React 动画 | 声明式 API，易于理解 |\n| **v0.dev** | AI 直接生成组件 | 快速原型 | 文本/截图 → 代码 |\n\n### 2026 年最热门的新资源\n\n| 资源 | 类型 | 为什么火 | 链接 |\n|------|------|---------|------|\n| **Magic UI** | 微交互组件 | React 动画组件，复制即用 | [查看](https://magicui.design) |\n| **Aceternity UI** | 现代组件库 | 独特的微交互设计 | [查看](https://ui.aceternity.com) |\n| **Bento Grids** | 布局模式 | iOS 风格卡片布局，2026 大热 | [查看](https://bentogrids.com) |\n| **Aurora Backgrounds** | 视觉效果 | 极光渐变背景生成器 | [查看](https://aurorauikit.com) |\n| **Sonner** | Toast 组件 | 最现代的通知组件 | [查看](https://sonner.emilkowal.ski) |\n\n### 按行业快速查找\n\n| 行业 | 推荐查看章节 | 关键资源 |\n|------|-------------|---------|\n| **金融/Fintech** | [配色](#-配色方案库) + [避坑指南](#️-设计避坑指南) | 专业蓝配色、Material-UI |\n| **医疗健康** | [技术栈组合](#-精选技术栈组合) + [避坑指南](#️-设计避坑指南) | 柔和配色、高对比度 |\n| **电商零售** | [Landing Page](#-landing-page-模板) + [微交互](#-微交互组件) | 活力配色、快速加载 |\n| **SaaS 产品** | [现代设计风格](#-现代设计风格) + [AI 工具](#-ai-代码生成与设计工具) | shadcn/ui、Glassmorphism |\n| **AI 产品** | [AI Agents UI](#-ai-agents-ui-框架) + [技术栈组合](#-精选技术栈组合) | Vercel AI SDK、流式输出 |\n| **创意/Portfolio** | [3D 可视化](#-3d-可视化) + [动画库](#-动画库) | Three.js、GSAP |\n\n---\n\n## 🤝 贡献指南\n\n欢迎提交 Issue 或 PR 补充更多优质资源！\n\n**提交标准**：\n- ✅ 有完整代码示例\n- ✅ 可以直接复制粘贴使用\n- ✅ 文档清晰，AI 友好\n- ✅ 开源免费或有免费版本\n- ✅ 2024-2026 年仍在维护\n- ✅ Stars 数 \u003e 5k（特别优质可放宽）\n\n---\n\n## 📊 项目统计\n\n- **收录项目**: 200+ 个精选项目\n- **分类**: 19 大开发场景\n- **新增内容**: 设计风格、配色方案、字体组合、微交互、技术栈组合、避坑指南\n- **更新频率**: 每月更新\n- **最后更新**: 2026-07-03\n\n---\n\n## 📄 License\n\nMIT License\n\n---\n\n## ⭐ Star History\n\n如果这个项目对你有帮助，请给个 Star ⭐\n\n[![Star History Chart](https://api.star-history.com/svg?repos=yourusername/FreeDesign\u0026type=Date)](https://star-history.com/#yourusername/FreeDesign\u0026Date)\n\n---\n\n\u003e 💡 **提示**：收藏本项目，开发时随时查阅！\n\u003e \n\u003e 🔔 **Star** 本项目以获取更新通知！\n\u003e \n\u003e 🚀 **AI 开发者必备**：所有资源都经过验证，适合 AI 辅助开发！\n\n---\n\n**关键词**: UI 组件库, 设计资源, 前端开发, React, Vue, 动画库, 图标库, AI 代码生成, shadcn/ui, Three.js, Tailwind CSS, 开源设计工具, 后台管理模板, 图表可视化, AI Agents, 小程序开发, React Native, Flutter\n\n**推荐 GitHub Topics**: `ui-components`, `design-resources`, `frontend`, `react`, `vue`, `animation`, `icons`, `ai-tools`, `design-systems`, `3d-visualization`, `tailwindcss`, `shadcn-ui`\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/aipmandy%2Ffreedesign/projects"}