Pixzlo: How I improved UI QA by building an internal tool end to end
Project overview
Pixzlo is a design QA workflow built around one idea: a page isn't a design — it's a hub for many designs. It captures UI issues on the live page, compares them against the right Figma frame, and pushes structured tickets into Linear.
The product has two parts. A Chrome extension that captures issues in context on the live site, and a web dashboard that manages issues, owns the page-to-Figma mapping, and shares links.
My role
Solo designer and builder. Product, UX, UI, and the frontend (Next.js, Supabase). Started as an internal tool for my team at MindsDB.
The problem
For months, I watched my team file the same kind of broken QA tickets. Engineers got screenshots without specs. Designers got bug reports without context. Everyone ended up in a Slack thread asking which Figma file was the real one.
There's a deeper issue: source of truth. Most pages render multiple states, each one living in its own Figma frame, and there's no convention for which frame is the spec for the thing you're looking at right now.
Low-signal feedback
Issues are reported as screenshots with vague comments ("this looks off") rather than actionable, structured inputs.
Missing context
Reports frequently lack the exact element reference, page state, environment, and steps to reproduce.
Slow resolution cycles
The team spends time in back-and-forth clarifications instead of fixing the issue immediately.
Poor traceability
Feedback gets scattered across tools making it hard to track status and ownership.
The insight
A page is not a design. A page is a hub for many designs, one per state.
Most QA tools assume one page equals one design. Pixzlo is built around the reality that one page equals many states.
Three decisions that shaped Pixzlo
The Mapping system
The dashboard organizes work as Sites, then Pages, then Figma frames per page. When a user reports an issue, Pixzlo asks which state they're looking at and pulls the matching spec.
Annotation and spec diff in one surface
The Create Issue modal merges two things most tools split: annotation and inspection. Mismatches render in red. Matches stay neutral.
Linear as a first-class output
Pixzlo isn't trying to replace Linear. The Share in Linear toggle is on by default at the issue level, not the workspace level.
Small details worth showing
Limited browser support tooltip
When a CSS property has limited browser support (like overlay), Pixzlo shows an inline tooltip linking to MDN. The tool teaches instead of just complaining.
Pin-extension onboarding
Chrome extensions hide behind a puzzle icon by default. Pixzlo's first-run flow mocks the browser chrome and points to where the pin is, because no native UI lets you teach this otherwise.
Severity dropdown with progress-bar icons
Urgent, High, Medium, Low, No priority. Each visually weighted so a long issues list reads at a glance.
What internal use taught me
Four mapping models before one that worked
A flat list broke on modal states. Tags failed because no two people agreed on naming. URL-pattern matching pushed taxonomy onto users who just wanted to file a bug. The model that shipped treats pages as containers and Figma frames as named children. Barely any structure. That is exactly why it scales.
The complete inspector was the wrong product
The first panel showed every computed CSS property the browser exposes, around 200 rows. Users stopped reading at row eight. The version that shipped curates twelve groups: font, color, spacing, sizing, radius, shadow. The ones that actually cause QA bugs. Curation made it usable.
Filing speed determines adoption
If capturing a bug takes more than two clicks, people stop capturing bugs. Every field we added to the creation form cost us reports. The final flow is capture, pick a frame, write one line. Everything else is optional and pre-filled.