面向开发人员的最佳设计资源

2025-05-27

面向开发人员的最佳设计资源

您是否正在寻找最佳设计资源？这是一个值得每个开发人员收藏的资源合集，因为它包含了创建引人注目且美观的项目所需的最优质资源。

介绍

每个开发者的工作都离不开某种产品设计。这不仅关乎美观的外观，更关乎引人入胜的视觉效果和良好的整体呈现。与其在冗长的设计流程上投入时间和金钱，不如利用那些提供现成组件和功能的资源，打造出一款出色、惊艳、卓越的产品。

目录

UI图形

包含不同格式（例如 PSD、Sketch、Figma 等）的现代 UI 组件的网站和资源。它们非常适合用于 Web 组件/UI 的创意

网站                            描述
UI设计日报 各种类型的出色 UI 组件
100 每日 UI 免费的 Figma 产品、元素和屏幕库
Sketch 应用程序源 绘制 UI、线框、图标等等
人类 具有混搭能力的人的酷炫插图
图案 免费收集所有矢量格式的精美图案
模式库 免费精美背景图案
404 插图 404页面的免费插图
Drawkit.io 为设计师和初创企业提供的插图
荒诞设计 为设计师和开发人员提供免费的超现实主义插图
Undraw.co 开源插图，满足您想象和创造的任何想法
Manypixels.co 单色、等距高质量插图
打开窥视 手绘插画库
用户界面空间 数以千计的优秀 UI 免费赠品
动画公司 精美、可定制的动画 GIF 图标
Uplabs 高品质设计资源（免费和付费）
InvisionApp 免费、高品质 UI 工具包、图标包和模型库
打开涂鸦 一套免费的素描插图
头像 Pablo Stanley 创作的免费头像插图素描库
FreebieSketch 免费的草图设计、线框、插图等。
脸红 使用 Figma 插件免费定制插图
英雄图案 可重复的 SVG 背景图案集合
IsoFlat 免费的等距 SVG 图形资源集合
IRA 设计 由 creative tim 创作的开源渐变插图集。
透明纹理 透明纹理背景图案的集合。
Storytale.io Storytale 免费优质插图子集
icons8.com/插图 免费矢量插图，提升您的项目档次
帕特里科 无缝图案制作器
免费插画 精彩登陆页面的免费背景图片
Pixeltrue 插图 免费动画插图
抽象用户头像 API 通过用户名或电子邮件创建简单而灵活的用户头像的 API
素描谷 下载免费的 PNG、SVG 或 AI 文件。
图案板 免费且无限制的独特图案设计。
方面 Dimensions.com 是一个持续更新的尺寸图纸参考数据库，记录了日常物品和空间的标准测量和尺寸
免费赠品 为网页设计师和开发人员精心挑选的资源，不断更新。
灵活 每天一幅新的高质量开源插图。
酷文本 Cool Text 是一款免费的图形生成器，适用于网页和其他任何需要令人印象深刻的徽标而又无需大量设计工作的地方
插图套件 每日添加优质开源插图
小玩意图案生成器 创建独特、无缝、免版税的图案。
图案怪物 一个简单的在线图案生成器，用于创建可重复的 SVG 图案
典范 Figma 和 Sketch 的免费头像库 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

字体

提供免费字体和基于字体的工具的网站

网站                            描述
谷歌字体 约 1000 种免费授权字体系列的库
达丰特 可免费下载字体的档案
使用和修改 个人精选美丽、优雅、朋克、专业、不完整、奇怪的字体
1001种免费字体 我认为这个名字不言而喻😏
字体松鼠 Font Squirrel 在互联网上搜索高质量、合法免费的字体
字体结构 一家数字字体铸造厂，为各种品牌制作零售字体和定制排版
蒂芙 字体类型差异工具，直观地对比两种字体之间的差异
TypeKit 实践 了解排版实践
丰乔伊 一键生成字体配对
黄金比例 黄金比例排版计算器
FontSpark 发现更好的字体
FontGet 有多种字体可供下载，并按标签整齐排序
字体对 帮助您将 Google 字体配对在一起
字体空间 以设计师为中心的免费字体网站，提供快速可定制的预览
抽象字体 字体可免费用于个人和商业用途
自由排版 高品质字体列表
Leon Sans 用代码制作的几何无衬线字体
莱克森德 经验表明，可变字体可以显著提高阅读能力
适用于 Apple 平台的字体 获取在应用中使用 Apple 平台系统字体所需的详细信息、框架和工具
SFWin 适用于 Windows 10 和非 Apple 平台的 San Francisco 字体
字体翻转器 在您自己的设计上预览 800 多种 Google 字体，无需下载字体
字体竞技场 免费精选字体
贝丰茨 免费提供高品质字体
阿拉伯字体 免费阿拉伯字体
FontDrop 查看字体文件内容的简单方法
开放铸造厂 精选开源字体的免费平台
雕文 上传你自己的 SVGS 并将其转换为字体文件。如果你想要加载较小的库，这很有用
Google Webfonts 助手 轻松自托管 Google 字体
粗糙字体真棒 当 RoughJS 遇见 Font Awesome
FFonts 免费时尚字体
马拉雅拉姆字体 免费的马拉雅拉姆字体，由 Swathanthra Malayalam Computing（SMC）维护
开发字体 免费查找和使用编码字体 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

颜色

有助于选择颜色的网站和资源

网站                            描述
彩色酿酒机 2 原始的调色板生成器，也支持色盲。可能是科学上最好的选择。但可能不是最漂亮的。
Colormind.io 调色板生成器
ColorCurves.app 使用曲线生成调色板的调色板生成器
颜色渐变 一个免费的工具，可以直观地创建简单和复杂的 CSS 渐变
冷却器 创建完美的调色板或从数千种美丽的配色方案中获得灵感
HTML 颜色代码 使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值
颜色和字体 精选的颜色、字体和资源库
调色板列表 选择 2 种您喜欢的颜色，该工具会为您生成数千种调色板。
调色板 使用单一颜色创建调色板
Google Material 颜色工具 官方 Google Material 调色板工具
材质面板 自由选择 Material Design 的调色板、图标和颜色
色彩空间 用一种颜色生成漂亮的调色板
FlatUIColors 一组各种风格的漂亮调色板
Adobe 颜色 创建调色板、从图像中提取渐变等。
色彩灵感 查找有关颜色的一切的一体化资源
颜色墙 存储调色板并一键生成调色板的地方
快乐色彩 Happy Hues 是一个调色板灵感网站，它作为现实世界的示例，展示了如何在设计项目中使用这些颜色，作者：Mackenzie Child
Adobe 趋势 从 Behance 和 Adob​​e Stock 的创意社区探索不同行业当前的色彩趋势
色彩寻踪 一个免费开放的色彩灵感平台，拥有数千种精选的流行色彩调色板
梯度搜寻 一个免费开放的渐变灵感平台，拥有数千种精选的流行色彩渐变
网页渐变 一个可以找到优质 CSS 渐变的免费网站
彩盒 一个免费制作色彩套装的网站
CSS 渐变 制作自定义渐变的免费网站和一些渐变示例
梯度 纯 CSS 和 jpg 渐变
UI渐变 UI渐变颜色生成器
调色板生成器 每次按下空格键都会生成新的调色板
材质调色板 1000+ 材质设计调色板
格拉比恩特 渐变选择器
阴影洗刷 快速生成任何颜色的色调
品牌色彩 最大的官方品牌颜色代码集合
品牌调色板 徽标颜色代码和调色板
材料设计调色板生成器 生成类似 Material Design 的主题和调色板
彩色 面向设计师和开发者的配色方案工具。它将帮助你汲取灵感，并作为你色彩工作的资源。
0到255 一款可以轻松调亮或调暗颜色的颜色工具。它非常适合悬停状态、边框、渐变等效果。
颜色混合器 显示两种颜色中间点颜色的工具
渐变按钮 准备使用复制/粘贴渐变按钮
赫罗马 Khroma 使用人工智能来了解您喜欢的颜色，并创建无限的调色板供您发现、搜索和保存。
谁可以使用 一种可以引起人们注意并理解颜色对比如何影响不同视力障碍人士的工具。
可着色 色彩组合对比度测试仪
颜色十六进制选择器 获取十六进制代码以及颜色名称的工具。
猿若君 令人惊叹的网站和应用程序设计配色方案，带有预览
帕莱顿 Paletton.com 是一款设计师色彩工具，旨在创建协调良好的色彩组合。
彩色怪兽 功能强大的类似 Photoshop 的在线 CSS 渐变编辑器
图像颜色选择器 图像颜色选择器和调色板生成器
结合颜色 混色工具
色彩爱好者 它将显示外界流行的配色方案。
HTML CSS 颜色 免费在线颜色（美国）或颜色（英国）工具：信息、渐变生成器、色轮等。
十六进制颜色代码 它使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值。
CoolHue 2.0 一个免费工具，以 CSS 和 PNG 格式显示不同的渐变示例
颜色.lol Twitter 机器人生成的有趣的调色板，每种颜色都有十六进制代码和描述性名称。
颜色.dopely 超快速和简单的调色板生成器，调色板可以在几秒钟内保存和共享。
UI颜色选择器 只需单击一下即可复制带有十六进制代码的 UI 颜色集合。
颜色十六进制 Color-hex 提供有关颜色的信息，包括颜色模型（RGB、HSL、HSV 和 CMYK），并为所选颜色生成简单的 css 代码。
FarbVelo 随机调色板生成器
阳台颜色 浏览其他设计师制作的调色板，生成并提交您自己的调色板
Duo Duo 是我从个人项目或在网上遇到的一系列颜色组合中精选出来的。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

