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-mcpProject 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.
📖 Read the full source: r/ClaudeAI
👀 See Also
Creative Excellence Plugin for Claude Code Improves Animation Quality with Interaction Thesis
A new open-source plugin for Claude Code addresses generic animation generation by implementing an 'interaction thesis' approach where Claude must describe motion concepts before coding. The plugin includes 8 sub-skills covering GSAP, Framer Motion, CSS animations, and design principles from studied repositories.
mcp-optimizer reduces token waste from idle MCP servers in Claude Code
mcp-optimizer is a plugin that addresses token waste from MCP servers in Claude Code by analyzing tool usage and generating optimized configurations. It includes four utilities: mcp-doctor for server health checks, mcp-audit for usage analysis, mcp-optimize for creating project-local configs, and mcp-to-skills for converting tools to on-demand Skills.
Dev-Card: A Claude Code Skill That Generates Developer Identity Cards from Git History
Dev-Card is a Claude Code skill that analyzes git repositories to generate shareable Developer Identity Cards, assigning one of 11 developer archetypes based on commit timing, language breakdown, commit message patterns, and commit size distribution.
SeeFlow: Architecture Diagrams That Are Wired to Your Live App
SeeFlow generates a flow canvas from your codebase and wires each node to your actual running app, with plugins for Claude Code, Codex, Cursor, Windsurf, and an MCP server.