每个开发者💻都应该收藏的最佳设计🎨资源网站🔖

GitHub 个人资料 README 生成器

您是否正在寻找最佳的网站设计资源？那么，这个合集值得每个开发人员收藏，因为它汇集了最优质的资源，可以帮助您开发出令人惊艳、视觉效果丰富的项目。

在这里，您可以找到具有不同格式（例如 PSD、Sketch、Figma、图标、插图等）的现代 UI 组件的最佳网站和资源。它们非常适合用于 Web 组件/UI 的创意。

产品设计是每个开发者工作中至关重要的一部分。它不仅关乎美观，更关乎引人入胜的视觉效果和整体呈现。为此，这些丰富的资源将大有裨益。与其在漫长的设计过程中投入时间和金钱，不如利用这些资源，它们能提供现成的组件和功能，打造出一款出色、令人印象深刻、令人赞叹的产品。这样，你也能节省大量的时间和金钱。

到处搜索各种资源可能会让人感到压力很大。因此，我们决定创建这个合集，将所有最佳资源和网站汇集到一处。

现在让我们看看下面的收藏。

FlyonUI - Tailwind CSS 组件库

FlyonUI 是免费的Tailwind CSS 组件库，旨在结合两全其美的优势：语义类的美学吸引力和 JS 插件的强大功能。

在底层，它利用了以下优势：

Tailwind CSS： 一个实用优先的 CSS 框架，可帮助您轻松构建漂亮的网站。
DaisyUI： 向 Tailwind CSS 添加组件语义类名，以便您可以更快、更轻松、更易于维护地创建漂亮的网站。
Preline： JavaScript 无头且完全无样式的 Tailwind 插件，用于打造可访问、响应式的 UI。通过动画、过渡等功能增强体验。

特征：

JS插件支持
语义成分
800+ 免费组件和示例
通用框架兼容性
无限主题
无样式且可访问的插件
响应式和 RTL 支持
永远免费
美观且语义化的造型
效率和生产力
可维护且可扩展

示例：Figma 和 Sketch 的免费头像库：让您的项目独一无二。

Exemplar – 头像库包含 20 个头像。您可以通过自定义颜色和形状将它们用于您的应用程序！这是一个精心挑选的用户配置文件样式库。在处理一个涉及大量配置文件的项目时，我们意识到样式库比插件使用起来更快，因此为了节省时间并简化操作，我们准备了这个库。

它提供：

Figma 组件
草图符号
20 个免费头像
可调整大小、高分辨率且可定制
适用于网络和应用程序

由Themeselection制作

Sneat Bootstrap 5 HTML 管理模板（最佳 Bootstrap 5 HTML 管理模板🤩）

Sneat Bootstrap 5 HTML 管理模板——是最新的、最适合开发人员🤘🏻且高度可定制✨的基于 Bootstrap 5 的管理仪表板模板。此外，它被认为符合最高的行业标准，为您带来最好的引导主题，它不仅速度快🚀且易于使用，而且具有高度的可扩展性。

此外，您可以使用这款最佳创新型Bootstrap 模板之一来创建引人注目、高质量且高性能的 Web 应用程序。此外，您的应用将完全响应，确保它们在台式机、平板电脑和移动设备上外观惊艳、运行流畅。

特征：

基于Bootstrap 5
垂直和水平布局
默认、带边框和半暗主题
支持明暗模式
国际化/i18n 和 RTL 就绪
布局生成器
主题配置：轻松定制我们的模板。
SASS 支持
完全响应式布局
干净且注释的代码
有据可查
享受无忧支持

下载演示

也可在React Dashboard版本中使用。

Sneat 是Next js 模板之一

Bootstrap 5 备忘单：Bootstrap 5 类、变量和混合的交互式列表

Bootstrap 5 速查表是一个包含 Bootstrap 5 类、变量和混合宏的交互式列表。它可以帮助您轻松找到 Bootstrap 4 和 Bootstrap 5 之间的区别。

此外，它还面向大量难以搜索引导类、变量和混合的引导用户。

