A Chrome extension for AI builders

Stop describing UI changes.
Point at them.

Click any element on any site, edit it live, and Patchpin hands your coding agent a precise prompt with selectors, before and after, and screenshots. Works with Claude Code, Cursor, Codex and the rest.

Download for Chrome

Completely free. Unlimited changes. No Patchpin account required.

Install from ZIP with Chrome’s Developer mode. Installation guide

Patchpin in select mode, outlining the page headline

Editing the headline text live, with its purple highlighted span preserved

Changing the call-to-action button's background and border radius

Three AI rewrite suggestions from a locally connected Claude Code

The finished change set with five changes, ready to copy as a prompt

Hands off to the agent you already use

The problem

Your agent can write the code. It just can’t see your screen.

Without Patchpin

make the hero headline shorter and the button purple, the main one, not the demo one. and more rounded? also the cards under it should stack on mobile I think

I’ve updated Button.tsx so all buttons are purple…

Three rounds later, you’re pasting screenshots into chat.

With Patchpin

## Change 2: style
Selector: #cta
XPath: /html[1]/body[1]/main[1]/div[1]/button[1]
CSS property: background-color
Current value: "rgb(22, 24, 29)"
Change to: "#6d4cff"

One paste. Exact element, exact values, right first time.

How it works

Point. Edit. Prompt. Ship.

Point at anything

Press Alt Shift P on any page: localhost, staging or production. Hover, click, done. Parent selection grabs whole sections.

Edit it for real

Rewrite copy in place, tweak colours, spacing and radius, or hide an element. You see the result on the real page, with nested links and styling kept intact.

Capture the context

Pixel-exact element crops, drag-to-capture areas and stitched full-page screenshots, bundled with selectors, XPath and nearby text.

Hand it off

Copy one prompt, open it straight in Cursor, or export a ZIP with prompt.md, changes.json and PNGs. Your agent does the source edit.

The output

A prompt your agent can’t misread.

This is the real prompt Patchpin produced for the demo above. Structured, specific, and safe: page text is marked as reference data, never as instructions.

Built for fast iteration

Everything you’d otherwise type out by hand.

Your agent watches, you point

Patchpin’s local MCP server lets Claude Code, Cursor or Codex pick up each change as you add it, fetch its screenshots, and mark it done. Pins turn green as the work lands.

A real design panel

Layout, size, spacing, type, colour, borders and shadows, edited together with a live preview. Your agent gets every before and after value, mapped to your design tokens.

Knows your components

On dev builds Patchpin reads React, Next.js, Vue, Svelte and Angular component names and source files, so your agent opens the right file first.

Variants, then pick the winner

Ask for two to four real variants of any section. Flip between them on the page and keep the one you like.

Pins and pictures

Every change is pinned to its element with an automatic screenshot. Paste or drop a mockup to show exactly what you mean.

Live text editing

Type straight onto the page, or edit styled spans and links as separate parts so formatting survives. Optional AI rewrites give you three alternatives in place.

Share it any way

Copy one prompt for a page or a whole site, or export a ZIP, an HTML report anyone can open, or a JSON change set a teammate can import.

Drafts that stick

Change sets are saved per page and follow single-page-app routes. Undo, replay previews, or come back tomorrow and export.

Works on any site

Localhost, staging, production, even sites you don’t own. No SDK, no framework plugin, no proxy.

Local-first by design

Your drafts stay on your device.

Patchpin runs entirely in your browser. It only touches a tab when you open it there, and makes no network calls by default. Optional AI suggestions and the agent inbox use your local companion. Your AI provider’s pricing and usage limits still apply.

✓ Temporary, per-tab access only
✓ Drafts stored in Chrome’s local storage
✓ Query strings and form values stripped
✓ Bring your own agent, any provider

Free, fully featured

Every feature. Zero checkout.

Patchpin is free for personal and commercial projects. No subscription, license key or Patchpin account.

The whole extension

Patchpin for Chrome

Free

Unlimited changes, live text and design edits
Element, area, viewport and full-page screenshots
ZIP bundles, HTML reports and JSON sharing
Pins, variant requests and local draft library
Optional text suggestions and agent inbox with your AI tool

Download free for Chrome

Your own AI provider may charge for its services. Copying and exporting need no connection.

FAQ

Questions, answered.

Does Patchpin change my code?

No. Edits are a temporary preview in the browser. Patchpin writes the prompt; your coding agent makes the real change in your repo, where you can review it.

Which coding agents does it work with?

Any agent that accepts text and images: Claude Code, Cursor, Codex, Copilot, Windsurf and the rest. Agents that speak MCP can also connect to Patchpin’s local agent inbox and pick up changes as you make them, and Cursor gets a one-click “Open prompt in Cursor” link.

Do I need an AI API key?

No. The optional AI rewrite feature talks to a small companion on your own machine, which uses the CLI you’re already signed in to.

Does it work on localhost and staging?

Yes. It works on any regular web page Chrome can open, including local dev servers, previews and production.

Is it really free?

Yes. Every Patchpin feature is included for free. I built it to help you ship better changes and introduce my work. Optional AI suggestions use your own provider account, with its usual costs and limits.

Your next patch starts here.

Download Patchpin, preview edits on your website, and send the prompt and screenshots to your coding agent. Every feature is ready to use.