独立开发者出海必备：全方位设计与UI资源汇总

UI 图形
字体
颜色
图标
标志
收藏图标
图标字体
股票照片
stock 视频
音乐与音效
矢量图与剪贴画
产品及图片原型
HTML & CSS 模板
CSS 框架
CSS 方法学
CSS 动画
JavaScript 动画库
JavaScript 图表库
UI 组件与套件
React UI 库
Vue UI 库
Angular UI 库
Svelte UI 库
React Native UI 库
设计系统与样式指南
在线设计工具
可下载的设计软件
设计灵感
图像压缩
Chrome 扩展程序
Firefox 扩展程序
AI 图形设计工具
其他项

UI 图形

采用现代 UI 组件的不同格式（如 PSD、Sketch、Figma 等）的网站和资源。它们非常适合获取网页组件/UI 的想法。

Website	Description
SVG 正弦波	为您的前端项目导出完美的正弦波 SVG
UI Design Daily	各种类型的精彩 UI 组件
100 Daily UI	免费的 Figma 库，包含产品、元素和屏幕
Sketch App Sources	Sketch UIs，线框图，图标以及更多内容
Humaaans	混合搭配的人物插画
Paaatterns	免费的美丽图案集合，适用于所有向量格式
404 插图	免费的 404 页面插图
Drawkit.io	为设计师和初创公司提供的插图
Absurd.design	供设计师和开发者使用的免费超现实主义插画
Undraw.co	任何你所能想象和创作的想法的开源插画
Manypixels.co	单色等轴高质量插图
Open Peeps	手绘插图库
InvisionApp	免费的高质量 UI 套件、图标包和原型设计合集
Open Doodles	一组免费的手绘插图
Avataaars	免费的头像插图库，由 Pablo Stanley 创作
blush	免费可自定义的插画，通过 Figma 插件实现
Hero Patterns	一组可重复使用的 SVG 背景图案
BEAUBUS 图案	一个包含 150 多个免费 SVG 图案（背景）的集合
IRA Design	Creative Tim 的开源渐变插图集合。
透明纹理	一系列透明纹理背景图案。
icons8.com/illustrations	基于矢量的插图，让您的项目更出色
Patternico	无缝图案制作器
Pixeltrue 插画	免费动画插画
Abstract 用户头像 API	用于从用户名或电子邮件创建简单而灵活的用户头像的 API
sketchvalley	下载免费的 PNG、SVG 或 AI 文件。
PatternPad	免费且无限的独特图案设计。
Dimensions	Dimensions.com 是一个不断更新的参考数据库，记录了日常物体和空间的标准尺寸和测量数据，这些数据来源于详细的图纸文档
Freebiesbug	由手工挑选的资源，面向网页设计师和开发人员，并持续更新。
Flexiple	每天一个新的高质量、开源插图。
Cool Text	Cool Text 是一个免费的图形生成器，适用于网页以及其他需要精美 logo 但不需要太多设计工作的任何地方
插画工具包	每日新增优质开源插图
Doodad 模式生成器	创建独特、无缝且免版税的图案。
Pattern Monster	一个简单的在线图案生成器，用于创建可重复的 SVG 图案
Exemplar	Figma 和 Sketch 的免费头像库
UIBundle	数千个免费设计资源，包括 UI 套件、原型、插图、图标、字体、3D 资产和模板等。
openby.design	定制打造的免费 UI 设计资源，适用于个人和商业项目。无需署名。
设计条纹	无需设计技能，创作美丽的插画。
HOLA SVG！	一个用于分享 SVG 内容的 SVG 游乐场。
symu.co	免费的模板、UI 套件、图标、PSD
网状渐变	生成并下载漂亮的网状渐变。
CSS 阴影渐变	生成 CSS 渐变用于阴影。
Creatica	生成独特且美丽的背景和图案。
无聊头像	SVG 随机，可爱的头像集合
Html 到设计	将任何网站转换为完全可编辑的 Figma 设计
fffuel	颜色工具和免费 SVG 生成器的集合，用于渐变、图案、纹理、形状及背景
Mesher	一个完全免费的工具，仅使用 CSS 代码创建漂亮的网格渐变。您可以自定义颜色或选择随机生成的颜色来构建最流行的 CSS 渐变

字体

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

Website	Description
Google 字体	包含大约 1000 个免费字体家族的库
DaFont	免费下载字体的档案库
使用与修改	个人精选美丽、优雅、朋克、专业、不完整、怪异的字体
1001 免费字体	我想这个名字就说明一切了/:smirk:
Font Squirrel	Font Squirrel 搜索互联网以寻找高质量的合法免费字体
Font Fabric	一个数字字体铸造厂，为各种品牌打造零售字体和定制字体设计
Just Free Fonts	一个精选收藏，包含可用于商业使用的免费软件字体、开源字体和公共领域字体
Tiff	一种通过可视化方式对比两个字体之间差异的类型差分工具
TypeKit 实践	了解排版实践
Fontjoy	一键生成字体搭配
黄金比例	黄金比例排版计算器
FontGet	提供了多种字体可以下载，并且按标签整理得井然有序
FontPair	帮助你搭配 Google 字体
Font Space	一个以设计师为中心的免费字体网站，提供快速可定制预览
抽象字体	免费提供用于个人和商业用途的字体
免费字体	一系列高质量的字体
Leon Sans	一种由代码制作的几何无衬线字体
Lexend	一种经验上证明能显著提高阅读能力的可变字体
苹果平台字体	获取使用苹果平台应用程序中的系统字体所需的信息、框架和工具
SFWin	San Francisco 字体适用于 Windows 10 和非 Apple 平台
Font Flipper	在不下载字体的情况下，在您自己的设计基础上预览 800 多种 Google 字体
Fonts Arena	免费精选字体
Befonts	免费的高质量字体
阿拉伯文字体	阿拉伯文免费字体
FontDrop	一种简单易用的方式来查看字体文件的内容
Open Foundry	免费的精选开源字体平台
Glyphter	上传您自己的 SVG 文件并将其转换为字体文件。如果您希望加载的库更小，这会很有用。
Google Webfonts Helper	一种轻松的自助托管 Google 字体的方式
Rough Font Awesome	当 RoughJS 遇上 Font Awesome
FFonts	免费的 stylish 字体
马拉雅拉姆字体	由自主马拉雅拉姆计算机(SMC)维护的免费马拉雅拉姆字体
Dev Fonts	免费查找和使用编程字体
Font M	你可以下载用于材料编码和设计的免费字体
W Fonts	下载免费字体
现代流体排版编辑器	流体排版是一种现代的响应式排版方法。
UrbanFonts	超过 8000 种免费字体和 dingbat 的集合
Typespiration	激励人心的字体组合和色彩搭配
Fontsource	通过整洁打包的 NPM 包本地托管开源字体。
FontBolt	从流行文化中发现并生成您最喜欢的字体。
Fontshare	Fontshare 是印度型-foundry（ITF）提供的一种免费字体服务，使高质量的字体对所有人开放。

颜色

与颜色相关的选择辅助网站和资源

Website	Description
Colorlab	在一个地方创建配色方案、渐变、颜色等级，以及检查对比度。
Color Brewer 2	原始颜色调色板生成器，也支持色盲。可能是最科学的选择。也可能不是最美的。
Huetone	一个用于创建无障碍颜色系统的工具。
Colormind.io	颜色调色板生成器
ColorCurves.app	一种使用曲线生成配色方案的调色板生成器
ColorGradient	一个免费的工具，用于视觉创建简单的和复杂的 CSS 渐变
Coolors	创建完美的配色方案或浏览数千种美丽的色彩方案以获得灵感
UI Colors	Tailwind CSS 颜色调色板生成器
HTML 颜色代码	通过我们的颜色选取器、颜色图表和 HTML 颜色名称，获取 HTML 颜色代码、十六进制颜色代码、RGB 值和 HSL 值
颜色与字体	一个精心挑选的颜色、字体和资源库
色彩搭配列表 Palette List	选择你喜欢的两种颜色，工具会为你生成数千种色彩搭配方案。
Google Material Color Tool	官方 Google 材料颜色调色板工具
Material Palette	免费挑选材料设计的调色板、图标和颜色
颜色空间	从一个颜色生成漂亮的色彩搭配方案
FlatUIColors	一系列丰富多彩的颜色_palette 集合
Adobe Color	创建配色方案，从图片中提取渐变等
Colorsinspo	一个查找所有有关颜色信息的一站式资源
ColorsWall	一个存储您的配色方案并一键生成配色的地点
Happyhues	Happy Hues 是一个色彩配搭灵感网站，由 Mackenzie Child 创建，展示了如何在设计项目中使用这些颜色，为实际应用提供了实例。
Adobe 趋势	发现来自 Behance 和 Adobe Stock 创意社区的不同行业的当前颜色趋势
Color Hunt	一个免费且开放的颜色灵感平台，提供成千上万个精心挑选的趋势颜色配色方案
Gradient Hunt	一个免费且开放的平台，提供数千个精选潮流色彩渐变灵感
Web Gradients	一个免费的网站，用于查找良好的 CSS 渐变效果
ColorBox	一个免费的网站，用于生成颜色集
CSS 渐变	一个可以制作自定义渐变和一些渐变示例的免费网站
gradienta	一个纯 CSS 和 JPG 渐变
UI 渐变	UI 渐变颜色生成器
配色生成器	每次按下空格键都会生成新的颜色配色
Material Palettes	1000+ 材料设计调色板
Grabient	颜色渐变选择器
ShadeSwash	快速生成任何颜色的阴影
BrandColors	最大的官方品牌颜色代码集合
品牌色板 (BRAND PALETTES)	标志颜色代码和配色方案
Material Design 色板生成器	生成类似 Material Design 的主题和色板
Colorate	为设计师和开发人员提供的颜色方案工具。这将帮助您汲取灵感，并作为您的颜色工作资源。
0 到 255	一种色彩工具，可以轻松调整颜色的明暗度。它非常适合用于悬停状态、边框、渐变以及其他更多用途。
色度混合器	一个显示两种颜色之间中间色调的工具
Gradient Buttons	即用型可粘贴渐变按钮
Khroma	Khroma 使用人工智能来学习你喜爱的颜色，并为你创建无限的色板，供你发现、搜索和保存。
whocanuse	一个工具，旨在提高人们对色差如何影响不同视力受损人士的认识和理解。
Colorable	色彩组合对比测试器
色块十六进制拾色器	一种可以获取颜色的十六进制代码以及颜色名称的工具。
萨鲁瓦卡君	网站及应用设计的惊艳配色方案，附有预览
Paletton	Paletton.com 是一个设计用颜色工具，旨在帮助创建搭配和谐的颜色组合。
Colorzilla	一个强大的在线 Photoshop 风格的 CSS 渐变编辑器
CSS 渐变编辑器	你可能只需要这个工具来创建 CSS 渐变背景和图案。
图像颜色拾取器	图像颜色拾取器和配色方案生成器
CombineCOLORS	颜色混合工具
Color Lovers	它将显示在外界流行的颜色方案。
HTML CSS Color	免费在线颜色（美国英语）或颜料（英国英语）工具：提供色彩信息、渐变生成器、色轮等。
HEX 颜色代码	它可以通过我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、Hex 颜色代码、RGB 值以及 HSL 值。
CoolHue 2.0	一个免费工具，展示不同格式（CSS 和 PNG）的渐变示例
Colors.lol	这是由 Twitter 机器人生成的有趣的配色方案，每个颜色都有十六进制代码和描述性名称。
colors.dopely	超快且简单的配色方案生成器，palette 可以在几秒钟内保存和分享。
UIColor Picker	一个包含十六进制代码的 UI 颜色集合，可以直接点击复制。
颜色十六进制	颜色-十六进制提供有关颜色的信息，包括颜色模型（RGB、HSL、HSV 和 CMYK），并为选定的颜色生成简单的 CSS 代码。
FarbVelo	一个随机配色方案生成器
户外家具颜色	浏览其他设计师制作的颜色palette，生成并提交您自己的颜色方案
多	多是由我从个人项目或网络上发现的颜色组合汇集而成的集合。
Lospec 调色板列表	The Lospec Palette List 是一个像素艺术调色板数据库。
Palettte App	从一种颜色平滑过渡到另一种颜色来构建流畅的颜色方案。
Eggradients	使用鸡蛋制作的渐变背景颜色。
Gradientos	轻松查找和测试渐变。
Encycolorpedia	用于引用网页颜色的网站。包含色彩知识、网页颜色及十六进制颜色代码等内容。
Croma	强大的颜色工具，包括色彩拾取器、颜色选择器和配色方案生成器。
Color Designer	一种从一种颜色生成渐变的颜色设计师。
Duotone	在任何项目中使用美观的免费双色图像，或通过上传自己的图片并在几秒内应用双色效果来自定义双色图像。
coolbackgrounds 生成器	探索一个精美精选的背景集合，你可以将它们添加到博客、网站中。
颜色渐变生成器	我们可以快速生成我们喜爱的颜色或任何颜色的色调，以创建包含多种颜色渐变的模板或 CSS 组件，并且该网站还提供了更多实用工具
Huemint	Huemint 使用机器学习为您的品牌、网站或图形创建独特的配色方案
InclusiveColors 调色板创建器	创建自定义无障碍的 Tailwind 风格色彩调色板，您可以在整个配色块中修改 HSL 曲线，检查 WCAG/APCA 对比度，然后导出为 Tailwind/CSS/Figma/Adobe
AiSeka	发现 AiSeka 创造的最佳色彩配色盘与色彩工具。

