ARTICLE · 987805
必装的5个免费浏览器插件-ColorZilla-GoFullPage-WhatFont-Muzli-CSS Peeper
设计师必装的5个浏览器插件
浏览器是设计师每天打开最久的软件之一。装对插件，取色不用切软件、查字体不用翻代码、整页截图不用拼接。下面这5个，我每个都用了至少一年，经过真实项目考验。
01
ColorZilla——取色不用猜
网页上看到一个颜色想用，但不知道色值是多少？打开Photoshop吸管再切回来，流程太长了。ColorZilla把取色这件事压缩到一次点击。
- 吸管取色
：点击工具栏图标，鼠标移到页面上任意位置，实时显示色值（HEX/RGB/HSL），点击即复制 - 颜色历史
：自动保存最近取过的颜色，不会因为忘记记录而重复操作 - 渐变生成器
：内置CSS渐变编辑器，调好直接导出代码，不用手写 linear-gradient
有次甲方说"就要那个网站的蓝色，别给我搞偏了"。我打开ColorZilla一点，三秒拿到 #1a73e8，截图发过去，对方秒回"就是这个"。
免费情况：完全免费，无付费墙。Chrome应用商店搜索"ColorZilla"即可安装，也支持Firefox。
https://www.colorzilla.com/
02
WhatFont——字体识别一秒钟
刷设计网站时看到一个很对味的标题字体，想知道叫什么名字。以前的做法是右键→检查→翻CSS→找font-family，运气不好还要翻好几层。WhatFont把这个过程简化成一次悬停。
- 悬停识别
：鼠标悬停在任意文字上，浮层直接显示字体名称、字号、行高、字重、颜色 - 网络字体支持
：能识别Google Fonts、Adobe Fonts（Typekit）等主流网络字体服务 - 点击详情
：点击文字后弹出完整字体信息面板，包含字体族、样式、渲染大小等
上周逛一个日本设计工作室的官网，标题字体特别好看。WhatFont悬停一秒，显示"Noto Serif JP, 700, 32px"——直接去Google Fonts搜到同款，省了至少十分钟。
免费情况：完全免费。Chrome应用商店搜索"WhatFont"安装，也有Edge版本。
https://www.myfonts.com/pages/whatthefont
03
CSS Peeper——样式透视不用翻代码
做竞品分析时，想看一个网站用了什么配色、什么字体系列、什么间距，但不想一行行翻CSS。CSS Peeper专为这个场景设计——把页面的设计属性结构化地展示出来，设计师友好，不用懂代码。
- 配色提取
：一键列出页面所有颜色，支持一键导出调色板，直接用于自己的设计稿 - 字体层级
：展示页面中所有字体系列、字号、字重，一目了然对方的排版体系 - 资源导出
：提取页面所有图片资源，做改版提案时不用逐个另存
做竞品分析时，CSS Peeper直接导出对方的配色方案和字体组合，我在Figma里新建一个"竞品参考"页面，十分钟就把对方的视觉体系拆解清楚了。
免费情况：免费，50万+用户，Chrome应用商店评分4.6。搜索"CSS Peeper"安装。
04
GoFullPage——整页截图一键搞定
浏览器自带截图截不到滚动区域以外的内容，设计稿展示、作品集存档、客户提案都需要整页截图。以前我用的土办法是分段截再PS拼接，效率极低。
- 一键整页截图
：点击按钮后自动滚动页面并拼接，输出完整长图 - 多格式导出
：支持PNG和PDF两种格式，PNG适合快速分享，PDF适合正式交付 - 零额外权限
：不请求任何多余权限，安装即用，不用担心隐私问题
给客户做改版提案时，GoFullPage截下整页before/after对比图，放进Keynote里，客户一眼看出变化，不用我逐块解释。
免费情况：完全免费，Chrome应用商店搜索"GoFullPage"安装，Edge商店也有。
05
Muzli——打开浏览器就是灵感
每天早上打开浏览器不知道要做什么设计？Muzli把新标签页变成一个设计灵感瀑布流，每次打开新标签都是一次设计浏览。
- 灵感聚合
：自动抓取Dribbble、Behance、Awwwards、Product Hunt等平台的热门设计作品 - 方向定制
：可按UX、平面设计、品牌设计、动效等方向定制内容偏好，越用越精准 - 设计资讯
：除了视觉作品，还推送设计行业新闻、工具推荐和设计思考文章
我每天早上打开Chrome，Muzli新标签页自动推送当天的设计精选，喝咖啡的功夫就能扫一圈灵感。有时候刷到有意思的交互，顺手截个图存到项目参考文件夹里。
免费情况：免费。Chrome应用商店搜索"Muzli"安装，注册后可定制内容偏好。
📊
五款插件总览对比
🔒
装插件前，先看权限
插件虽好，权限别乱给。这五个我都长期在用，但安装任何浏览器插件时，养成核对权限的习惯能省很多麻烦：
- "读取和更改所有网站数据"
——上面5个里，ColorZilla、WhatFont、CSS Peeper确实需要这个权限才能检测页面上的颜色和字体，属于合理需求。但如果你装一个"计算器"插件它也要求这个权限，果断拒绝 - "读取浏览历史"
——与设计工具无关的权限，一律警惕。设计类插件不需要知道你看过什么网页 - 定期清理
——在地址栏输入 chrome://extensions，把半年没用的插件删除或禁用，减少潜在风险 - 安装渠道
——尽量从Chrome应用商店（或Edge附加组件商店）安装，别从第三方网站下载 .crx文件
装好这五个插件，浏览器就是你最高效的设计工具。下次打开Chrome的时候，花五分钟全部装上，试试看。
📚 往期推荐
本文为个人实测与公开资料整理，工具功能与价格以官方最新信息为准｜设计角