图标

图标资源包括 png、svg 等

网站                            描述
UXWing 经过精心优化，可免费用于商业用途的图标
Shapedfonts Iconclub 8000+ 个免费图标
羽毛图标 美观、可定制的开源图标
表格图标 470+ 高度可定制的开源 SVG 图标
Xicons 从 fluentui-system-icons、ionicons 等集成的 SVG Vue/React 组件（Vue3、Vue2、React、SVG）。
圣像 超过 900 个开源图标的免费库
简单图标 1307 个热门品牌的免费 SVG 图标
线性图标 1000+ 超清晰矢量图标
Icons8 免费图标、照片、矢量图和工具
平面图标 最大的 PNG、SVG、EPS、PSD 和 BASE 64 格式免费图标数据库
名词项目 超过 200 万个精选图标，由全球社区创建
Iconscout 免费下载图标插图素材
IconSear.ch 索引了超过 50,000 个 SVG 图标的搜索引擎
Nucleo 应用程序 Nucleo 是一个精美的图标库，包含 27500 个图标，是一款功能强大的应用程序，可以收集、自定义和导出所有图标。（免费 & 付费）
Icon-icons.com 免费图标 PNG、ICO、ICNS 和矢量文件 SVG
Bootstrap 图标 为 Bootstrap 构建的免费图标，但它们适用于任何项目
混音图标 简单愉悦的图标系统
图标怪物 发现 313 个系列中的 4496+ 个免费图标
Vivid.js 准备使用免费和开源 SVG 图标包 JavaScript 库。
图标查找器 SVG、PNG、CSH 和 AI 格式的免费和高级矢量图标
洛迪肯 50 个免费动画交互式图标
使用动画 SVG 和 Json 格式的免费动画图标（适用于 lottie）
css.gg 700 多个开源 CSS、SVG 和 Figma UI 图标，可在 SVG Sprite、styled-components、NPM 和 API 中使用
IconBros 7843+ 个免费图标，分为 182 个系列
材料设计图标 图标集合允许针对各种平台的设计师和开发人员下载任何项目所需的格式、颜色和大小的图标。
英雄偶像 来自 Tailwind CSS 创建者的免费开源图标。
佐迪康斯 一组免费的高级 SVG 图标，可供您在数字产品上使用。
无尽的图标 一个提供大量免费图标的网站。图标均已标记并压缩成套件。
艾科蒙 浏览 5500 多个免费图标。添加任意图标集，即可轻松浏览和搜索图标。
伊娃图标 Eva Icons 是一套包含 480 多个精美开源图标的包，用于常见操作和项目。
密码图标 一套包含 430 个加密货币和法定货币图标的套装。完全免费。
伊科纳特 完全可定制且可访问的矢量图标
应用程序图标 为您的 IOS、macOS 和 Android 项目快速生成不同大小的应用程序图标
线条图标 2000+ 设计师和开发者必备的 Line 图标
永恒图标 Evericons 是一个包含超过 460 个免费图标的大包，由 Aleksey Popov 设计。
SVG 仓库 下载免费的 SVG 矢量以供商业使用。
转换 在线免费将 PNG 文件转换为 SVG。（这是它提供的服务之一。）
CSS图标 图标集采用纯 CSS 代码制作，无依赖项，“抓取即用”图标
统一图标 数千个图标，一个统一的框架。一个库，超过 40,000 个矢量图标。
系统 UI 图标 220 多个图标，并且还在不断增加。
图标公园 将SVG图标转换为多种主题，并生成React图标，Vue图标，svg图标
基数图标 Modulz 团队设计的一组简洁的 15×15 图标。所有图标均可作为单独的 React 组件、SVG 等格式。
EOS图标 像素完美、开源的图标字体，可用作连字和 SVG。
离子图标 精美制作的开源图标可用于网络、iOS、Android 和桌面应用程序。
荧光图标 Phosphor 是一个灵活的图标系列，适用于界面、图表、演示文稿
小图标 TeenyIcons 是一组易于在 html 中使用的 SVG 格式的图标
露西德 Lucide 是一个开源图标库，是 Feather Icons 的一个分支。
圣像 具有即时搜索功能的图标浏览器，由 Iconify 提供支持。
糟糕的图标 免费图标集合。
图标百科 Iconspedia 是一个包含大量高质量免费图标的网站。
图标中心 为每个人提供实用且令人惊叹的图标 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

徽标

徽标资源

网站                            描述
即时徽标搜索 数以千计的免费品牌标识（SVG-PNG）
LogoSear.ch 索引了超过 200,000 个 SVG 徽标的搜索引擎
SVGPorn 1000+ 高品质 SVG 徽标
支付系统徽标 支付系统徽标提供 png 和 svg 格式
浏览器徽标 高分辨率网络浏览器徽标
LogoHub 以 PNG 和 SVG 格式免费生成并下载您的徽标
矢量标志区 格式一致的 SVG 徽标
世界矢量标志 下载您喜爱的品牌的矢量徽标
徽标制作器 创建自定义徽标
免费徽标制作器 快速、一体化的徽标生成器 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

网站图标

网站图标资源

网站                            描述
Favicon.io 用文本、图片或表情符号生成网站图标。可下载 .ico 和 .png 格式
蚕蛹 生成所有尺寸和格式的图标以及支持所有可能的浏览器或设备所需的 HTML 代码
网站图标生成器 为您的网站生成 favicon ico 文件
RealFavicon生成器 为所有平台（Windows、iOS、Android）生成图标
字体图标 从 Font Awesome 图标生成图标和图像 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

图标字体

图标字体资源

网站                            描述
字体真棒 网络上最受欢迎的图标集和工具包
Line Awesome 用现代线条图标替换 Font Awesome
材料图标 材料设计图标库
离子图标 Ionic 团队精心制作的开源图标
Zurb基金会图标 可定制的 Foundation 图标
Fontisto 图标 Fontisto 标志性字体和 CSS 工具包 · 616+ 免费图标
盒子图标 Boxicons 是一个精心制作的开源图标免费集合
图标字体 2100+ 个免费图标为您的创意设计增添趣味
材质面板 自由选择 Material Design 的调色板、图标和颜色]
材料设计标志性字体 材料设计图标字体
Vscode 代码图标 Visual Studio Code 中的图标字体
德维肯 Devicon 是一组代表编程语言、设计和开发工具的图标
付款字体 适用于支付运营商和支付方式的时尚网页字体。包含 116 个图标
天气图标 Weather Icons 是唯一一款拥有 222 个天气主题图标的图标字体
笔画 7 202 个受 iOS 7 启发的细笔画图标
果酱图标 890+ 手工制作的图标，让您的 Web 应用更加出色
丰泰洛 200 多个网络图标，您可以自定义图标的名称或代码。
线状 Linea：拥有 750 多个免费图标
独角兽 一组 1100 多个免费线条样式图标可用作 Web 字体、SVG 图标以及 React、Vue 和 React Native 等 JS 框架的组件。
Mobirise 图标 一套免费的开源的 150 个优雅、像素完美的线性图标，可用作网页图标字体和 SVG 图标。
英雄图标 免费开源 Svg 图标库 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

库存照片

为您的网站和应用程序提供各种免费库存照片的网站

