01
发现外观背后的设计。
即时查看元素的 CSS、尺寸和字体。
Pro 免费试用 1 个月检查网页设计，
为设计师和开发者打造的 Chrome 扩展
检查网页设计，
就在 Chrome 里。
查看网站的 CSS、颜色、字体和间距。在同一个 Chrome 扩展中检查布局、执行页面 QA 并截取屏幕。
之后每月 $0.99，可在试用结束前取消。
让好设计触手可及立即体验
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
为细节而生
好设计，始于细节。
4 款基础工具永久免费，所有 Pro 工具可免费试用 1 个月。
02
收集心仪的色彩。
提取调色板，发现字体，检查对比度。
03
让每个像素恰到好处。
测量间距，检查网格，捕获最终画面。
01
Hoverify 检查器
免费将鼠标悬停在元素上，即可实时显示 Box Model、6 种 Typography 属性（font-family、size、weight、line-height、letter-spacing、color）、Layout、Background 和无障碍信息。
02
颜色调色板提取
Pro自动收集网页中使用的所有颜色，通过聚类算法按类别分类。
03
字体检查器
Pro即时查看文本元素的 6 种属性：font-family、size、weight、line-height、letter-spacing、color。
04
WCAG 对比度检测
Pro基于 WCAG 2.1 公式实时计算前景/背景对比度。判定 AA 标准 4.5:1 和 AAA 标准 7:1 等级。
05
间距测量
Pro以像素（px）为单位，配合 Figma 风格的红色虚线，显示两个元素之间的水平/垂直/对角线距离。
06
CSS 复制
Pro一键将元素的 Computed CSS 复制到剪贴板，支持范围选择。
07
网格叠加
免费叠加 12 列 CSS Grid，直观检查布局对齐情况。
08
Style Strip
Pro分 4 个阶段逐步移除 CSS，分析 HTML 结构。
09
页面 QA
Pro检查溢出、图片描述、无障碍名称和标题顺序。定位元素并导出报告。
10
调色板转 CSS
Pro将提取的颜色转为可复用的 CSS 变量，一键复制或下载。
可以不安装就体验 PixelKit 吗？
可以——在下方无需安装扩展程序，即可立即体验 PixelKit 的核心功能。
轻巧价格，得力工具。
基础工具永久免费，Pro 首月免费。
Free
$0永久
免费安装
- Hoverify 检查器
- Color Picker（5 条历史记录）
- Grid 叠加
- Screenshot（仅可见区域）
Pro Monthly
Pro 免费试用 1 个月$0首月
之后每月 $0.99，可在试用结束前取消。
免费试用 1 个月- 包含所有 Free 功能
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- 全部 API 工具
- 页面 QA、标题结构和 JSON 报告
Pro Lifetime
$19.99一次性付款
购买 Pro
- 包含所有 Pro 功能
- 终身更新
- 优先支持
1 个月免费试用适用于 Pro 月付方案。申请时需提供付款信息。如未在试用结束前取消，将按每月 $0.99 自动续订。终身方案为单独的一次性购买，价格 $19.99。
1
在 Polar 开始 Pro 月付方案试用。
2
在 Polar 账户或邮件中找到许可证密钥。
3
在扩展程序中输入密钥以激活 Pro。
常见问题
PixelKit 是什么？+
PixelKit 是一个用于分析和编辑网页视觉设计的 Chrome 扩展程序。提供 CSS 检查、颜色提取、排版分析、间距测量、WCAG 对比度检测等 8 种工具。
PixelKit 如何安装？+
在 Chrome 网上应用店搜索「PixelKit」或点击着陆页的安装按钮即可。安装后即可立即使用。
PixelKit 是免费的吗？+
4 款基础工具永久免费。Pro 月付方案可免费试用 1 个月，之后每月 $0.99。终身方案为 $19.99。
如何使用免费试用？+
在 Polar 选择 Pro 月付方案，然后在扩展程序中输入许可证密钥。需要登记付款信息。如未在试用结束前于 Polar 取消，将按每月 $0.99 自动续订。终身方案需单独购买，价格为 $19.99。
如何查看网站的 CSS 和字体？+
从 Chrome 应用商店安装 PixelKit 后打开网站。使用工具栏中的检查器，将鼠标悬停在元素上即可查看 CSS 和排版信息。Pro 还支持详细字体检查和 CSS 复制。
发布前可以检查网页的设计问题吗？+
Pro 页面 QA 检查水平溢出、图片描述缺失、加载失败、无名称的输入框、按钮和链接，以及标题层级跳跃。可定位元素并导出 JSON 报告。这些基础检查不含 iframe 和 Shadow DOM，不能替代完整的无障碍审计。
Pro 方案增加了哪些功能？+
Pro 方案增加 9 种工具：Palette Extractor、Font Inspector、Spacing Measure、WCAG Contrast Checker、CSS Copy、Style Strip、Visual/Layout Editor、Quick Theme、Presets。
WCAG 对比度检测是如何工作的？+
基于 WCAG 2.1 公式，实时计算前景（文本）与背景色的对比度。自动判定 AA 等级（4.5:1 以上）和 AAA 等级（7:1 以上）。
除了 Chrome，其他浏览器也能使用吗？+
可以。Edge、Brave、Arc 等基于 Chromium 的浏览器均可通过 Chrome 网上应用店安装和使用 PixelKit。