Occhio Inspector

A Chrome extension for running a heuristic evaluation on a live page.

Click any element and log what's wrong with it: pick a heuristic, rate the severity 0–5, write the note and the recommendation. The extension keeps a running list with screenshots, and exports the finished evaluation as PDF or DOCX. It is the manual, opinionated version of a UX audit — you do the judging, it does the bookkeeping.

Three heuristic sets are built in: Nielsen's 10, Gerhardt-Powals' cognitive engineering principles, and Shneiderman's Eight Golden Rules. They live in scripts/heuristics.js as plain data, so adding your own set is a matter of adding an object.

There is also an optional scan mode that sends a screenshot to a Cloud Function and gets back suggested issues, gated behind Firebase Auth and a Stripe subscription. It is entirely separable — the manual evaluation flow works with no backend at all.

Install from source

git clone https://github.com/is2b007/blueprint-ux.git
cd blueprint-ux
npm install
npm run build

Then open chrome://extensions/, turn on Developer mode, click Load unpacked, and select the repository directory.

npm run build bundles content.js and its imports into content.bundle.js with esbuild. Use npm run build:watch while working on the content script.

Using it

Clicking the toolbar icon starts selection mode immediately — click any element on the page to open an evaluation for it. Pause selection stops the element picker without closing the panel; the button becomes Resume selection. Saved evaluations are listed under View Progress, and export to PDF or DOCX from there.

Everything is stored in chrome.storage.local. Nothing leaves the browser unless you use the optional scan mode.

Layout

manifest.json        MV3 manifest
background.js        service worker
content.js           evaluation panel and element picker (bundled to content.bundle.js)
scripts/heuristics.js  the three heuristic sets
scripts/popup.js     toolbar popup
marker-functions.js  on-page issue markers
motion-animations.js panel transitions
ai-scanner.js        optional screenshot scan client
auth-ui.js           optional sign-in and subscription UI
firebase-config.js   Firebase client config
functions/           Cloud Functions: scan, Stripe checkout, webhooks

The optional backend

Only needed if you want the scan mode. It runs on Firebase — Auth, Firestore, and Cloud Functions — with Stripe for subscriptions and Anthropic for the analysis. Setup is written up in docs/setup.md.

The client config in firebase-config.js and the project id in .firebaserc point at the original deployment. Both need replacing with your own to run your own backend; docs/setup.md lists every place a project-specific value appears.

License

MIT — see LICENSE.