网站                            描述
Pexels 才华横溢的创作者分享的免费库存照片
Unsplash 互联网上免费使用图像的来源
Pixabay 超过 170 万张高质量图片和视频
玛格德莱娜 每日画廊和免费高分辨率照片
Picspree 免版税图片、库存照片、插图和矢量图
爆裂 免费素材集锦
免费摄影 免费收集高清图片
《像素人生》 免费高分辨率摄影
股票快照 每周添加数百张高质量照片
停尸房档案 超过 350,000 张可用于商业用途的免费库存照片
Kaboom 图片 库存摄影和调色板。适合产品图片
新旧库存 库存复古照片
图片巨无霸 不同类型的照片的精彩合集
公共领域图片 所有类型的公共领域图像
查找照片 搜索多个图片库网站
斯托克沃特 分类库存照片
占位符 一个免费的网络图片占位服务。您可以指定图片大小和格式
逼真的镜头 免费高分辨率库存照片
负空间 高分辨率免费图片
SkitterPhoto 免费高分辨率摄影
PicoGraphic 精美、高分辨率、免费的照片
神奇股票 令人惊叹的免费照片
地平线 免费图片和免费照片 - 高清壁纸
皮克塞尔 免版税照片
美食家饲料 食物照片素材
尿布 一个提供黑人和棕色人种的美丽高分辨率照片的网站。
生成的照片 独特的AI生成模型照片
重拍 独一无二的免费照片。精选图片，非图片库。
免费图片 查找并下载免费库存照片 - 全部免费用于个人和商业用途
Lorem 图片 一个易于使用的 API，用于获取精美的占位符图像。可以指定尺寸和其他参数。
科学图像 专注于科学和自然图像的图像库
集成应用网络图像库 免费图像为科学家、资源管理者、政府机构、社区团体和图形专业人士提供增强科学交流的资源。
虎耳草属 免费自然图像
知识共享 搜索可重复使用的免费图像。
AllTheFreeStock 精选的免费图片、音频和视频列表。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

库存视频

为您的网站和应用提供各种免费库存视频的网站

网站                            描述
Pexels 最大的免费视频库，由社区捐赠
Pixabay 大型免费视频库，由社区捐赠，类似 Pexels
Coverr.co 精美的免费库存视频素材
视频 免费高清素材和 4K 视频
混合套件 库存视频剪辑和音乐
视频生活 免费视频剪辑和循环
维德沃 免费和付费的库存视频
Loopvidz 免费使用 VIMAGE 应用创建的影院图表
斯普利特郡 精美且独家的免费库存视频和照片 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

库存音乐和音效

提供免费库存音乐和/或音效的网站

网站                            描述
免费库存音乐 适用于 YouTube 视频、播客等的免版税库存音乐
本桑德 免费下载免版税音乐并将其用于您的项目
Mixkit 为您的项目提供免费音乐
自由声音 免费的库存音乐和声音
免费音乐档案 为音乐家和声音爱好者提供的知识共享许可声音协作数据库
穆斯彭 一个免费在线古典音乐图书馆
联合 为您的项目提供免费的优质音乐🎁免版税。已在 YouTube 上发布。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

矢量图和剪贴画

免费矢量图、剪贴画、插图、图案等

网站                            描述
维克蒂齐 查找并下载免费矢量艺术
Freepik 免费矢量图、库存照片、PSD 和图标
免费矢量图 分享免费矢量图形的矢量爱好者社区
PNG树 png、背景、模板、文本效果
Vector4Free 免费矢量图形
复古矢量图 复古矢量图和图形
弗里布尔 矢量图、图案、模型等等
卢卡斯扎达姆 免费矢量艺术品
插图 100幅精美插图 - png、svg
剪贴画 从免费收藏中为您的项目选择精美的剪贴画、png、着色页、绘图等！
Growwwwkit 插图 一组 8 幅简洁、黑白、时尚的插图
trianglify.io 生成低多边形背景、纹理和矢量
斑点 为 Web 和 Flutter 应用生成 Blob 形状
嗨剪贴画 设计师共享和下载透明背景 PNG 剪贴画的社区
Freepik 的故事 一系列免费且可定制的项目插图
黑色插图 黑人的精美插图（免费和付费）
德莱设计 免费插图集锦及更多内容
自定义形状分隔线 免费工具，使设计师和开发人员可以更轻松地导出漂亮的 SVG 形状分隔线
施维雅医疗艺术 3000 张免费医学图像可用于说明您的出版物和 PowerPoint 演示文稿
克尔克 您可以使用免费剪贴画来制作任何您喜欢的东西
SVG波 用于 UI 设计的免费且可定制的渐变🌈 SVG 波形生成器。
遗产图书馆 复古插图（矢量和 png）
ROBOHASH 从任何文本生成独特的图像
虎斑纹 创建和定制最少生成的图案/艺术品以用于背景图像、打印和其他项目。
海庆 一款出色的多形状网络应用程序。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

产品和图像模型

创建设备和其他产品的模型

网站                            描述
智能模型 创建令人惊叹的产品模型（免费和付费）
媒体修改器 为您的产品提供精美的设计模型服务（免费和付费）
快照 为您的应用或网站设计创建漂亮的设备模型图像
斯克利利 立即将您的屏幕截图转换为模型
截图.rocks 在几秒钟内创建漂亮的浏览器和移动模型
屏幕峰值 从 URL 创建模型
模型世界 最大的免费逼真的在线模型来源
合作镜头 实时截屏和图像共享
Facebook 设备 流行设备的图像和 Sketch 文件
Threed.io 直接在您的浏览器中生成 3D 模型。
样机 适用于所有设备的 100% 免费模型，包括 IOS、Android、Windows Phone、笔记本电脑和台式机以及电视
设备照片 免费为社交媒体创建高分辨率设备模型
清洁模拟 使用最新的设备框架（如 iPhone X）和自定义背景创建令人惊叹的模型，让您的移动或网站设计脱颖而出，直接通过浏览器快速且免费。
模拟视频 通过在视频中添加设备框架立即创建模型。
MockupBro 使用在线模型生成器创建产品模型！只需选择一个模型，上传您的设计，然后下载无水印图片即可。
动画模型 在浏览器中创建动画模型🔥。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

HTML 和 CSS 模板

提供免费精美网站模板和各种主题的网站

网站                            描述
HTML5Up 非常现代、独特的响应式 HTML5/CSS3 主题
Templatemo 极简、简历、画廊主题等等
Templated.co 大量简约的 HTML5/CSS3 主题
免费HTML5 免费和高级 HTML5 和 Bootstrap 主题
风格呐喊 精心制作的免费网站模板
启动 Bootstrap Bootstrap 入门主题
零主题 HTML5、Bootstrap、Prestashop 模板
HTML5xCSS3 不同类别的精彩模板集合
Colorlib 几乎任何你能想到的主题类别
免费 CSS 大量免费模板
Hubspot 模板、信息图表、横幅等等
Mobirise 美观的 HTML5/CSS3 模板
靴子观察 Bootstrap 的免费主题
一页爱 单页网站、模板和资源
应用程序主题 免费的 Bootstrap 主题和登陆页面
BootstrapTaste 高级和免费的 Bootstrap 模板
BootstrapMade 使用 Bootstrap 的优雅、干净、漂亮的免费模板。
W3布局 W3Layouts：2020 年 3784 多个免费网站模板
工具盘 Tooplate：为每个人提供免费的 HTML 模板！
克鲁普 完全编码的 HTML 模板可帮助您轻松构建启动登录页面，而不会遇到麻烦。
UIdeck 免费登陆页面模板和 Bootstrap 主题
斯普拉尔 免费的网页模板助您启动您的想法！
W3css_模板 一些响应式 W3.CSS 网站模板供您使用。
全部免费下载 下载免费网站模板
混搭模板 HTML5/CSS3 免费模板 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

CSS框架

CSS/UI 框架可帮助构建美观的网站和应用程序

