Tutorial

Getting started with inspecta

Welcome to inspecta! This guide introduces what inspecta does and walks you through your first edit, from spotting UI drift to shipping the fix.

What is inspecta?

inspecta is a Chrome extension that turns your browser into a visual editor for your live site. Instead of filing bug tickets, screenshotting mismatches, or digging through dev tools, you fix UI drift visually, right where you see it.

The core idea: auto-compare Figma to your live site, fine-tune any element (or ask AI to tweak it), then share the CSS edits with your dev or implement them in your codebase. No manual QA, no back-and-forth.

With inspecta you can:

  • Edit styles visually: adjust any element’s layout, spacing, colors, and typography directly on the live page
  • Edit with a prompt: describe the change in plain language and apply it to the selected element instantly
  • Compare against Figma: catch every gap between your design and the live build, then fix them in bulk or one by one
  • Send edits to your AI coding agent: run your app on localhost and push changes straight to Cursor or Copilot, or share them as a fully-contextual prompt for your dev

Installation

  1. Install the inspecta extension from the Chrome Web Store.
  2. Click Add to chrome. It’s free, no credit card required.
  3. The inspecta icon appears in your toolbar; open it on any page to start inspecting.

Edit styles visually

Select any element on a live page and adjust it with an intuitive visual editor, no CSS syntax required. Supported properties include:

  • Display and layout (flex direction, alignment)
  • Size and spacing
  • Color and opacity
  • Typography
  • Border, radius, and position

Every change is applied live so you see exactly how it looks in context.

Or edit with a prompt

Not sure which property to touch? Select an element and describe the change in plain language, like “make this heading tighter and bump the contrast,” and inspecta applies it to that element instantly. It’s the fastest way to explore a tweak without hunting through panels.

Compare design to implementation

Copy a frame from Figma with the Figma-to-inspecta plugin, paste it into inspecta, and it surfaces exactly where your live page diverges from the design, including color and font mismatches and off design tokens. Fix every gap in bulk or one element at a time.

Send your edits to code

If you work locally on your project, run your app on localhost and make your visual edits right there in the browser, then ship them without retyping anything by hand:

  • Have access to the codebase? Send your changes, plus any extra instructions, straight to your AI coding agent like Cursor or Copilot.
  • Don’t? Share the change as a prompt with full context so your dev can apply it.

Need help?

If you have questions or need assistance, contact us at info@inspecta.design or join our Discord.