Inspecta

设计师与开发者的视觉CSS编辑器
直观检查、对比并更新实时网站样式。
Inspecta助你弥合Figma设计与真实网页之间的差距——无需手动编写CSS。
在浏览器中直接可视化检查、对比并修复UI差异。

使用Inspecta可实现的功能：

• 在实时网站上即时发现并修复UI问题。
• 通过配套插件将实时样式与Figma设计进行对比。
• 可视化编辑任意元素的CSS——颜色、字体、布局、间距、阴影、边框等。
• 使用Figma推荐的匹配项批量修复颜色和字体。
• 导出并分享CSS更改，或直接发送给你的AI编程助手（Cursor）。

专为设计师打造的可视化编辑体验：

• 像在Figma中一样编辑样式——直观的滑块、颜色选择器与实时预览。
• 无需代码，无需刷新页面——页面即时呈现视觉更新。

Figma集成：

• 使用Figma to Inspecta插件，将Figma样式与实际网站对比，检测颜色与字体不一致问题。
• 直接将Figma样式复制并应用到网页元素上。

核心功能：

• 视觉CSS编辑器：即时修改文字排版、间距、布局及视觉效果。
• Figma对比功能：检查颜色与字体是否符合设计系统。
• 批量修复：一键应用Figma建议的颜色与字体更新。
• 元素检查器：悬停即可查看完整样式数据——文本、颜色、间距、边框、布局等。
• 间距指南与叠加层：精确测量像素距离，优化布局。
• 精确比对：将Figma设计覆盖在实时网站上，确保视觉准确性。
• 导出与分享：复制单个代码片段，或打包所有CSS更新为一个文件下载。

与AI协同工作
可将文本和CSS修改直接发送至Cursor AI助手，立即实现自动化部署。