网站                            描述
Tailwind CSS 低级、实用优先的框架
引导程序 流行的 UI 框架，拥有大量使用 CSS 和 JS 的组件
实现 基于 Material Design 的现代响应式前端框架
材料设计精简版 基于 Material Design 的轻量级框架，无 JS 依赖
布尔玛 无需 JS 的现代 CSS 框架
骨骼 适用于基本 UI 元素的极轻框架
语义用户界面 通过创建 UI 共享词汇表，为设计师和开发人员提供支持
Semantic UI Semantic-UI 的社区分支
基础 具有清晰标记的移动优先框架
纯 CSS 一组小型、响应式的 CSS 模块
UIKit 轻量级、模块化的前端框架
苏西 轻量级的 Sass 网格布局引擎
Milligram.io 极简 CSS 框架
原始框架 用 Sass 编写的简单、可扩展的 CSS 框架
Spectre CSS 轻量级、现代的 CSS 框架
野餐 CSS 轻量级且美观的库
翼 专为极简主义者设计的精美 CSS 框架
乔塔 微型 (~3kb) CSS 框架
蓝图 CSS 轻量级布局库，用于构建可在任何地方使用的出色响应式移动优先 UI
W3.CSS 一个现代 CSS 框架，默认支持桌面、平板电脑和移动设备设计。设计为独立于 jQuery 或任何其他 JavaScript 库。
98.css 一个用于忠实再现旧 UI 的设计系统
NES CSS NES 风格的 CSS 框架
鞋带.css 使用未来 CSS 语法构建的轻量级、前瞻性 CSS 库
MVP.css 极简的 HTML 元素样式表。无需类名，无需框架，只需语义化的 HTML 即可。
Blaze.css 开源模块化 CSS 工具包提供出色的结构，可快速构建网站
炮塔 CSS Turret CSS 是一个用于开发响应式网站的样式框架。
可爱的表带 一个强大、独立的 CSS 框架。
速记 Shorthand 是一个免费的开源 CSS 框架，它允许您在不编写任何 CSS 的情况下进行独特而现代的设计
XP.css XP.css 是 98.css 的扩展。一个用于构建类似旧 UI 的界面的 CSS 库。
Framework7 Framework7 - 是一个免费的开源框架，用于开发具有原生外观和感觉的移动、桌面或 Web 应用程序。
提示.css 为您可爱的网站提供纯 CSS 工具提示库。
imagehover.io 纯 CSS 图像悬停效果库
mini.css 一个极简、响应迅速、与样式无关的 CSS 框架
超光速粒子 使用尽可能少的 CSS 创建快速加载、高度可读且 100% 响应的界面。
材料引导 使用 Bootstrap 进行材料设计
象牙 一个用于更快、更轻松地开发强大的 Web 界面的现代 CSS 框架
半月用户界面 一个响应迅速且轻量级的框架，旨在快速构建漂亮的仪表板和产品页面。
地铁4号线 使用 Metro 4 快速有效地创建您的网站。基于 html、css、javascript 构建的令人印象深刻的组件库。
css涂鸦 使用 CSS 绘制图案的 Web 组件
latex.css 让您的网站看起来像 LaTeX 文档
论文 CSS 前端打印解决方案
Windi CSS Tailwind CSS 的下一代编译器
卷云 CSS 一个华丽的 Web CSS 框架
古腾堡 正确打印网页的现代框架。 
点亮 世界上最小的响应式 fire css 框架（395 字节）。 
阿尔维斯 Arwes 是一个基于未来科幻设计、动画和音效构建用户界面的网络框架。 
博伊勒 Bojler 是一个电子邮件框架，用于开发响应式轻量级电子邮件模板，这些模板可以在每个最流行的电子邮件客户端上正确呈现。 
默契 适合初学者的原始 CSS 框架，无需类。 
终端 CSS 为终端爱好者打造的现代简约 CSS 框架。 
樱花 最小无类 CSS 框架/主题。 
PSone PS1 风格的 CSS 框架，灵感来自 NES.css。 
马克思 Marx 是无类 CSS 重置，可用于任何项目（即小型项目）。 
塔夫特 将您的网页设计得像 Edward Tufte 的讲义一样。 
阿克森蒂克斯 Axentix 是一个基于 CSS Grid 使用 HTML、CSS 和 JS 的开源框架。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

CSS 方法论

CSS 方法有助于编写模块化、可重用和可扩展的代码

网站                            描述
海外合作与交流服务 OOCSS 概念帮助我们编写灵活、模块化和可互换的组件。
原子 CSS Atomic CSS 是一种 CSS 架构方法，它倾向于使用小型、单一用途的类，其名称基于视觉功能。
边界元法 块元素修饰符是一种帮助您在前端开发中创建可重用组件和代码共享的方法。
斯玛特-麦克斯 SMACSS 是一种检查您的设计过程的方法，也是将那些僵化的框架融入灵活的思维过程的一种方法。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

CSS动画

CSS动画为网站和应用程序创建精彩的动画

网站                            描述
动画.css 只需添加水的 CSS 动画
Bounce.js Bounce.js 是一个工具和 JS 库，可让您创建漂亮的 CSS3 动画
Anime.js Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库，拥有简洁却强大的 API。它兼容 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
魔法动画 Animations 是最令人印象深刻的动画库之一
兹狗 圆形、扁平、设计师友好的画布和 SVG 伪 3D 引擎
CSShake CSShake 的功能正如其包装盒上所言——一个专为网页内抖动元素而设计的 CSS 库
悬停.css Hover.css 是一个 CSS 动画库，专为网站中的按钮和其他 UI 元素使用而设计
AniJS AniJS 是一个动画库，允许您以简单的“类似句子”的结构向元素添加动画
安尼米斯塔 按需 CSS 动画
超光速子-生命体 Tachyons 本身是一个原子 CSS 库，拥有大量的实用类，可以通过添加类来设计任何你需要的东西
Sequence.js Sequence.js 是一个 JavaScript 库，它提供了一个响应式 CSS 框架，用于创建独特的滑块、演示文稿、横幅和其他基于步骤的应用程序
无限 这些动画，例如旋转和脉冲，是专门设计来永远运行和重复的
讨厌的.CSS 为内心强大和心智脆弱的人制作的动画
动态用户界面 用于创建灵活的 CSS 过渡和动画的 Sass 库
关键帧.app 用于生成自定义 CSS 关键帧动画的图形用户界面
思想机器人 初学者的 CSS 过渡和变换
SVG艺术家 一个使用纯 CSS 代码为 SVG 图像中的描边和填充属性添加动画效果的实用工具
动画XYZ AnimXYZ 可帮助您为网站创建、自定义和编写动画。它支持 Vue、React、SCSS 和 CSS。
旋转 用最少的努力实现 CSS 加载动画！
汉堡包 Hamburgers 是一个美味的 CSS 动画汉堡图标合集。此外，它还包含一个 Sass 库作为源代码。它采用模块化设计，可自定义，所以您可以制作自己的汉堡包。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

Javascript动画库

JavaScript 动画库，用于为网站和应用程序构建精彩的动画

网站                            描述
格林索克 一个用于构建适用于所有主流浏览器的高性能动画的 JavaScript 库
Velocity.js Velocity 是一个轻量级动画引擎，其 API 与 jQuery 的 $.animate() 相同
lax.js 简单、轻量级的 vanilla javascript 插件可在您滚动时创建流畅、漂亮的动画！
Rellax.js 一个流畅、超轻量级、原生 JavaScript 视差库
three.js 一个易于使用、轻量级的 3D 库，带有默认的 WebGL 渲染器。
wow.js 滚动时显示动画。
巧克力.js 免费灯箱插件。
滚动动画 滚动库上的动画可在您滚动时显示动画。
Tilt.js 一个微小的 requestAnimationFrame 为 jQuery 提供 60+fps 轻量级视差悬停倾斜效果。
粗略记谱法 Rough Notation 是一个小型 JavaScript 库，用于在网页上创建和动画注释
ts粒子 一个轻量级的粒子创建库，是废弃和过时的particles.js的改进版本
粒子.js 用于创建粒子的轻量级 JavaScript 库
mo.js 网页动态图形工具带
灯箱2 一个小型 JS 库，用于在当前页面顶部叠加图像。
光滑 完全响应式轮播
barba.js 在您的网站页面之间创建流畅、平滑的过渡。
火车卷轴 一个简单的滚动库，提供视口中元素的检测和带有视差的平滑滚动。
猫头鹰旋转木马 免费响应式 jQuery 轮播
Swiperjs 免费、开源、无需 jQuery 的现代滑块。适用于 Vanilla JS 和所有现代框架，例如 React、Vue、Angular 等。
滑行 免费的纯 JS 库，用于轮播和滑块
简单视差 使用 JavaScript 实现视差效果的最简单方法
KUTE.js KUTE.js 是一个适用于现代浏览器的 JavaScript 动画引擎。
Granim.js 使用这个小型 javascript 库创建流畅且交互式的渐变动画。
流行运动 简单的动画库，用于令人愉悦的用户界面。
维武斯 Vivus 是一个轻量级的 JavaScript 类（没有依赖项），允许您为 SVG 制作动画，使其看起来像是被绘制的。
Typed.js JavaScript 打字动画库。
进度条.js 具有动画 SVG 路径的响应式、流畅的进度条。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

Javascript 图表库