主要特点包括：

搜索您的类、变量或混合
突出显示 Bootstrap 4 和 5 类之间的差异
HTML 和代码片段的实时预览
随时更新代码片段
轻松复制代码片段并使用它

免费 Figma Bootstrap 5 UI 套件

Figma Bootstrap UI 套件包含 300 多个井然有序的 Bootstrap 5 组件，并采用原子设计系统和自动布局构建。只需从资源面板拖放预制组件，即可快速启动您的下一个 Figma 项目。在右侧边栏进行配置。快速简便，一如既往。

特征：

自动布局
水平或垂直调整任何组件的大小
300 多个采用原子设计构建的有序 Bootstrap 5 组件
易于定制

Materio – Figma 管理仪表板构建器和 UI 套件（最佳 Figma 电子商务模板和 UI 套件🤩）

功能最丰富的材料设计系统，具有可立即使用的组件和元素，可构建无缝的用户体验。

它由 500 多个有序组件组成。此外，这款 Figma 管理模板 UI 套件采用原子设计系统和自动布局构建* 。 *此外，这款Figma 管理仪表板构建器和 UI 套件还提供 3 个仪表板、100 多个屏幕以及明暗模式。

现在，您只需从资源面板拖放预制组件即可启动您的下一个 Figma 项目。此外，您还可以在右侧边栏中配置它们。快捷又简单，一如既往。

此外，它还能帮助您轻松设置颜色、字体和边框半径，这些设置可在 UI Kit 中即时更改。此外，此 Figma管理仪表板UI Kit 模板可让您轻松更新组件的状态。

如果您编辑组件，无需担心更改变体。您配置的设置（例如文本、图标甚至大小）都会被保存。因此，它是您所需的最佳Figma UI 套件之一。

特征：

原子设计
自动布局
易于定制
500多个组件
文本变量
井然有序
100% 矢量
明暗布局
像素完美
100+ 屏幕及更多

也可在Bootstrap Dashboard版本中使用。

Bootstrap 主题之一，提供 5 个具有多种布局和页面的利基仪表板。

ZipBoard

zipBoard 是一款适用于静态和实时网站的在线视觉反馈和错误跟踪解决方案。它允许您审查您的网站，提供上下文反馈，并与利益相关者协作。

zipBoard 简化了 Web 开发人员、UX/UI 设计师和审阅人员的 Bug 跟踪流程。使用 zipBoard，您可以在一个集中平台上审阅所有在线校样，省去无休止的电子邮件往来和屏幕共享会议的麻烦。

作为一个问题跟踪工具，zipBoard 允许你使用其提供的众多标记工具直接在屏幕上进行注释。它拥有易于使用、简洁的用户界面，方便从非技术客户和利益相关者那里获取反馈，而这正是 Web 开发人员/设计师经常需要的。

特征

自定义 API 和功能
直接在屏幕上注释
多种共享选项
友好的界面
明确角色分配
无限项目/合作者：
开箱即用的集成：

免费 Sketch Bootstrap 5 UI 套件

Sketch Bootstrap UI 套件包含 300 多个 Bootstrap 5 组件，采用原子设计系统和智能布局构建。只需从“资源”面板拖放预制组件即可快速启动你的下一个 Sketch 项目。

特征：

智能布局
水平或垂直调整任何组件的大小
300 多个采用原子设计构建的有序 Bootstrap 5 组件
易于定制

100 个每日免费 UI：Figma 产品、元素和屏幕库

100 Daily UI Challenge是一个免费的 Figma 元素和屏幕库。您可以通过更改颜色、形状或元素来自定义所有内容。您可以创建一些非常棒的 UI 设计，并打造更优秀的产品。

Jan Janeczek制作，

可免费用于商业和个人用途。CC BY 4.0

许可

Invision App：免费、高质量 UI 工具包、图标包和模型库

Invision 应用程序是一个数字产品设计平台，致力于提供全球最佳的用户体验。InVision 平台提供直观的构思、设计、原型设计和设计管理工具，让您在一处即可完成数字产品设计所需的一切。

