designer-mcp

Ein Designer-Stift im Cursor-Stil für Claude Code. Klicken, markieren oder zeichnen Sie auf einer beliebigen Webseite in einem Chromium-Fenster, und Claude erhält den exakten Quelldateipfad, die Zeilennummer, den CSS-Selektor und einen Screenshot – bereit zur Bearbeitung und Überprüfung.

Funktionsweise

Drei Modi für die visuelle Quellcode-Zuordnung:

Alle Screenshots werden als PNG-Dateien in /tmp gespeichert und als Pfade zurückgegeben – Ihr MCP-Client stößt so nie an ein Kontextlimit durch Base64.

Die Auflösung der React-Quelle funktioniert im Next.js-Entwicklungsmodus über die _debugSource-Fiber-Eigenschaft (angehängt durch @babel/plugin-transform-react-jsx-source). Produktions-Builds entfernen diese; siehe Produktions-Quellcode-Mapping unten.

Demo

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

Installation

Voraussetzungen: Node 18+, Claude Code, ein funktionierendes 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

Registrieren Sie das MCP bei Claude Code (Benutzer-Scope = in jeder Sitzung verfügbar):

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

Installieren Sie die Claude-Skill, damit zukünftige Sitzungen den Workflow kennen:

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

Starten Sie Claude Code neu. Sie sollten nun designer_*-Tools und eine designer:-Skill in Ihrer Sitzung sehen.

Verwendung

Starten Sie Ihren Next.js-Entwicklungsserver (für das Quellcode-Mapping):

cd your-nextjs-app && npm run dev

Dann in Claude Code:

"Öffne http://localhost:3000/settings im Designer und lass mich die Kopfzeile auswählen."

Claude ruft designer_open(...) auf, dann designer_pick({ mode: "element" }). Chromium erscheint im Vordergrund, Ihr Cursor wird zum Fadenkreuz, Sie klicken auf die Kopfzeile. Claude erhält source.fileName + lineNumber und kann direkt bearbeiten.

Spickzettel für Modi

• Einzelelement — verwenden Sie element

• Mehrere zusammengehörige Elemente in einem Bereich — verwenden Sie area (ziehen Sie ein Rechteck; es werden alle Elemente zurückgegeben, deren Mittelpunkt innerhalb liegt)

• Visuell kommentieren / erklären — verwenden Sie draw (roter Stift, Enter zum Abschließen, Esc zum Abbrechen)

Produktions-Quellcode-Mapping

_debugSource ist nur für die Entwicklung gedacht. Um den Picker in einem Produktions-Build zu verwenden, aktivieren Sie Source Maps in next.config.js:

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

Der Picker gibt in der Produktion derzeit source: null zurück; eine zukünftige Version wird den Selektor über die bereitgestellte Sourcemap auflösen. Pull Requests sind willkommen.

Tool-Referenz

Alle Tools werden über MCP bereitgestellt; Claude Code sieht sie als mcp__designer-mcp__*.

designer_open(url: string)

Startet oder verwendet die Chromium-Instanz mit Benutzeroberfläche und navigiert zur URL. Bringt das Fenster unter macOS via bringToFront() + einem AppleScript-Anstoß in den Vordergrund.

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

Aktiviert das Picker-Overlay. Kehrt zurück, sobald der Benutzer die Interaktion abschließt (oder Esc zum Abbrechen, oder nach 180s Timeout).

designer_screenshot({ selector?: string })

PNG der Seite oder eines spezifischen Elements. Gibt { path, bytes } zurück.

designer_close()

Beendet den Browser und gibt Playwright-Ressourcen frei.

Funktionsweise

1. Ein Playwright-gesteuerter Chromium wird mit Benutzeroberfläche gestartet. Singleton pro Prozess.

2. designer_pick injiziert ein kleines Vanilla-JS-Overlay (picker.js) in die Seite. Das Overlay:

   • Element-Modus — verfolgt mousemove/click, umrandet das Ziel in Blau, löst einen halbwegs eindeutigen CSS-Selektor auf, durchläuft die React-Fiber-Kette nach _debugSource und kehrt zum MCP zurück.

   • Bereichs-Modus — Gummiband-Auswahl; beim Loslassen der Maustaste wird jedes Element gesammelt, dessen Mittelpunkt innerhalb des Kastens liegt (Deduplizierung nach Selektor).

   • Zeichen-Modus — Vollbild-Canvas-Overlay; erfasst Striche als Punkt-Arrays; Enter schließt ab.

3. Der Server fragt window.__designerResult alle 200ms für bis zu 180 Sekunden ab.

4. Nach Abschluss wird ein entsprechender Screenshot (Element / Bereichs-Ausschnitt / Vollbild) unter /tmp gespeichert und der Pfad zurückgegeben.

Mitwirken

• PRs sind willkommen, besonders für:

  • Auflösung von Produktions-Sourcemaps

  • Kestrel/React Native Picker (derzeit nur Web)

  • Akkumulation mehrerer Elemente im Element-Modus (Cmd-Klick zum Hinzufügen)

  • VS Code "Im Editor anzeigen"-Integration

Lizenz

MIT