后端开发教程 - Java、Spring Boot 实战 - msg200.com
为开发人员、设计师、工程师提供无限资源
contributing guidelines提交新资源之前请阅读。
目录
- UI图形
- 字体
- 颜色
- 图标
- 网站图标
- 图标字体
- 库存照片
- 库存视频
- 库存音乐和音效
- 矢量图和剪贴画
- 产品和图像模型
- HTML 和 CSS 模板
- CSS框架
- CSS动画
- JavaScript动画
- UI 组件和套件
- React UI 库
- Vue UI 库
- Angular UI 库
- Svelte UI 库
- 设计系统和风格指南
- 在线设计工具
- 可下载的设计软件
- 设计灵感
- 图像压缩
- Chrome扩展程序
- 其他的
UI图形
包含不同格式（例如 PSD、Sketch、Figma 等）的现代 UI 组件的网站和资源。它们非常适合用于 Web 组件/UI 的创意
| 网站 | 描述 |
|---|---|
| UI设计日报 | 各种类型的出色 UI 组件 |
| 100 每日 UI | 免费的 Figma 产品、元素和屏幕库 |
| Sketch 应用程序源 | 绘制 UI、线框、图标等等 |
| 人类 | 具有混搭能力的人的酷炫插图 |
| 图案 | 免费收集所有矢量格式的精美图案 |
| 模式库 | 免费精美背景图案 |
| 404 插图 | 404页面的免费插图 |
| Drawkit.io | 为设计师和初创企业提供的插图 |
| Undraw.co | 开源插图，满足您想象和创造的任何想法 |
| 插画.co | 开源插图套件 |
| Manypixels.co | 单色、等距高质量插图 |
| 打开窥视 | 手绘插画库 |
| 用户界面空间 | 数以千计的优秀 UI 免费赠品 |
| 动画公司 | 精美、可定制的动画 GIF 图标 |
| Uplabs | 高品质设计资源（免费和付费） |
| InvisionApp | 免费、高品质 UI 工具包、图标包和模型库 |
| 打开涂鸦 | 一套免费的素描插图 |
| 头像 | Pablo Stanley 创作的免费头像插图素描库 |
| FreebieSketch | 免费的草图设计、线框、插图等。 |
| 脸红 | 使用 Figma 插件免费定制插图 |
| 英雄模式 | 可重复的 SVG 背景图案集合 |
| IRA 设计 | 由 creative tim 创作的开源渐变插图集。 |
| Storytale.io | Storytale 免费优质插图子集 |
| icons8.com/插图 | 免费矢量插图，提升您的项目档次 |
| 帕特里科 | 无缝图案制作器 |
| 免费插画 | 精彩登陆页面的免费背景图片 |
| Pixeltrue 插图 | 免费动画插图 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
字体
提供免费字体以及基于字体的工具的网站
| 网站 | 描述 |
|---|---|
| 谷歌字体 | 约 1000 种免费授权字体系列的库 |
| 达丰特 | 可免费下载字体的档案 |
| 使用和修改 | 个人精选美丽、优雅、朋克、专业、不完整、奇怪的字体 |
| 1001种免费字体 | 我认为这个名字不言而喻😏 |
| 字体松鼠 | Font Squirrel 在互联网上搜索高质量、合法免费的字体 |
| 字体结构 | 一家数字字体铸造厂，为各种品牌制作零售字体和定制排版 |
| 蒂芙 | 字体类型差异工具，直观地对比两种字体之间的差异 |
| TypeKit 实践 | 了解排版实践 |
| 丰乔伊 | 一键生成字体配对 |
| 黄金比例 | 黄金比例排版计算器 |
| FontSpark | 发现更好的字体 |
| 字体对 | 帮助您将 Google 字体配对在一起 |
| 字体空间 | 以设计师为中心的免费字体网站，提供快速可定制的预览 |
| 抽象字体 | 字体可免费用于个人和商业用途 |
| 免费排版 | 高品质字体列表 |
| Leon Sans | 用代码制作的几何无衬线字体 |
| 莱克森德 | 经验表明，可变字体可以显著提高阅读能力 |
| 适用于 Apple 平台的字体 | 获取在应用中使用 Apple 平台系统字体所需的详细信息、框架和工具 |
| SFWin | 适用于 Windows 10 和非 Apple 平台的 San Francisco 字体 |
| 字体翻转器 | 在您自己的设计上预览 800 多种 Google 字体，无需下载字体 |
| 字体竞技场 | 免费精选字体 |
| 贝丰茨 | 免费提供高品质字体 |
| 阿拉伯字体 | 免费阿拉伯字体 |
| FontDrop | 查看字体文件内容的简单方法 |
| 开放铸造厂 | 精选开源字体的免费平台 |
| 雕文 | 上传你自己的 SVGS 并将其转换为字体文件。如果你想要加载较小的库，这很有用 |
| Google Webfonts 助手 | 轻松自托管 Google 字体 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
颜色
有助于选择颜色的网站和资源
| 网站 | 描述 |
|---|---|
| Colormind.io | 调色板生成器 |
| ColorCurves.app | 使用曲线生成调色板的调色板生成器 |
| 冷却器 | 创建完美的调色板或从数千种美丽的配色方案中获得灵感 |
| HTML 颜色代码 | 使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值 |
| 颜色和字体 | 精选的颜色、字体和资源库 |
| 调色板列表 | 选择 2 种您喜欢的颜色，该工具会为您生成数千种调色板。 |
| Google Material 颜色工具 | 官方 Google Material 调色板工具 |
| 材质面板 | 自由选择 Material Design 的调色板、图标和颜色 |
| 色彩空间 | 用一种颜色生成漂亮的调色板 |
| FlatUIColors | 一组各种风格的漂亮调色板 |
| Adobe 颜色 | 创建调色板、从图像中提取渐变等 |
| 色彩灵感 | 查找有关颜色的一切的一体化资源 |
| 快乐色彩 | Happy Hues 是一个调色板灵感网站，它作为现实世界的例子，说明如何在您的设计项目中使用这些颜色，作者：Mackenzie Child |
| Adobe 趋势 | 从 Behance 和 Adobe 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 格式显示不同的渐变示例 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
图标
图标资源包括 png、svg 等
| 网站 | 描述 |
|---|---|
| UXWing | 经过精心优化，可免费用于商业用途的图标 |
| 30K SVG图标 | 收集了超过 30k 个 svg 图标和用于生成自定义图标的工具 |
| Shapedfonts Iconclub | 8000+ 个免费图标 |
| 羽毛图标 | 美观、可定制的开源图标 |
| 表格图标 | 470+ 高度可定制的开源 SVG 图标 |
| 简单图标 | 1307 个热门品牌的免费 SVG 图标 |
| 即时徽标搜索 | 数千个免费品牌徽标（SVG-PNG） |
| 线性图标 | 1000+ 超清晰矢量图标 |
| 恩蒂波 | 411 个由 Daniel Bruce 精心制作的优质象形图 |
| Icons8 | 免费图标、照片、矢量图和工具 |
| 平面图标 | 最大的 PNG、SVG、EPS、PSD 和 BASE 64 格式免费图标数据库 |
| 名词项目 | 超过 200 万个精选图标，由全球社区创建 |
| Iconscout | 免费下载图标插图素材 |
| 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 中使用 |
| SVGPorn | 1000+ 高品质 SVG 徽标 |
| 支付系统徽标 | 支付系统徽标提供 png 和 svg 格式 |
| 浏览器徽标 | 高分辨率网络浏览器徽标 |
| IconBros | 7843+ 个免费图标，分为 182 个系列 |
| LogoHub | 以 PNG 和 SVG 格式免费生成并下载您的徽标 |
| 材料设计图标 | 图标集合允许针对各种平台的设计师和开发人员下载任何项目所需的格式、颜色和大小的图标。 |
| 英雄偶像 | 来自 Tailwind CSS 创建者的免费开源图标。 |
| 佐迪康斯 | 一组免费的高级 SVG 图标，可供您在数字产品上使用。 |
| 无尽的图标 | 一个提供大量免费图标的网站。图标均已标记并压缩成套件。 |
| 艾科蒙 | 浏览 5500 多个免费图标。添加任意图标集，即可轻松浏览和搜索图标。 |
| 伊娃图标 | Eva Icons 是一套包含 480 多个精美开源图标的包，用于常见操作和项目。 |
| 佐迪康斯 | 一组免费的高级 SVG 图标，供您在数字产品上使用。您可以将图标下载到桌面 |
| 恩蒂波 | 411个精心制作的优质象形图 |
| 密码图标 | 一套包含 430 个加密货币和法定货币图标的套装。完全免费。 |
| 伊科纳特 | 完全可定制且可访问的矢量图标 |
| 应用程序图标 | 为您的 IOS、macOS 和 Android 项目快速生成不同大小的应用程序图标 |
| 线条图标 | 2000+ 设计师和开发者必备的 Line 图标 |
| 永恒图标 | Evericons 是一个包含超过 460 个免费图标的大包，由 Aleksey Popov 设计。 |
| SVG 仓库 | 下载免费的 SVG 矢量以供商业使用。 |
| 转换 | 在线免费将 PNG 文件转换为 SVG。（这是它提供的服务之一。） |
| CSS图标 | 图标集采用纯 CSS 代码制作，无依赖项，“抓取即用”图标 |
| 统一图标 | 数千个图标，一个统一的框架。一个库，超过 40,000 个矢量图标。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
网站图标
网站图标资源
| 网站 | 描述 |
|---|---|
| Favicon.io | 用文本、图片或表情符号生成网站图标。可下载 .ico 和 .png 格式 |
| 蚕蛹 | 生成所有尺寸和格式的图标以及支持所有可能的浏览器或设备所需的 HTML 代码 |
| 网站图标生成器 | 为您的网站生成 favicon ico 文件 |
| RealFavicon生成器 | 为所有平台（Windows、iOS、Android）生成图标 |
| 字体图标 | 从 Font Awesome 图标生成图标和图像 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
图标字体
图标字体资源
| 网站 | 描述 |
|---|---|
| 字体真棒 | 网络上最受欢迎的图标集和工具包 |
| 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 应用更加出色 |
| Fontastic.me | 数秒内创建自定义图标字体。超过 9,000 个图标可供选择，或上传自定义 SVG 文件 |
| 丰泰洛 | 200 多个网络图标，您可以自定义图标的名称或代码。 |
| 莱尼亚 | Linea：拥有 750 多个免费图标 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
库存照片
为您的网站和应用程序提供各种免费库存照片的网站
| 网站 | 描述 |
|---|---|
| Pexels | 才华横溢的创作者分享的免费库存照片 |
| Unsplash | 互联网上可自由使用的图像来源 |
| Pixabay | 超过 170 万张高质量图片和视频 |
| 玛格德莱娜 | 每天提供图库和免费高分辨率照片 |
| Picspree | 免版税图片、库存照片、插图和矢量图 |
| 爆裂 | 免费素材集锦 |
| 免费摄影 | 免费收集高清图片 |
| 《像素人生》 | 免费高分辨率摄影 |
| 股票快照 | 每周添加数百张高质量照片 |
| 停尸房档案 | 超过 350,000 张可用于商业用途的免费库存照片 |
| Kaboom 图片 | 库存摄影和调色板。适合产品图片 |
| 新旧库存 | 库存复古照片 |
| 图片巨无霸 | 不同类型的照片的精彩合集 |
| 公共领域图片 | 所有类型的公共领域图像 |
| 查找照片 | 搜索多个图片库网站 |
| 斯托克沃特 | 分类库存照片 |
| 占位符 | 一个免费的网络图片占位服务。您可以指定图片大小和格式 |
| 逼真的镜头 | 免费高分辨率库存照片 |
| 负空间 | 高分辨率免费图片 |
| SkitterPhoto | 免费高分辨率摄影 |
| PicoGraphic | 精美、高分辨率、免费的照片 |
| 神奇股票 | 令人惊叹的免费照片 |
| 地平线 | 免费图片和免费照片 - 高清壁纸 |
| 皮克塞尔 | 免版税照片 |
| 美食家饲料 | 食物照片库 |
| 尿布 | 一个提供黑人和棕色人种的美丽高分辨率照片的网站。 |
| 生成的照片 | 独特的AI生成模型照片 |
| 重拍 | 独一无二的免费照片。精选图片，非图库图片。 |
| 免费图片 | 查找并下载免费库存照片 - 全部免费用于个人和商业用途 |
| Lorem 图片 | 一个易于使用的 API，用于获取精美的占位符图像。可以指定尺寸和其他参数。 |
| 科学图像 | 专注于科学和自然图像的图像库 |
| 集成应用网络图像库 | 免费图像为科学家、资源管理者、政府机构、社区团体和图形专业人士提供增强科学交流的资源。 |
| 虎耳草属 | 免费自然图像 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
库存视频
为您的网站和应用提供各种免费库存视频的网站
| 网站 | 描述 |
|---|---|
| Pexels | 最大的免费视频库，由社区捐赠 |
| Pixabay | 大型免费视频库，由社区捐赠，类似 Pexels |
| Coverr.co | 精美的免费库存视频素材 |
| 视频 | 免费高清素材和 4K 视频 |
| 混合套件 | 库存视频剪辑和音乐 |
| 视频生活 | 免费视频剪辑和循环 |
| 维德沃 | 免费和付费的库存视频 |
| Loopvidz | 免费使用 VIMAGE 应用创建的 Cinemagraphs |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
库存音乐和音效
提供免费库存音乐和/或音效的网站
| 网站 | 描述 |
|---|---|
| 免费库存音乐 | 适用于 YouTube 视频、播客等的免版税库存音乐 |
| 本桑德 | 免费下载免版税音乐并将其用于您的项目 |
| Mixkit | 为您的项目提供免费音乐 |
| 自由声音 | 免费的库存音乐和声音 |
| 免费音乐档案 | 为音乐家和声音爱好者提供的知识共享许可声音协作数据库 |
| 穆斯彭 | 一个免费在线古典音乐图书馆 |
| 联合 | 为您的项目提供免费的优质音乐🎁免版税。已在 YouTube 上发布。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
矢量图和剪贴画
免费矢量图、剪贴画、插图、图案等
| 网站 | 描述 |
|---|---|
| 维克蒂齐 | 查找并下载免费矢量艺术 |
| 航迹图制作器 | 图表工具 |
| Freepik | 免费矢量图、库存照片、PSD 和图标 |
| 免费矢量图 | 分享免费矢量图形的矢量爱好者社区 |
| PNG树 | png、背景、模板、文本效果 |
| Vector4Free | 免费矢量图形 |
| 复古矢量图 | 复古矢量图和图形 |
| 弗里布尔 | 矢量图、图案、模型等等 |
| 卢卡斯扎达姆 | 免费矢量 atrworks |
| 插图 | 100幅精美插图 - png、svg |
| 剪贴画 | 从免费收藏中为您的项目选择精美的剪贴画、png、着色页、绘图等！ |
| Growwwwkit 插图 | 一组 8 幅简洁、黑白、时尚的插图 |
| 世界矢量标志 | 下载您喜爱的品牌的矢量徽标 |
| trianglify.io | 生成低多边形背景、纹理和矢量 |
| 斑点 | 为 Web 和 Flutter 应用生成 Blob 形状 |
| 嗨剪贴画 | 设计师共享和下载透明背景 PNG 剪贴画的社区 |
| Freepik 的故事 | 一系列免费且可定制的项目插图 |
| 黑色插图 | 黑人的精美插图（免费和付费） |
| 德莱设计 | 免费插图集锦及更多内容 |
| 自定义形状分隔线 | 免费工具，使设计师和开发人员可以更轻松地导出漂亮的 SVG 形状分隔线 |
| 施维雅医疗艺术 | 3000 张免费医学图像可用于说明您的出版物和 Powerpoint 演示文稿 |
| 克尔克 | 您可以使用免费剪贴画来制作任何您喜欢的东西 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
产品和图像模型
创建设备和其他产品的模型
| 网站 | 描述 |
|---|---|
| 智能模型 | 创建令人惊叹的产品模型（免费和付费） |
| 快照 | 为您的应用或网站设计创建漂亮的设备模型图像 |
| 斯克利利 | 立即将您的屏幕截图转换为模型 |
| 截图.rocks | 在几秒钟内创建漂亮的浏览器和移动模型 |
| 屏幕峰值 | 从 URL 创建模型 |
| 模型世界 | 最大的免费逼真的在线模型来源 |
| 合作镜头 | 实时截屏和图像共享 |
| Facebook 设备 | 流行设备的图像和 Sketch 文件 |
| Threed.io | 直接在您的浏览器中生成 3D 模型。 |
| 样机 | 适用于所有设备的 100% 免费模型，包括 IOS、Android、Windows Phone、笔记本电脑和台式机以及电视 |
| 设备照片 | 免费为社交媒体创建高分辨率设备模型 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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 主题 |
| Splawr | 免费的网页模板助您启动您的想法！ |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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 框架 |
| 半月用户界面 | 一个响应迅速且轻量级的框架，旨在快速构建漂亮的仪表板和产品页面。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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 关键帧动画的图形用户界面 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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 库，用于在当前页面顶部叠加图像。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
UI 组件和套件
不完全是“框架”，而是使用组件或 UI 工具包创建用户界面的工具
| 网站 | 描述 |
|---|---|
| 标签折叠 | 实用的 Bootstrap 4、HTML5、CSS3 代码片段，用于构建 Web 布局 |
| 用户界面 | 面向网页设计师的极简、以 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 和移动设备的库和插件。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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 粒子动画背景组件 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
视图界面
Vue JavaScript 框架的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Vuetify | 材料设计组件框架 |
| 引导 Vue | 将 Bootstrap 组件与 Vue 结合使用 |
| 布菲 | 基于 Bulma 的轻量级 UI 组件 |
| 语义 UI Vue | Semantic UI Vue 是 Semantic 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 组件 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
角度用户界面
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 组件 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
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>
设计系统和风格指南
设计系统、风格指南、工具包、文档。其中一些是顶级公司/网站的设计指南
| 网站 | 描述 |
|---|---|
| 材料设计 | 谷歌的 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 的设计系统提供组件和工具来帮助产品团队更高效地工作，并使 Adobe 的应用程序更具凝聚力。 |
| 沥青 | Gojek 的设计语言系统。一系列指南和组件，旨在打造卓越的用户体验。 |
| 用户体验法则 | 设计师在构建用户界面时必须考虑的关键准则的集合。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
在线设计工具
各种在线设计工具，从照片编辑器到线框图等等
| 网站 | 描述 |
|---|---|
| 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 | 免费在线图表编辑器工具 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
可下载的设计软件
用于 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>
设计灵感
这里有一些可以获得设计和 UI 灵感的网站
| 网站 | 描述 |
|---|---|
| Behance | 不同创作者的设计项目 |
| 滴答 | 不同创作者的设计项目 |
| Httpster | 展示来自世界各地的人们制作的网站 |
| 微文案灵感 | 精选用户体验写作范例、微文案范例和文案范例 |
| 灵感 | 设计师和设计界的最新设计作品 |
| 设计笔记 | 为产品设计师提供免费的在线资源库 |
| 土地簿 | 显示大量网站以帮助寻找灵感 |
| 前端导师 | 使用 HTML、CSS 和 Javascript 应对真实世界的 UI 挑战 |
| 艾沃德斯 | 一个评选并收集全球最佳 UI 网站的网站 |
| 科多普 | 一个收集最佳 UI 创意和模式并制作教程的网站 |
| SaaS登陆页面 | 探索顶级 SaaS 公司创建的最佳登陆页面示例 |
| 页面.xyz | 策划并发现设计最佳的网页 |
| UI运动 | UI Movement 是一个设计爱好者社区，分享和讨论最有趣和独特的 UI 设计 |
| 拉帕忍者 | 最佳登陆页面灵感 |
| 自由前端 | 从 css html 和 javascript 免费进行前端设计。最新作品一些设计部分 |
| 网框 | 发现并受到精美的 Web 应用程序设计的启发 |
| 收集用户界面 | 每日灵感收集自每日 UI 存档及其他资源。精心挑选，每日更新。 |
| 图形汉堡 | 该网站提供免费和付费图标、模型、UI 套件、文本效果和背景。该网站的资源既有免费资源，也有付费资源。图标格式包括 PNG、SVG、EPS 和 Sketch。有些资源比较混乱，因为免费资源中间夹杂着赞助内容。 |
| 非常好的电子邮件 | 该网站向用户提供大量公司电子邮件，涵盖客户服务到营销等各个方面。 |
| 免费设计资源 | 提供字体、模型、模板图形和 UI 工具包的网站。 |
| 网站启发 | siteInspire 展示了最优秀的网络和交互式设计。 |
| 网页设计灵感 | 一个提供网页设计灵感的网站，每日更新。 |
| 导航导航 | 响应式导航示例 |
| 卡托伊达 | 收集不同的网络组件以获得灵感。 |
| MediaQueris | 一系列使用媒体查询和响应式网页设计的鼓舞人心的网站 |
| 穆兹利搜索 | 设计灵感搜索引擎 |
| DeviantArt | 欣赏 3.7 亿件艺术作品，激发灵感。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
图像压缩
允许压缩大图像的网站
| 网站 | 描述 |
|---|---|
| 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 大小而不丢失透明背景。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
Chrome扩展程序
对设计师和 Web 开发人员有用的 Chrome 扩展程序。
| 网站 | 描述 |
|---|---|
| 什么字体 | 识别网页字体的最简单方法。 |
| WhatRuns | 探索网站运营的奥秘。框架、分析工具、WordPress 插件、字体——应有尽有。 |
| Web 开发人员 | 添加带有各种 Web 开发工具的工具栏按钮。 |
| 超棒的截图和屏幕录像机 | 全页面屏幕捕获和屏幕录像机 - 二合一。立即分享屏幕录像视频 |
| JSONView | 验证并查看 JSON 文档。 |
| JSON Lite | 用于查看 JSON 文件的浏览器扩展。 |
| 窗口调整器 | 调整浏览器窗口大小以模拟各种屏幕分辨率。 |
| 响应式查看器 | 一次显示多个屏幕，响应式设计测试器 |
| 浏览器堆栈 | 立即在任何桌面或移动浏览器上测试您的网页。 |
| 维斯布格 | 使用 JavaScript 构建的开源网页设计调试工具 |
| 关键帧 | 浏览器内 CSS 动画创建器。 |
| Kontrast - WCAG 对比度检查器 | 在浏览器中快速检查并实时调整对比度以满足 WCAG 2.1 要求 |
| Web 开发人员 | 添加带有各种 Web 开发工具的工具栏按钮。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>
其他的
未分类的内容
| 网站 | 描述 |
|---|---|
| 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 标签均进行了简要解释。 |
<b><a href="#table-of-contents">↥ Back To Top</a></b>