claude-design-mcp

Общайтесь с Claude Design прямо из Claude Code. Отправляйте ему инструкции по дизайну, читайте его ответы, забирайте созданные им файлы себе в репозиторий и выводите нужный экран на дисплей, чтобы наблюдать за его работой вживую.

Claude Design — отдельный продукт, не связанный с Claude Code. У него свои проекты, свои чаты и свои файлы, и никакого API. Так что эти двое никогда не пересекались.

Это мост между ними. Теперь Claude Code может попросить дизайнера сделать экран, наблюдать за тем, как он рисуется, читать ход рассуждений и тут же забирать результат прямо в кодовую базу.

you  →  Claude Code  →  claude.ai/design  →  a design
                     ←  its reply, its files  ←

Установка

/plugin marketplace add marvin-socialista/claude-design-mcp
/plugin install claude-design@claude-design

Затем один раз — в каталоге установленного плагина:

npm install     # Playwright and the MCP SDK
npm run seed    # copy your claude.ai session into the tool's browser profile
npm run smoke   # read-only check, spends nothing

npm install не опционален и не запускается автоматически: инструмент управляет настоящим браузером, поэтому Playwright просто обязан быть на месте.

seed копирует только cookie-файлы claude.ai из уже используемого вами профиля Chrome (по умолчанию это ~/.claude/playwright-profile, либо можно передать другой путь). Всё остальное из этого профиля не считывается и не копируется. Если вход не выполнен или сессия позже истечёт, команда npm run login откроет окно, где вы сможете войти вручную.

Обычный MCP-сервер, без системы плагинов

git clone https://github.com/marvin-socialista/claude-design-mcp
cd claude-design-mcp && npm install && npm run seed
claude mcp add claude-design --scope user -- node "$PWD/src/index.mjs"

Инструменты

Начать что-то новое

Общаться с ним

Посмотреть и прочитать, что он построил

Перемещать результаты работы

Удаление (безвозвратно, ни корзины, ни отмены)

delete_project защищён так же, как GitHub защищает удаление репозиториев. UUID агент легко утащит не из того шага; а название нужно целенаправленно найти и сверить. Проверено на практике: он отказывается удалять "Bridge test DS", если проект на самом деле называется "Bridge test DS (safe to delete)".

Вместе с плагином поставляется навык claude-design, который обучает Claude тому, когда и как обращаться к этим инструментам, — так что вам достаточно просто сказать, чего вы хотите.

Подключение локальной папки без нативного диалога выбора файлов

У пункта «Привязать локальный код» нет поля для выбора файла. Его кнопка «Обзор…» вызывает window.showDirectoryPicker() — нативный диалог операционной системы, которым не может управлять никакая автоматизация, — и на этом история обычно заканчивалась бы.

Поэтому стандартный диалог заменён. link_local_code читает папку в Node, затем внедряет синтетический FileSystemDirectoryHandle, реализующий те части, которые использует приложение (values, entries, getFileHandle, getDirectoryHandle, queryPermission), и переопределяет showDirectoryPicker так, чтобы тот возвращал этот объект. Хендлу присваивается настоящий прототип через Object.setPrototypeOf, поэтому проверка instanceof по-прежнему проходит, а наши собственные методы затеняют нативные — которые выбросили бы исключение на постороннем объекте.

Проверено от начала до конца: после подключения src/ Claude Design перечислил все пять файлов и корректно процитировал первую строку из session.mjs.

Только текстовые файлы, пропуская .git, node_modules и результаты сборки, с ограничением по количеству файлов и суммарному объёму в байтах. Указывайте ему папку фронтенда или дизайн-системы, а не монорепозиторий.

Этот хендл синтетический и живёт внутри страницы. Настоящий сохраняется между сессиями и повторно авторизуется; этот — нет, поэтому подключайте его заново, если следующая сессия снова потребует эти файлы.

Видеть работу, а не просто слышать о ней

screenshot возвращает отрендеренную страницу в виде изображения, поэтому Claude Code может судить о макете, отступах, типографике и цвете, вместо того чтобы доверять тексту ответа. Используйте width: 402 для кадра класса iPhone, format: "png" для читаемости мелкого текста и fullPage: true вместе с savePath для длинного документа.

search_code вместе с read_file закрывает вторую половину задачи: читать разметку, которую Claude Design действительно написал, ничего не выгружая на диск. Страница .dc.html может занимать сотни килобайт, поэтому сначала поиск через grep, затем чтение нужного участка.

Наблюдение за работой

Пока данные читаются, браузер стоит припаркованным за пределами экрана, так что вас ничто не отвлекает. open_screen перемещает его на дисплей через CDP, а не перезапускает, а send_prompt по умолчанию использует visible: true.