这就是为什么数万家公司的 700 多万人正在使用它，其中包括美国运通、波音、Netflix、宜家、Slack和维珍航空等品牌。Invision 提供了内置的分步入职教程。

它还提供以下功能：

平台：macOS、Windows

价格：免费

图标 8：免费矢量插图，为您的项目分类

Icons 8 帮助不懂绘画的创作者克服图像质量不足的问题。下载 Dribbble 顶级艺术家创作的免费 PNG 和 SVG 插图，提升您的产品档次。

它提供以下内容。

Uplabs：高品质设计资源（免费和付费）

UpLabs是一个供设计师和开发者查找和共享资源以构建应用和网站的网站。它是一个由社区驱动的市场，允许开发者和设计师共享可立即发布的 UI 资源，例如登录框和支付表单，以构建应用和网站。在UpLabs社区中，设计师和开发者可以互相收集关于现有概念的反馈，并买卖他们的原型。

UpLabs 每天都会为Web、iOS 和 macOS以及Material Design精心挑选最佳资源：用户界面、实验、开源应用程序、库和即用型产品。

UpLabs 提供 3 个展示：–

MaterialUp用于 Material Design
适用于 iOS/OS X 的iOSUp
SiteUp用于网页设计

Undraw：开源插画，助您实现任何想象和创造

Undraw是一个持续更新的高质量精美矢量图标库，包含四种风格。它免版税，可免费用于个人和商业项目。

Sneat Sketch 管理仪表板 UI 套件模板

使用Sketch 中现成的Bootstrap 5 组件，在几分钟内设计出强大的模板🚀

Sneat Sketch 管理仪表板 UI 套件模板包含 500 多个有序的 Bootstrap 5 组件。此外，此Sketch管理仪表板 UI 套件采用原子设计系统和智能布局构建。此外，此 Sketch 管理仪表板 UI 套件** 模板还提供 3 个仪表板、6 种布局、40 多个页面以及明暗模式。现在，您只需从“资源”面板拖放预制组件即可启动您的下一个 Sketch 项目。您还可以在右侧边栏中配置它们。快速简便，正如预期的那样。

此外，它还能帮助您轻松设置颜色、字体和边框半径，这些设置可在 UI Kit 中即时更改。此外，这款 Sketch 管理仪表板 UI Kit 模板还允许您轻松更新组件的状态。编辑组件时，您无需担心更改变体。您配置的设置（例如文本、图标甚至大小）都会被保存。因此，它是您所需的最佳Sketch UI Kit之一。如果您正在寻找 Bootstrap 版本，请查看Bootstrap 管理模板。

特征：

原子设计
易于定制
500多个组件
Bootstrap 网格
文本变量
井然有序
100% 矢量
智能布局
明暗布局
像素完美
100+ 屏幕及更多

演示下载

如果你正在寻找 Figma 中的相同 UI 套件，请查看此Figma UI 套件

Sketch App 资源：Sketch UI、线框、图标等等

Paaatterns：免费收集所有矢量格式的精美图案

将 Paaatterns 与强大的设计系统结合使用，可加快您的工作流程。

它提供以下内容：

Drawkit：为设计师和初创公司提供的插画

Drawkit是一个完全免费的手绘矢量插图和图标资源库。它包含许多优秀的组件，非常适合你的下一个项目。

ManyPixels：单色、等距高质量插图

对于需要平面设计服务，但又不想承担聘请内部平面设计师费用的企业来说，ManyPixels是一个不错的选择。目前，该公司拥有超过 1,300 名客户。

这些客户包括Beam、Decathlon和Gartner等公司。

谁可以使用 ManyPixels？

需要品牌推广、电子邮件营销、社交媒体图形等方面帮助的初创企业。
需要电子邮件活动设计、活动图形或 T 恤的营销/创意机构。
需要商业报告、信息图表和电子商务图形的公司。
需要为其频道添加醒目图标的博主/播客主持人。

