design-resources-for-developers：开发者需要的设计资源，这一个仓库全齐了

design-resources-for-developers：开发者需要的设计资源，这一个仓库全齐了

这个仓库在 GitHub 上拿到 66,204 Star 了。

Brad Traversy 整理的这份设计资源清单，覆盖了 UI 图形、字体、颜色、图标、Logo、素材图片、视频、音乐、HTML 模板、CSS 框架、UI 组件库、设计工具等二十多个分类。做前端开发的人基本都能在里面找到需要的东西。

1、这东西解决什么问题

做前端的人经常碰到这种情况：项目需要一个合适的插图，或者一套配色方案，或者一组图标。去搜索引擎翻半天，找到的要么质量不行，要么收费，要么授权不清楚。

这个仓库把散落在各处的免费设计资源归拢到一起，按类别分好，每个资源都附带一句话说明。想找什么直接进对应分类翻就行。

2、资源覆盖哪些方面

资源类型很全。视觉层面的有 UI 图形素材、图标库、Logo 资源、矢量插画、产品样机模板。排版层面的有免费字体、字体配对工具。颜色方面有色板生成器、渐变工具、对比度检查器。

技术层面的也不少。HTML 和 CSS 模板、CSS 框架、CSS 动画库、JavaScript 图表库和动画库都在里面。UI 组件库按框架分了类，React、Vue、Angular、Svelte、React Native 各有专门的板块。

还有设计系统参考、在线设计工具、图片压缩工具、Chrome 和 Firefox 扩展，以及 AI 设计工具。

3、图标和颜色资源

图标这块，收录了 Font Awesome、Feather Icons、Tabler Icons 这类常用的图标库，也有 IonIcons、Material Design Icons 等选择。想找特定风格的图标，基本都能找到。

颜色工具数量很多。Coolors、Adobe Color、Color Hunt 这些主流的色板工具都在，还有专门针对 Tailwind CSS 的颜色生成器、无障碍色彩对比度检查器。渐变相关的工具单独列了一组，Web Gradients、Gradient Hunt 都有收录。

4、UI 组件和模板

HTML 和 CSS 模板部分收录了 AdminLTE、Tabler、Flowbite 这类后台模板，也有 Creative Tim 出品的 Material Kit 和 Argon Dashboard。免费的 Bootstrap 主题和 Tailwind CSS 组件资源也不少。

UI 组件库按框架做了细分。React 有 Shadcn UI、Ant Design、MUI、Chakra UI。Vue 有 Vuetify、Element、Quasar。Angular 有 Angular Material。Svelte 有 Svelte Material UI。每个框架下都有多个成熟的组件库可选。

5、什么人用得上

正在做个人项目或者创业项目、需要设计资源但没有设计师的开发者，这个仓库直接解决了问题。想找一套合适的配色，去颜色板块翻；需要图标，去图标板块找；要一套后台模板，HTML 模板板块里有现成的。

做 side project 的人尤其适合。不需要花时间到处找资源，一个仓库里的东西基本够用。资源都是免费的，授权信息也标注清楚了，不用担心版权问题。

一个仓库里的东西基本够用。资源都是免费的，授权信息也标注清楚了，不用担心版权问题。