帮助开发人员将数据可视化为图表的库

网站                            描述
ChartJS 为设计人员和开发人员提供简单而灵活的 JavaScript 图表
FrappeJS 包括类似 github 中的绿色方块网格和其他可供使用的图表。
G2Plot G2Plot 是一个基于图形语法的交互式响应式图表库。
谷歌图表 获取谷歌的经验来创建谷歌使用的类似图表。
数据驱动文档（D3） 将复杂、海量的数据绑定到交互式图表中。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

UI 组件和套件

不完全是“框架”，而是使用组件或 UI 工具包创建用户界面的工具

网站                            描述
少量 为 React、Angular、Vue 和 React Native 提供丰富的可复用 UI 组件库。也可用于与其他团队成员共享 UI 组件。
用户界面 面向网页设计师的极简、以 UI 为中心的编程语言
Medialoot CSS 组件 日历、价格表和其他 UI 组件
Froala 设计积木 超过 170 个响应式设计块可用于您的网络或移动应用程序
梅财政部 一个开源项目，提供基于 Material-UI 的可立即使用的组件集合。
Bootstrap 的材料设计 使用 Bootstrap 构建材料设计的开源工具包
Photonkit Electron 的桌面 UI 库
扁平化用户界面 最小免费用户界面套件
碎片 基于 Bootstrap 的免费现代 UI 工具包，适用于网页制作者
创意蒂姆 所有类型的 UI 库和工具包，包括 React 等 JS 框架
布鲁姆暗影制造者 制作 CSS 阴影的在线工具
管理员LTE 最佳开源管理仪表板和控制面板主题
SpinKit 简单的 CSS Spinners
史诗旋转器 与 Vue.js 集成的 CSS 旋转器集合。
Loading.io 用于创建简单动画、旋转器、进度条等的在线服务提供商
移动信件 使用 JavaScript 和 anime.js 制作动画文本
CSS布局 纯 CSS 流行的网页布局和模式集合
CSS 网格生成器 一个开源项目，允许用户基于 CSS Grid 快速创建动态布局。
科迪豪斯 使用 CodyHouse 的前端框架和可访问的 HTML、CSS、JavaScript 组件库启动您的 Web 项目
Tailwind 入门套件 Tailwind Starter Kit 是 TailwindCSS 的漂亮扩展，免费且开源
Tailwind工具箱 开源入门模板和组件、插件目录和有用的工具/实用程序，以启动您的 Tailwind CSS 项目。
顺风组件 使用 TailwindCSS 的社区组件的免费存储库
甜蜜警报 SweetAlert 使弹出消息变得简单而美观。
sweetalert2 一个美观、响应迅速、可定制、可访问的 JavaScript 弹出框替代品
尾块 开源即用型 Tailwind CSS 组件。
软元件 一组基于新拟态设计的与框架无关的 Web 组件。
快速地 可与 React、Vue 和 Angular 等现代 Web 框架一起使用的接口系统。
Lottie文件 多种格式的交互式动画，如 json、gif 和 mp4、Web 和移动设备的库和插件。
尾窗 使用 Tailwind CSS 实用程序类创建的组件，因此可以轻松定制以制作主题。
库蒂 一组可访问且可重复使用的预构建 Tailwind 组件，常用于 Web 应用程序中。
Tailwind 模板 Tailwindcss 模板的免费集合 - 用于快速 UI 开发的顺风组件。
针迹 使用功能性 CSS 的 HTML 模板生成器。
Meraki UI 组件 漂亮的 Tailwindcss 组件，支持 RTL 语言并基于 Flexbox 和 CSS Grid 完全响应。
Daemonites 材料设计用于 Bootstrap Daemonite 的 Material UI 是一个跨平台、完全响应的前端界面，基于 Google Material Design，使用 Bootstrap 4 开发
针迹 CSS-in-JS 具有接近零的运行时间、SSR、多变量支持和一流的开发人员体验。
无头用户界面 完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。
样式化组件 为您的应用程序和网站构建漂亮的 UI 组件。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

React UI

React JavaScript 框架的 UI 和组件库

网站                            描述
材质 UI 基于 Material Design 的 React 组件，可实现更快、更轻松的 Web 开发
Chakra 用户界面 快速构建可访问的 React 应用程序和网站。Openchakra
反应引导 Bootstrap 为 React 重新构建。直接在 JavaScript 中添加 Bootstrap 组件
UI-剧本 已记录的 UI 组件集合
ReactStrap 另一个用于 React 的 Bootstrap UI 库
React 管理员 用于构建管理应用程序的前端框架。支持开箱即用的 API
BlueprintJS 基于 React 的 Web UI 工具包
React 语义 UI 基于语义 UI 框架的 UI 组件
碎片反应 React UI 套件采用现代设计系统，包含数十个自定义组件
React 虚拟化 数据 UI 集。包括表格、列表、排序等。
React 工具箱 React 的 Material Design UI 库
弹性 UI 分发 UI React 组件和静态资产以用于构建 Web 布局
React 桌面 React 中的桌面样式组件。包括基于 MacOS 和 Windows 的组件
主题界面 根据基于约束的设计原则构建一致、可主题化的 React 应用程序
温泉反应 使用 React 和 Onsen UI 为混合移动应用程序分发组件
常绿 React 设计系统
重低音 使用样式系统构建的 React 原始 UI 组件
索环 移动优先 UI 组件库
林布尔 React 设计套件、库和指南
登陆页面模板 用于 React 的开源登陆页面模板
元素用户界面 适用于 React.js 网站和应用程序的 UI 工具包
Ant Design 开源设计 React UI 库。
腰包 Bumbag 是一款友好的 React UI 套件，适用于 MVP 或大型应用程序。
PRIMEREACT 与设计无关、灵活且易于访问的 React UI 组件的终极集合
底漆组件 Primer Components 是实现 GitHub Primer 设计系统的 React 组件
轨道 用于旅行项目​​的设计系统和 React UI 组件。
基础网络 Base Web 提供了一套强大的开箱即用的组件
背包用户界面 Backpack 是我们用来构建前端应用程序的孤独星球工具集。
雷维兹 基于D3的React数据可视化库
React 套件 一套 React 组件、合理的 UI 设计和友好的开发体验。
反应弹簧 用于 React 应用程序的基于 Spring-physics 的动画库。
图表 基于 React 组件构建的可组合图表库。
Vercel UI 现代简约的 React UI 库
帧运动 一个用于支持生产级动画的 React 库。
反应光谱 Adobe 设计系统 Spectrum 的 React 实现。
React tsParticles 用于创建粒子的轻量级 React 组件
粒子-bg React 粒子动画背景组件
特雷克特 使用 TailwindCSS 作为前端框架开发的免费现代 React 模板和 UI 组件库
OAH-管理员 一个基于 Gatsby 的免费 React 管理仪表板模板，带有 oah-ui 组件和元素包。
Carolina 管理仪表板 免费的 React 管理模板由 Material-UI 组件框架提供支持，并遵循 Google 的 Material Design 规范，具有简洁清新的设计。
塔布勒 Tabler 是一个免费的 React 管理仪表板模板，适用于任何类型的后端 Web 应用程序。
Sha-el-设计 React 组件可实现更轻松的定制和更顺畅的开发流程。
React-WeUI React-WeUI 源于我们对 React 和微信 WeUI 设计的热爱。
Supabase 用户界面 受 Tailwind 和 AntDesign 启发的开源 UI 组件库。
环形用户界面 JetBrains Web UI 组件的集合。
React95 为您的 React 应用程序刷新 Windows 95 风格的 UI 组件。
雷基特 Reakit 是一个低级组件库，用于使用 React 构建可访问的高级 UI 库、设计系统和应用程序。
曾特 使用 React 编写的基本 UI 组件集合。
格式塔 一组支持 Pinterest 设计语言的 React UI 组件。
xstyled 为 React 构建的 CSS-in-JS 框架，具有基于 props 的实用程序，如 display、fontSize 或 rotate。
@use-gesture 用于 React 中组件绑定鼠标/触摸手势的 Bread n butter 实用程序。
反应彩虹 React Rainbow 是一个组件集合，可以可靠地帮助您快速构建应用程序。
巧克力用户界面 Choc UI 是一组可访问且可重复使用的组件，常用于 Web 应用程序中。
元素 用于轻松快速地构建现代应用程序的 React 组件库。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

视图界面

Vue JavaScript 框架的 UI 和组件库