图标

包括 png、svg 以及更多类型的图标资源

Website	Description
Circum Icons	作为 React、Vue 和 Svelte 的 SVG 一致开源图标
UXWing	优化良好，可商用的免费图标
Shapedfonts Iconclub	免费图标超过 8000 个
Feather Icons	漂亮且可自定义的开源图标
Tabler Icons	支持 React、Preact、Vue、Svelte 和 SolidJS 的 3500 多个高度可自定义的开源 SVG 图标
Xicons	从 fluentui-system-icons、ionicons 等集成的 SVG Vue/React 组件（Vue3、Vue2、React、SVG）。
Iconoir	免费的 900 多个开源图标库
Simple Icons	常见品牌的 1307 个免费 SVG 图标
Linear Icons	1000 多个超清晰矢量图标
Icons8	免费图标、照片、矢量图和工具
扁平图标	包含 PNG、SVG、EPS、PSD 和 BASE 64 格式的免费图标最大数据库
图标库	超过 200 万枚精心策划的图标，由全球社区创建
Iconscout	在一个地方免费下载图标、插画和股票照片
IconSear.ch	拥有超过 50,000 个 SVG 图标索引的搜索引擎
Nucleo App	Nucleo 是一个包含 27500 个图标美丽的图库，以及一个强大的应用程序，用于收集、自定义和导出所有你的图标。（免费及付费版本）
Icon-icons.com	免费图标 PNG、ICO、ICNS 和 SVG 矢量文件
Bootstrap 图标	免费图标，专门为 Bootstrap 设计但也可用于任何项目
Remix Icon	极简愉悦图标系统
Iconmonstr	发现 4496+ 免费图标，涵盖 313 个集合
Vivid.js	一个即用型的免费开源 SVG 图标打包 JavaScript 库。
Iconfinder	提供 SVG、PNG、CSH 和 AI 格式的免费和付费矢量图标
Lordicon	50 个免费的动画交互图标
UseAnimations	免费的 SVG 和 Json 格式动画图标（适用于 lottie）
css.gg	提供超过 700 种开源 CSS、SVG 和 Figma UI 图标，以 SVG 精灵形式存在，并支持 styled-components、NPM 及 API 访问
IconBros	7843+ 免费图标分为 182 个集合
Material Design Icons	一个图标集合，允许设计师和开发者为各种平台下载所需格式、颜色和大小的图标，用于任何项目。
Heroicons	来自 Tailwind CSS 创建者的免费开源图标。
Zondicons	一套可供你在数字产品中使用的免费优质 SVG 图标。
Endless Icons	一个提供多种免费图标网站。图标按类别标记，并且可以压缩成图标包。
Icomoon	浏览超过 5500 个免费图标。您可以添加任意一个图标的集合，以便轻松浏览和搜索其中的图标。
Eva Icons	Eva Icons 是一个包含超过 480 个精美工艺的开源图标集合，用于常见的动作和项目。
Cryptoicons	包含 430 个加密货币和法定货币图标的一套。完全免费。
Ikonate	完全可自定义且无障碍的矢量图标
appicon	快速为您的 iOS、macOS 和 Android 项目生成不同尺寸的应用图标
LineIcons	设计师和开发人员必备的 2000+ 核心线图标
Evericons	Evericons 是 Aleksey Popov 设计的一套包含超过 460 个免费图标的大集合。
SVG Repo	为您提供可商业使用的免费 SVG 矢量图。
Convertio	在线免费将 PNG 文件转换为 SVG。（由其提供的服务之一）
CSS ICON	一个仅使用纯 CSS 代码制作的图标集合，无需依赖，即用即取的图标
统一图标 (Unified icons)	千余个图标，一个统一的框架。一个库，超过 40,000 个矢量图标。
系统 UI 图标	一个不断增长的集合中包含 220 多个图标。
IconPark	将 SVG 图标转换为多个主题，并生成 React 图标、Vue 图标、svg 图标
Radix Icons	一个由 Modulz 团队设计的清晰的 15×15 像素图标集合。所有图标均可作为单独的 React 组件、SVG 以及更多格式提供。
EOS 图标	一种像素完美的开源图标字体，可供作为连字和 SVG 使用。
Ionicons	用于网络、iOS、Android 和桌面应用的精美手绘开源图标。
Phosphor 图标	Phosphor 是一个适用于界面、图表和演示的灵活图标家族
Teeny Icons	TeenyIcons 是一种 SVG 格式的图标集，易于在 HTML 中使用
Lucide	Lucide 是一个开源图标库，是 Feather Icons 的分支。
Icones	Icon 探索器，支持即时搜索，由 Iconify 驱动。
烂图标	免费图标的集合。
Iconspedia	Iconspedia 是一个包含大量高质量免费图标的作品网站。
iconhub	为所有人提供的简洁炫酷图标
3DICONS	漂亮地精心制作的开源 3D 图标
IconsDb	免费定制图标
Emoji 指南	包含 3300 个 emoji 及其 HTML 代码的集合，方便使用。
独角兽图标	提供 100 多个可自定义的趣味动画图标。支持 JSON 和 SVG 格式。
萨格马图示	包含 275 多个开源图标，适用于 Figma、SVG 和 React。
Icon buddy	包含超过 10 万個開放源碼 SVG 圖標，完全可自訂以供設計師和開發人員使用。
圆图标	世界上最大的付费和免费图标库，包含扁平图标、线框图标、填充轮廓、等边形和实心风格的图标包。
Vectopus	顶尖设计师精选的优质资源集合。

标准 Logo

图标资源

Website	Description
LogoSear.ch	搜索引擎，索引了超过 200,000 个 SVG 标志
SVGPorn	1000 多个高质量 SVG 图标
支付系统标识	支付系统图标，提供格式为 png 和 svg
浏览器图标	高清网络浏览器图标
VectorLogoZone	一致格式化的 SVG 图标
世界向量徽标	下载您喜欢的品牌的向量徽标
Logo 制作器	创建自定义徽标
免费标志制作器	快速的全方位一体化标志生成器
LOGOwine	免费下载 SVG 矢量与 PNG 文件格式的品牌标志

网站图标

网站图标资源

Website	Description
Favicon.io	从文本、图像或表情生成网站图标。可下载为.ico 和.png 格式
Favicomatic	生成所有尺寸和格式的 favicon，以及支持每一种可能的浏览器或设备所需的 HTML 代码
favicon 生成器	为您的网站生成 favicon ico 文件
RealFaviconGenerator	为所有平台（Windows、iOS、Android）生成图标
FontIcon	从 Font Awesome 图标生成 favicons 和图片
Favicon.cc	在线绘制 favicon，并浏览其他用户制作的 favicon 库
Maskable.app 编辑器	根据您现有的图标生成可遮罩的 PWA 图标
Favicon 生成器	生成网站的图标文件。支持 SVG、可遮罩、图像最小化。纯前端实现，无隐私风险，速度快。

图标字体

字体图标资源

Website	Description
Font Awesome	互联网上最流行的图标集和工具包
Line Awesome	用现代线框图标替换 Font Awesome
Material Icons	Material 设计图标库
IonIcons	来自 Ionic 团队精美制作的开源图标
Zurb Foundation 图标	可自定义的 Foundation 图标
Fontisto 图标	Fontisto 标志性的字体和 CSS 工具包 · 免费提供 616 多个图标
Boxicons	Boxicons 是一个免费的开源图标集合
Icofont	2100+ 免费图标，让您的创意设计更加精彩
Material Palette	免费选择 Material Design 的调色板、图标和颜色
Material Design Iconic Font	材料设计图标字体
Vscode Codicons	Visual Studio Code 的图标字体
Devicon	Devicon 是一组图标，代表编程语言、设计及开发工具
PaymentFont	一款简洁的网页字体，适用于支付运营商和方法。包含 116 个图标
Weather Icons	Weather Icons 是唯一包含 222 个天气主题图标的专业图标字体
Stroke 7	202 细描图标，灵感来源于 iOS 7
Jam Icons	890+ 手工制作的图标，让您的网络应用更加出色
Fontello	包含 200 多个网页图标，您可以在其中自定义图标的名称或代码。
Linea	Linea：内置 750 多个免费图标
Unicons	一个包含 1100 多个免费线条风格图标的选择，这些图标可以作为网页字体、SVG 图标使用，并且可以在 React、Vue 和 React Native 等 JS 框架的组件中使用。
Mobirise 图标	一个包含 150 个优雅的、像素完美线性图标的手动开源集合，可供作为网页图标字体和 SVG 图标使用。
Hero Icons	免费开源的 SVG 图标库
React Icons	一个开源且免费的 SVG 图标库，它集合了你最喜欢的图标库如 Font Awesome 和 Material Icons，为你提供广泛选择的 SVG 图标。

股票照片

提供各种免费股票照片的网站，可供您用于自己的网站和应用程序中

Website	Description
Pexels	来自才华横溢的创作者分享的免费-stock-照片
Unsplash	互联网上可免费使用的图片来源
Pixabay	超过 170 万+高质量的 stock 图片和视频
魔德莱娜	每日画廊及免费高清图片
Picspree	无需版税的图片、股票照片、插图和矢量图
Burst	免费股票照片集合
Gratisography	免费的高分辨率图片免费收集
Life of Pix	免费的高分辨率摄影图片
Stock Snap	每周新增数百张高质量照片
Morguefile	超过 350,000 张可用于商业使用的免费 stock 照片
Kaboom Pics	图片素材和颜色调色板。适用于产品图片
新旧股票,[],()	股票复古照片
Pic Jumbo	不同类型的高质量图片集合
公共领域图片	公共领域各类图片
查找一张照片	搜索多个 stockphoto 网站
Stockvault	分类的股票照片
占位符	一个免费的网页用图示占位服务。你可以指定图片大小和格式
真实画质图片	免费的高分辨率股票照片
负空间	高分辨率免费 stock 照片
SkitterPhoto	免费的高分辨率摄影
PicoGraphy	高美感、高分辨率、免费的照片
Wunder Stock	品质卓越的免费照片
PxHere	免费图片及免费股票照片 - PxHere
Piqsels	无需版权费的股票照片
食尚厨房	食品照片 stock
Nappy	一个提供高质量黑人和棕色皮肤人种照片的网站。
生成的照片	唯一的 AI 生成模型照片
Reshot	唯一的免费图片。精心挑选，非 Stock 图片。
免费图片	查找并下载免费 stock 照片 - 适用于个人和商业用途
Lorem Picsum	一个易于使用的 API，用于获取漂亮的占位图片。可以指定大小和其他参数。
科学影像	一个专门收录科学与自然图片的图像库
集成与应用网络图像库	提供免费图片，用于为科学家、资源管理者、政府机构、社区团体和图形专业人士增强科学沟通提供资源。
Saxifraga	免费自然图片
Creative Commons	搜索可免费重用的图片。
AllTheFreeStock	一个精选的免费股票图片、音频和视频列表。
Lorem.space - 占位图生成器	提供占位图的 API，非常有用！
Openverse	Openverse 是一个开放许可媒体的搜索引擎
ISO 共和国	获取数千张免费高分辨率 Stock CC0 照片

