17·Product·Passion project
Inspect Comment
Design review usually ends in a screenshot with an arrow on it, and whoever picks it up has to guess which element was meant. This is a dev-only overlay that ends it in a markdown block instead: click an element, say what should change, queue it, and copy one review that names every element precisely enough for a designer or a coding agent to act on without guessing. 0 dependencies, 1 file to copy in, no account, no backend, no build step.
ResultOpen source and in daily use on this site.
01Discover
Why it exists.
The failure is ordinary and everywhere. Somebody walks a page, spots twelve things, and sends a screenshot per thing. Whoever picks them up has to re-find each element, work out which of four nested divs was meant, and infer the intent from an arrow. Half the notes are about spacing nobody can measure from an image.
The other half of the problem arrived with coding agents. An agent can act on a review directly, but only if the review names things precisely: a component, a source line, a selector, the actual computed values. A screenshot carries none of that, so a human has to translate every note before any of it can be worked on.
02Define
The brief.
End a design review in something the next person can act on, rather than a screenshot with an arrow on it and a guess about which element was meant.
03Develop
What it took
Skills behind it.
Primary discipline plus the support stack.
Skills demonstrated
- Frontend EngineeringPrimary
Reads React Server Components, which is the part comparable tools get wrong: they walk the client fiber, and on a Next App Router page that finds SegmentViewNode and nothing else, because a server component never gets a fiber. This reads fiber._debugInfo as well, so the review names a real component and source line.
- Product StrategySecondary
Chose the output format as the product. The artifact is one markdown block sized for whoever acts next, so the same review works for a human designer and for a coding agent with no second version of it.
- Web DesignSecondary
Designed an overlay that sits on top of any site without inheriting its styles or fighting its z-index, and that reports box, typography and contrast in the terms a reviewer already thinks in.
- Backend EngineeringSupporting
Wrote the MCP bridge that hands the review to Claude Code or Cursor, and lightbox's on-demand proxy, which adopts a dev server that is already listening rather than starting a second one.
Develop · Notes
The build, in full.
How it came together - kept off this page so the case study stays a read, not a scroll.
Read the full build notes04Deliver
What shipped.
Open source and in daily use on this site. It answers the 2 accessibility failures a screenshot cannot show, contrast ratio against AA and position in the focus order, by reading the live DOM rather than a design file. Its companion, lightbox, boots every front end you have built at once, one review port each, and injects the same overlay into every page so the notes land in a folder tagged with the repository they came from.
Both are in daily use on this site, and the review overlay was used while auditing the pages it now documents. inspect-comment is MIT on a public repo, which makes it the one project here whose source a reader can open and judge for themselves rather than take on trust.
By the numbers
Dependencies
1 file, no backend, no build step
A11y checks answered
contrast against AA, and focus order
Licence
public repo, readable source
See also
AI / ML
AriOS
A personal knowledge system built on one Obsidian vault as the only database, capturing anything as plain markdown that outlives the tool.
Product
Reference Library
A local-first visual reference library: capture from the browser, keep source and palette, and file one reference under any number of boards.
Product
House Call
A multi-tradition natal-reading practice synthesising Western, Chinese BaZi and Vedic Jyotish, with predictions logged so they can be checked.