designer-mcp

Дизайнерское перо в стиле Cursor для Claude Code. Кликайте, выделяйте рамкой или рисуйте на любой веб-странице в окне Chromium, и Claude получит точный исходный файл, номер строки, CSS-селектор и скриншот — готовые к редактированию и проверке.

Что он делает

Три режима визуального поиска исходного кода:

Все скриншоты сохраняются как PNG-файлы в /tmp и возвращаются в виде путей — ваш MCP-клиент никогда не превысит лимит контекста из-за base64.

Разрешение исходного кода React работает в режиме разработки Next.js через свойство fiber _debugSource (добавляется с помощью @babel/plugin-transform-react-jsx-source). В производственных сборках это свойство удаляется; см. Production source mapping ниже.

Демо

You:     "Make this button rounder"
Claude:  [designer_open http://localhost:3000/dashboard]
Claude:  [designer_pick mode=element]
You:     *click the button*
Claude:  → source: Button.tsx:42
Claude:  [Edit Button.tsx add rounded-full]
Claude:  [designer_screenshot selector=#cta-btn]  ← after screenshot for verification

Установка

Предварительные требования: Node 18+, Claude Code, работающая macOS/Linux (Playwright Chromium).

git clone https://github.com/YOUR_USER/designer-mcp.git
cd designer-mcp
npm install
npx playwright install chromium      # one-time browser download

Зарегистрируйте MCP в Claude Code (user-scope = доступно в каждой сессии):

claude mcp add --scope user designer-mcp node "$(pwd)/index.js"

Установите навык Claude, чтобы будущие сессии знали об этом рабочем процессе:

mkdir -p ~/.claude/skills/designer
cp SKILL.md ~/.claude/skills/designer/SKILL.md

Перезапустите Claude Code. Вы должны увидеть инструменты designer_* и навык designer: в вашей сессии.

Использование

Запустите сервер разработки Next.js (для сопоставления исходного кода):

cd your-nextjs-app && npm run dev

Затем в Claude Code:

"Открой http://localhost:3000/settings в дизайнере и позволь мне выбрать заголовок."

Claude вызовет designer_open(...), затем designer_pick({ mode: "element" }). Окно Chromium выйдет на передний план, ваш курсор превратится в перекрестие, вы кликнете по заголовку. Claude получит source.fileName + lineNumber и сможет сразу приступить к редактированию.

Шпаргалка по режимам

• Один элемент — используйте element

• Несколько связанных элементов в одной области — используйте area (перетащите рамку; возвращает каждый элемент, чей центр попадает внутрь)

• Аннотирование / визуальное объяснение — используйте draw (красное перо, Enter для завершения, Esc для отмены)

Сопоставление исходного кода в продакшене

_debugSource доступен только в режиме разработки. Чтобы использовать инструмент выбора в производственной сборке, включите карты исходного кода (source maps) в next.config.js:

module.exports = {
  productionBrowserSourceMaps: true,
  // ...
};

В настоящее время инструмент выбора возвращает source: null в продакшене; будущая версия будет разрешать селектор через развернутую карту исходного кода. Пул-реквесты приветствуются.

Справочник инструментов

Все инструменты доступны через MCP; Claude Code видит их как mcp__designer-mcp__*.

designer_open(url: string)

Запускает или повторно использует запущенный экземпляр Chromium и переходит по адресу. Выводит окно на передний план в macOS с помощью bringToFront() + AppleScript.

designer_pick({ mode?: "element" | "area" | "draw" })

Активирует оверлей выбора. Возвращает результат, когда пользователь завершает взаимодействие (или Esc для отмены, или по тайм-ауту 180 секунд).

designer_screenshot({ selector?: string })

PNG страницы или конкретного элемента. Возвращает { path, bytes }.

designer_close()

Закрывает браузер и освобождает ресурсы Playwright.

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

1. Запускается управляемый Playwright экземпляр Chromium. Один экземпляр на процесс.

2. designer_pick внедряет небольшой оверлей на чистом JS (picker.js) на страницу. Оверлей:

   • режим element — отслеживает mousemove/click, выделяет цель наведения синим цветом, разрешает уникальный CSS-селектор, проходит по цепочке React fiber для поиска _debugSource, возвращает результат в MCP.

   • режим area — выделение рамкой; при отпускании кнопки мыши собираются все элементы, чей центр попадает внутрь рамки (дедупликация по селектору).

   • режим draw — оверлей холста на весь экран; захватывает штрихи как массивы точек; Enter завершает работу.

3. Сервер опрашивает window.__designerResult каждые 200 мс в течение до 180 секунд.

4. По завершении соответствующий скриншот (элемент / фрагмент области / весь экран) сохраняется в /tmp и возвращается путь.

Участие в разработке

• Пул-реквесты приветствуются, особенно в следующих областях:

  • Разрешение карт исходного кода в продакшене

  • Инструмент выбора для Kestrel/React Native (сейчас только веб)

  • Накопление нескольких элементов в режиме element (Cmd-клик для добавления)

  • Интеграция "показать в редакторе" для VS Code

Лицензия

MIT