股票视频

提供各种免费股票视频的网站，可供您用于自己的网站和应用

Website	Description
Pexels	最大的免费视频库，由社区捐赠
Pixabay	大型免费视频库，由社区捐赠，类似于 Pexels
Coverr.co	漂亮的免费视频片段
Videezy	免费高清视频素材及 4K 视频
Mix Kit	视频片段及音乐资源
Life Of Vids	免费视频片段和循环
Videvo	免费和付费视频素材
Loopvidz	免费使用的 Cinema 图形，由 VIMAGE 应用创建
SplitShire	漂亮且独特的免费 stock 视频及图片
免费股票视频	免费素材股票视频

股票音乐与音效

提供免费股票音乐和/或声音效果的网站

Website	Description
YouTube Studio 音频库	适用于下载音乐和音效的免版税音频库。已获准在 YouTube 上进行收益变现。
免费股票音乐	适用于 YouTube 视频、播客等的 royalty-free 股票音乐
Bensound	免版权音乐免费下载，并在您的项目中使用
Mixkit	为您的项目提供免费音乐
Freesound	免费的音效和背景音乐
免费音乐档案	合作共创的创意共用音轨数据库，供音乐人和声音爱好者使用
Musopen	一个在线的公共领域古典音乐图书馆
Pixabay	为您的项目（如 YouTube 视频、音乐、短视频、电影、播客等）免费下载音乐。
Unminus	免费高端音乐，为您的项目加油！🎉 免版税。通过 YouTube 审核。

向量图与剪贴画

免费矢量图、剪贴画、插图、图案及其他资源

Website	Description
Vecteezy	在 Vecteezy 上查找和下载免费的矢量图形
Freepik	免费矢量图、股票照片、PSD 文件和图标
免费矢量图 https://www.freevectors.net/	矢量图爱好者的社区，共享免费矢量图形
PNGTree	PNG 图，背景，模板，文本效果
Vector4Free	免费矢量图形
Freeble	向量图、图案、模型以及更多内容
卢卡扎达姆	免费矢量艺术作品
插画作品	美丽的 100 幅插画 - png, svg
剪贴画	从免费收藏中选择优秀的剪贴画、png 图片、绘画作品以及其他内容，为您的项目增色！
Growwwkit 插画	一套 8 个简单、黑白、风格化的插画
trianglify.io	生成低多边形背景、纹理和向量
blob	为 Web 和 Flutter 应用程序生成 Blob 形状
HiClipart	一个设计师分享和下载透明背景 PNG 剪贴画的社区
来自 Freepik 的故事	一个免费且可自定义的插画集合，适用于各类项目
Black Illustrations	漂亮的黑人插画（免费和付费）
德勒设计	一系列免费插图及其他内容
自定义形状分隔符	一款免费工具，使设计师和开发人员更容易导出漂亮的 SVG 自定义形状分隔符
Servier Medical Art	提供 3000 张免费医学图片，用于 illustrate 您的出版物和 PowerPoint 演示文稿
Clker	你可以使用在这里找到的免费剪贴画，用于任何你喜欢的地方
SVG 波纹	一个免费且可自定义渐变 🌈 的 SVG 波纹生成器，适用于 UI 设计。
BGjar	为您网站、博客和应用程序生成免费的 svg 背景。
遗产图书馆	旧时插画 (矢量图和 png 格式)
ROBOHASH	从任何文本生成独特的图像
Tabbied	创建并自定义简约生成的模式/艺术作品，用于背景图片、印刷及其他项目。
海凯	一个超赞的多形状网页应用。
矢量图	一个包含各种摩洛哥矢量图的优秀网站。
Heazy	几秒内获取独特的向量资产。
Mossaik	免费的 SVG 生成器，包含不同的工具、波纹、瓷砖、气泡等元素。

产品与图像原型

创建设备和其他产品的原型图

Website	Description
MockCity	通过自动将图像放置在智能对象中，从 PSD 模板批量生成模拟图。视觉编辑器允许您更改智能对象参数，并实时查看更新的模拟图预览。
智能模型图	创建 Stunning 产品模型图（免费及付费版本）
媒体修饰器	为您提供产品（免费及付费）的美丽设计模拟图服务
Shot Snap	为您的应用程序或网站设计创建漂亮的设备原型图片
Screely	instantly 将你的屏幕截图转化为原型图
截图 rocks	在几秒钟内创建漂亮的浏览器和移动设备原型图
Screen Peak	从 URL 创建一个原型
Mockup World	在线最大的免费写实 Mockups 资源库
Collab Shot	实时屏幕快照和图片分享
Facebook 设备	流行设备的图片和草图文件
Threed.io	在浏览器中直接生成 3D 模型图。
Mockuphone	全部设备的 100%免费原型图，包括 IOS、Android、Windows Phone、笔记本电脑及桌面设备和电视
设备截图	为社交媒体创建高分辨率设备原型图，完全免费
Clean Mock	使用最新的设备框架（如 iPhone X）和自定义背景创建令人惊叹的原型图，让你的移动应用或网站设计在浏览器中快速且免费地脱颖而出。
Mock.Video	通过添加设备框架来即时创建视频模拟图。
MockupBro	使用在线模型生成器创建产品模型！只需选择一个模型，上传您的设计并下载无水印的图片。
Animockup	在浏览器中创建动画原型图 🔥。
Pika	instantly create browser mockups and beautiful images for marketing, blog posts, and more
Lunacy	从零开始免费创建原型图

HTML & CSS 模板

提供各种类型免费漂亮网站模板和主题的网站

Website	Description
HTML5Up	非常现代且独特的响应式 HTML5/CSS3 主题
模板帝国	极简、简历、画廊主题以及其他更多内容
FreeHTML5	免费和付费的 HTML5 及 Bootstrap 主题
StyleShout	擎妙精心打造的免费网站模板
Start Bootstrap	Bootstrap 拼图主题
ThemeWagon	不同类别的一系列 HTML5 Bootstrap 模板集合
Colorlib	几乎你可以想到的任何主题类别
免费 CSS	巨大的免费模板集合
Hubspot	模板、信息图形、横幅以及其他更多内容
Mobirise	带有精美外观的 HTML5/CSS3 模板
Bootswatch	适用于 Bootstrap 的免费主题
Onepagelove	单页网站、模板和资源
App 主题	免费的 Bootstrap 主题和着陆页模板
BootstrapTaste	高级和免费的 Bootstrap 模板
BootstrapMade	使用 Bootstrap 制作的优雅、简洁且美丽的免费模板。
W3 布局	W3 布局: 提供 2020 年超过 3784 个免费网站模板
Tooplate	Tooplate：everyone 可以免费使用的 HTML 模板！
Cruip	完整编码的 HTML 模板，帮助你轻松构建启动页面而无需烦恼。
UIdeck	免费着陆页模板和 Bootstrap 主题
Splawr	为您提供启动创意的免费网页模板！
W3css 模板	一些响应式的 W3.CSS 网站模板供你使用。
全免费下载	下载免费网站模板
mashup-template	HTML5/CSS3 免费模板
Sneat Bootstrap 5 HTML Admin Template	开源且易于使用的 Bootstrap 5 HTML 管理员模板，具有优雅的设计和独特的布局。
HTMLRev	免费的精美 HTML5 模板和着陆页面
Horizon UI	基于 React 的最热门开源管理模板
KeenThemes	免费和专业版的 Html/Css3、Bootstrap5、Vue、React、Laravel 模板
ScrewFast	开源的 Astro 网站模板，配备了简洁且可自定义的 TailwindCSS 组件

CSS 框架

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

Website	Description
Tailwind CSS	低级别，实用为主的原则框架
Bootstrap	一个流行的 UI 框架，包含大量使用 CSS 和 JS 的组件
Materialize	一个基于 Material Design 的现代响应式前端框架
Material Design Lite	基于 Material Design 的轻量级框架。无 JS 依赖
Bulma	一种无需 JavaScript 的现代 CSS 框架
Skeleton	极其轻量的基本 UI 元素框架
统一 CSS	完全可配置的实用工具生成器和完全基于 Sass 构建的 CSS 框架
Semantic UI	通过创建 UI 共享词汇表来赋能设计师和开发者
Fomantic UI	Semantic-UI 的一个社区分支
基础 (Foundation)	移动优先的框架，带有简洁的标记语言
纯 CSS	一组小巧的响应式 CSS 模块
UIKit	轻量级且模块化的前端框架
Susy	一款轻量级的 Sass 网格布局引擎
Milligram.io	极简 CSS 框架
Vanilla Framework	用 Sass 编写的一个简单且可扩展的 CSS 框架
Spectre CSS	轻量级、现代的 CSS 框架
Picnic CSS	轻量且美观的库
翼	一个为极简主义者设计的美丽 CSS 框架
Chota	一个微小的（约 3kb）CSS 框架
Blueprint CSS	一个轻量级的布局库，用于构建出色的响应式移动优先 UI，在任何地方都能正常工作
W3.CSS	一个现代的 CSS 框架，自带对桌面、平板和移动设备设计的支持。该框架旨在独立于 jQuery 或其他任何 JavaScript 库使用。
98.css	一个用于构建经典复古 UI 重现的设计系统
NES CSS	NES 风格的 CSS 框架
Shoelace.css	一个轻量级、前瞻性 CSS 库，使用未来的 CSS 语法构建
MVP.css	一个极简的 CSS 样式表，用于 HTML 元素。不使用类名，不依赖框架，只需使用语义化的 HTML 即可完成。
Blaze.css	开源模块化 CSS 工具包，提供快速构建网站的强大结构
Turret CSS	Turret CSS 是一个样式框架，用于响应式网站的开发。
Cutestrap	一个强大且独立的 CSS 框架。
XP.css	XP.css 是 98.css 的扩展。一个用于构建具有旧 UI 外观的界面的 CSS 库。
Framework7	Framework7 - 是一个免费且开源的框架，用于开发具有原生外观和感觉的移动、桌面或网络应用程序。
Hint.css	一个纯 CSS 提示框库，适合您的精美网站。
imagehover.io	仅用纯 CSS 实现的图片悬停效果库
mini.css	一个简洁、响应式、风格无关的 CSS 框架
超轻量 CSS 框架 Tachyons	使用尽可能少的 CSS 创建快速加载、高度可读且 100%响应式的界面。
Material Bootstrap	带有 Bootstrap 的 Material Design
Ivory	一个现代的 CSS 框架，用于更快更轻松地开发强大的网页界面
半圆 UI	一个响应式且轻量级的框架，专为快速构建美观的仪表盘和产品页面而设计。
Metro 4	使用 Metro 4，您可以快速有效地创建您的站点。它基于 HTML、CSS 和 JavaScript 构建了一个令人印象深刻的组件库。
css-doodle	一个使用 CSS 绘制图案的 Web 组件
latex.css	让您的网站看起来像一份 LaTeX 文档
Paper CSS	前端打印解决方案
Windi CSS	尾 Wind 尾 CSS 的下一代编译器
Cirrus CSS	一个以组件和实用工具为中心的 SCSS 框架，旨在实现快速原型设计。
Gutenberg	一个现代框架，用于正确打印网页。
lit	世界最小的响应式 CSS 框架（395 字节）。
Arwes	Arwes 是一个基于未来科幻设计、动画和音效构建用户界面的 Web 框架。
Bojler	Bojler 是一种用于开发响应式和轻量级电子邮件模板的邮件框架，这些模板在各种流行的邮件客户端中都能正确渲染。
Tacit	原始 CSS 框架，适用于初学者，无需使用类。
Terminal CSS	一个现代且简约的 CSS 框架，适合终端爱好者。
樱花	一个简约的无类别的 CSS 框架/主题。
PSone	PS1 风格的 CSS 框架，受到 NES.css 的启发。
Marx	Marx 是用于任何项目（尤其是小型项目）的无类 CSS 重置。
Tufte	使你的网页风格如同爱德华·Tuft 的手册。
Axentix	Axentix 是一个基于 CSS Grid 的开源框架，使用 HTML、CSS 和 JS 实现。
Raster Simple Grid System	一个简约且直观的 CSS 网格系统，利用描述性的 HTML 而非语义化的 CSS。
flowrift	Flowrift 是一个由精心设计的 Tailwind CSS UI 模块组成的库。
twind	体积最小、速度最快、功能最齐全的 tailwind-in-js 解决方案
Pico.css	无需.class 且所有原生 HTML 元素均具有优雅的样式，同时启用了暗色模式。
clay.css	一个可扩展和可配置的微 CSS 实用类和 SASS 混入，用于为您的组件添加黏土风格样式。
BeerCSS	快速构建 Material Design 界面，无需开发者压力 🍻。首款实现 Material Design 3 的 CSS 框架。
UnoCSS	UnoCSS 是即用型原子化 CSS 引擎，设计灵活且可扩展。核心无偏见，所有的 CSS 工具类都是通过预设提供的。
Neptune CSS	Neptune CSS 是一个轻量级的 CSS 框架。使用它可以让您的网站开发更加高效。
StyleX	StyleX 是一个简单易用的 JavaScript 语法和编译器，用于样式化 Web 应用。
Orbit	Orbit 是第一个用于创建简单或复杂圆周界面的 CSS 框架。

