designer-mcp

Un lápiz de diseño al estilo Cursor para Claude Code. Haz clic, selecciona un área o dibuja en cualquier página web en un Chromium con interfaz y Claude obtendrá el archivo fuente exacto, el número de línea, el selector CSS y una captura de pantalla, listo para editar y verificar.

Qué hace

Tres modos de visual-a-código:

Todas las capturas de pantalla se guardan como archivos PNG en /tmp y se devuelven como rutas; tu cliente MCP nunca alcanzará un límite de contexto en base64.

La resolución de la fuente de React funciona en el modo de desarrollo de Next.js a través de la propiedad fiber _debugSource (adjuntada por @babel/plugin-transform-react-jsx-source). Las compilaciones de producción eliminan esto; consulta Mapeo de fuentes en producción a continuación.

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

Instalación

Requisitos previos: Node 18+, Claude Code, un sistema macOS/Linux funcional (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

Registra el MCP con Claude Code (ámbito de usuario = disponible en cada sesión):

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

Instala la habilidad de Claude para que las sesiones futuras conozcan el flujo de trabajo:

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

Reinicia Claude Code. Deberías ver las herramientas designer_* y una habilidad designer: en tu sesión.

Uso

Inicia tu servidor de desarrollo de Next.js (para el mapeo de fuentes):

cd your-nextjs-app && npm run dev

Luego, en Claude Code:

"Abre http://localhost:3000/settings en el diseñador y déjame elegir el encabezado."

Claude llamará a designer_open(...), luego a designer_pick({ mode: "element" }). Chromium aparecerá en primer plano, tu cursor se convertirá en una mira, haces clic en el encabezado. Claude obtiene source.fileName + lineNumber y puede editar directamente.

Hoja de trucos de modos

• Elemento único — usa element

• Múltiples elementos relacionados en una región — usa area (arrastra un cuadro; devuelve cada elemento cuyo centro caiga dentro)

• Anotar / explicar visualmente — usa draw (lápiz rojo, Enter para finalizar, Esc para cancelar)

Mapeo de fuentes en producción

_debugSource es solo para desarrollo. Para usar el selector en una compilación de producción, habilita los mapas de fuentes en next.config.js:

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

El selector actualmente devuelve source: null en producción; una versión futura resolverá el selector a través del mapa de fuentes desplegado. Las solicitudes de extracción (PRs) son bienvenidas.

Referencia de herramientas

Todas las herramientas se exponen a través de MCP; Claude Code las ve como mcp__designer-mcp__*.

designer_open(url: string)

Inicia o reutiliza la instancia de Chromium con interfaz y navega. Trae la ventana al frente en macOS mediante bringToFront() + un empujón de AppleScript.

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

Activa la superposición del selector. Devuelve cuando el usuario completa la interacción (o Esc cancela, o tiempo de espera de 180s).

designer_screenshot({ selector?: string })

PNG de la página o de un elemento específico. Devuelve { path, bytes }.

designer_close()

Cierra el navegador y libera los recursos de Playwright.

Cómo funciona

1. Se lanza un Chromium controlado por Playwright con interfaz. Singleton por proceso.

2. designer_pick inyecta una pequeña superposición de JS nativo (picker.js) en la página. La superposición:

   • modo element — rastrea mousemove/click, delinea el objetivo al pasar el ratón en azul, resuelve un selector CSS único, recorre la cadena fiber de React para _debugSource, devuelve al MCP.

   • modo area — recuadro de selección; al soltar el ratón, se recopila cualquier elemento cuyo centro caiga dentro del cuadro (deduplicado por selector).

   • modo draw — superposición de lienzo en toda la ventana; captura trazos como matrices de puntos; Enter finaliza.

3. El servidor sondea window.__designerResult cada 200ms durante hasta 180 segundos.

4. Al finalizar, se guarda una captura de pantalla adecuada (elemento / recorte de área / ventana completa) en /tmp y se devuelve la ruta.

Contribución

• Las PRs son bienvenidas, especialmente en torno a:

  • Resolución de mapas de fuentes en producción

  • Selector de Kestrel/React Native (actualmente solo web)

  • Acumulación de múltiples elementos en modo elemento (Cmd-clic para añadir)

  • Integración de "revelar en editor" de VS Code

Licencia

MIT