Blip mascot

Stop describing.

Start drawing.

Draw directly on your preview to tell Claude what to change. Circles, arrows, highlights -- visual feedback that eliminates ambiguity. Free and open source.

localhost:3000 Frame
add search bar here
swap these two
make collapsible
Blip mascot

Four steps. Zero ambiguity.

From preview to annotated screenshot in seconds.

1

Say "blip"

Tell Claude "blip" and it opens your page in a browser with drawing tools ready.

claude code
$ blip
Opening browser with overlay...
Waiting for annotations...
2

Draw on it

Circle a button, draw an arrow, add a text label. Visual intent, zero ambiguity.

localhost:3000
add more padding here
3

Send to Claude

Click "Send to Claude". The annotated screenshot goes straight back to your chat.

localhost:3000
Send to Claude
4

Claude acts on it

Claude sees exactly what you mean and updates the code. No more describing UI changes with words.

claude code
$ blip
Received annotated screenshot.
Found 3 annotations:
  - circle on sidebar nav
  - arrow: "move this up"
  - highlight on card grid
Updated 2 files
Preview refreshed

One command. Your canvas.

Run this in your terminal to add Blip to Claude Code.

terminal
$ claude mcp add blip -- npx blip-mcp

Then tell Claude: "blip"