Inspecta - visual QA and CSS editor icon

Inspecta - visual QA and CSS editor

by inspecta

v0.3.8 Updated Jan 6, 2026 577KiB
CWS
3K
Users
β˜… 5.00
14 reviews
#13243
of 207.6K
developer
#1104 of 18.2K

Description

πŸ›  Inspecta – Find and Fix UI Bugs on Live Websites. Inspecta lets designers and developers inspect, compare, and visually edit live website styles. Copy styles from Figma, compare CSS, fix mismatches, and export the updated CSS or send is straight to AI code agents for implementation β€”all without writing code. ✨New: Send text and CSS changes straight to Cursor AI and GitHub Copilot agents. πŸ”— Figma Plugin Use our companion Figma plugin to instantly compare styles between Figma and live web pages: Figma to Inspecta: https://www.figma.com/community/plugin/1397609843224212500/figma-to-inspecta-compare-design-to-web ✨ Key Features πŸ” Compare with Figma Copy styles from a Figma element and apply them directly to a live element. Detect mismatched colors using Figma color styles and variables. Replace SVGs (temporary method) from Figma onto live elements. 🧠 Batch Color and Fonts Fixes Fix all your website colors and fonts in one click using Figma suggested colors popup. πŸ” Inspect Elements Hover any element to view its CSS properties: text, colors, spacing, layout, borders, and more. Use the eyedropper to identify colors. Draw guides for more accurate inspection. 🎨 Visual CSS Editing Edit CSS in real-time with a visual interfaceβ€”just like in your design tools. Easily modify: display, size, spacing, colors, typography, borders, radius, position, box-shadow, and opacity. 🧾 Page Overview Get a full breakdown of used colors (backgrounds, texts, borders) and fonts (family, size, weight, line height). Ideal for design audits and QA reviews. 🧘 Isolate Elements Select any element and hide everything else to inspect and edit in focus mode. πŸ“ Spacing Overlays & Distance Guides Hover to view padding and margin overlays. Measure distances between elements for pixel-perfect layout refinement. πŸ–Ό Pixel-Perfect Comparison Upload or paste your Figma design as an overlay for accurate side-by-side comparison with the live page. πŸ“€ Export & Share CSS Export all your CSS changes as a single file or copy individual snippets. Share updates directly with developers or use with your Vibe-code AI tool for faster implementation. Changelog: Updated layers panel Support hover pseudo class
Inspecta - visual QA and CSS editor screenshot 1Inspecta - visual QA and CSS editor screenshot 2Inspecta - visual QA and CSS editor screenshot 3Inspecta - visual QA and CSS editor screenshot 4

Reviews

Loading reviews...

Permissions (4)

Permissions

activeTabβ„Ή Can access the current tab when you click the extension clipboardReadβ„Ή Can read from your clipboard scriptingβ„Ή Can inject scripts into web pages storageβ„Ή Can store data locally in your browser

Details

Version 0.3.8
Updated Jan 6, 2026
Size 577KiB
First Seen Mar 30, 2026