Case study · Chrome extensionPixel Poke is a Chrome extension I designed and built. Click anything on a live website, tweak it the way you would in Figma, leave a note on it, and hand the developer real CSS instead of a screenshot with arrows.
No rebuilding the page in Figma. No circling a stale screenshot. You work on the real page, and Pixel Poke quietly keeps track of what you changed, why you changed it, and any accessibility issue you spotted along the way.
When you're done, the whole session becomes one handoff a developer can read in a minute and paste from.
You spot it: the button color is off, the heading is too heavy, the card feels cramped. You fix it in DevTools, explain it in Slack, and send a screenshot with an arrow.
Then a developer opens the page and reverse-engineers what you meant. I wanted the change, the reason and the result to live together, in something a developer can paste instead of decode.
Click an element and move it the way your hands already know: drag, resize, snap, nudge, duplicate, hide, undo. Because it is a real DOM element, every change is recorded as CSS on the spot - nothing to translate later.
Select and visually edit any element on a live page.
Pin comments and accessibility findings to the exact element.
Export changed CSS and rationale as one handoff grouped by element.
The first version exposed a long list of CSS properties. I rebuilt the panel in the order designers know from Figma, then made sections conditional. Auto layout appears for flex and grid elements; text controls appear only when the selection contains text.
A webpage is not a freeform canvas. Dragging inside flex or grid changes order, while a positioned element moves through left and top. The gesture stays familiar; the implementation fits the layout model underneath it.
A raw selector can break after a deploy. Each note also remembers the tag, text, stable classes and nearest named ancestor, then searches again if the old selector stops matching.
The first export split CSS, comments and accessibility findings into three lists. The final handoff puts the note, before-and-after CSS and accessibility issue together under the element they belong to.
The inspector is built in React and TypeScript. The Manifest V3 extension injects the same component that ships as a React package for teams that want the experience inside their own app.
The panel mounts in a shadow root, isolating it from aggressive site CSS. It detects when a page uses !important and produces an override that reproduces the visible change.
Notes and edits are local-first. Optional sign-in can sync a user's own notes, edits and handoffs. Without sign-in, working data stays on the device. Page content is not sent for analytics.
Pixel Poke launched in the Chrome Web Store on 20 September 2026 after a solo design-and-build cycle from August through September. It includes the extension, a live product site and a reusable React version of the inspector.
The next credible outcome data should come from the store and the product itself: installs, active users, completed handoffs, copied CSS exports, returning users and a before-and-after handoff-time study. Until those figures are verified, the honest outcome is what shipped and how it works.
A Chrome extension that lets product designers visually edit live webpages and export implementation-ready CSS, comments and accessibility findings.
Designers reviewing production, staging or competitor webpages, and developers who need a concrete handoff instead of annotated screenshots.
No. It changes the current browser view for the working session. Reloading restores the original page.
No. It is built for the last mile on a real, already-rendered webpage: inspect, adjust, explain and hand off.
CSS changes grouped by selector, with related comments and accessibility findings organized by element. The handoff can be copied as Markdown.