PixelAudit 视觉走查助手

About

在真实网页上完成类似 Figma Dev Mode 的视觉走查：查看尺寸、字体、颜色和间距，记录问题，并导出结构化走查结果。

PixelAudit 视觉走查助手是一款面向 UI 设计师、前端开发、产品经理和测试同学的网页视觉检查工具。它可以让你直接在当前网页上选中元素，查看关键视觉信息，临时调整样式，记录页面问题，并将本次走查结果导出为 HTML，方便后续和开发、产品或 AI 编码工具协作。

无论是页面上线前验收、设计还原度检查、前端样式走查，还是整理页面问题反馈，PixelAudit 都可以帮助你减少截图、标注、复制描述和反复沟通的成本，让视觉问题更清楚、更容易被定位和处理。


✨ 核心功能

网页元素视觉检查
直接在页面上选中元素，快速查看尺寸、字体、颜色、圆角、透明度、内外边距等视觉信息，减少反复打开开发者工具的成本。

元素样式临时编辑
支持在页面上临时调整部分视觉样式，例如尺寸、字号、颜色、圆角、背景色、间距等，用于快速验证修改方向。所有修改仅作用于当前网页预览，不会直接修改网站源码。

间距与结构测量
支持查看元素之间的距离、元素内部结构数据，以及常见布局中的视觉间距，帮助设计师和前端更准确地判断页面是否符合设计预期。

问题记录
发现视觉问题时，可以直接将元素或区域加入记录，补充分类和备注。适合记录字体问题、间距问题、颜色问题、布局问题、交互问题等。

记录抽屉管理
本次走查中的问题会统一收集到记录抽屉中，方便查看、编辑备注、删除或清空，让页面问题不再散落在截图和聊天记录里。

HTML 走查结果导出
支持将本次记录导出为 HTML 走查报告，包含页面信息、问题分类、备注和局部截图，方便发给开发同学、产品同学或用于验收留档。

AI 修改整理
当你在页面上做了一组视觉调整后，PixelAudit 可以整理本次被修改的元素和属性，方便复制给 AI 编码工具或开发同学参考，帮助把视觉反馈更清楚地转化为实现建议。


👥 适合谁使用？

UI 设计师
用于页面走查、设计还原度检查、视觉问题记录和上线前验收。

前端开发
用于快速定位页面元素、查看视觉属性、理解设计反馈和验证样式调整方向。

产品经理
用于记录页面体验问题、整理验收意见，并以更直观的方式和设计、研发沟通。

测试同学
用于记录页面视觉缺陷、布局异常、间距问题和样式不一致问题。


💡 常见使用场景

页面上线前检查视觉还原度
检查按钮、卡片、标题、表单等元素的尺寸和样式
确认字体、颜色、圆角、间距是否符合设计预期
记录页面中的视觉问题并补充备注
将本次走查问题导出为 HTML 结果
把视觉调整整理成更清晰的反馈，交给开发或 AI 编码工具继续处理


🧭 基本使用方式

1. 打开任意网页
2. 点击浏览器右上角的 PixelAudit 插件图标
3. 在页面上移动鼠标查看元素信息
4. 点击元素进入选中状态，查看或临时调整视觉属性
5. 发现问题时，使用记录功能添加元素或区域记录
6. 在记录抽屉中统一管理本次走查问题
7. 导出 HTML 走查结果，用于沟通、验收或留档


🔒 隐私与本地运行

PixelAudit 默认在本地运行，重视页面内容和用户数据的隐私安全。

我们坚持以下原则：

插件不会主动将网页内容上传到云端服务器
不会出售用户数据
不会进行广告追踪
不会在未启用插件时扫描网页
仅在用户主动点击插件图标后，对当前页面执行视觉检查能力
记录、备注、截图和导出结果主要用于本地走查流程
导出的 HTML 文件会保存到用户本地设备中


⚠️ 当前版本说明

PixelAudit 主要用于网页视觉走查、问题记录和本地导出。

当前版本不提供：
云同步
多人协作
设计稿自动比对
自动修改网站源码
长期项目管理
页面改版后的永久精准定位

插件中的样式调整主要用于当前网页的临时预览和反馈整理，不会直接修改线上代码。若需要将修改落到项目中，仍需要开发同学或 AI 编码工具根据整理后的反馈进行代码实现。


让网页视觉走查更接近设计工具里的检查体验：选中、查看、调整、记录、导出，一次完成。