CSS 方法学

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

Website	Description
OOCSS	OOCSS 概念帮助我们编写灵活、模块化且可互换的组件。
原子化 CSS	原子化 CSS 是一种 CSS 架构方法，它偏好具有基于视觉功能命名的小而单一目的的类。
BEM	块元素修饰符是一种方法论，有助于你在前端开发中创建可重用的组件和代码共享。
SMACSS	SMACSS 是一种审视设计过程的方式，并且是将那些僵化的框架融入灵活思考过程的方法。
CUBE	CUBE CSS 是一种面向简单性、实用性和一致性的 CSS 方法论。

CSS 动画

使用 CSS 动画为网站和应用程序构建 awesome 级别的动画

Website	Description
Gradienty 动画	超过 600 个精选动画随时可供复制粘贴。
Animate.css	极简 CSS 动画
Bounce.js	Bounce.js 是一个工具和 JavaScript 库，允许你创建由 CSS3 驱动的美丽动画
Anime.js	Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库，具有简单但强大的 API。它支持 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
魔力动画	动画一直是可用的最令人印象深刻的一组动画库之一
Zdog	一个用于 canvas 和 SVG 的圆润、扁平且设计友好的伪 3D 引擎
CSShake	CSShake 恰恰如其名——一个专门用于在网页中摇动元素的 CSS 库
Hover.css	Hover.css 是一个 CSS 动画库，设计用于网站上的按钮和其他 UI 元素
AniJS	AniJS 是一个动画库，允许你在简单的“句子式”结构中为元素添加动画
Animista	按需 CSS 动画
Tachyons-animate	Tachyons 本身是一个原子 CSS 库，包含了大量的实用类，通过为所需内容添加类可以基本设计任何东西
Sequence.js	Sequence.js 是一个 JavaScript 库，提供了一个响应式的 CSS 框架，用于创建独特的滑块、演示文稿、横幅以及其他基于步骤的应用程序
无限	这些动画，比如旋转和脉冲效果，都是专门设计来无限循环运行的
OBNOXIOUS.CSS	为勇敢者的心和软弱者的思想准备的动画
MOTION UI	一个用于创建灵活的 CSS 过渡和动画的 Sass 库
Keyframes.app	一个图形用户界面，用于生成自定义 CSS 关键帧动画
thoughtbot	对初学者而言的 CSS 过渡和变换
SVG Artista	一个有用的工具，可以使用纯 CSS 代码在 SVG 图像中动画化描边和填充属性
AnimXYZ	AnimXYZ 帮助你为你的网站创建、自定义和组合动画。适用于 Vue、React、SCSS 和 CSS
Whirl	CSS 加载动画，轻松实现！
汉堡图标	汉堡图标是一个包含美味 CSS 动画效果的汉堡图标集合。此外，还包含了 Sass 库形式的源代码。它是模块化且可定制的，所以你可以自定义自己的汉堡图标。
CSS 加载指示器与旋转图标	这是一个包含不同类型的 CSS 加载指示器和旋转图标的库
Motion One	一个新的动画库，基于 Web Animations API，旨在实现最小的文件大小和最快的性能。
pocoloco	为您的网站生成动态背景
AniX	一个超级简单且轻量级的 CSS 动画库。
AOS	动画滚动库。
Animatopy	无需额外配置的 CSS 动画片段

JavaScript 动画库

使用 javascript 动画库为网站和应用程序构建 awesome 动画

Website	Description
GreenSock	一个用于构建高性能动画的 JavaScript 库，可以在所有主要浏览器中工作
Velocity.js	Velocity 是一个轻量级的动画引擎，其 API 与 jQuery 的 $.animate() 相同
lax.js	一个简单且轻量的原生 JavaScript 插件，当你滚动页面时可以创建平滑而美丽的动画！
Rellax.js	一种丝滑流畅、极其轻量级的原生 JavaScript 远近错视库
three.js	一个易于使用、轻量级的 3D 库，内置了默认的 WebGL 渲染器。
Atropos	Atropos 是一个轻量级、免费且开源的 JavaScript 库，用于创建令人惊叹的手动友好型 3D 滚动悬停效果。
wow.js	滚动时显示动画效果。
chocolat.js	免费的轻量级画廊插件。
Animate On Scroll	滚动显示动画的库，当您滚动时会揭示动画。
Tilt.js	一个由请求动画帧驱动的每秒 60 多帧的轻量级鼠标悬停倾斜效果，适用于 jQuery。
Roughnotation	Rough Notation 是一个小型的 JavaScript 库，用于在网页上创建和动画效果标注
tsParticles	一个轻量级库，用于创建粒子效果，是废弃且过时的 particles.js 的改进版本
Particles.js	一个轻量级的 JavaScript 库，用于创建粒子效果
mo.js	用于网页的 motion 图形工具包
Lightbox2	一个小型的 JS 库，用于在当前页面上层叠显示图像。
Slick	完全响应式的轮播图
barba.js	在您的网站页面之间创建流畅和平滑的过渡。
Locomotive Scroll	一个简单的滚动库，提供了视口内元素检测及具有 parallax 效果的平滑滚动。
Owl Carousel	免费的响应式 jQuery 图片轮播插件
Swiperjs	免费、开源、无需 jQuery 的现代滑块。适用于原生 JavaScript 以及 React、Vue、Angular 等所有现代框架。
Splide	免费的纯 JavaScript 库，用于实现轮播和滑块效果
简单视差	使用 javascript 实现视差效果最简便的方式
KUTE.js	KUTE.js 是一个针对现代浏览器的 JavaScript 动画引擎。
Granim.js	使用这个小巧的 JavaScript 库创建流畅且交互式的渐变动画。
Popmotion	用于打造迷人的用户界面的简单动画库。
Vivus	Vivus 是一个轻量级的 JavaScript 类（没有依赖项），它允许你动画化 SVG，使其呈现出被绘制出来的效果。
Typed.js	一个 JavaScript 打字动画库。
进度条.js	响应式且流畅的进度条，带有动画的 SVG 路径。
Midnight.js	Midnight.js 让你能够随时切换固定表头
Tingle.js	Tingle 是一个用纯 JavaScript 编写的简单模态插件
Theatre.js	Theatre.js 是一个带有图形用户界面的 JavaScript 动画库。它能够动画化 DOM、WebGL 以及任何其他 JavaScript 变量。
splidejs	Splide 是一个用 TypeScript 编写的轻量级、灵活且无障碍的滑块/轮播组件。没有依赖，也没有 Lighthouse 错误。
nice-waves	漂亮的动画波浪
Vanta.js	几行代码即可实现动画化的网站背景。
Splitting.js	Splitting 创建元素并添加 CSS 变量，解锁为文本、网格以及更多内容进行动画处理的无限可能！

JavaScript 图表库

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

Website	Description
ChartJS	适用于设计师与开发者的简单而灵活的 JavaScript 图表库
FrappeJS	包括类似 GitHub 的绿色方格网格以及其他图表可供使用。
G2Plot	G2Plot 是基于图形语法的交互式和响应式的图表库。
Google 图表	从谷歌那里获得创建类似谷歌使用的图表的经验。
Data Driven Documents (D3)	将复杂庞大的数据绑定到互动图表中。
ApexCharts.Js	现代且互动的开源图表
Chartist	简洁的响应式图表
Vizzu	Vizzu - 一个免费的开源 JavaScript 库，用于构建动画图表、数据故事和交互式探索器。
AntV	Ant 设计图表，一款优秀的文档支持的免费 JS 图表库，用于动态数据
Nivo	Nivo 提供了超充能的 React 组件，可以轻松构建数据可视化应用。它基于 d3 构建，并具备服务器端渲染能力和完全声明式的图表。
ECharts	一个使用声明性语法快速构建基于 Web 的可视化图形开源 JavaScript 可视化库
VChart	VChart 不仅是一个开箱即用的多终端图表库，还是一位生动灵活的数据讲故事者。
VTable	VTable 是基于 Canvas 开发的高性能多维分析组件。与传统的 DOM 表格组件相比，VTable 主要解决了大数据量环境下渲染和交互性能的问题。
VStory	VStory 是一个功能丰富的叙事系统，可以利用 VisActor 的 VChart 和 VTable，结合内置组件来创建视觉作品。

UI 组件与套件

并不完全是“框架”，但是一些用于使用组件或 UI 套件创建用户界面的工具

