A Chrome extension for design QA

Design QA
Inspector

From UI detail to clear handoff.

Design QA Inspector is a Chrome extension for inspecting live pages, annotating UI issues and previewing local CSS fixes before sharing evidence with your team.

Add to Chrome Explore the workflow

Chrome & Edge · No account needed for local work

Design QA Inspector showing a selected heading and its computed styles beside a live page. — The page you’re reviewing. The details you need.

A review that stays with the page

Find it. Explain it. Hand it over.

Keep the element, the issue and the proposed change in the same conversation.

01 / Inspect & annotate

Point to the exact detail.

Pick an element to read its spacing, color and typography. Pin a numbered note with severity and status, so each issue has a place and a next step.

Notes stay attached to the full page URL, including its query and hash.

Numbered annotations on a page with issue severity and status in the Inspector side panel. — A note points back to the element it describes.

02 / Preview a fix

Make the change visible.

Try a different value in Quick Edit. Adjust spacing, type or color directly on the page, then reset when you’re done.

Import your design-token index for Token Match suggestions. Previews are local; they don’t change your site’s source code.

Quick Edit controls previewing typography and color changes on the selected heading. — Show the intended result while the original context is still in view.

03 / Export & hand off

Give the next person context.

Export an annotated PNG or an HTML report with notes and element crops. Prepare Jira CSV drafts, or create Jira Cloud tickets through a connection you configure.

PNG export needs at least one saved note. Jira CSV contains issue metadata; direct ticket creation can attach screenshots.

Inspector export options beside a Jira ticket created from an annotated issue. — Choose a file for review, or send selected issues to your Jira project.

Local by default

Review first. Share when you choose.

Inspection, notes and CSS previews work without an account. Notes are stored in your browser. Files are downloaded locally; connecting Jira sends the issues you choose to that service.

Read the privacy policy

Before you start

Where can I use it?

Install from the Chrome Web Store in Chrome or Edge, open the page you want to review, then click the extension icon. Browser-internal pages such as chrome:// pages are restricted. Some embedded frames and closed shadow roots can’t be inspected.

Does it compare a page with Figma automatically?

You choose the elements and review their implementation. You can import a design-token index for Token Match suggestions; this is not an automatic Figma-to-page comparison.

Will Quick Edit change my website?

Quick Edit creates a local preview in your browser. It doesn’t update your source code or deploy changes. Use Reset to restore the original values.

What can I share with my team?

Download annotated PNGs, HTML reports or Jira CSV drafts. With your own Jira Cloud connection, you can create tickets directly. Full-page capture is best effort on very long or dynamic pages.

Your next design review

Keep the details in focus.

Open a page. Pick an element. Start with one clear note.

Add to Chrome

Practical guide

How to run a website design QA review →