网站                            描述
Vuetify 材料设计组件框架
引导 Vue 将 Bootstrap 组件与 Vue 结合使用
布菲 基于 Bulma 的轻量级 UI 组件
语义 UI Vue Semantic UI Vue 是 Semantic UI 的 Vue 集成
VEUI VEUI 是一个基于 Vue.js 的企业 UI 组件库。
优雅 Vue 应用程序的设计系统。
类星体 高性能 Material Design 组件套件，包含适用于 SPA、SSR、PWA、移动端（Cordova 和 Capacitor）、桌面端（Electron）和浏览器扩展的构建器
元素 Vue 的桌面 UI 库
鱼用户界面 适用于 Web 的 Vue UI 工具包
敏锐的用户界面 受 Google 的 Material Design 启发，VueUI 库具有简单的 API
温泉景观 使用 Vue 和 Onsen UI 为混合移动应用程序分发组件
Vuejs示例 一组实用的 Vuejs UI 组件
墨线 Inkline 是 Vue.js 的现代 UI/UX 框架，旨在创建完美的响应式 Web 应用程序
Vuesax 独特且可重复使用的 UI 组件
蚂蚁 基于 Ant Design 的 Vue UI 库
Shards Vue 高品质且免费的 Vue UI 套件，具有现代设计系统和数十个自定义组件
Prime Vue 功能强大且易于使用、功能多样、性能卓越的 Vue UI 组件库可帮助您构建令人惊叹的用户界面。
查克拉 UI Vue Chakra UI 是一个简单的模块化且可访问的组件库，它为您提供了快速构建 Vue 应用程序的构建块。
查看 UI 为各种技能水平的人们提供了数十个实用且美观的 Vue 组件，并配有详尽的文档。
粒子.vue 用于创建粒子的轻量级 Vue 2.x 组件
粒子.vue3 用于创建粒子的轻量级 Vue 3.x 组件
TC组件 一个高质量的可立即使用的组件库，可帮助您加快开发工作流程。
范特 基于 Vue 构建的轻量级移动 UI 组件。
平等的用户界面 基于 TypeScript 的开源 Vue 3 组件系统，适用于您的下一个项目
Mint 用户界面 Vue.js 的移动 UI 元素
立方体用户界面 一个非常棒的移动端 UI 库，由 Vue.js 实现
缪斯用户界面 基于 Vue 2.0 优雅的 Material Design UI 组件库
AT用户界面 AT-UI 是一个基于 Vue.js 的模块化前端 UI 框架，用于开发快速且强大的 Web 界面。
Vuikit 基于前端框架 UIkit 的一致且响应迅速的 Vue UI 库。
波浪用户界面 一个只有光明一面的 Vue.js UI 框架。
VueTailwind 一组针对 TailwindCSS 优化的 Lightview 和完全可定制的 Vue 组件。
奥鲁加 Oruga 是 Vue.js 的轻量级 UI 组件库，不依赖 CSS 框架。
BalmUI BalmUI 是 Vue.js 的模块化、可定制的 Material Design UI 库。
Weex 界面 一个基于Weex的丰富交互、轻量级、高性能的UI库。
瓦莱特 Varlet 是一个基于 Vue3 开发的 Material Design 移动组件库，由社区的合作伙伴开发和维护。
简单的用户界面 Vue 3 组件库。功能相当齐全。可自定义主题。使用 TypeScript。速度还不错。
维斯蒂克 适用于 Vue 3 的免费开源 UI 库🤘。
Vue 最终模式 Vue Final Modal 是 Vue.js 的一个微小、无渲染、移动友好、功能丰富的模态组件。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

角度用户界面

Angular JavaScript 框架的 UI 和组件库

网站                            描述
材质角度 基于 Material Design 的 Angular UI 库
NG Bootstrap 基于 Bootstrap 框架的 Angular UI 库
PrimeNG 强大的 Angular UI 组件库
温泉角 适用于 Angular 和 Onsen UI 的混合移动和 PWA UI 库
NG闪电 Lightning 设计系统的原生 Angular 组件和指令
NG语义 基于语义 UI 的 Angular UI 库
星云 可定制的 UI 套件、身份验证和 Angular 安全性
Alyle 用户界面 Angular 的最小组件集
NGX 引导程序 另一个基于 Bootstrap 框架的 Angular UI 库
NG佐罗 基于 Ant Design 的 Angular UI 库
数据表的分页 用于分页的 npm 库
多选下拉菜单 用于表单中的多选下拉菜单
NG颗粒 用于创建粒子的轻量级 Angular 组件
共价用户界面 Angular UI 平台专注于解决常见的企业需求
NGX基金会 基于老牌CSS框架基础的UI框架
明晰 VMware 集团开发的基于 CSS 的 Angular UI 框架
针叶林用户界面 Taiga UI 是完全可摇树的 Angular UI Kit，由多个基础库和多个附加组件组成。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

Svelte UI

Svelte Javascript 编译器的 UI 和组件库

网站                            描述
Svelte Material UI 基于 Material Design 的 Svelte UI 库
SvelteStrap 基于 Bootstrap 框架的 Svelte UI 库
纤薄的扁平化 UI 基于扁平化设计的 Svelte UI 库
苗条粒子 用于创建粒子的轻量级 Svelte 组件 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

React Native UI

React Native 框架的 UI 和组件库

网站                            描述
马格努斯用户界面 Magnus UI 是终极 UI 框架，可帮助您在 React Native 中轻松构建一致的用户界面
React Native UI 库 React Native UI（RNUI）是 Wix 为 React Native 提供的 UI 工具集和组件库
React Native 论文 React Native Paper 是一个高质量、符合标准的 Material Design 库，可以满足所有主要用例的需求
用户界面小猫 UI Kitten 是一个用于创建出色的跨平台移动应用程序的 React Native 框架。它基于设计系统，将您的产品从 MVP 阶段推进到企业阶段。
React Native 元素 跨平台 React Native UI 工具包，提供用于在 React Native 中创建应用程序的一体化 UI 工具包。
NativeBase React Native 和 Vue Native 的基本跨平台 UI 组件。
Shoutem UI Shoutem UI 工具包使您能够轻松构建具有专业外观的 React Native 应用程序。
顺风-rn 在 React Native 项目中使用 Tailwind CSS。
Ant Design Mobile RN 基于 Ant 设计的基于 React Native 的可配置移动 UI 组件库。
SnackUI SnackUI 是用于 React Native + react-native-web 的 UI 套件，通过优化编译器，其运行速度更快。
莫蒂 Moti 是 React Native 的通用动画包 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

设计系统和风格指南

设计系统、风格指南、工具包、文档。其中一些是顶级公司/网站的设计指南

网站                            描述
材料设计 谷歌的 Material Design
Ant Design 企业级产品设计系统
Apple 设计资源 使用 Apple 设计和 UI 的指南和模板
底漆 使用 GitHub 的设计系统进行设计、构建和创作
阿尔塔用户界面 Oracle 的设计系统和工具包
脉冲 设计系统、指南和 React 组件库
螺栓 强大的 Twig 和 Web 组件支持的 UI 组件
清晰设计系统 UX 指南、HTML/CSS 框架和 Angular 组件
AtlasKit Atlassian 官方 UI 库，根据 Atlassian 设计指南构建
奥迪设计资源 奥迪 UI 设计系统和工具包
碳设计系统 Carbon 是 IBM 针对产品和体验的开源设计系统
Yelp 风格指南 Yelp 风格指南、组件和工具包
彗星 可扩展的视觉语言、组件和设计资产设计系统
ETrade 设计系统 将财务与简单易用融为一体的指南和工具包
基础库 开源和社区驱动的项目，提供一致的用户界面
信息设计 为 Infor 产品创造有意义体验的指南和资源
词汇表 打造精美 UI 的体验语言
Mailchimp 用户界面/用户体验 Mailchimp 的样式指南和组件
漫威风格指南 一套设计原则和组件
Microsoft Fluent UI 微软的用户体验框架集合
Pluralsight 设计系统 使用 Pluralsight 进行设计的组件设计指南
北极星 为 Shopify 所有商家创造卓越体验的设计系统
Mozilla 协议 Protocol 是 Mozilla 和 Firefox 网站的设计系统
SendGrid 样式指南 用于在 SendGrid 上开发一致 UI/UX 的 UI 库
VTEX 风格指南 VTEX 中与产品设计相关的可重复使用模式、组件和资产
里佐 包含 UI 组件、JS 组件、小部件等的样式指南
雾化 UI 框架可帮助开发人员与设计师协作并轻松构建一致的用户界面
StyleGuides.io 包含 500 多个风格指南的目录
完成设计系统 开源设计系统、指南和组件
斯柯达品牌体系 斯柯达品牌应用程序开发设计指南
光谱 Adobe 的设计系统提供组件和工具来帮助产品团队更高效地工作，并使 Adob​​e 的应用程序更具凝聚力。
沥青 Gojek 的设计语言系统。一系列指南和组件，旨在打造卓越的用户体验。
用户体验法则 设计师在构建用户界面时必须考虑的关键准则的集合。
清单设计 清单设计是一份精心挑选的清单，涵盖网站页面、UI 组件，直至品牌资产。
人性化设计 一种资源，通过关注用户福祉的模式为设计符合道德人性化的数字产品提供指导。
准备指南 一套非常通用的开源指南，灵感源自人机界面。由 Pr1mer Tech 创建并维护。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

