文章目录design-resources-for-developers前端开发者必备的设计资源合集design-resources-for-developers前端开发者必备的设计资源合集Brad Traversy 维护的 design-resources-for-developers 仓库目前在 GitHub 上积累了超过 66,000 颗 Star。这个仓库做的事情很简单把前端开发中会用到的设计资源按类别整理到一起。做前端开发的人经常会遇到一个问题代码写得出来但设计素材找不到。找图标、找配色、找插画、找模板每次都要去不同的网站搜索效率很低。这个仓库就是为了解决这个问题而存在的。仓库里的资源按照类型分成了几十个大类覆盖了前端开发中涉及的大部分设计需求。UI 图形方面收录了 SVG 波浪生成器、Sketch 和 Figma 组件库、免费插画网站等。像 Humaaans 可以自由组合人物插画Undraw 提供开源插画Paaatterns 收录了各种矢量图案。字体资源部分除了 Google Fonts、DaFont 这些常见站点还有一些小众但实用的工具。Fontjoy 可以一键生成字体搭配方案Leon Sans 是用代码生成的几何无衬线字体Lexend 是一款经过实验验证能提升阅读效率的可变字体。配色工具是最实用的一个分类。Coolors 能快速生成调色板Color Brewer 2 支持色盲友好的配色方案Khroma 用 AI 学习用户偏好的颜色并生成调色板。还有专门针对 Material Design、Tailwind CSS 等框架的配色生成器。图标资源的收录量很大。Feather Icons 提供简洁的开源图标Tabler Icons 有 3500 多个可自定义的 SVG 图标Iconify 整合了超过 40,000 个矢量图标到一个统一框架中。此外还有 Bootstrap Icons、Heroicons、Phosphor Icons 等知名图标库。除了这些核心分类仓库还收录了 Logo 资源、Favicon 生成工具、图标字体、免费图库、视频素材、音效资源、矢量图形、产品模型、HTML/CSS 模板、CSS 框架、CSS 动画库、JavaScript 图表库、UI 组件库以及 React、Vue、Angular、Svelte 等框架对应的 UI 库。设计系统和风格指南单独归为一类收录了各主流设计系统的官方资源。浏览器扩展部分整理了 Chrome 和 Firefox 上与设计相关的实用插件。AI 图形设计工具作为新增分类收录了一批基于 AI 的设计生成工具。整个仓库采用表格形式组织每条资源都附有官网链接和一句话说明方便快速浏览和筛选。对前端开发者来说这个仓库相当于一本设计资源的速查手册。不需要记住每个工具的名字需要什么类型的素材直接在对应的分类里找就行。仓库持续由社区维护接受外部贡献资源列表在不断更新和扩充。仓库持续由社区维护接受外部贡献资源列表在不断更新和扩充。