MCP para Claude Code

Devuelve la versión, la cantidad de nodos, los frames raíz con posición y tamaño, las variables, los themes, las librerías importadas y los componentes locales. Indica si el documento está abierto en la app canvappen.

Parámetros

Ejemplos

Resumen de un diseño

{
  "path": "~/proyecto/design.pen"
}

RespuestaJSON con path, openInApp, version, nodeCount, roots, themes, variables, imports y components

Devuelve nodos por id con sus hijos hasta 'depth'. Con resolve expande instancias (ref) y variables y agrega 'bounds' calculados (posición absoluta y tamaño). Sin ids devuelve los nodos raíz.

Parámetros

Ejemplos

Leer un frame con dos niveles

{
  "path": "design.pen",
  "ids": [
    "Lg3Bf"
  ]
}

Con posición calculada

{
  "path": "design.pen",
  "ids": [
    "Lg3Bf"
  ],
  "resolve": true
}

RespuestaJSON: lista de nodos

Busca nodos por nombre, contenido de texto o tipo. Devuelve id, tipo, nombre, ancestros y un fragmento del texto.

Parámetros

Ejemplos

Buscar botones

{
  "path": "design.pen",
  "query": "botón"
}

RespuestaJSON con count y results

Lista los componentes (reusable) del documento y de las librerías .lib.pen importadas, con el id que debe usarse en 'ref'.

Parámetros

Ejemplos

Componentes disponibles

{
  "path": "design.pen"
}

RespuestaJSON con libraries, count y components

Devuelve las variables (definición y valor resuelto) y los ejes de theme. Opcionalmente resuelve con una selección de theme.

Parámetros

Ejemplos

Variables en modo oscuro

{
  "path": "design.pen",
  "theme": {
    "mode": "dark"
  }
}

RespuestaJSON con themes, theme y variables

Valida el documento contra el schema 2.21 y reporta migraciones necesarias, normalizaciones y errores.

Parámetros

Ejemplos

Validar un diseño

{
  "path": "design.pen"
}

RespuestaJSON con valid, migratedFrom, warnings e issues. En la CLI el código de salida es 1 si algún archivo tiene errores

Renderiza nodos (o todos los frames raíz) y devuelve la imagen al agente para revisión visual. Limitada a 2048 px. Para guardar archivos usa export.

Parámetros

Ejemplos

Revisar un frame

{
  "path": "design.pen",
  "ids": [
    "Lg3Bf"
  ]
}

RespuestaImagen PNG y un JSON con tamaño, missingFonts, missingImages, missingIcons, brokenLibraries y scriptErrors. Con strict y algún faltante, la imagen se devuelve igual pero la respuesta se marca como error

Aplica operaciones de edición en una transacción: insert, update, delete, move, replace, copy, detach, set_variables, set_themes, set_imports y set_fonts (ver el tema operations). Si la app canvappen tiene el documento abierto, el cambio se ve en vivo con el puntero del agente; si no, se escribe el archivo con respaldo. Si el archivo no existe, se crea.

Parámetros

Ejemplos

Cambiar un texto

{
  "path": "design.pen",
  "operations": [
    {
      "op": "update",
      "id": "t1",
      "props": {
        "content": "Hola"
      }
    }
  ]
}

Separar una instancia

{
  "path": "design.pen",
  "operations": [
    {
      "op": "detach",
      "id": "card1"
    }
  ]
}

RespuestaJSON con appliedIn, createdIds, affectedIds, deletedIds y backup

Renombra el archivo a .lib.pen para usarlo como librería de componentes. Solo es posible si el documento no tiene librerías adjuntas. Si el documento está abierto en la app, ciérralo antes.

Parámetros

Ejemplos

Convertir un sistema de diseño

{
  "path": "sistema.pen"
}

RespuestaJSON con from y to

Copia una imagen local (.png, .jpg, .jpeg, .webp o .gif) a la carpeta images/ del documento (sin duplicar si el contenido es igual) y, si insert es verdadero, inserta un rectángulo con la imagen a su tamaño real (máximo 1200 px).

Parámetros

Ejemplos

Usar una foto de Descargas

{
  "path": "design.pen",
  "source": "~/Downloads/foto.jpg",
  "parent": "hero"
}

RespuestaJSON con url (relativa al .pen), width, height y nodeId

Copia la fuente a la carpeta fonts/ del documento, lee su familia, peso y estilo, y la agrega a 'fonts' del .pen.

Parámetros

Ejemplos

Agregar una fuente

{
  "path": "design.pen",
  "source": "~/Downloads/Marca-Bold.otf"
}

RespuestaJSON con name, url, weight y style

Descarga a la carpeta del documento las fuentes que hoy vienen de Google Fonts (solo los pesos y estilos que se usan, incluidos los de componentes de librerías) y las imágenes por http(s), y cambia las referencias del .pen a esos archivos. Después el documento se renderiza y exporta sin internet. Solo descarga de dominios permitidos: allowedHosts de la configuración o los permitidos por una persona para ese documento. Las fuentes del sistema que no están en Google Fonts se informan para importarlas con import_font.

Parámetros

Ejemplos

Preparar una presentación para el servidor

{
  "path": "deck.pen"
}

Incluir las librerías

{
  "path": "deck.pen",
  "withLibraries": true
}

RespuestaJSON con files (por archivo: fuentes, imágenes y recursos omitidos con el motivo) y complete. En la CLI el código de salida es 1 si quedó algún recurso sin localizar

Exporta nodos o el documento completo. Con ids se respeta su orden; sin ids se exporta todo en orden de lectura del canvas. Por defecto guarda en <carpeta del .pen>/exports/<nombre-del-pen>/ (ver el tema export).

Parámetros

Ejemplos

Presentación completa en PDF

{
  "path": "deck.pen",
  "format": "pdf"
}

Tres láminas en un orden propio

{
  "path": "deck.pen",
  "format": "pdf",
  "ids": [
    "c3",
    "a1",
    "b2"
  ]
}

Un frame en PNG a 3x

{
  "path": "design.pen",
  "format": "png",
  "ids": [
    "Lg3Bf"
  ],
  "scale": 3
}

RespuestaJSON con file, kind, count, order, bytes y siempre missingFonts, missingImages, missingIcons, brokenLibraries y scriptErrors (aunque estén vacíos). Con strict y algún faltante no se escribe el archivo y la respuesta es un error (código 1 en la CLI)

Sin topic devuelve la vista general: qué es canvappen, el catálogo de funcionalidades y la lista de temas. Con topic devuelve el detalle de una funcionalidad (parámetros, respuesta y ejemplos) o de un tema: pen-format, operations, export o files.

Parámetros

Ejemplos

Vista general

{}

Detalle de la exportación

{
  "topic": "export"
}

Formato .pen

{
  "topic": "pen-format"
}

RespuestaTexto en Markdown