跳到主要内容

设计资源库

程序员的设计工具箱——收藏这一章，90% 的设计需求都能找到趁手的工具。

配色工具​

选颜色不需要天赋，用对工具就行。

Coolors — 最快的配色生成器​

网址： coolors.co

按空格键随机生成 5 色配色方案，看到顺眼的就锁定（点颜色块上的锁），继续按空格生成其他色。操作 3-5 次就能得到一组好看的配色。

使用技巧：

  • 锁定你的主色，让其他颜色围绕它生成
  • 导出格式选 Tailwind CSS，直接复制到代码里
  • 还能上传参考图片，从中提取配色方案

Realtime Colors — 实时预览配色效果​

网址： realtimecolors.com

这个工具的厉害之处在于：你调颜色的同时，右边直接展示一个真实网页的效果。不用猜「这个蓝色做按钮好不好看」，直接看到结果。

操作流程：

  1. 先选一个你喜欢的主色（Primary）
  2. 调整文字色（建议 gray-800 到 gray-900）
  3. 调整背景色（建议 white 或 gray-50）
  4. 看右边实时预览，不满意就继续调
  5. 满意了点 Export 导出 CSS 变量或 Tailwind 配置

Adobe Color — 专业级色彩工具​

网址： color.adobe.com

适合进阶用法。输入一个主色，它能自动生成互补色、类似色、三角配色等专业方案。还有无障碍对比度检查功能——确保你的文字在背景上能看清。

tints.dev — Tailwind 专用色板生成器​

网址： tints.dev

输入一个颜色，自动生成从 50 到 950 的完整 Tailwind 色阶。如果你要自定义 Tailwind 主题色，这个工具直接给你可用的配置代码。

字体搭配​

Google Fonts — 免费字体的宝库​

网址： fonts.google.com

超过 1500 款免费商用字体。关键是怎么选，这里给你几个经过验证的搭配方案：

推荐搭配方案​

方案一：经典稳重

  • 标题：Inter（英文）+ 系统中文字体
  • 正文：同上
  • 适合：SaaS 产品、后台管理、工具类

方案二：现代干净

  • 标题：Plus Jakarta Sans
  • 正文：Inter 或 DM Sans
  • 适合：创业公司官网、产品 Landing Page

方案三：文艺优雅

  • 标题：Playfair Display（衬线体）
  • 正文：Source Sans 3
  • 适合：博客、杂志、内容型网站

方案四：程序员最爱

  • 标题：Space Grotesk
  • 正文：IBM Plex Sans
  • 代码：JetBrains Mono 或 Fira Code
  • 适合：开发者工具、技术文档、API 平台

方案五：中文优先

  • 标题：Noto Serif SC（思源宋体）
  • 正文：Noto Sans SC（思源黑体）
  • 适合：中文内容为主的网站、电子书

字体选择原则​

  • 英文项目： 标题用有个性的字体，正文用高可读性的无衬线体
  • 中文项目： 用系统字体就好（苹方/微软雅黑/思源黑体），中文 Web 字体文件太大（动辄几 MB），加载慢
  • 正文字号： 不要小于 16px，行高 1.5-1.7
  • 最多两种字体： 一种标题、一种正文，别再多了

Fontpair — 字体搭配灵感​

网址： fontpair.co

Google Fonts 的字体搭配推荐站。不知道标题和正文用什么字体？来这里翻翻，每组搭配都有预览效果。

插画与图片​

unDraw — 免费商用 SVG 插画​

网址： undraw.co

最推荐的插画库，没有之一。全部免费商用，还能一键切换配色（改成你的品牌色）。风格统一，适合放在 Landing Page、空状态页面、功能介绍里。

使用方式：

  1. 找到喜欢的插画
  2. 点击选颜色（输入你的主色色值）
  3. 下载 SVG，直接放到项目里
  4. 或者装 npm 包：npm install react-undraw-illustrations

Humaaans — 可组合的人物插画​

网址： humaaans.com

可以自由组合人物的头部、身体、腿部，创造不同姿势和场景的人物插画。适合做团队介绍页、用户场景图。

Storyset — 高质量动画插画​

网址： storyset.com

Freepik 出品，风格多样（简约、粗线条、扁平、3D），部分支持动画效果。免费使用需注明出处。

免费图库​

Unsplash ⭐ 首推​

网址： unsplash.com

最优质的免费图库，图片质量碾压同类产品。所有图片免费商用，无需署名（但署名是好习惯）。

搜索技巧：

  • 用英文关键词搜索效果最好
  • 搜「abstract」找背景图，搜「workspace」找桌面场景
  • API 免费额度：50 次/小时，够开发用了

Pexels​

网址： pexels.com

另一个优秀免费图库。比 Unsplash 多了免费视频素材，适合做背景视频。

Pixelmob — 图库聚合搜索​

网址： pixelmob.co

同时搜索 Unsplash、Pexels 等多个图库，一个搜索框搞定。

设计灵感​

Mobbin ⭐ 最实用​

网址： mobbin.com

真实 App 的页面截图，按类型（登录页、列表页、详情页、设置页……）和行业分类。做产品不知道某个页面怎么设计？直接来这里找参考，比在 Dribbble 上翻实用 10 倍。

