poster-design-mcp

Un servidor MCP que diseña carteles empresariales. Pide a tu clente de IA un cartel en lenguaje natural y escrie un PNG o JPG real en el disco — con resolución de impresión, maquetado por un sistema de diseño y no a ojo.

Cada cartel de esta página se ha producido con una sola llamada a una herramienta. Más en Galería.

Contenido

• Qué hace

• Cómo funciona

• Instalación

• Conéctalo a tu cliente de IA

• Cómo usarlo

• Herramientas

• Plantillas

• Tamaños, paletas e imágenes

• Dónde se guardan los carteles

• Coste de tokens

• Desarrollo

• Solución de problemas

• Creador

• Licencia

Related MCP server: Canvora MCP

Qué hace

La mayoría de las herramientas de imagen con IA pintan un cartel, así que la tipografía sale derretida y el número de teléfono es inventado. Esta compone un cartel. El titular es texto real en una fuente real, el precio es el precio que le diste, y el resultado aterriza en dimensiones exactas de píxeles: 2480×3508 para A4 a 300 dpi, listo para la imprenta.

Obtienes:

• Cuatro diseños derivados de cuatro carteles de referencia: eventos, mensajes de marca, anuncios de producto e hitos numéricos.

• Una paleta a partir de un código hex. Dale tu color de marca; de él se derivan el fondo, la tinta, el acento y la escala de patrones, con la tinta elegida según la relación de contraste para que el texto siga siendo legible.

• Tipografía display con autoajuste. El titular crece hasta que la línea más larga toca el margen y entonces se detiene. Tú eliges los saltos de línea; el servidor elige el tamaño.

• Tratamiento real de fotografías — recortes a sangre, puntos focales, velos de degradado para que el texto nunca quede crudo sobre una imagen.

• Tamaños de impresión o para redes sociales, PNG o JPG, bajo demanda.