Открывайте экран, к которому относится работа, до отправки промпта, чтобы наблюдать изменения в реальном времени, а не смотреть на результат постфактум. Имена страниц в переключателе указываются без расширения: запросите Prototype.dc.html, и оно сопоставится со страницей, отображаемой как «Prototype».

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

Публичного API нет. Всё описанное ниже было выяснено путём анализа сетевого трафика самого приложения и поставляемого бандла.

claude.ai/design общается через Connect-RPC-сервис anthropic.omelette.api.v1alpha.OmeletteService. Обычная cookie-аутентификация, без дополнительных заголовков. Полезные методы:

Чтения идут через RPC. Отправка промпта идёт через настоящую страницу. Именно такое разделение — вся задумка, и это не лень.

Chat не принимает строку промпта. Он принимает messagesRequest — поле bytes, содержащее весь модельный запрос, который собирает клиент, — и стримит обратно события tool_delta / tool_block_complete. Эти инструменты исполняет браузер. В бандле находится клиентский исполнитель (case 'local_read': …) примерно для двадцати из них: чтение и запись файлов проекта, grep, скриншоты, check_design_system, generate_image, мост к Figma. Цикл агента живёт на странице.

Поэтому прямой вызов Chat означал бы переизобретение всей обвязки Claude Design: её системного промпта, схемы каждого инструмента, реализации каждого инструмента и жизненного цикла хода (CancelChat, ReleaseTurn, сценарий парковки и пробуждения). Это клонирование приложения. Управление страницей же достаётся всё это бесплатно и стоит один процесс Chrome.

Понимание, когда работа завершена

Два сигнала, нужны оба.

Сетевое затишье отслеживается с помощью PerformanceObserver на resource timings — так же само приложение следит за собственным потоком: записи сообщаются по завершении, значит новая запись …/Chat означает, что поток только что закончился. Один ход пользователя состоит из нескольких потоков (модель запрашивает инструмент, браузер выполняет его, следующий поток несёт результат), поэтому затишье означает «ни один поток не завершился в течение idleSeconds».

Однако одного затишья недостаточно — это ловушка. Долгий вызов инструмента молчит, поэтому ход в процессе может выглядеть как завершённый. Решающий сигнал — сообщение ассистента, содержимое которого действительно появилось в транскрипте. Только когда выполняются оба условия, send_prompt возвращает управление.

Никаких патчей fetch нигде, так что ничто из этого не может сломать страницу.

Почему браузер видимый

Chrome запускается с интерфейсом (headed), но припаркованным за пределами экрана, в позиции -2400,-2400. Это не

косметическое замечание: Cloudflare выдаёт headless-браузеру Chrome вызов 403 на claude.ai даже при наличии валидной сессии и загруженных stealth-обходах. Проверено в обе стороны: headless — 403, с окном — 200.

Ограничения, о которых стоит знать

• Это работает через внутренний, недокументированный API. Он может измениться без предупреждения, и поддержки в таком случае не будет.
• Расходуются ваши обычные кредиты Claude, и применяются обычные ограничения по частоте запросов.
• Не закрывайте браузер посреди хода. Браузер является исполнителем инструментов агента, поэтому его завершение прерывает выполняющуюся работу, и ответ не сохраняется.
• send_prompt отправляет сообщение в активный чат проекта. Передайте chatId, чтобы выбрать нужный чат — это делается кликами по всплывающему меню истории чатов, поскольку ни один URL не выбирает чат (?chat=, /c/<id> и /chat/<id> все лишь загружают проект, оставляя выбранной предыдущую ветку). Создание нового чата не автоматизировано.
• В записях файлов нет версии или времени изменения, поэтому send_prompt точно сообщает о файлах, которые были добавлены и удалены, но не может увидеть редактирование на месте. Об этом вы узнаёте из текста ответа.
• Переключатель страниц показывает страницы, а не все файлы. Для остальных используйте pull_files.
• HTML возвращается с прикреплённым в начало собственным рантаймом предпросмотра Claude Design — парой из стиля и скрипта data-omelette-injected объёмом около 15 КБ. read_file удаляет это; передайте raw: true, чтобы сохранить.
• WriteFiles принимает mutations с вариантом write внутри oneof, а его data — обычная строка, а не proto bytes. Обе ошибки завершаются тихим сбоем: возвращается 200, при этом сохраняется пустой файл либо литеральный base64. Поэтому write_files перечитывает записанное и вызывает исключение, если ничего не сохранилось.

Поддержка

Если этот инструмент сэкономил вам время, можете угостить меня кофе ☕.

Лицензия

MIT