Blip MCP Server: Draw UI Changes for Claude Code Instead of Describing Them

What Blip Solves

The developer built Blip to address a specific communication problem when working with AI coding assistants: the back-and-forth of describing UI changes verbally. Examples from the source include: "Move the button 20px left," "No, the other button," and "The padding between the second and third section." This process often wastes more time than implementing the actual fix.

How It Works

Blip opens your running application with drawing tools overlaid on top. You can:

• Circle a button
• Draw an arrow
• Write text like "add more padding here"

After annotating the screenshot, you hit send. Claude Code receives the annotated image and writes the corresponding code to implement the changes you indicated.

Technical Details

Blip is an MCP (Model Context Protocol) server built specifically for Claude Code. The entire project was built using Claude Code over a weekend. It's free, open source under the MIT license, and runs entirely locally with no data collection.

Installation

To install:

claude mcp add blip -- npx blip-mcp

Project Links

• Landing page: https://blip-chi.vercel.app
• GitHub repository: https://github.com/nebenzu/Blip
• Example screenshot: https://preview.redd.it/lo07xfhfr7qg1.png?width=2878&format=png&auto=webp&s=c8bad2090f27ec4701375aaf671a49369ce416

The developer notes this is their first open source project and they're happy to receive feedback.