插件与扩展
共 53 个设计师推荐的插件与扩展网站,按质量与推荐次数排序。
ColorZilla
Chrome 浏览器取色扩展,支持吸管取色、高级调色板、CSS 渐变生成与网页配色分析。
浏览器扩展ColorZilla
浏览器取色扩展,支持吸管取色、高级调色板、CSS 渐变生成与网页配色分析。
WhatFont
一款浏览器扩展,悬停即可识别网页所用字体,点击可查看字号、颜色等详细样式。
PerfectPixel by WellDoneCode
在网页上叠加半透明设计稿,实时对比前端实现与设计稿的像素级差异。
Fonts Ninja
浏览器扩展,一键识别任意网页字体,支持试用、收藏与购买,准确率极高。
Sketch Plugin Directory
Sketch 官方插件目录,收录 GitHub 上的 Sketch 插件,按字母排序,可提交 PR 添加。
VisBug
Google 开源的浏览器设计调试扩展,可在任意网页上可视化编辑样式、拖拽元素、检查可访问性。
Sketch Measure
Sketch 标注插件,自动生成间距、尺寸标注和 HTML 规范页,方便交付开发。
Site Palette
浏览器扩展,一键提取任意网站的真实配色,支持导出到 Figma、Sketch 等工具。
html.to.design
将任意网站 HTML 导入 Figma,转成可编辑设计稿,无需从零搭建元素。
ColorPick Eyedropper
带放大预览的浏览器取色器扩展,可从网页或截图中精准吸取颜色值。
浏览器扩展Page Ruler Redux
一款浏览器扩展,用于测量网页元素的像素尺寸和位置,适合设计师和开发者。
VisBug
开源浏览器设计调试工具,可在任意网页上直接点选、移动、编辑样式与内容,像操作画板一样改页面。
Window Resizer
一款 Chrome 浏览器扩展,可快速调整浏览器窗口尺寸,模拟各种屏幕分辨率,方便测试响应式布局。
浏览器扩展WhatFont
浏览器扩展,悬停即可识别网页所用字体,并检测字体服务来源。
浏览器扩展VisBug
开源浏览器设计调试工具,像设计软件一样直接编辑网页样式、文字和图片,无需等待开发。
浏览器扩展Kontrast - WCAG Contrast Checker
一款 Chrome 扩展,实时检查并调整网页颜色对比度,帮助满足 WCAG 2.1 无障碍标准。
SVG Gobbler
开源浏览器扩展,可查找、编辑、优化并导出网页上的 SVG,支持转 React 组件。
浏览器扩展Tail Lens
浏览器中可视化检查和编辑 Tailwind CSS 类的 Chrome 扩展,支持实时预览、自动补全和间距参考线。
Fontself
在 Illustrator 和 Photoshop 中快速将手写字或字形制作成 OpenType 字体的字体制作工具。
浏览器扩展Pixel Perfect Pro
浏览器扩展,可将设计稿叠加到网页上,逐像素比对还原度,支持多图层与标尺。
Figma 插件Use Contrast
快速检查 WCAG 颜色对比度的工具,提供 Figma 插件和 macOS 应用。
浏览器扩展Pesticide for Chrome
一款 Chrome 扩展,为页面每个 HTML 元素添加彩色描边,帮助开发者直观查看布局与元素位置。
浏览器扩展WCAG Contrast checker
Firefox 浏览器扩展,按 WCAG 2.2 标准检测网页前景与背景色的对比度是否合规。