Website	Description
Bit	提供了大量可重用的 UI 组件库，适用于 React、Angular、Vue 和 React Native。还可以与其他团队成员共享这些 UI 组件
UILang	一个面向网页设计师的简约且以用户界面为重点的编程语言
Medialoot CSS 组件	日历、价格网格及其他 UI 组件
Froala 设计块	超过 170 个响应式设计块，随时可以在您的 Web 或移动应用中使用
Flowbite	基于 Tailwind CSS 组件的开源库
daisyUI	Tailwind CSS 组件
Mui 财库	一个基于 Material-UI 的开源项目，提供了一组现成可用的组件。
Material Design For Bootstrap	一个基于 Bootstrap 构建 material 设计的开源工具包
Photonkit	用于 Electron 的桌面 UI 库
Flat UI	极简免费用户界面套件
Shards	一个基于 Bootstrap 的免费且现代的 UI 工具包，适用于网页制作者
Themesberg	基于 Bootstrap 和 React 的免费且开源的网站主题、模板和 UI 套件
创意时光	各种 UI 库和套件，包括 React 等 JS 框架
布姆阴影生成器	一个在线工具，用于制作 CSS 阴影
AdminLTE	最优秀的开源管理仪表盘及控制面板主题
SpinKit	简单的 CSS 自转器
Epic Spinners	使用 Vue.js 集成的 CSS 动画加载指示器集合。
Loading.io	一个在线服务提供商，用于创建简单的动画、加载 spinner、进度条等
Moving Letters	使用 JavaScript 和 anime.js 实现的动画文本
CSS 布局	一系列纯 CSS 实现的流行网页布局和模式
CSS Grid Generator	一个开源项目，允许用户快速基于 CSS Grid 创建动态布局。
HTML 表生成器	创建语义化、响应式且无障碍的 HTML 表格以展示您的表格数据。设置 CSS 属性，生成代码并复制粘贴到您的项目中。
Codyhouse	使用 CodyHouse 的前端框架和无障碍的 HTML、CSS、JavaScript 组件快速启动您的-web 项目
Tailwind Starter Kit	Tailwind Starter Kit 是一个美丽的 TailwindCSS 扩展，免费且开源
Tailwindtoolbox	免费开源的起始模板和组件，插件目录以及有用的工具/实用程序，帮助您快速启动 Tailwind CSS 项目。
tailwindcomponents	一个使用 TailwindCSS 构建的社区组件免费仓库
sweetalert	SweetAlert 使弹出消息既简单又漂亮。
sweetalert2	一个美丽、响应式、可自定义且无障碍的 JavaScript 弹出框替代方案
tailblocks	开源的即用型 Tailwind CSS 组件。
快应用开发框架	一个可以与现代 Web 框架（如 React、Vue 和 Angular）结合使用的接口系统。
LottieFiles	支持多种格式（如 json、gif 和 mp4）的交互式动画，以及适用于 Web 和移动设备的库和插件。
Kutty	一组可访问且可重用的预构建 Tailwind 组件，常用于 Web 应用程序中。
Tailwind 模板	一个免费的 Tailwindcss 模板集合 - 用于快速 UI 开发的 Tailwind 组件。
Stitches	一个使用函数式 CSS 的 HTML 模板生成器。
Meraki UI 组件	支持 RTL 语言的 Beautiful Tailwindcss 组件，基于 Flexbox 和 CSS Grid 实现完全响应式。
Daemonites Material Design For Bootstrap	Daemonite 的 Material UI 是一个基于 Google Material Design 开发的跨平台且完全响应式的前端界面，使用 Bootstrap 4 构建
Stitches	一种接近零运行时开销的 CSS-in-JS 解决方案，支持服务端渲染（SSR），多变体支持，并提供最佳的开发人员体验。
无头 UI (Headless UI)	完全未样式化、功能完整的 UI 组件，设计用于与 Tailwind CSS 美妙地集成。
样式组件	为您的应用程序和网站构建优美且功能强大的 UI 组件。
Figma Bootstrap 5 UI Kit	包含 300 多个按原子设计系统和自动布局构建的 Bootstrap 5 组件的 UI Kit。
Notiflix	一个用于客户端非阻塞通知、弹出框、加载指示器等的 JavaScript 库，能够让你的网络项目更加出色
CoreUI	Bootstrap 后台仪表板模板及 UI 组件库
AgnosticUI	可访问的 React 组件原语，也适用于 Vue 3、Svelte 和 Angular
SVGR	SVGR 是一个通用工具，用于将原始 SVG 转换为可直接使用的 React 组件。它可以在在线、命令行界面 (CLI)、Node.js 中使用，并且可以作为 webpack/rollup/parcel 插件……
uiverse	几百个开源 UI 元素，使用 HTML & CSS 制作。任何人都可以贡献。包括按钮、复选框、加载器、卡片、输入项等更多内容。
HyperUI	用于营销和电子商务网站，以及应用程序 UI 的免费开源 Tailwind CSS 组件。
Flowbite Admin Dashboard	基于 Tailwind CSS 和 Flowbite 构建的免费且开源的管理员仪表板模板，包含 15 个示例页面、图表、小部件以及深色模式。
Wicked Blocks	一个免费的 Tailwind 块和组件集合
Mamba UI	Mamba UI 是一个基于 Tailwind CSS 的免费开源的 UI 组件和模板集合。
Kitwind	全响应式 UI 套件，基于 Tailwind CSS 构建。
DevUI	最大限度提高工作效率的免费且开源的 UI 组件。
Tail-Kit	Tail-kit 给您提供了超过 250 个基于 Tailwind CSS 3.0 的免费组件和免费模板的访问权限。
Float UI	采用 Tailwind CSS 构建的免费开源 UI 组件和网站模板
Konsta UI	用 Tailwind CSS 构建的像素完美移动 UI 组件
React Native Gifted Chat	一个聊天界面组件，提供了诸如消息气泡、输入工具栏等功能的即用型聊天接口。
Wind UI	专家精心制作、响应灵活且易于访问的 React 和 HTML 组件，可以直接在您的网站或应用程序中使用。
Sonner	一个为 React 设计的意见型 Toast 组件。
Pines	Pines 是一个动画、滑块、提示框、 Accordions、模态窗口等界面元素的库！这些元素可以复制粘贴到任何 Alpine 和 Tailwind 项目中。
Kuma UI	通过 Kuma UI 的无头、零运行时 UI 组件，您可以轻松构建高性能网站，并享受最佳的开发体验。迎接 CSS-in-JS 的未来吧。
Preline UI	Preline UI 是基于实用优先的 Tailwind CSS 框架的一套预构建 UI 组件的开源集合。
Flyon UI	尾风电资组件库，操作最简便。

React UI 库

React JavaScript 框架的 UI 和组件库

Website	Description
Material UI	基于 Material Design 的 React 组件，可实现更快更容易的网页开发
Chakra UI	用速度构建无障碍的 React 应用和网站。Openchakra
React Bootstrap	重新构建的 Bootstrap。直接在 JavaScript 中包含 Bootstrap 组件
Semi Design	一个现代、全面且灵活的设计系统，为您提供构建合理网页应用及 SaaS 产品的所有模块化组件。
Mantine	一个专注于可用性、无障碍性和开发者体验的 React 组件和 Hooks 库，支持原生深色主题。
NextUI	一个美观、快速且现代的 React UI 库，无论你的设计经验如何，都可以帮助你创建美丽的网站。
Arco 设计	一个基于 Arco Design 系统的全面的 React UI 组件库。
ui-playbook	文档化的 UI 组件集合
ReactStrap	另一个基于 React 的 Bootstrap UI 库
React Admin	一个用于构建管理应用程序的前端框架。开箱即用地支持 API。
BlueprintJS	基于 React 的 Web UI 工具包
React Semantic UI	基于 Semantic UI 框架的 UI 组件
Shards React	一个包含数十个自定义组件的现代设计系统的 React UI 工具包
React Virtualized	用于数据的 UI 集合。包括表格、列表、排序等。
React Toolbox	一个基于 React 的 Material 设计 UI 库
Elastic UI	分发 UI React 组件和静态资产，用于构建网页布局
React Desktop	使用 React 的桌面样式组件。包括基于 MacOS 和 Windows 的组件
Theme UI	基于约束设计原则构建一致且可主题化的 React 应用
Onsen React	使用 React 和 Onsen UI 分发混合移动应用的组件
Evergreen	一个 React 的设计系统
Rebass	由 styled system 构建的 React 原生 UI 组件
Grommet	响应式优先的 UI 组件库
模板页面 Landing Page Template	基于 React 的开源 Landing Page 模板
Elemental UI	一个针对 React.js 网站和应用的 UI 工具包
Ant Design	开源的 React UI 库。
bumbag	bumbag 是一个友好的 React UI 工具包，适用于 MVP 或大规模应用程序。
PRIMEREACT	最终设计无偏见、灵活且可访问的 React UI 组件集合
Primer 组件	Primer 组件是实现 GitHub Primer 设计系统的 React 组件
Orbit	为旅行项目设计系统和 React UI 组件。
Base Web	Base Web 提供了一套强大的开箱即用的组件
背包 UI	背包是 Lonely Planet 用于构建前端应用的工具集。
Reaviz	基于 D3 的 React 数据可视化库
React Suite	一组 React 组件，合理的设计界面和友好的开发体验。
React Spring	基于弹簧物理的动画库，适用于 React 应用。
Recharts	一个基于 React 组件的可组合图表库。
Vercel UI	现代且极简的 React UI 库
Framer Motion	一个用于驱动生产级动画的 React 库。
React 水平谱系	Adobe 设计系统的 React 实现。
@tsparticles/react	一个轻量级的 React 组件，用于创建粒子效果
particles-bg	一个 React 粒子动画背景组件
Treact	使用 TailwindCSS 作为前端框架开发的免费且现代的 React 模板和 UI 组件的展示库
OAH-Admin	一个基于 Gatsby 并采用 oah-ui 组件和元素包的免费 React 管理员控制台模板。
卡罗来纳管理仪表板	这是一个基于 Material-UI 组件框架的免费 React 管理员模板，设计简洁清新，并遵循 Google 的 Material Design 规范。
Tabler	Tabler 是一个免费的 React 管理仪表板模板，适用于任何类型的后端 Web 应用程序。
Sha-el-design	可以为更容易的自定义和流畅的开发流程提供 React 组件。
React-WeUI	React-WeUI 是我们对 React 和微信 WeUI 设计的热爱之作。
Supabase UI	受 Tailwind 和 AntDesign 启发的开源 UI 组件库。
Ring UI	JetBrains Web UI 组件集合。
React95	为你的 React 应用提供刷新过的 Windows 95 风格 UI 组件。
Reakit	Reakit 是一个基于 React 的低层级组件库，用于构建可访问的高阶 UI 库、设计系统和应用程序。
Zent	一组用 React 编写的必不可少的 UI 组件。
Gestalt	一套支持 Pinterest 设计语言的 React UI 组件。
xstyled	一个为 React 构建的 CSS-in-JS 框架，包含基于 props 的实用工具，如 display、fontSize 或 rotate。
@use-gesture	一个用于 React 中组件绑定鼠标/触摸手势的基础实用工具。
React 彩虹	React 彩虹是一系列组件，它们能可靠地帮助你快速构建你的应用程序。
React 使用平滑滚动	React 提供组件，用于添加平滑滚动效果
Choc UI	Choc UI 是一组常用的、可访问且可复用的组件，常用于网页应用。
Elementz	一个用于轻松快速构建现代应用程序的 React 组件库。
Radix UI	未加样式、可访问的组件，用于在 React 中构建高质量的设计系统和 Web 应用
Materio MUI React NextJS 管理模板	面向开发者的最强大且功能全面的开源 MUI React NextJS 管理仪表板模板。
Chakra 模板	一个不断增长的手工制作且响应式的 Chakra UI 模板集合，可以直接插入到您的 React 项目中。
React 可调节面板	可用于可调节面板组/布局的 React 组件。
Carbon React	一个为网站和 UI 提供丰富 React 组件的库。基于 IBM 的 Carbon 设计系统
React Aria	一个提供可访问的 UI 基础组件的 React Hooks 库，适用于你的设计系统。
shadcn/ui	使用 Radix UI 和 Tailwind CSS 构建的精美设计组件。
Tremor	用于构建图表和仪表板的 React 组件
Aceternity UI	将最新的热门组件复制粘贴并直接使用在您的网站上，无需担心样式和动画问题。
Magic UI	基于 React、TypeScript、Tailwind CSS 和 Framer Motion 构建的免费且开源的动画组件。
Code UI	使用 HTML、CSS、JS、React、TypeScript、Tailwind CSS 和 Framer Motion 构建的精美设计且移动设备响应式的组件。完全开源且可自定义。
Edil Ozi	开发人员使用的组件库。您可以复制粘贴到应用程序中的开源组件。

Vue UI 库

Vue JavaScript 框架的 UI 和组件库