免费版： 每天可以浏览一定数量的截图，够用了。

Dribbble​

网址： dribbble.com

设计师作品展示平台，视觉效果天花板。适合找视觉灵感，但很多设计偏「概念」，不一定适合直接落地。

搜索技巧： 搜 dashboard design、landing page、mobile app 加上你的行业关键词。

Godly​

网址： godly.website

精选的优质网站设计案例，每个都有截图和链接。风格偏现代、大胆，适合找 Landing Page 灵感。

Screenlane​

网址： screenlane.com

类似 Mobbin，按页面类型分类的真实 App 截图。两个换着看，灵感更多。

One Page Love​

网址： onepagelove.com

专注单页面设计的灵感库。做 Landing Page、个人主页、产品介绍页时来这里看看。

设计工具对比​

Figma ⭐ 行业标准​

价格： 免费版够个人用（最多 3 个项目文件）

优点：

  • 基于浏览器，不用安装，Windows/Mac/Linux 都能用
  • 实时协作，多人同时编辑一个文件
  • 社区资源最丰富——搜「dashboard template」「mobile UI kit」免费拿来用
  • 开发者模式（Dev Mode）可以直接查看 CSS 代码、间距、色值
  • 插件生态强大：图标库、配色工具、AI 生成都有

缺点： 文件多了免费版有限制；中国区访问偶尔需要梯子

程序员怎么用 Figma：

  1. 不需要学会画图——主要用「查看」和「测量」功能
  2. 装 Figma to Code 插件，一键导出 HTML/Tailwind
  3. 用 Dev Mode 看设计稿的间距、字号、颜色值

Sketch​

价格： $10/月（仅 macOS）

优点： Mac 原生体验好，性能优秀，老牌设计工具

缺点： 只能在 Mac 上用；不支持实时协作（需要第三方插件）；社区资源被 Figma 超越

结论： 2024 年以后新项目不建议选 Sketch，Figma 全面超越。

Penpot — 开源免费替代​

网址： penpot.app

价格： 完全免费开源

优点：

  • 开源免费，没有项目数量限制
  • 基于浏览器，支持自托管
  • 支持 SVG 原生格式，和代码衔接更好
  • 不受任何商业公司控制

缺点： 社区资源少、性能不如 Figma、协作功能还在完善

适合谁： 对开源有执念的团队；不想依赖 Figma 的公司；个人学习用途。

工具选择建议​

你的场景是什么？
├── 刚开始学做产品 → Figma（免费版）
├── 团队协作开发 → Figma（专业版）
├── 只需要看设计稿 → Figma Dev Mode
├── 不想被商业产品绑定 → Penpot
└── Mac 用户 + 独立工作 → Sketch 也行，但不如 Figma

其他实用工具​

截图美化​

  • shots.so：把截图放进精美设备模型里，适合做 App Store 展示图
  • carbon.now.sh：代码截图美化，生成好看的代码分享图

去除背景​

  • remove.bg：一键去除图片背景，免费版够用

图片压缩​

  • squoosh.app：Google 出品的图片压缩工具，浏览器端运行不上传服务器
  • tinypng.com：经典图片压缩，PNG/JPG 通吃

图标搜索​

渐变生成​

上线前设计检查清单​

做完产品准备上线？对着这个清单过一遍，能避免 80% 的设计低级错误：

基础检查​

  • 字号统一： 全站正文是不是都用 16px？标题只用了 3-4 种大小？
  • 颜色一致： 主色是不是只有一种？灰色系是不是只用了 gray-600/gray-900？
  • 间距规律： 所有间距是不是 4 的倍数？相似元素之间的间距是否一致？
  • 对齐检查： 所有文字是否左对齐？按钮是否在同一水平线？

响应式​

  • 手机能用吗： 在 375px 宽度下所有内容都能正常显示吗？
  • 平板呢： 768px 宽度下布局合理吗？
  • 大屏呢： 1920px 宽度下内容不会拉得太宽吧？（加 max-width 限制）

交互状态​

  • 按钮有 hover 效果吗： 鼠标移上去颜色有变化吗？
  • 输入框有 focus 效果吗： 点进去有边框高亮吗？
  • 链接有下划线或颜色区分吗： 用户能看出这是可以点的吗？
  • 加载状态有提示吗： 数据加载时有 spinner 或 skeleton 吗？

内容检查​

  • 图片有 alt 属性吗： 无障碍访问需要
  • 错误提示友好吗： 不说「Error 500」，说「加载失败，请重试」
  • 空状态有设计吗： 列表为空时显示什么？总不能一片空白吧
  • 字体加载不闪白吧： 中文用系统字体就好，避免 FOUT（无样式文字闪烁）

最后一步​

把你的产品截图发给一个朋友，问 TA 三个问题：

  1. 这个页面是做什么的？（检验信息层次）
  2. 你会先点哪里？（检验视觉引导）
  3. 有没有哪里觉得怪怪的？（检验直觉感受）

如果三个回答都是正面的，恭喜你，可以发布了。🎉

记住： 设计不是天赋，是纪律。遵循规则、保持一致、多看好设计，你的产品就不会丑。收藏本章的工具链接，做产品的时候随手查用。