说实话，第一次看到"三中三"这个词的时候，我脑子里蹦出来的是高中数学排列组合那一套东西。后来跟几个做设计的朋友聊天才知道，他们在日常工作中嘴里的"三中三"，指的完全是另一回事——简单来说就是三种类型的资源，每种再细分三个方向，凑成一个九宫格式的资源矩阵。这个说法最早在几个设计师社群里流行起来，后来慢慢扩散到自媒体、编程、学术研究等圈子里，成了一个约定俗成的黑话。

我花了大概两周时间，把现在还活着的、真正能用的三中三资源站点挨个跑了一遍。有些站点已经挂了，有些虽然能打开但内容年久失修，还有些广告弹窗多到让人想砸键盘。下面这份清单，是我筛完之后觉得值得放进收藏夹的。每个人的需求不一样，我尽量把每个站点的特点、适用场景和坑都讲清楚。

先搞清楚三中三到底指什么

不同圈子对"三中三"的定义有细微差别，但核心逻辑是一致的。拿设计圈来说，三类资源通常是：素材类、工具类、学习类。素材类下面分三个方向——图标与矢量、图片与纹理、字体与配色；工具类下面分在线工具、桌面软件、插件扩展；学习类下面分教程视频、设计规范文档、社区讨论。这就是一个典型的三中三结构。

放到编程圈，三类可能变成：文档与教程、开源项目与代码片段、社区与问答。每类再分三个子方向。自媒体的三中三则是：选题与热点、素材与配图、排版与分发工具。你会发现，不管哪个领域，这个框架的本质是把资源按"用途"做两层分类，第一层是大类，第二层是具体方向，总共九个格子，方便你按需取用。

我下面整理的清单，尽量覆盖多个领域的通用型站点，也会标注哪些更适合特定人群。每个站点我都会说清楚：它是干什么的、免费程度如何、有没有什么隐藏限制。

第一类：素材与内容资源

图标与矢量素材

阿里巴巴矢量图标库（iconfont）大概是国内做设计和开发的人最熟悉的一个了。它最大的好处是中文界面、搜索方便、支持批量下载和格式转换。免费用户可以使用绝大部分图标，但要注意有些作者标注了"仅限个人使用"，商用之前得看清楚授权说明。我一般会在项目初期用它快速搭原型，后期再替换成定制图标。

国外的话，Iconify和Feather Icons是两个值得收藏的。Iconify的特点是聚合了上百个图标集，统一了调用接口，你可以在一个网站上搜索来自不同图标库的资源。Feather Icons走的是极简路线，线条干净，适合做后台管理系统或者工具类产品。两个都是完全免费开源的，MIT协议，商用没有后顾之忧。

矢量插画方面，unDraw和Humaaans是我用得比较多的。unDraw的特色是你可以自定义主色调，下载SVG后直接匹配你的品牌色。Humaaans则是人物插画为主，适合做落地页或者空状态页面的配图。这两个站点的资源都可以免费商用，不需要署名。

图片与纹理

Unsplash和Pexels大概是免费图库里的两大巨头了。Unsplash的图片质量普遍偏高，偏文艺和生活方式调性；Pexels的覆盖面更广，从商业场景到自然风光都有。两个站点都采用类似CC0的授权方式，允许免费商用。但有一点要注意：图片中如果出现了可识别的品牌logo、人物肖像，商用的时候还是有法律风险的，这个跟图库本身的授权无关。

纹理和背景素材，我推荐Transparent Textures和Hero Patterns。前者给予可平铺的纹理图案，后者是SVG背景图案生成器，可以自定义颜色和透明度。这两个工具在做网页设计或者PPT背景的时候特别省事。

国内的话，Pixabay中文版和泼辣有图是两个可以备选的。泼辣有图的图片偏人文纪实风格，每张图都有摄影师的故事，挺有意思的。不过更新频率不算高，适合偶尔来逛逛找灵感。

字体与配色

字体方面，Google Fonts是绕不开的。它给予了上千款免费开源字体，支持中文、日文、韩文等多语言。国内访问偶尔会慢，但基本能用。另一个值得收藏的是字体天下，它聚合了很多免费商用中文字体，分类清晰，下载方便。不过要提醒一句：中文字体的版权问题比英文字体复杂得多，下载之前一定要确认授权范围。

配色工具里，Coolors是我用得最顺手的。它可以快速生成配色方案，支持锁定某个颜色后继续随机，还有对比度检查功能。另一个是Color Hunt，每天更新几组人工挑选的配色，适合找灵感。这两个都是网页版，打开就能用，不需要注册。