Website	Description
Vuetify	材料设计组件框架
Bootstrap Vue	使用 Bootstrap 组件与 Vue
Buefy	基于 Bulma 的轻量级 UI 组件
Semantic UI Vue	Semantic UI Vue 是 Semantic UI 的 Vue 集成
Arco Design Vue	一个基于 Arco Design 系统的全面的 Vue UI 组件库。
VEUI	VEUI 是一个基于 Vue.js 的企业级 UI 组件库。
Grace	用于 Vue 应用的设计系统。
Quasar	高性能的 Material Design 组件套件，支持单页应用（SPA）、服务器端渲染（SSR）、渐进式 Web 应用（PWA）、移动应用（Cordova & Capacitor）、桌面应用（Electron）和浏览器扩展
Element	一个基于 Vue 的桌面端 UI 库
Fish UI	面向网络的 Vue UI 工具包
Keen UI	一个受 Google 的 Material Design 启发的简单 API 的 VueUI 库
Materio Vuetify Vuejs Admin 模板	开源且易于使用的 Vuetify Vuejs 管理模板，具有优雅的设计和独特的布局
Onsen Vue	使用 Vue 和 Onsen UI 分发用于混合移动应用的组件
Vuejsexamples	一个包含有用 Vue.js UI 组件的不错集合
Inkline	Inkline 是一个为 Vue.js 设计的现代 UI/UX 框架，用于创建无缝响应式网络应用
Vuesax	唯一且可复用的 UI 组件
Antdv	基于 Ant Design 的 Vue 模块库
Shards Vue	一个高质量且免费的 Vue UI 工具包，包含现代设计系统和众多自定义组件
Prime Vue	强大且易于使用、功能全面、性能出色的 Vue UI 组件库，帮助您构建惊艳的用户界面。
Chakra UI Vue	Chakra UI 是一个简单、模块化且可访问的组件库，它为你提供了构建 Vue 应用所需的构件，让你能够快速开发应用。
查看 UI	专为不同技能水平的人设计的数十个实用而美丽的 Vue 组件，附有详细的文档。
@tsparticles/vue2	一个轻量级的 Vue 2.x 组件，用于创建粒子效果
@tsparticles/vue3	一个轻量级的 Vue 3.x 组件，用于创建粒子效果
TC 组件	一个高质量的可直接使用的组件库，将帮助你加速开发流程。
Vant	基于 Vue 构建的轻量级移动 UI 组件库。
Equal UI	基于 TypeScript 的 Vue 3 组件系统，适用于您下一个项目
Mint UI	适用于 Vue.js 的移动 UI 元素
Cube UI	一个使用 Vue.js 实现的 fantastic 移动端 UI 库
Muse UI	基于 Vue 2.0 的优雅材料设计 UI 组件库
AT-UI	AT-UI 是基于 Vue.js 开发的快速且强大的 Web 界面模块化前端 UI 框架。
Vuikit	一个基于前端框架 UIkit 的一致且响应式的 Vue UI 库。
Wave UI	一个仅包含正面功能的 Vue.js UI 框架。
VueTailwind	一组轻量级且完全可自定义的 Vue 组件，优化用于 TailwindCSS。
Oruga	Oruga 是一个无需依赖 CSS 框架的 Vue.js UI 组件轻量级库。
BalmUI	BalmUI 是一个基于 Vue.js 的模块化和可自定义的 Material 设计 UI 库。
Weex UI	一个基于 Weex 的丰富交互、轻量高性能 UI 库。
Varlet	Varlet 是基于 Vue3 开发的 Material 设计移动组件库，由社区中的合作伙伴进行开发和维护。
Naive UI	一个基于 Vue 3 的组件库。相当完整。可自定义主题。使用 TypeScript。不算太慢。
Vuestic	基于 Vue 3 的免费开源 UI 库 🤘。
Vue Final Modal	Vue Final Modal 是一个小巧、无渲染、移动端友好且功能丰富的 Vue.js 模态组件。
Vuetensils	Vuetensils 是一个轻量级的 Vue 2.x 组件库，提供了一些最常见的 UI 功能，但仅包含最基本的样式，以避免添加任何额外的冗余。你可以处理品牌设计问题，并不需要担心无障碍性问题。
NuxtLabs UI	全面风格化和可自定义的组件，适用于 Nuxt。
shadcn-vue	shadcn-ui 的 Vue 版本。

Angular UI 库

Angular JavaScript 框架的 UI 和组件库

Website	Description
Material Angular	基于 Material 设计的 Angular UI 库
NG Bootstrap	一个基于 Bootstrap 框架的 Angular UI 库
PrimeNG	用于 Angular 的强大 UI 组件库
Onsen Angular	用于 Angular 和 Onsen UI 的混合移动应用和 PWA UI 库
NG Lightning	适用于 Lightning 设计系统的原生 Angular 组件和指令
NG Semantic	基于 Semantic UI 的 Angular UI 库
Nebular	可自定义的 UI 组件库、Angular 的 Auth 与安全模块
Alyle UI	用于 Angular 的 minimalist 组件集
NGX Bootstrap	另一个基于 Bootstrap 框架的 Angular UI 库
NG Zorro	基于 Ant Design 的 Angular UI 库
分页插件 for datatables	一个用于分页的 npm 库
多选下拉框	用于表单中的多选下拉框
NG Particles	一个轻量级的 Angular 组件，用于创建粒子效果
Covalent UI	一个专注于解决常见企业需求的 Angular UI 平台
Clarity	由 VMware 集团开发的基于 CSS 的 Angular UI 框架
Taiga UI	Taiga UI 是一个完全可分枝摇树 (treeshakable) 的 Angular UI 工具包，包含多个基础库和若干插件。
ngx-admin	基于 Angular 10+和 Nebular 的管理员模板
Spartan	用于 Angular 全栈开发的前沿工具。

Svelte UI 库

Svelte JavaScript 编译器的 UI 和组件库

Website	Description
Svelte Material UI	基于 Material Design 的 Svelte UI 库
SvelteStrap	一个基于 Bootstrap 框架的 Svelte UI 库
Svelte Flat UI	基于扁平设计的 Svelte UI 库
景点	一个相当酷的 Svelte UI 套件
Svelteit	一个为 Svelte 和 Sapper 项目设计的极简主义 UI/UX 组件库
Carbon Components Svelte	一个实现 IBM 开源设计系统 Carbon Design System 的组件库。
Radix Svelte	这是 Radix UI 为 Svelte 的移植版本。
shadcn-svelte	shadcn-svelte 是一个由社区主导的 Svelte 版本的 shadcn/ui。
骨架	骨架是一个使用 Svelte + Tailwind 构建的开源 UI 工具包，它允许你使用 Svelte + Tailwind CSS 创建响应式网络界面。
Aceternity UI Svelte	免费令人惊叹的动画组件。
Svelte UX	一套用于构建高度互动应用的 Svelte 组件、动作、存储和实用工具集合。
Flowbite-Svelte	Flowbite-svelte 是一个基于 Svelte 组件、Tailwind CSS 实用类并以 Flowbite 设计系统为基础的开源 UI 组件库
bits-ui	无头的 Svelte 组件
melt-ui	一套无头可访问的 Svelte 组件构建器

React Native UI 库

React Native 框架的 UI 和组件库

Website	Description
Magnus UI	Magnus UI 是终极的 UI 框架，帮助您轻松在 React Native 中构建一致的用户界面
React Native UI Lib	React Native UI (RNUI) 是由 Wix 提供的 React Native 的 UI 工具集与组件库
React Native Paper	React Native Paper 是一个高质量的标准合规的 Material 设计库，涵盖了所有主要的应用场景
UI Kitten	UI Kitten 是用于创建 Stunning 跨平台移动应用的 React Native 框架。基于设计系统，可将您的产品从最小可行产品 (MVP) 发展为企业级应用。
React Native Elements	一个跨平台的 React Native UI 工具包，提供了创建 React Native 应用所需的一站式 UI 套件。
NativeBase	适用于 React Native 和 Vue Native 的必备跨平台 UI 组件。
Shoutem UI	Shoutem UI 工具包使您能够轻松构建专业外观的 React Native 应用程序。
tailwind-rn	在 React Native 项目中使用 Tailwind CSS。
Ant Design Mobile RN	一个基于 React Native 的可配置移动 UI 组件库，基于 Ant 设计。
SnackUI	SnackUI 是一个为 React Native + react-native-web 设计的 UI 工具包，配备有优化编译器，速度更快。
Moti	Moti 是 React Native 的通用动画包
Tamagui	适用于原生应用和网络的通用 React 设计系统。

设计系统与样式指南

设计系统、样式指南、工具包、文档。有些是顶级公司/网站的设计指南