在线设计工具

各种在线设计工具，从照片编辑器到线框图等等

网站                            描述
Figma 在线图形设计工具（免费和付费选项）
向量 免费矢量图形软件
塔勒 通过数百个可定制的模板，在几分钟内创建社交媒体横幅设计
Canva 创建精美的设计（免费和付费）
获取 Waves 免费的 SVG 波形生成器，用于为网页设计制作独特的 SVG 波形
Clippy 简单的 CSS 剪辑路径生成器
花式边框半径 CSS 中指定 border-radius 的八个值（border-radius 生成器）
Wireframe.cc 线框图工具（免费和付费）
福托尔 照片编辑器和设计师
Pixlr 在线照片编辑器
Animoto 视频制作器 在线制作视频
移除BG 删除图像背景
照片创建器 创建自己的照片，而不是搜索库存
维斯梅 创建演示文稿、信息图表等
信息图 创建信息图
ChartGo 在线创建图表和图形
卡通照片 将照片变成卡通片
异想天开 线框、图表等（4 个免费）
白板 在线绘图工具
章鱼 网站地图生成器
CTA按钮制作器 创建行动号召按钮
斑点制造者 Blobmaker 是一款免费的生成设计工具，可帮助您快速创建随机、独特且有机的 SVG 形状。
人物角色 适合现代人的有趣头像生成器
软用户界面 软 UI（新拟态）CSS 生成器
照片 在线 Photoshop 编辑器
神卡利德 用于绘制手绘图表的虚拟白板
图表 图表软件和流程图制作器
地图秒数 使用地图可视化数据的简单方法
格瑞德·马尔文 创建 CSS 网格时参考的 CSS 网格速查表
弗莱克斯·马尔文 使用 flexbox 时参考的 flexbox 网格速查表
智能升频器 将图像分辨率提高 2-4 倍
获取头像 由 Fang-Pen Lin 使用 Pablo Stanley 草图库制作的有趣且丰富多彩的免费头像网页生成器工具
大头 使用 Robert Broersma 的 Big Heads 轻松为您的项目生成头像。
Webflow 打破代码障碍，更快构建更优质的商业网站。无需编码。
痕迹 立即从照片中去除背景
Neumorphism.io 生成 Soft-UI CSS 阴影代码
数据库设计器 免费在线设计您的数据库
Ui 面包店 以可视化方式创建功能齐全的 Web 应用程序
仿的 将真实代码变成伪代码
里夫 实时交互式设计工具，可让您设计、制作动画并立即将您的资产集成到任何平台。
取消筛选 100%自动免费删除视频背景
科德肖特 将您的源代码转换为漂亮的图片，用于您的文章、推文、消息、帖子……
维克斯 创建一个你引以为豪的网站
GTmetrix 网站速度和性能优化
框架器 是团队的原型设计工具
Draw.io 免费在线图表编辑器工具
UXWing SVG编辑器 在线创建和编辑 SVG
CSS 箭头 创建并导出自定义框的 CSS 代码，该框带有从侧面延伸的箭头。非常适合工具提示、弹出窗口等。
Lucidchart 图表和可视化工具，允许创建数据库、流程图、图板、楼层地图等。免费套餐包含 3 个多页文档
碳 通过键入或拖放文件来创建并共享源代码的精美图像。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

可下载的设计软件

用于 UI、照片、3D 建模等的免费软件。Photoshop 等付费软件的替代品

网站                            描述
瘸子 与 Photoshop 类似的免费开源图像编辑器
Gravit 设计师 适用于所有平台的免费全功能矢量图形设计应用程序
混合器 开源、免费动画、3D建模等。
原始疗法 跨平台原始图像处理程序
时髦一点 在线设计程序
克里塔 专为数字艺术家设计的素描和绘画程序
铅笔项目 GUI原型软件
Inkscape 强大的免费设计工具
Adobe XD Adobe 的免费设计工具
形状.so 可以在项目中用作代码的图标
疯狂 Windows 版 Sketch
InVision Studio InVision 的免费屏幕设计工具
暗桌 免费开源摄影工作流程应用程序和原始开发人员
Inpixio 照片编辑器 免费照片编辑器：仅适用于 Windows
颜色选择器 开源颜色软件：轻松检索、操作和存储您的颜色！ 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

设计灵感

这里有一些可以获得设计和 UI 灵感的网站

网站                            描述
Behance 不同创作者的设计项目
滴答 不同创作者的设计项目
科德韦尔 在真实世界的设计模板上练习您的 HTML、CSS 和 Javascript 技能
Foxyapps 从最佳移动应用程序设计中获得设计灵感
Httpster 展示来自世界各地的人们制作的网站
灵感 设计师和设计界的最新设计作品
设计笔记 为产品设计师提供免费的在线资源库
土地簿 显示大量网站以帮助寻找灵感
前端导师 使用 HTML、CSS 和 Javascript 解决现实世界的 UI 挑战
艾沃德斯 一个评选并收集世界上 UI 最好的网站的网站
科多普 一个收集最佳 UI 创意和模式并制作教程的网站
SaaS登陆页面 探索顶级 SaaS 公司创建的最佳登陆页面示例
Saaspages.xyz 最佳登陆页面的集合，重点关注文案和设计。
UI运动 UI Movement 是一个设计爱好者社区，分享和讨论最有趣和独特的 UI 设计
拉帕忍者 最佳登陆页面灵感
自由前端 使用 css html 和 javascript 进行免费前端设计。最新作品一些设计部分
网框 发现并受到精美的 Web 应用程序设计的启发
收集用户界面 每日灵感，源自每日 UI 存档及其他资源。精选，每日更新。
图形汉堡 该网站提供免费和付费图标、模型、UI 套件、文本效果和背景。该网站的资源既有免费资源，也有付费资源。图标格式包括 PNG、SVG、EPS 和 Sketch。有些资源比较混乱，因为免费资源中间夹杂着赞助内容。
非常好的电子邮件 该网站向用户提供大量公司电子邮件，涵盖客户服务到营销等各个方面。
免费设计资源 提供字体、模型、模板图形和 UI 工具包的网站。
网站启发 siteInspire 展示了最优秀的网络和交互式设计。
网页设计灵感 一个提供网页设计灵感的网站，每日更新。
导航导航 响应式导航示例
卡托伊达 收集不同的网络组件以获得灵感。
MediaQueris 一系列使用媒体查询和响应式网页设计的鼓舞人心的网站
穆兹利搜索 设计灵感搜索引擎
DeviantArt 欣赏 3.7 亿件艺术作品，激发灵感。
设计你的方式 收集不同的网页和移动设计
Humans.fyi 一系列精彩的个人网站，可按照每个网站使用的颜色和网络技术进行筛选。
SiteSee 精心挑选的美丽而现代的网站画廊。
UI车库 每日精心挑选的 UI 灵感和模式。
电子商务设计 电子商务网站设计图库和技术灵感。
设计提名 评选和展示最佳网站、应用程序和游戏的展示会。
设计库 现实世界数字产品的截图和图案库 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

图像压缩

允许压缩大图像的网站

网站                            描述
TinyPNG 智能 PNG 和 JPEG 压缩
Optimizilla 在线 JPEG 和 PNG 优化器/压缩器，带有设置和存档下载
Compressor.io JPEG、PNG、GIF、SVG 压缩
Squoosh.app Google Chrome 实验室的图像压缩
批量调整照片大小 批量图像调整大小、压缩和转换，在浏览器内执行所有任务（可离线工作）
iLoveIMG 最快的免费网络应用程序，可轻松修改图像
SvgOMG 在线 SVG 优化器具有大量设置，可以直接在其中剪切和粘贴 svg 代码。
压缩JPEG 压缩尺寸大于 5MB 的 JPEG 图像
立即压缩 JPEG、GIF、PNG 压缩
促销图片调整器 免费图像和照片调整器
图像优化器 免费的图像优化器，提供质量选项
SVG最小化 此工具可删除多余的信息，从而减小 SVG 文件的大小
JPEG 优化器 用于调整和压缩数码照片和图像以便在网络上显示的免费在线工具
调整大小.app 在线调整图像大小
EZGif 动画 GIF 制作器和图像编辑器，包括图像优化并支持 WebP 转换
在线Png工具 调整 png 大小而不丢失透明背景。
维雷克西夫 删除图像中的元标签以减小图像大小并提高隐私安全性
维克塔纳米 使用无损压缩技术，通过删除不必要的数据来压缩低效的 SVG 代码。（免费 & 付费） 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