Cómo funciona

  your prompt
      │
      ▼
  AI client  ──MCP/stdio──▶  poster-design-mcp
                                  │
                                  │ 1. pick a template  (src/templates/*.js)
                                  │ 2. derive the palette from brandColor
                                  │ 3. build an HTML + CSS document
                                  ▼
                            headless Chrome  ── screenshot ──▶  poster.png
                                                                     │
                                                                     ▼
                                                        ~/Documents/Poster Designs/

1. El sistema de diseño son números, no sensaciones. Se extrajeron doce reglas de cuatro carteles de referencia y se escribieron en src/design-system.js como valores que las plantillas consumen de verdad: margen del 6.8% de la anchura, tipo principal entre 0.055 y 0.155 de la anchura, interlineado 0.90, interletraje −0.03em. El texto de DESIGN-PRINCIPLES.md y los píxeles renderizados se leen de las mismas constantes, así que la documentación no puede desviarse de la salida.

2. Una plantilla convierte tu texto en un documento. Cada una de las cuatro plantillas (src/templates/) es una función: contenido de entrada, HTML y CSS de salida. Coloca las bandas, define los roles tipográficos, genera el patrón decorativo a partir de una semilla e incrusta cada imagen local como URI de datos.

3. Headless Chrome hace la maquetación. Renderizar en un navegador aporta maquetación de texto real — fuentes de respaldo, guionado, recorte con object-fit, formas de letra con mix-blend-mode: multiply — y el bucle de autoajuste mide el titular realmente maquetado y lo reescala hasta que llena la medida. A continuación se hace una captura de la página en las dimensiones exactas de salida, con deviceScaleFactor haciendo el trabajo, de modo que un A4 a 300 dpi es realmente 2480×3508 píxeles y no un reescalado.

4. El archivo va a Documentos. Un servidor MCP lo lanza su cliente y no tiene un directorio de trabajo significativo, así que los resultados se escriben en un lugar localizable y la herramienta devuelve la ruta.

No se sube nada. Sin clave de API, sin llamadas de red: todo el proceso se ejecuta en tu máquina.

Instalación

Requiere Node 20+ y un binario de Chrome/Chromium.

git clone https://github.com/suprisedr/poster-design-mcp.git
cd poster-design-mcp
npm install

npm install instala Puppeteer, que normalmente descarga su propio Chrome. Si no lo hizo, o si omitiste la descarga:

npx puppeteer browsers install chrome

Chrome se busca en este orden: $POSTER_CHROME_PATH → el Chrome gestionado por Puppeteer → Google Chrome o Chromium en las ubicaciones habituales del sistema. Para apuntar a un binario concreto:

export POSTER_CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Comprueba que funciona:

npm test

Eso arranca el servidor por stdio, ejercita todas las herramientas y verifica los presupuestos de tokens. Después, para tener algo que ver:

npm run demo

Un cartel por plantilla en ./examples.

Conéctalo a tu cliente de IA

Claude Code

claude mcp add poster-design -- node /absolute/path/to/poster-design-mcp/src/server.js

Claude Desktop o cualquier archivo de configuración de MCP

Añade a mcpServers (en macOS, la configuración de Claude Desktop está en ~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "poster-design": {
      "command": "node",
      "args": ["/absolute/path/to/poster-design-mcp/src/server.js"],
      "env": {
        "POSTER_BASE_DIR": "/absolute/path/to/poster-design-mcp"
      }
    }
  }
}

Usa rutas absolutas: el cliente lanza el servidor desde un directorio impredecible.

Reinicia el cliente y aparecen las cuatro herramientas.

Cómo usarlo

Una vez conectado, solo tienes que pedir:

Hazme un cartel A4 para Golden Crust Bakery — panes y pasteles artesanales, 123 Maple Street, abierto de 6am a 6pm de martes a domingo. Naranja cálido, usa esta foto de pan.

El cliente elige una plantilla y llama a create_poster. Por debajo, eso es una única carga útil JSON:

{
  "template": "photo-overlay",
  "brandColor": "#0F918F",
  "size": "instagram-portrait",
  "format": "jpg",
  "content": {
    "brandName": "Guski",
    "logoBadge": true,
    "headline": "You love it,\nwe cover it",
    "subhead": "Cover that changes everything",
    "cta": { "label": "Get a quote", "phone": "061 306 081" },
    "legal": "Guski Short Term Insurance Ltd. Reg. No. 89/524.",
    "image": "examples/sample-photo.jpg",
    "imageFocus": "50% 45%"
  }
}

Devuelve una línea escueta — path | 2480x3508 png | 191KB | ... — y el archivo está en el disco.

Dos cosas que conviene saber al escribir el texto:

• Usa \n en un titular para elegir dónde salta de línea. El generador ajusta el tamaño del tipo para llenar el bloque que escribas, así que el salto es una decisión de diseño y es tuya.

• Mantenlo corto. Titular de 2 a 5 palabras, subtítulo de menos de 45 caracteres, cuerpo de dos líneas. La escala tipográfica está construida sobre un contraste extremo; un texto largo es lo que hace que un cartel parezca un folleto.

Galería

Resultados reales, una llamada a herramienta cada uno.

Las fotografías de muestra son imágenes de relleno incluidas para demostración; cambia por las tuyas.

Herramientas

Plantillas

Las reglas que hay detrás están en DESIGN-PRINCIPLES.md — un mensaje por cartel, bandas en lugar de cajas, contraste de escala de 6 a 12×, un único valor de margen, termina en una píldora.

Tamaños, paletas e imágenes

Tamaños. a4-print (2480×3508 @300dpi), a3-print, a5-flyer, poster-hd, instagram-post, instagram-portrait, story, web-banner — o pasa width y height en píxeles. La salida se ajusta exactamente a esas dimensiones.

Color. Pasa brandColor como hex y la paleta completa se deriva de él. O pasa palette para uno de los conjuntos con nombre (festival-block, prism-glass, night-drive, signal-teal, mono-ink), que prevalece sobre brandColor.

Imágenes. image, logo, badge.logo y partners[].logo aceptan una ruta local (absoluta, ~ o relativa a POSTER_BASE_DIR) o una URL http(s). Los archivos locales se incrustan como URI de datos antes de renderizar. Para stat-hero, un sujeto recortado sobre un PNG transparente te da el efecto de que el sujeto cruza el número.

Dónde se guardan los carteles

Los carteles terminados van a ~/Documents/Poster Designs.

Define POSTER_OUTPUT_DIR para mover el destino predeterminado a otro lugar, o outputPath para un archivo exacto.

Coste de tokens

La lista de herramientas de un servidor MCP se vuelve a enviar en cada petición de cada sesión, por lo que este está escrito para que sea barato mantenerlo en el contexto:

• La lista de herramientas es de ~990 tokens, frente a los ~2.600 anteriores. Incluye nombres, opciones y nombres de campos; los significados de los campos se movieron detrás de list_poster_templates, que los llamadores que lo necesitan invocan una sola vez.

• list_poster_templates devuelve ~390 tokens en lugar de ~1.700; pasa un id de template para una sola maquetación en lugar de las cuatro.

• get_design_principles devuelve ~280 tokens en lugar de ~1.700; usa detail: true para obtener el razonamiento completo.

• Los resultados son una línea escueta en lugar de un JSON formateado.

• La imagen de vista previa integrada (200–500 tokens por póster) es opt-in mediante preview: true. El archivo está en Documents, que es un mejor lugar para verlo.

npm test comprueba el presupuesto de la lista de herramientas, así que una regresión en la parte más cara hace fallar la compilación.

Desarrollo

npm run demo    # one poster per template into ./examples
npm test        # boots the server over stdio, exercises every tool, checks the token budgets

src/
  server.js          MCP wiring: tool list, dispatch, terse results
  poster.js          orchestration — template → HTML → render → write
  design-system.js   the twelve rules as numbers: palettes, type scale, layout ratios
  templates/         one file per layout, each content → { body, css }
  lib/
    html.js          document assembly and escaping
    pattern.js       seeded decorative pattern generation
    media.js         image resolution and data-URI inlining
    render.js        headless Chrome lifecycle and screenshotting
    paths.js         output directory resolution

saveHtml: true escribe el código fuente HTML junto a la imagen, que es la forma más rápida de ver por qué algo se maquetó de esa manera. seed hace que el patrón y el jitter sean reproducibles.

Solución de problemas

Creador

Creado por Suprise Nkosi.

• Facebook — facebook.com/suprise.nkosi.524

• GitHub — @suprisedr

Las issues y las pull requests son bienvenidas.

Licencia

MIT — consulta LICENSE.