# Design QA Inspector

> A local-first Chrome extension for inspecting and documenting UI design issues.

Canonical page: https://kens-toolbox.com/design-qa-inspector/

## What it does

- Inspect a clicked element's selector, size, spacing, color, typography and layout.
- Pin numbered annotations with severity and status. Notes persist per URL.
- Try local CSS edits to illustrate a fix. Import a design-token index for Token Match suggestions.
- Export annotated PNG screenshots, standalone HTML reports with per-note crops, or Jira CSV files. Optional Jira Cloud connections can create tickets directly.

## Install

Open the [Chrome Web Store listing](https://chromewebstore.google.com/detail/design-qa-inspector/naogmccgdhnkdompdhgkagmogfdgpenp) and select Add to Chrome. Chrome and Edge are supported. Alternatively, clone [Ken-pan/design-qa-inspector](https://github.com/Ken-pan/design-qa-inspector), run `npm run build`, and load `dist` as an unpacked extension.

## Data handling

No accounts, analytics or vendor cloud are required. Page data is read on tabs you activate. Notes are stored in Chrome local storage; exported files use Chrome Downloads. Optional Jira or self-hosted Board connections send selected data to the URL you configure. Read the [full privacy policy](https://kens-toolbox.com/design-qa-inspector-privacy/).

## Support

Contact 334452284ken@gmail.com. Part of [Ken's Toolbox](https://kens-toolbox.com/).