Inspecta - visual QA and CSS editor在浏览器中使用的扩展工具，这款工具支持从 Figma 复制样式、比较 CSS、修复不匹配以及导出更新的 CSS 或直接发送给 AI 代码代理进行实施 — 所有这些都无需编写代码等，欢迎下载。
介绍
Inspecta – 查找并修复实时网站上的 UI 错误。
Inspecta 允许设计人员和开发人员检查、比较和直观地编辑实时网站样式。
从 Figma 复制样式、比较 CSS、修复不匹配以及导出更新的 CSS 或直接发送给 AI 代码代理进行实施 — 所有这些都无需编写代码。
✨新功能：将文本和 CSS 更改直接发送到 Cursor AI 和 GitHub Copilot 代理。
🔗 Figma 插件
主要特点
🔁 与 Figma 比较
从 Figma 元素复制样式并将其直接应用到活动元素。
使用 Figma 颜色样式和变量检测不匹配的颜色。
将 Figma 中的 SVG（临时方法）替换为实时元素。
🧠 批量颜色和字体修复
使用 Figma 建议颜色弹出窗口一键修复所有网站颜色和字体。
🔍 检查元素
将鼠标悬停在任意元素上即可查看其 CSS 属性：文本、颜色、间距、布局、边框等。
使用吸管来识别颜色。
绘制指南以进行更准确的检查。
🎨 可视化 CSS 编辑
使用可视化界面实时编辑 CSS，就像在设计工具中一样。
轻松修改：显示、大小、间距、颜色、排版、边框、半径、位置、框阴影和不透明度。
🧾 页面概览
获取所用颜色（背景、文本、边框）和字体（系列、大小、粗细、行高）的完整详细信息。
非常适合设计审核和 QA 审查。
🧘 隔离元素
选择任何元素并隐藏其他所有元素以在焦点模式下检查和编辑。
📏 间距叠加和距离指南
将鼠标悬停可查看内边距和边距叠加。
测量元素之间的距离以实现像素完美的布局细化。
🖼 像素完美比较
将您的 Figma 设计上传或粘贴为叠加层，以便与实时页面进行准确的并排比较。
📤 导出和共享 CSS
将所有 CSS 更改导出为单个文件或复制单个片段。
直接与开发人员共享更新或与 Vibe-code AI 工具一起使用以加快实施速度。
更新日志
所选元素面包屑
更新了间距面板
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
