Blip MCPサーバー：UI変更を説明する代わりにClaudeコードで描画する

Blipが解決する課題

開発者は、AIコーディングアシスタントと作業する際の特定のコミュニケーション問題に対処するためにBlipを構築しました。それは、UI変更を口頭で説明する際のやりとりです。ソースからの例には、「ボタンを20px左に移動」、「いや、別のボタンです」、「2番目と3番目のセクション間のパディング」などがあります。このプロセスは、実際の修正を実装するよりも多くの時間を浪費することがよくあります。

仕組み

Blipは、実行中のアプリケーションを描画ツールがオーバーレイされた状態で開きます。以下のことができます：

• ボタンを丸で囲む
• 矢印を描く
• 「ここにもっとパディングを追加」などのテキストを書く

スクリーンショットに注釈を付けた後、送信を押します。Claude Codeは注釈付き画像を受け取り、あなたが指示した変更を実装するための対応するコードを記述します。

技術詳細

Blipは、Claude Code専用に構築されたMCP（Model Context Protocol）サーバーです。このプロジェクト全体は、週末を使ってClaude Codeで構築されました。無料で、MITライセンスの下でオープンソースであり、データ収集なしで完全にローカルで実行されます。

インストール方法

インストールするには：

claude mcp add blip -- npx blip-mcp

プロジェクトリンク

• ランディングページ：https://blip-chi.vercel.app
• GitHubリポジトリ：https://github.com/nebenzu/Blip
• 例のスクリーンショット：https://preview.redd.it/lo07xfhfr7qg1.png?width=2878&format=png&auto=webp&s=c8bad2090f27ec4701375aaf671a49369ce416

開発者は、これが初めてのオープンソースプロジェクトであり、フィードバックを受け取ることを喜んでいると述べています。