Materio – Vuetify Vuejs 管理模板

Materio Vuetify Vuejs 管理仪表盘模板– 是基于Vuetify 的最新版，最方便开发者使用 🤘🏻 且高度可定制 ✨ 的管理仪表盘模板。如果您是一位开发者，正在寻找功能丰富、高度可定制的 Vuejs 管理模板，那么 Materio Vuetify Vuejs 管理模板🤩 就是您的最佳选择。此外，它遵循行业最高标准，为您带来最优秀的VueJS 管理模板之一，不仅速度快🚀、易于使用，而且高度可扩展。它提供极致的便利性和灵活性，让您能够轻松构建任何所需的 Web 应用程序。

Materio 还提供了许多宝贵的功能，旨在帮助您创建完全符合您想象的优质单页应用。此外，它还配备了独特实用的工具，例如模糊搜索、深色、半深色和带边框布局选项、高级卡片和图表。此外，它还提供以下令人惊叹的功能。

特征：

纯 VueJS，无 jQuery 依赖
使用 Vue CLI 创建
使用 Vuex、Vue Router、Webpack
代码拆分、延迟加载
JWT 身份验证
访问控制（ACL）
支持 RTL
国际化页面
多语言支持
2个图表库
3 仪表板
由 SASS 提供支持，还有更多。

如果您正在寻找Laravel 管理模板，请查看 Materio VueJS Laravel 管理模板。

MaterialPro Vuetify 管理员

MaterialPro Vuejs 管理面板基于 Vuetify，拥有清新的外观和众多即用型功能。它基于著名的 Google Material Design 设计。MaterialPro Vuetify 面板附带一些可定制的应用程序设计，可以帮助您构建相关应用程序。MaterialPro Vuetify JS 管理面板模板用途广泛，非常适合构建任何类型的 Web 应用程序和产品。您可以使用它来创建库存管理、仓库管理、会计软件、任何基于 SaaS 的应用程序等等。

Humaaans：具有混搭能力的人的酷炫插图

Humaaans是一个免费的人物插画库，你可以自由搭配人物插画。你可以自定义人物的位置、服饰、颜色和发型，创造出一些炫酷的场景。你可以添加背景，并利用图库的强大功能打造属于你自己的专属作品。

由Pablo Stanley制作。

可在

草图
Figma
InVision Studio
Adobe XD

这使您可以使用库的功能，以便可以在多个项目中使用您的角色。

混搭

👗 上衣
👖 下装
💇🏽‍♀️ 发型
☝🏽 站立姿势
🐒 坐姿

模板

🖥 网页登陆页面
📱 移动错误/成功/空状态
🛫 入职流程让您可以快速开始。

Avataaars：免费头像插图素描库

使用这款免费的图库，在Sketch App中创建头像插图。结合服装、发型、表情、配饰和色彩。

由Pablo Stanley 🎨设计

Freeillustration：免费背景图片，打造精彩登陆页面

免费插画是一系列适用于现代网站和落地页的高分辨率矢量或插画背景图片。我们每周更新不同主题的新插画。您可以联系我们，根据您的需求推荐新的插画背景图片主题。

Freebiesketch：免费草图设计、线框、插图等。

Freebiesketch是 Sketch 应用免费资源的最佳合集，可供下载。面向 UX/UI 设计师的资源，包括网页、移动设备、可轻松编辑的模型，所有内容都包含在 .sketch 文件中。

Blush：使用 Figma 插件免费定制插画

Blush是一款将来自世界各地艺术家的插画作品带给所有人的工具。最棒的是，你可以自定义插画的每一部分，创作出属于你自己的作品。

Blush 现已作为 Figma（Sketch 即将推出）的插件推出，方便设计师在画布上轻松创作插画，且不会丢失背景信息。Blush 也提供 Web App 版本，方便用户下载插画并将其添加到自己的作品中。您可以为博客文章创建醒目的横幅广告，制作视觉效果丰富的幻灯片，并为图表添加一些令人印象深刻的视觉效果。