Blip MCP Server: Отображать изменения пользовательского интерфейса для кода Claude вместо их описания

Что решает Blip

Разработчик создал Blip, чтобы решить конкретную проблему коммуникации при работе с ИИ-ассистентами для программирования: бесконечные уточнения при описании изменений интерфейса словами. Примеры из источника включают: «Сдвинь кнопку на 20px влево», «Нет, другую кнопку» и «Отступ между вторым и третьим разделами». Этот процесс часто отнимает больше времени, чем само внесение исправлений.

Как это работает

Blip открывает ваше работающее приложение с наложенными поверх инструментами для рисования. Вы можете:

• Обвести кнопку
• Нарисовать стрелку
• Написать текст, например «добавь здесь больше отступа»

После аннотирования скриншота вы нажимаете «отправить». Claude Code получает аннотированное изображение и пишет соответствующий код для реализации указанных вами изменений.

Технические детали

Blip — это MCP-сервер (Model Context Protocol), созданный специально для Claude Code. Весь проект был написан с помощью 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

Разработчик отмечает, что это его первый проект с открытым исходным кодом, и он будет рад получить обратную связь.