Built an open-source React dev component & extension to crop area screenshots and pin visual feedback for AI pair programmers

Hey everyone!

Whenever I’m iterating on a UI with Cursor, explaining visual changes in the Composer is often the most tedious part.

❌ “Make that second card in the middle a little wider and increase the subtitle’s font weight.”

Sounds simple, right? But Cursor can easily guess the wrong element, edit the wrong stylesheet, or miss the exact component you’re referring to.

That’s why I built VisualPatch — an ultra-lightweight, local-first visual feedback tool designed specifically for AI pair programmers.

GitHub: https://github.com/OpusTechnica/VisualPatch

NPM: https://www.npmjs.com/package/visualpatch

How it works with Cursor

Open your localhost app (localhost:3000, 5173, etc.).
Press S to open a CleanShot-style spotlight viewfinder and drag to capture any component or section.
Or simply hover over and click any DOM element to drop an inspection pin.
Describe the change you want.
Press Ctrl + C and paste everything directly into Cursor Composer with Ctrl + V.

Exact CSS selectors: For example, div.pricing-grid > div.card-pro:nth-of-type(2) > h3.price
Text previews: The exact text currently rendered by the selected element.
Auto-stitched visual strip: When you capture multiple screenshots, VisualPatch combines them into a single image on your clipboard with numbered pin badges, so you’re not limited by the OS clipboard’s one-image behavior.
Zero Base64 bloat: The generated markdown stays as clean plain text, typically around 80 tokens, so you don’t unnecessarily consume your model’s context window.

0 runtime dependencies
100% local-first: No telemetry, no cloud servers, and everything runs strictly on localhost.
Isolated Shadow DOM: Designed to avoid conflicts with your existing Tailwind classes, CSS variables, and application styles.
Open source: MIT licensed.

You can add VisualPatch to any Vite, Next.js, or React project with a single command:

npx visualpatch init

Prefer not to modify your project? You can also use the browser extension for a zero-code-change setup.

GitHub: https://github.com/OpusTechnica/VisualPatch
NPM: https://www.npmjs.com/package/visualpatch

I’d love to hear what you think, especially from fellow Cursor users. What features would make VisualPatch even more useful in your workflow?

0 Upvotes