Website	Description
Material Design	Google 的材料设计
Ant Design	企业级产品的设计系统
Apple Design Resources	使用 Apple 设计和 UI 的指南和模板
Primer	使用 GitHub 设计系统进行设计、构建和创造
Arco.design	由字节跳动 GIP UED 团队和架构前端团队共同推出的企业级设计系统。
Alta UI	Oracle 的设计系统和工具包
脉搏	设计系统、指南和 React 组件库
Bolt	坚实的 Twig 和 Web 组件驱动的 UI 组件
Clarity 设计系统	人机交互指南、HTML/CSS 框架以及 Angular 组件
AtlasKit	Atlassian 的官方 UI 库，根据 Atlassian 设计准则构建
奥迪设计资源	Audi UI 设计系统和工具包
Carbon 设计系统	Carbon 是 IBM 的开源设计系统，用于产品和体验
Yelp 风格指南	Yelp 风格指南、组件和工具包
Comet	可扩展的设计系统，包含视觉语言、组件和设计资产
ETrade 设计系统	既融合了金融元素又兼顾简洁易用的手册和工具包
基础库	一个开源且由社区驱动的项目，用于实现一致的用户界面
Infor 设计	用于创建 Infor 产品有意义的体验的准则和资源
lexicon	一种体验语言，用于构建美丽的 UI
Mailchimp UI/UX	Mailchimp 的样式指南和组件
Marvel 设计规范	一整套设计原则和组件
Microsoft Fluent UI	微软的用户体验框架集合
Pluralsight 设计系统	用于设计 Pluralsight 的组件设计指南
Polaris	为 Shopify 的所有商家创建出色体验的设计系统
Mozilla 协议	协议是 Mozilla 和 Firefox 网站的设计系统
SendGrid 样式指南	开发一致的 UI/UX 所使用的 UI 库
VTEX 风格指南	与 VTEX 产品设计相关的可重用模式、组件和资产
Rizzo	样式指南，包含 UI 组件、JS 组件、小部件等
Atomize	一个 UI 框架，帮助开发人员与设计师协作并轻松构建一致的用户界面
StyleGuides.io	包含 500 多个样式指南的目录
完成设计系统	开源设计系统，指南及组件
斯柯达品牌系统(斯柯达品牌官网)	斯柯达品牌下应用程序设计指南
频谱 (Spectrum)[https://spectrum.adobe.com/]	Adobe 的设计系统，提供组件和工具帮助产品团队更高效地工作，并使 Adobe 的应用程序更具一致性。
asphalt	Gojek 的设计语言系统。一套指导原则和组件，用于创建出色用户体验。
用户体验定律（Laws of UX）[1]	这是一系列设计师在构建用户界面时必须考虑的关键原则。

在线设计工具

各种各样的在线设计工具，从照片编辑器到原型设计，以及其他更多工具

Website	Description
Figma	在线图形设计工具（免费和付费选项）
Penpot	Penpot 是首个专为跨领域团队设计的开源设计和原型制作平台。Penpot 不依赖于任何操作系统，基于网络，并使用开放网络标准（SVG）。Penpot 对所有人开放，并由社区支持开源和自主托管
Vectr	免费向量图形软件
Taler	在几分钟内从数百个可定制的模板中创建社交媒体横幅设计
Canva	创建精美设计（免费与付费）
获取波纹	一个免费的 SVG 波形生成器，用于制作独特的 SVG 波形以应用于网页设计
Clippy	一个简单的 CSS 剪裁路径制作器
Fancy Border Radius	八个值，用于在 CSS 中指定 border-radius（边框圆角生成器）
Wireframe.cc	低保真原型设计工具（免费与付费版本）
Fotor	图片编辑与设计制作
Pixlr	在线照片编辑器
Animoto 视频制作器	在线制作视频
RemoveBG	去除图像背景
照片创作工具	创作您自己的照片而不是搜索 stock 图片
Visme	制作演示文稿、信息图和其他内容
Info 图	创建信息图表
ChartGo	在线创建图表和图形
卡通照片	将照片转换为卡通效果
Whimsical	低保真原型图、流程图和其他图表（包含 4 个免费名额）
白板(Whiteboard)	在线绘图工具
Octopus	网站地图构建器
Onlineboard	实时可共享的白板，适用于头脑风暴
CTA 按钮生成器	创建号召性按钮
Blobmaker	Blobmaker 是一个免费的生成设计工具，帮助你快速创建随机、独特且有机外观的 SVG 形状。
人物画像	一个适合现代时代的趣味头像生成器
Photopea	一个在线的 Photoshop 编辑器
Excalidraw	类手绘的虚拟白板，用于绘制图表
图表	图表软件和流程图制作器
Mermaid	用 Markdown 风格的文字定义来创建和修改图表（如流程图、序列图、甘特图或用户旅程），并动态呈现这些图表。（开放源代码）
MapInSeconds	一种简单的方法，用地图来可视化您的数据
Grid Malven	一个可参考的 CSS 网格速查表，用于创建 CSS 网格
Flex Malven	一个在使用弹性盒布局时可以参考的弹性盒网格速查表
智能上缩放器	提高图像分辨率至 2-4 倍（提供 4 次免费使用）
GetAvataaars	方 PEN 林使用 Pablo Stanley 绘画库制作的一个有趣且色彩丰富的免费头像生成工具
大头像	使用 Robert Broersma 的 Big Heads 可轻松为你的项目生成头像。
Webflow	拆除代码障碍，更快更轻松地构建更好的商业网站，无需编码。
Trace	瞬间移除照片的背景
Neumorphism.io	生成柔和 UI 的 CSS 阴影代码
DB Designer	在线免费设计您的数据库
Ui Bakery	通过可视化方式创建完整的网络应用
装假代码(Faux)	将真实代码转换为装假代码
Rive	实时交互式设计工具，允许您设计、动画制作，并立即将其资产集成到任何平台中。
Unscreen	完全免费且自动移除视频背景
Kodeshot	将你的源代码转换成漂亮的图片，用于文章、推文、消息、帖子……
Wix	创建一个你为之自豪的网站
GTmetrix	网站速度和性能优化
Yellow Lab Tools	在线测试以帮助加快沉重的网页
Framer	是团队使用的原型制作工具
Draw.io	在线图表编辑工具，完全免费
UXWing SVG 编辑器	在线创建和编辑 SVG
CSS 箭头	创建并导出一个带有侧面延伸出箭头的自定义框的 CSS 代码。非常适合用于提示框、飞出菜单等效果。
Lucidchart	图表绘制和可视化工具，允许创建数据库、流程图、看板、平面布局图等。免费版包含 3 个多页面文档
Carbon	通过输入或拖放文件来创建并分享您代码的漂亮图片。
PixCleaner	一种准确且无烦恼的背景移除工具
Glass UI	一个基于玻璃形态设计原则的现代 CSS UI 库，可以帮助你快速设计和构建美观的网站和应用程序。
玻璃形态主义	一个生成快速玻璃形态主义 UI 的出色在线工具，可通过 CSS 代码片段实现。
TableConvert	在线表格转换器是一个基于 Web 的工具，可以将 Excel、URL、HTML、Markdown 表格和 CSV 转换为 Markdown 表格、CSV/TSV、JSON、XML、YAML、插入 SQL、HTML、Excel 和 LaTeX 表格。
Doodle Ipsum	图文替代 Lorem Ipsum。只需自定义你的素描，获取代码，然后在你的网页原型、着陆页或无代码工具中使用它们。
figen.cc/	文章封面及背景生成工具
Windframe	一个工具，使用 Tailwind CSS 快速原型设计并构建惊艳的网站（免费版与付费版）
Slickr	一个用于设计博客封面图片的工具。
阴影调色板生成器	创建一组浓郁且逼真的 CSS 阴影。
Ray.so	在线工具，用于创建您代码的美丽图像。
Codepng	将您的源代码转换为 awesome 可分享的图像。
CSS Grid Generator	一个用于创建 CSS 网格布局的工具
JSONT	一个简单且强大的在线 JSON 格式化工具
抖动	在线工具，用于创建运动图形/设计
Visily	一种赋能非设计师设计网页和移动应用原型的工具
okso.app	具有嵌套的“画中画”结构的绘图应用
Calc Generator	一个易于创建精确的 Calc() CSS 函数的工具
Scrollbar.app	一个简单的在线编辑器，用于创建自定义 CSS 滚动条
GrapesJS	一款开源的多功能 Web 构建框架，将不同的工具和功能相结合，旨在帮助你（或你的应用程序的用户）在无需任何编码知识的情况下构建 HTML 模板。

下载式设计软件

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

Website	Description
Gimp	一个类似于 Photoshop 的免费且开源的图像编辑器
Gravit 设计师	全平台免费的矢量图形设计应用程序
Blender	开源，免费的动画制作、3D 建模等
Raw Therapee	跨平台的原始图像处理程序
Be Funky	在线设计程序
Krita	专为数字艺术家设计的素描和绘画程序
Pencil 项目	用于 GUI 原型设计的软件
Inkscape	强大的免费设计工具
Adobe XD	一款来自 Adobe 的免费设计工具
Shapes.so	可以在项目中作为代码使用的图标
Lunacy	Sketch for Windows
InVision Studio	来自 InVision 的免费屏幕设计工具
Darktable	免费且开源的摄影工作流应用和 RAW 开发工具
Inpixio 照片编辑器	免费照片编辑器：仅适用于 Windows 操作系统
色轮选择器	开源颜色软件：轻松获取、操作和存储您的颜色！
Google Web Designer	制作引人入胜的、互动性的 HTML5 基于的设计和动态图形，这些设计可以在任何设备上运行。
Origami Studio	由 Facebook 创建的交互式界面设计工具：仅适用于 Mac

设计灵感

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

Website	Description
Websitevice	一个精选的专业网站设计画廊，以激发寻求创意灵感和最佳实践的开发人员和设计师。
CSS 禅园	通过超过 200 种仅使用 CSS 对同一 HTML 文件进行的诠释，展示了 CSS 的强大功能。
Behance	不同创作者展示的设计项目
Dribbble	由不同创作者展示的设计项目
Landingfolio	Landingfolio 提供了网络上最好的着陆页灵感、模板、资源和示例。
Foxyapps	最佳移动应用设计的设计灵感
Httpster	展示了来自世界各地的人们制作的网站
Land Book	显示大量网站以帮助寻找灵感
前端开发者进阶	使用 HTML、CSS 和 JavaScript 解决实际的 UI 挑战
Awwwards	一个评价并收集全球最佳网站（按 UI）的网站
Codrops	一个收集最佳 UI 理念和模式并制作相关教程的网站
SaaS 着陆页	发现由顶级 SaaS 公司创建的最佳着陆页示例
Saaspages.xyz	一个以文案和设计为重点的最佳着陆页集合。
Screenlane	Screenlane 是一个网站和新闻通讯，展示最新的网页和移动设计灵感。
lapaNinja	最佳落地页灵感
Freefrontend	免费的前端设计，包含 CSS、HTML 和 JavaScript。最新作品，部分设计示例
Webframe	发现并从美丽的网页设计中获得灵感
Collect UI	每日灵感来自日常 UI 档案及更多内容的收集。精心挑选，每日更新。
Graphic Burger	一个提供免费和付费图标、模型图、UI 套件、文本效果和背景的站点。该站点的资源是免费和付费资源的混合。图标格式包括 PNG、SVG、EPS 和 Sketch。部分资源有些混淆，因为在免费集合中夹杂着赞助内容。
Really Good Emails	一个提供各种公司电子邮件的网站，从客户服务到市场营销应有尽有。
免费设计资源	一个提供字体、模型图、模板图形和 UI 套件的网站。
Site Inspire	Site Inspire 是最佳网页和互动设计的展示平台。
Web 设计灵感	一个提供每日更新的网页设计灵感的网站。
NavNav	响应式导航示例
Calltoidea	一个用于灵感来源的不同网页组件的集合。
Mulzli 搜索	设计灵感搜索引擎
DeviantArt	获取超过 3.7 亿件艺术品以获得灵感。
设计你的风格	不同的 Web 和 Mobile 设计集合
SiteSee	一个精选的精美现代网站画廊。
UI 车库	每日精选 UI 灵感与模式。
ecomm.design	电子商务网站设计作品集及技术 inspiration。
设计提名者	展示和表彰最佳网站、应用程序和游戏。
设计宝库	一个来自实际数字产品的截图和模式的库
CSS 按钮	84 个美丽的 CSS 按钮示例。
CSS box-shadow	91 个漂亮的 CSS box-shadow 示例。
超级设计师	给你超能力的设计工具。
落地页	根据您的偏好，找到最适合的设计灵感的落地页。
Page Collective	Page Collective 是一个设计灵感网站网络的一部分。
Curated	从网络各处获取超越寻常的网页设计灵感，激发你的创意。
Maxibestofone	每日网站及字体灵感推送。
Bento Grids	Bento Grids 是一种由 Apple 通过其摘要幻灯片流行起来的基于瓷砖的布局精选集合。
落地页画廊 (Landing Gallery)	最佳落地页设计灵感的家园。
a-fresh.website	手选的网站和组件灵感库。
最佳网页设计工具	发现最新的设计工具、agency 和着陆页模板等网页内容
App Motion	探索最佳的手选应用动效设计
Uiland Design	全球顶尖公司的最佳移动 UI 灵感之家

图像压缩

允许你压缩大图片的网站

Website	Description
TinyPNG	智能 PNG 和 JPEG 压缩
Optimizilla	在线 JPEG 和 PNG 优化/压缩器，带有设置选项并支持存档下载
Compressor.io	JPEG, PNG, GIF, SVG 压缩
Squoosh.app	来自 Google Chrome 实验室的图像压缩
BulkResizePhotos	批量图片调整大小、压缩与转换，全部任务在浏览器中完成（即使离线也有效）
iLoveIMG	一个快速免费的网络应用程序，用于轻松修改图片
SvgOMG	在线 SVG 优化器，具有许多设置选项，并可以直接在其中粘贴和粘贴 SVG 代码。
CompressJPEG	压缩大小甚至超过 5MB 的 JPEG 图片
CompressNow	JPEG, GIF, PNG 压缩
促销图片 Resize 工具	免费的图像和照片 Resize 工具
图像优化器	免费的图像优化器，包含质量选项
SVGminify	这个工具移除了不必要的信息，从而减少了你的 SVG 文件大小
JPEG Optimizer	一款免费的在线工具，用于调整和压缩数字照片和图像以供在网页上显示
Resizing.app	在线调整您的图片大小
EZGif	动画 GIF 制作器和图像编辑器，包括图像优化，并支持 WebP 转换
在线 Png 工具	无损透明背景的情况下调整 png 图片大小。
Verexif	为了减少图像大小并提高隐私安全，删除图片中的元标签
Vecta Nano	使用无损压缩来通过移除不必要的数据从而压缩低效的 SVG 代码。（免费与付费版本）
水印工场	私人、客户端的 JPEG 图片压缩。该应用不会将图片发送到服务器进行处理。
Jpeg.io	将任何主要的图像格式转换为高度优化的 JPEG 格式
CompressImage.io	压缩 JPG 和 PNG 图像。无限制。批量转换。转换为 WebP 格式。离线亦可使用
JPEG 压缩器	免费的图像压缩工具，支持 JPEG、PNG、SVG、JPG、WEBP 和 GIF。

Google Chrome 扩展程序

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

Website	Description
WhatFont	在网页上识别字体最简单的方式。
WhatRuns	发现网站运行所需的内容。框架、分析工具、WordPress 插件、字体——你所能想到的应有尽有。
Web 开发者工具栏	添加了一个包含各种网页开发工具的工具栏按钮。
Awesome Screenshot & Screen Recorder	全屏屏幕截图和屏幕录像 - 二合一。可即时分享屏幕录制视频
daily.dev - News for Busy Developers	无需任何努力获取编程新闻。只需打开一个新的标签页，一切就绪。这是忙碌开发者的必备工具！
JSONView	验证和查看 JSON 文档。
JSON Lite	用于查看 JSON 文件的浏览器扩展程序。
窗口调节器	用于模拟各种屏幕分辨率，调整浏览器窗口大小。
响应式查看器	一次显示多个屏幕，响应式设计测试器
BrowserStack	instantly 测试您的网页在任何桌面或移动浏览器上。
VisBug	一个使用 JavaScript 构建的开源网页设计调试工具
Kontrast - WCAG 对比度检查器	在浏览器中实时检查和调整对比度，以满足 WCAG 2.1 的要求
PerfectPixel	在开发的 HTML 顶部添加一个半透明图像覆盖层，便于进行像素级对比，有助于复制 UI 设计。
Pesticide	将 Pesticide CSS 插入当前页面，突出显示每个 HTML 元素以更好地在页面上查看布局位置，有助于构建布局。
Site Palette	一款设计师和前端开发人员必备的工具，用于提取任何网站的颜色。
ColorZilla	高级取色器、颜色拾取器、渐变生成器以及其他丰富多彩的工具
Lorem Ipsum 生成器（默认文本）	提供了一种优雅且快速的方式来创建默认文本或生成 Lorem Ipsum。经过优化，适用于快速使用，但也可以进行自定义。
JavaScript 和 CSS 代码美化器	当您打开一个.css/.js/.json 文件时，美化 CSS、JavaScript 和 JSON 代码
Imageye - 图像下载器	在网页上查找并下载所有图像。使用 Imageye，您可以在一个网页中找到、浏览和下载所有存在的图像。
GoFullPage - 全页截图	不需要请求额外权限即可捕获整个页面的屏幕截图，并且十分可靠。
Stylebot	立即改变网页的外观。
ColorPick Eyedropper	一个放大的滴管及颜色选择工具，允许你从网页和其他内容中选取颜色值。
React 开发者工具	为 Chrome 开发者工具提供 React 调试工具。它允许你在 Chrome 开发者工具中检查 React 组件层次结构。
Wappalyzer	Wappalyzer 是一个技术分析器，可以显示网站是由哪些技术构建的。
Fake Filler	Fake Filler 是一个表单填充工具，可以向页面上的所有输入字段填写虚假/占位数据。
Page Ruler Redux	一个 Web 开发人员/设计师用的标尺，用于获取完美的像素尺寸和定位，以便测量任何网页上的元素。
Web 编辑器	Web 编辑器是为您提供了一种增强的方式来检查任何网页元素、更改它们的属性、插入内容、设计并可视化您希望看到的方式的工具。
CSSViewer	一个简单的 CSS 属性查看器。
Fonts Ninja	从任何网页、书签中识别字体，试用并购买它们。
Lighthouse	一个开源的自动化工具，用于提高你的网络应用的性能、质量和正确性。
Debug CSS	添加页面上所有元素的轮廓以显示更改期望布局的罪魁祸首元素。有助于调试页面的 CSS
UX Check	通过启发式评估识别可用性问题。
Angular 开发者工具	Angular DevTools 允许您了解应用程序的结构，并预览指令和组件实例的状态。
Redux 开发者工具	Redux DevTools 为你的 Redux 开发工作流提供了增强功能。除了 Redux，它还可以与其他处理状态的任何其他架构一起使用。
Hackertab.dev	Hackertab 帮助开发者在一个标签页中保持对最新开发新闻和资源的更新。
JSON 格式化器	用于更好地阅读，它可以格式化和着色 JSON 内容，并且还可以折叠和展开嵌套结构。
SEO Minion	一个包含如页面 SEO 分析、断链检查以及搜索结果预览等特性的 SEO 工具。

火狐扩展

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

Website	Description
WhatFont	在网页中识别字体
WhatRuns	发现网站使用的各种技术
Web 开发者工具栏	用于网页开发任务的工具栏
Awesome Screenshot & Screen Recorder	截图和录制屏幕
daily.dev - 忙碌开发者的新闻动态	开发者新闻和资源
JSONView	格式化并高亮显示 JSON
窗口调整器	将浏览器窗口调整为预定义的尺寸
Responsive Viewer	测试网站的响应式设计
BrowserStack	在不同设备上即时预览网站
VisBug	网页设计调试工具
对比 - WCAG 对比度检查器	检查无障碍性的对比度级别
PerfectPixel	在网页上叠加一张图片以进行对比
农药	在网页上勾勒元素以实现轻松可视化
Site Palette	从网站提取颜色_palette
ColorZilla	高级颜色选择器和拾色器
Lorem Ipsum 生成器（默认文本）	生成 Lorem Ipsum 文本
JavaScript 和 CSS 代码美化器	美化和压缩 JavaScript 和 CSS 代码
Imageye - 图片下载器	从网页下载图片
Fireshot - 全页屏幕截图	截取整个网页
Stylebot	自定义网页的外观
ColorPick 颜色拾取器	简单的颜色拾取工具
React 开发者工具	检查 React 组件层次结构
Wappalyzer	识别网站使用的技术
假填充器	使用虚拟数据填写网页表单

AI 图形设计工具

提供免费设计生成服务的 AI 工具

Website	Description
Leonardo.Ai	Leonardo AI 是一个基于人工智能的设计工具，可以帮助您根据参考图片创建设计。
Galileo AI	Galileo AI 是一个 UI 生成平台，用于轻松快速的设计构思。它允许用户根据文本生成界面设计。
ImgGen.Ai	ImgGen AI 是一个免费的基于人工智能的图像生成和增强工具。
Unblurimage.Ai	Unblurimage AI 是完全免费的在线工具，无需注册，用于去除图像模糊。
VMind	VMind 是一种智能可视化套件，通过规则算法、机器学习和 LLM 提供智能界面。

其他事项

未分类的内容

Website	Description
Figpeek	Figpeek 是一个新的 Figma 和 GitHub 缩略图生成器。
图片提取器(Image Extractor)	一个在线工具，用于提取网站上的所有图片和 SVG 文件，你只需要拖入网址即可
Vertopal	一个免费的在线平台，用于将各种计算机文件转换为多种文件格式
everysize.kibalabs.com	检查您的超赞响应式网页在各种尺寸下都看起来很棒
Devhints.io	这是一个简单的-cheetsheet 集合，源自互联网
Web 工具箱	一个包含实用工具的集合，供网页开发人员、程序员和设计师免费使用。
WebDevTrick	一个著名的博客，提供了许多精彩的 HTML、CSS、JQuery 设计。
css-tricks	免费的 CSS 技巧，以及一些适合初学者和进阶者的独特想法
Material 设计资源	使用 Material 工具、下载内容和交互式项目来简化您的工作流程。
节点设计.dev	适用于缺乏艺术才能的开发人员的一系列工具
A11ygator	一个用于扫描网站以遵守 WCAG 规则的网页工具
Commitizen	一个命令行工具，用于根据标准格式化提交信息
CleanCss	代码格式化、压缩工具，文件转换器
小巧助手	一个为网页开发者提供的免费单用途在线工具集合
CSS 肱骨生成器	该生成器将帮助您创建纯 CSS 角状装饰。
Can I Use	检查前端技术的跨浏览器兼容性。
kangax-js-compat-table	检查不同编译器、服务器/运行时和平台（桌面和移动设备）对 JavaScript 版本（ES5、ES6、ES2016+ 等）的支持情况。
mydevice.io	最常见的设备分辨率，包括手机和平板电脑
Codepen	构建、测试和发现前端代码。
Responsively	一个设计人员和前端开发人员使用的工具，可以轻松地在各种平台上进行设计和调试
html2pdf.js	使用纯 JavaScript 的客户端 HTML 转 PDF 渲染。
CSS 参考	一个包含所有 CSS 属性及其详细定义的集合
关键路径 CSS 生成器	为您的网页生成关键 CSS
SVG Gobbler	一个浏览器扩展程序，用于在网页上查找 SVG 图像，并允许下载、复制到剪贴板或导出为 PNG。
shortcode.dev	一个包含 HTML、CSS、JavaScript、Node、Artisan、Blade 等语言中实用片段和代码示例的集合。
30secondsofcode.org	提供各种 CSS、JavaScript、Python 以及其他语言的代码片段和文章集合。
PlayCode	JavaScript 沙盒。
所有标签	详细解释了所有的 HTML 标签。
Vue Telemetry	显示任何网站所使用的 Vue 插件和技术栈，或探索包含 5500 多个网站的数据库。
Grid.js	Grid.js 是一个使用 TypeScript 编写的免费且开源的 HTML 表格插件。它与包括 React、Angular、Vue 和 VanillaJS 在内的大多数 JavaScript 框架兼容。
Gerillass	Gerillass 是一个基于 Sass 构建的网站开发工具，包含一组 Sass 混合函数和功能，供前端开发者生成可扩展的 CSS 输出。
Sketchize	Sketchize 是为 UI/UX 设计师打造的，帮助他们设计适合移动设备、平板电脑和桌面设备的应用程序。
{CSS} Portal	CSSPortal 是一个包含大量 CSS 生成器、工具和资源的家园。
DevDocs	DevDocs 在一个快速、有组织且可搜索的界面中结合了多个 API 文档。
papersizes	国际纸张尺寸、规格及格式的最佳资源。
flexboxfroggy	帮助 Froggy 和朋友们编写 CSS 代码吧！
设计更好的书籍	有关推动最佳设计团队前进的实践的重要阅读资料。
OverAPI	包含所有快捷参考表的集合。
Pageclip	一个适用于静态 HTML 表单的服务器
徽章	自定义创建徽章。
williamsharkey	随机 SVG 图形生成器
Bootstrap 超级速查表	一个交互式的 Bootstrap 类别、变量和混入函数列表。您将需要的唯一一份 Bootstrap 超级速查表。
二维码生成器	使用二维码生成器轻松为您的项目创建一个二维码。
PapersDB	具有公制和英制度量单位的纸张尺寸、规格及格式最大的数据库。
SETools.xyz	在线工作工具网站
SmallDev.tools	一个免费的开发工具，帮助美化和压缩 HTML/CSS/JavaScript，并提供许多其他实用工具。界面非常友好。
愤怒工具	用于加速开发的免费网络工具。
Rapid API	发现并连接到数千个 API。
Readme.so	创建 README 最简便的方式。
Showcode	代码截图生成器。
tldraw	一个小小的绘图应用。
devices.css	Marvel App 的纯 CSS 手机和平板电脑。
Troopl	在几分钟内构建并发布一个免费的作品集。
Apifox	Apifox = Postman + Swagger + Mock + JMeter
一个现代的 CSS 重置	将所有 HTML 元素的 CSS 样式重置为跨浏览器的一致基础。
Clipperly	一站式免费在线文件服务，转换、编辑和优化您的文件。
DebugBear 速度测试	测试和优化页面加载速度
Code Beautify	免费在线工具，如代码美化器、代码格式化工具、编辑器、查看器、压缩器、验证器和转换器，专为开发人员设计
Vue 超级速查表	一个交互式的 Vue、Vue Router 和 Pinia 超级速查表。你将永远不需要的唯一 Vue 超级速查表。
appydev	一个为在网上创造和生活的人们准备的出色工具、资源和产品的集合。
ExtendsClass	开发者免费在线工具，包括图像压缩器/编码器、代码格式化工具、代码 Playground 以及其他许多实用的小工具。
RunJS	在线免费的 JavaScript 游乐场。
Pillarstack	前端开发人员和网页设计师的各类资源。

目录