Chrome扩展程序

对设计师和 Web 开发人员有用的 Chrome 扩展程序。

网站                            描述
什么字体 识别网页字体的最简单方法。
WhatRuns 探索网站运营的奥秘。框架、分析工具、WordPress 插件、字体——应有尽有。
Web 开发人员 添加带有各种 Web 开发工具的工具栏按钮。
超棒的截图和屏幕录像机 全页面屏幕捕获和屏幕录像机 - 二合一。立即分享屏幕录像视频
daily.dev - 为忙碌的开发者提供新闻 轻松获取编程新闻。只需打开新标签页，即可轻松搞定。忙碌开发者的必备工具！
JSONView 验证并查看 JSON 文档。
JSON Lite 用于查看 JSON 文件的浏览器扩展。
窗口调整器 调整浏览器窗口大小以模拟各种屏幕分辨率。
响应式查看器 一次显示多个屏幕，响应式设计测试器
浏览器堆栈 立即在任何桌面或移动浏览器上测试您的网页。
维斯布格 使用 JavaScript 构建的开源网页设计调试工具
关键帧 浏览器内 CSS 动画创建器。
Kontrast - WCAG 对比度检查器 在浏览器中快速检查并实时调整对比度以满足 WCAG 2.1 要求
完美像素 在开发的 HTML 顶部添加半透明图像覆盖，以便轻松地在它们之间执行像素完美比较，这对于复制 UI 设计很有用。
农药 将 Pesticide CSS 插入当前页面，概述每个 HTML 元素以便更好地查看页面上的位置，有助于构建布局。
站点调色板 设计师和前端开发人员为任何网站获取颜色的必备工具。
移动/响应式网页设计测试员 测试响应式网页设计或可检测特定用户代理的移动页面。同时测试多个设备！
ColorZilla 高级吸管、颜色选择器、渐变生成器和其他丰富多彩的功能
Lorem Ipsum 生成器（默认文本） 提供一种优雅快捷的方式来创建默认文本或生成 Lorem Ipsum。已针对快速使用进行了优化，但可以自定义。
JavaScript 和 CSS 代码美化器 打开 .css/.js/.json 文件时美化 CSS、JavaScript 和 JSON 代码
Imageye - 图片下载器 查找并下载网页上的所有图片。使用 Imageye，您可以查找、浏览并下载网页上的所有图片。
GoFullPage - 全页屏幕截图 完整可靠地捕获当前页面的屏幕截图 - 无需请求任何额外权限！
Stylebot 立即改变网页的外观。
ColorPick 吸管 缩放吸管和颜色选择器工具可让您从网页等中选择颜色值。
React 开发者工具 将 React 调试工具添加到 Chrome 开发者工具中。它允许您在 Chrome 开发者工具中检查 React 组件层次结构。
Wappalyzer Wappalyzer 是一个技术分析器，可以向您展示网站是用什么构建的。
假填充物 伪填充器是一种表单填充器，它使用虚假/虚拟数据填充页面上的所有输入。
页面标尺 Redux Web 开发人员\设计师标尺可获得完美的像素尺寸和定位，以测量任何网页上的元素。
Web 编辑器 网页编辑器是一种工具，它为您提供了一种增强的方式来检查任何网站元素、改变它们的属性、插入内容、设计和以您想要的方式进行可视化。
CSS查看器 一个简单的 CSS 属性查看器。
字体忍者 从任何网站上识别字体、添加书签、试用并购买。
灯塔 一种开源、自动化工具，用于提高 Web 应用程序的性能、质量和正确性。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

其他的

未分类的内容

网站                            描述
everysize.kibalabs.com 检查您的出色响应式网页在各种尺寸下都看起来很棒
Devhints.io 这是互联网上的一些小抄
Web 工具箱 为 Web 开发人员、程序员和设计师提供的一系列方便、免费的工具。
WebDevTrick 一个以许多令人惊叹的 HTML、CSS、JQuery 设计而闻名的博客。
css技巧 免费的 CSS 技巧和一些适合初学者和高级用户的独特想法
材料设计调整器 交互式查看器，可帮助设计师在桌面、移动设备和平板电脑上测试材料设计断点
Nodesign.dev 为缺乏或完全没有艺术天赋的开发人员提供的工具集合
A11ygator 一个根据 WCAG 规则扫描网站的网络工具
承诺者 命令行工具根据标准格式化提交消息
CleanCss 代码格式化器、压缩器、文件转换器工具
小帮手 为 Web 开发人员提供的免费单一用途在线工具集合
CSS 功能区生成器 该生成器将帮助创建纯 CSS 角带。
我可以使用 检查前端技术的跨浏览器兼容性。
kangax-js-兼容表 检查 JavaScript 版本（ES5、ES6、ES2016+ 等）在不同编译器、服务器/运行时和平台（桌面和移动设备）之间的兼容性。
mydevice.io 最常用的设备分辨率，包括手机和平板电脑
Codepen 构建、测试和发现前端代码。
响应式 设计师和前端开发人员可在所有平台上轻松设计和调试的工具
html2pdf.js 使用纯 JS 进行客户端 HTML 到 PDF 的渲染。
CSS 参考 所有 CSS 属性和定义的详细集合
关键路径 CSS 生成器 为您的网页生成关键 CSS
SVG 吞食者 浏览器扩展用于在网页上查找 SVG 并下载、复制到剪贴板或导出为 PNG。
短代码.dev HTML、CSS、JavaScript、Node、Artisan、Blade 等的有用片段和代码示例的集合。
播放代码 Javascript 游乐场。
所有标签 所有 HTML 标签均进行了简要解释。
Vue 遥测 揭示为任何网站提供支持的 Vue 插件和技术堆栈，或探索 5500 多个网站的数据库。
Grid.js Grid.js 是一个用 TypeScript 编写的免费开源 HTML 表格插件。它兼容大多数 JavaScript 框架，包括 React、Angular、Vue 和 VanillaJs。
杰里拉斯 Gerillass 是一个基于 Sass 构建的网站开发工具，它为前端开发人员提供了一组 Sass mixins 和函数来生成可扩展的 CSS 输出。
草图化 Sketchize 专为 UI/UX 设计师打造，帮助他们为移动设备、平板电脑和桌面设备设计精美的应用程序。
{CSS}门户 CSSPortal 拥有大量 CSS 生成器、工具和资源。
开发文档 DevDocs 在一个快速、有条理且可搜索的界面中结合了多个 API 文档。
纸张尺寸 国际纸张尺寸、尺寸和格式的最佳资源。
火柴棒 直观地比较您的代码和设计。将您的模型与您的实际网站进行比较，以找出任何缺失的细节。
flexboxfroggy 通过编写 CSS 代码来帮助 Froggy 和朋友们！
Designbetter 图书 关于推动最佳设计团队前进的实践的必读内容。
OverAPI 所有备忘单的集合。
页夹 静态 HTML 表单服务器
盾牌 创建具有您自己定制风格的徽章。
威廉斯·夏基 随机 SVG 图形生成器
Bootstrap 备忘单 Bootstrap 类、变量和混合宏的交互式列表。您唯一需要的 Bootstrap 速查表。
二维码生成器 使用二维码生成器轻松为您的项目创建二维码。
论文数据库 最大的纸张数据库，包含公制和英制单位的尺寸、尺寸和格式。 
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Enter fullscreen mode Exit fullscreen mode

此列表由 Brad Traversy 和此处的其他贡献者提供。

结论

希望这份清单对您有所帮助。如果您需要任何帮助，请在评论区告诉我。

让我们在Twitter和LinkedIn上联系

👋 感谢阅读，下次再见

文章来源：https://dev.to/suhailkakar/best-design-resources-for-developers-4f
Devto 翻译
PREV
导入组件时停止使用 ../../../，而是使用此方法
NEXT
Git 和 Github 终极指南