Snaplensy

THE INITIAL PROBLEM. AI coding assistants are only as good as the context they are given. When a developer wants to change one button on a live site, the hard part is describing that button, its selector, its place in the component tree, its props and its computed styles. In practice people paste screenshots or hand copy fragments from devtools, and the assistant fills the gaps with guesses. Browser devtools contain all of the information but scatter it across half a dozen panels, and none of them produce output an assistant can act on directly. I wanted a single gesture that turns any element on any page into a precise, structured description ready to paste into a prompt. THE PLAN. Three constraints were fixed before the first line of code. First, it must work on every site and break none. That decision drove the whole architecture, Manifest V3, every piece of injected UI rendered inside closed Shadow DOM so page styles cannot leak in and extension styles cannot leak out, and an overlay that never swallows pointer events it does not need. Second, the output format is the product. Copying an element produces a structured prompt with the element, a unique selector, the component path, props, computed styles and a test locator, so an assistant receives facts instead of a picture. Third, it had to be a real business from day one, a free tier that stays useful forever and a Pro tier with a seven day trial handled by ExtensionPay. THE TEAM. Szymon Dziedzic, product owner, designer and engineer, responsible for the concept, UX and UI, the architecture and every technical decision. Claude Code, the AI pair that wrote the implementation from written specifications in a tight review loop, with every change reviewed and accepted by a human. The working agreement lives in the repository, a CLAUDE.md contract for the agent and a changelog discipline that records every feature. No agency and no contractors. EXECUTION. The extension is four content scripts loaded in strict order. An element descriptor extracts computed styles and generates unique selectors. An overlay draws color coded highlights by element type. An inspector panel displays and edits properties. An orchestrator wires activation, events and selection together. The panel and overlay render inside closed Shadow DOM for full style isolation. React detection runs in a separate script injected into the main world of the page, because content scripts live in an isolated world and cannot touch React internals, and the two worlds communicate through CustomEvents. A service worker keeps activation state, Pro status and the keyboard shortcut. Live CSS editing supports double click to edit, a color picker, automatic unit detection and a reset that reverts every change. Quick Copy mode skips the panel entirely, one click on a highlighted element and the structured prompt is in the clipboard. The marketing site is a separate Vite and React application with scroll driven animation primitives built for the project. WHAT IT COST AND WHAT BROKE. Roughly two months from the start of development to version 1.1.0 in the store. The hard parts were rarely the visible ones. Live CSS editing quietly lost to page stylesheets until every edited value was written back with important priority, and typing a bare 20 had to learn to mean 20px. Escape had to revert edits reliably on any site. A closed shadow root protects the panel from the page but also from the extension itself, so every new control ships its styles inside the panel, a rule now written into the project guidelines. And the overlay fought a running war over pointer events, it has to sit above everything and highlight anything while the page keeps behaving normally the moment the inspector closes. LESSONS LEARNED. The browser is a hostile runtime for guest UI. Anything injected into someone else's page must assume the page fights back with global styles, aggressive selectors and z index wars, and closed Shadow DOM isolation turned out to be the single most important architectural decision. Output format is product, the moment the copy button produced a structured prompt instead of loose values the tool stopped being a devtools shortcut and became a bridge between the page and the assistant. And an AI pair multiplies whoever steers it, output quality tracked specification quality, which is why the agent contract and the changelog discipline were kept current to the last commit. WHY THIS DESERVES AN AWARD. First, it serves a genuinely new workflow, feeding AI coding assistants precise, machine readable context about live interfaces, a need that did not exist two years ago and now shapes how frontend work gets done. Second, engineering craft in a hostile environment, it runs on any site without breaking it, isolates its UI in closed Shadow DOM and reads React internals across world boundaries. Third, it is a complete product, not a demo, extension, payments, free trial, marketing site, tutorial and changelog, shipped by one person with an AI pair in about two months. Fourth, privacy by architecture, everything runs locally in the browser and nothing is ever sent to a server. Fifth, it is an honest vibe coding case study, written specifications, a repository contract for the agent and human review of every change, evidence of how this way of building works in practice.

A production browser extension shipped by one person with an AI pair in two months. It works on any site, sends no data anywhere and turns any element into a prompt an AI assistant can act on. The whole loop, product to payments.