第二类：工具与效率资源

在线工具

在线工具这个领域，我首推TinyPNG和Squoosh。TinyPNG做图片压缩很多年了，稳定可靠，免费版每次可以压20张图，每张不超过5MB。Squoosh是Google出的，支持更多格式和更细粒度的压缩参数调节，适合对画质有要求的场景。

格式转换方面，CloudConvert支持两百多种格式互转，免费版每天有25次转换额度。PDF处理的话，Smallpdf和iLovePDF是两个老牌选手，合并、拆分、压缩、加密这些常用功能都有免费额度。不过要注意，这些站点处理敏感文件时最好谨慎一些，毕竟文件要上传到别人的服务器。

还有一个比较小众但很实用的：Remove.bg，一键去除图片背景。免费版下载的是低分辨率版本，高分辨率需要付费。如果只是做PPT或者社交媒体配图，低分辨率基本够用。

桌面软件

桌面软件里，我重点说几个跨平台且免费的。Visual Studio Code不用多介绍了，配合插件几乎可以干任何事。GIMP是开源版的Photoshop替代品，功能覆盖了修图的大部分需求，就是界面逻辑跟PS差别比较大，需要适应。Inkscape是矢量绘图工具，对标Illustrator，做图标和简单插画完全够用。

笔记和知识管理方面，Obsidian和Logseq是两个基于Markdown的本地优先工具。Obsidian的插件生态更成熟，Logseq的大纲式笔记更灵活。两个都免费，数据存在本地，不用担心服务商跑路。

浏览器插件

浏览器插件我推荐三个：uBlock Origin用来拦截广告和追踪脚本，Tampermonkey用来跑各种用户脚本，Wappalyzer用来识别网站用的技术栈。这三个在Chrome和Firefox上都有，完全免费。uBlock Origin要注意从官方商店安装，第三方渠道的版本有可能被篡改。

第三类：学习与社区资源

教程与课程

免费教程方面，freeCodeCamp和The Odin Project是两个做Web开发学习很扎实的站点。freeCodeCamp的课程体系完整，从HTML基础到全栈开发都有，而且有大量动手练习。The Odin Project更偏项目驱动，适合喜欢边做边学的人。

国内的话，菜鸟教程和MDN Web Docs是查文档和入门的好去处。菜鸟教程的中文内容比较全，适合快速上手；MDN的权威性和深度更好，适合进阶查阅。两个都是免费的。

设计类学习，Canva Design School和Hack Design是两个不错的起点。Canva Design School偏实操，教你如何用Canva做各种设计；Hack Design更像一个课程索引，每周发一封邮件推荐设计学习资源。

规范与文档

设计规范方面，Material Design和Apple Human Interface Guidelines是两个必读的。Material Design的文档非常详细，从色彩系统到动效规范都有；Apple的HIG更偏iOS和macOS平台，但很多原则是通用的。两个都是免费的在线文档。

前端规范的话，Airbnb JavaScript Style Guide和Google HTML/CSS Style Guide是两个被广泛引用的。虽然不一定全盘照搬，但作为团队规范的参考底本很有价值。

社区与问答

Stack Overflow依然是程序员问答的首选，但最近几年因为审核政策的问题，新用户的体验不太好。Reddit的r/webdev和r/design板块活跃度很高，适合看行业动态和吐槽。国内的话，V2EX和SegmentFault是两个比较活跃的技术社区。

设计社区里，Dribbble和Behance是两个老牌站点。Dribbble偏UI和视觉，Behance偏品牌和插画。两个都可以免费浏览，发布作品有免费额度。国内的话，站酷和UI中国是两个主要阵地。

怎么把这些资源用起来

清单列完了，但光收藏不用等于白搭。我的建议是：先挑三到五个跟你当前工作最相关的站点，深度用一段时间，形成肌肉记忆之后再扩展。比如你最近在做网页设计，那就先把iconfont、Unsplash、Coolors这三个用熟，比收藏一百个站点都有用。

另外，定期清理收藏夹也很重要。我每季度会过一遍收藏的资源站，把打不开的、广告太多的、已经不再更新的删掉。留下来的才是真正能帮到你的。

最后说一句：免费资源虽然好，但也要尊重作者的授权条款。该署名的署名，该买商业授权的买商业授权。这样这些资源才能持续更新下去，大家都能受益。