09浏览器插件
Visor
把真实渲染页面，直接变成设计工作区。
- Discipline
- Visual inspection · Design systems · Frontend
- Platform
- Chrome 116+
- Role
- Product, interaction, visual direction and development
- Status
- Live · Chrome
Visor 将 Chrome 侧边栏变成设计师与前端工程师的本地视觉工作区。它在真实页面上测量，检查声明与渲染后的 CSS，测试响应式尺寸，审计颜色、排版与资源，并将改动整理成交付结果。
Visit live productThe hard part
表面问题背后，通常还有一套更难的系统问题。
视觉检查器需要深入页面，却不应变成长驻代码或静默修改工具；测量、视口调整、审计结果与可撤销 CSS 还横跨多个浏览器上下文。
Key decisions / 03
我选择了什么，也选择不做什么。
- 01
只在用户点击或使用快捷键后注入检查器，不要求永久主机权限，也不放置常驻内容脚本。
- 02
“查看”模式保持只读，只有主动切换到“调整”后，才能修改白名单内的视觉 CSS 属性。
- 03
把撤销、重做、重置和 CSS 或 JSON 导出纳入编辑模型，而不是事后的清理功能。
Design capabilities
A product is a network of decisions.
Visual inspectionDesign-system auditsResponsive QALocal-first
What exists now
不放未经确认的增长数字，只展示已经存在的产品能力。
- 已在 Chrome 应用商店上线，支持英文与简体中文。
- 可测量对齐与距离、检查 CSS 状态，并测试精确的响应式视口。
- 可审计 Token、渐变、对比度、排版和资源，并导出调色板与交付文件。
检查工具要获得信任，必须让启动时机、本地改动与恢复方式，和它揭示的设计信息一样清楚。