Side project, a Chrome extension built with Claude

Point at the thing. AI gets it.

AI can't see my screen. So "make the button smaller, no, the other one" goes nowhere. PinPoint lets me drop Figma-style comments on any web page, then copy them as text an AI can act on.

Case studyChrome and EdgeBuilt with Claude

GitHub

RoleDesigner

Built withClaude

Runs asChrome extension

Time1 day

Click anywhere to drop a pin

One day to build, one click to use

1day to build

3ways to run it

0dependencies

2permissions used

One commit, 21 Sep 2026: ~1,100 lines, written by Claude, MIT licensed.

Describing it

Screenshot, crop, explain
"No, the other button"
AI guesses the element

Pointing at it

Click the exact spot
Drag a box for a section
Gets selector, text, my note

To an AI, "the other button" means nothing.

Most of my feedback on Claude-built pages is one small thing: this gap, that button, this card. Explaining where it was took longer than the fix.

In Figma I'd just drop a comment. So I built the same for any web page — pin it, box it, note it, then copy it as text an AI can't misread.

Every note carries

What: the CSS selector
Which one: nearest heading, its section
Area: the box, plus labels inside
What to do: my note

How it works

Three moves. Screenshots are the real overlay on its demo page.

Click for a pin, drag for an area

A click drops a numbered pin; drag boxes a whole section, Figma-style. Type a note and hit Cmd + Enter.

Drag a pin and it re-reads what's under it.

Demo page with PinPoint on: pin 1 on the Download button, pin 2 on the headline with its note box open, and an area comment boxed around three feature cards. The PinPoint toolbar sits at the bottom. — **Two pins and an area** with a note being typed.

Copy for AI

One click copies every note, top to bottom: selector, nearby text, my note. Paste into Claude and it lands on the right element.

Real output from the three notes in the screenshot.

Momo PinPoint comments for …/demo.html (3 pins):
#1 [selector: header.site > nav.nav > button.nav-cta · near "Download"] — "make this button smaller"
#2 [selector: #hero > h1 · near "Ship faster with Acme"] — "a bit bolder, and one line on mobile"
#3 [AREA over #features · covers "Speech to text · Smart cleanup · Tone control"] — "cards need the same padding"

The numbers never lie

Delete a pin and the rest renumber, so the page, list, and copied text always match. Notes save per page, so a refresh keeps them.

Tap the count to see every note in one list.

PinPoint comment list open above the toolbar: three notes numbered 1 to 3 with their context, and a green toast saying Copied 3 comments — **Comment list** right after Copy for AI.

Who does what

Saves a chat round every time. I let AI handle the fiddly code, but I read what it changes.

All the JavaScript, zero dependencies
Finds the selector and text
Extension, bookmarklet, README

The idea, borrowed from Figma
What each note must carry
Writing notes, checking results

4 days later, it was a company tool

124 Sep

I showed PinPoint at our office Show & Tell. My own words that day: "It still can't do much yet."

228 Sep

Our CEO posted that he had taken the idea and added it straight into our internal project tool. 🎉

3Same day

Our CTO replied: "This is epic."

Honest limits

1Mouse and trackpad only

Dragging and boxing areas are desktop-only — touch isn't tuned yet.

2Some sites block the bookmarklet

Strict sites block injected scripts — use the extension or script tag instead.

3Selectors can drift

Big page changes can knock a pin off its spot. Just drag it back to re-read.

Try it with your own AI

Build a mini PinPoint

Copy the prompt
Paste it into ChatGPT, Claude or Gemini
Save the answer as an .html file and open it

Still you: try it on your own page first, then paste the copied notes to your AI.

Build ONE self-contained HTML file (inline CSS and JS, no libraries, opens by double-click) called "PinPoint": a Figma-style comment layer that lets me show an AI exactly what to change on a page. Reply with only the code.

Page: [a simple sample landing page: nav, hero with heading and button, 3 feature cards, footer]. Put the whole tool in one <script id="pinpoint"> IIFE that works on any page, plus a "PinPoint bookmarklet" link with href "javascript:" + encodeURIComponent(that script's text).

Tool:
- Toolbar fixed bottom centre: "Comment" toggle (on at start, blue), count badge, "Copy for AI", "Clear all".
- Comment mode: quick click drops a numbered blue pin; drag (over 6px) draws a translucent blue area. A note box opens; Enter or click-away saves; empty notes are discarded.
- Click a mark to edit, drag to move (re-capture target), always-visible × to delete (touch has no hover).
- Numbers follow top-to-bottom order (y, then x), recomputed on every change: no gaps.
- Esc closes an open note, else turns comment mode off (marks stay, page works normally).
- Save to localStorage "pinpoint::" + location.pathname; reload restores. Ignore the tool's own UI.

"Copy for AI" copies exactly:
PinPoint comments for <page URL> (<n> pins):
#1 [selector: <css path> · near "<closest heading or text>"] — "<note>"
#2 [AREA over <container css path> · covers "<headings/buttons fully inside the box, joined by " · ">"] — "<note>"
CSS path: up to 4 levels up from the element, each tag + #id or 2 classes, joined by " > "; stop at an #id; never html or body. Area container = closest common ancestor of those headings/buttons. Clipboard: navigator.clipboard, textarea fallback. Readable, unminified code.

Before you answer, check: pins, areas and × work with mouse and touch; no numbering gaps; Esc works; reload restores; copied text matches; no console errors.

Next project

Momo Color Generator

One color in, a whole palette out, straight into Figma as variables.

Momo Color Generator · Figma pluginSide project · Built with AI

Tired of describing which button?

Happy to show you PinPoint, or how I build tools like this with Claude.

Say hello All side projects