poster-design-mcp

Ein MCP-Server, der Geschäftsposter gestaltet. Bitten Sie Ihren KI-Client in einfacher Sprache um ein Poster, und er schreibt eine echte PNG- oder JPG-Datei auf die Festplatte – in Druckauflösung, gestaltet von einem Designsystem statt nach Bauchgefühl.

Jedes Poster auf dieser Seite wurde mit einem einzigen Tool-Aufruf erzeugt. Mehr in Galerie.

Inhalt

• Was es tut

• So funktioniert es

• Installation

• Mit Ihrem KI-Client verbinden

• Verwendung

• Werkzeuge

• Vorlagen

• Größen, Paletten und Bilder

• Wo Poster gespeichert werden

• Token-Kosten

• Entwicklung

• Fehlerbehebung

• Ersteller

• Lizenz

Related MCP server: Canvora MCP

Was es tut

Die meisten KI-Bildwerkzeuge malen ein Poster, daher ist die Schrift verschmiert und die Telefonnummer erfunden. Dieses hier setzt ein Poster in Typografie um. Die Schlagzeile ist echter Text in einer echten Schrift, der Preis ist der Preis, den Sie angegeben haben, und die Ausgabe erfolgt auf exakten Pixelmaßen – 2480×3508 für A4 bei 300 dpi, druckfertig.

Sie erhalten:

• Vier Layouts, abgeleitet von vier Referenzpostern – Veranstaltungen, Markenbotschaften, Produktanzeigen und Meilensteinzahlen.

• Eine Palette aus einem Hex-Code. Geben Sie Ihre Markenfarbe an; Feld, Textfarbe, Akzentfarbe und Muster-Skala werden daraus abgeleitet, wobei die Textfarbe anhand des Kontrastverhältnisses gewählt wird, damit Text lesbar bleibt.

• Automatisch eingepasste Anzeigetypografie. Die Schlagzeile wächst, bis die längste Zeile den Rand berührt, und stoppt dann. Sie wählen die Zeilenumbrüche; der Server wählt die Größe.

• Echte Foto-Verarbeitung – randlose Beschnitte, Fokuspunkte, Verlaufs-Überblendungen, damit Typografie nie direkt auf einem Bild sitzt.

• Druck- oder Social-Media-Formate, PNG oder JPG, auf Anfrage.

So funktioniert es

  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. Das Designsystem sind Zahlen, keine Stimmungen. Zwölf Regeln wurden von vier Referenzpostern abgelesen und in src/design-system.js als Werte geschrieben, die die Vorlagen tatsächlich konsumieren – Rand bei 6,8 % der Breite, Hero-Schrift zwischen 0,055 und 0,155 der Breite, Zeilenabstand 0,90, Laufweite −0,03em. Der Text in DESIGN-PRINCIPLES.md und die gerenderten Pixel lesen aus denselben Konstanten, sodass die Dokumentation nicht von der Ausgabe abweichen kann.

2. Eine Vorlage verwandelt Ihren Text in ein Dokument. Jede der vier Vorlagen (src/templates/) ist eine Funktion: Inhalt rein, HTML und CSS raus. Sie platziert die Bänder, legt die Typografie-Rollen fest, erzeugt das dekorative Muster aus einem Seed und bettet jedes lokale Bild als Data-URI ein.

3. Headless Chrome übernimmt das Layout. Das Rendern in einem Browser bringt echtes Textlayout – Schrift-Fallback, Silbentrennung, object-fit-Beschneidung, mix-blend-mode: multiply-Buchstabenformen – und die Auto-Fit-Schleife misst die tatsächlich gesetzte Schlagzeile und skaliert sie neu, bis sie das Satzmaß füllt. Die Seite wird dann mit deviceScaleFactor in den exakten Ausgabemaßen als Screenshot aufgenommen, sodass ein A4 mit 300 dpi tatsächlich 2480×3508 Pixel groß ist statt hochskaliert.

4. Die Datei kommt in den Dokumente-Ordner. Ein MCP-Server wird von seinem Client gestartet und hat kein sinnvolles Arbeitsverzeichnis. Daher werden Ergebnisse an einem auffindbaren Ort gespeichert, und das Werkzeug gibt den Pfad zurück.

Es wird nichts hochgeladen. Kein API-Schlüssel, kein Netzwerkaufruf – die gesamte Pipeline läuft auf Ihrem Rechner.

Installation

Erfordert Node 20+ und eine Chrome-/Chromium-Binärdatei.

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

npm install zieht Puppeteer nach, das normalerweise sein eigenes Chrome herunterlädt. Falls das nicht geschah oder Sie den Download übersprungen haben:

npx puppeteer browsers install chrome

Chrome wird in dieser Reihenfolge gesucht: $POSTER_CHROME_PATH → das von Puppeteer verwaltete Chrome → Google Chrome oder Chromium an den üblichen Systemorten. Um auf eine bestimmte Binärdatei zu zeigen:

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

Prüfen Sie, ob es funktioniert:

npm test

Das startet den Server über stdio, übt jedes Werkzeug aus und prüft die Token-Budgets. Dann, für etwas zum Anschauen:

npm run demo

Je ein Poster pro Vorlage in ./examples.

Mit Ihrem KI-Client verbinden

Claude Code

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

Claude Desktop oder eine beliebige MCP-Konfigurationsdatei

Fügen Sie zu mcpServers hinzu (unter macOS liegt die Konfiguration von Claude Desktop unter ~/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"
      }
    }
  }
}

Verwenden Sie absolute Pfade – der Client startet den Server aus einem unvorhersehbaren Verzeichnis.

Starten Sie den Client neu, und die vier Werkzeuge erscheinen.

Verwendung

Sobald verbunden, fragen Sie einfach:

Erstell mir ein A4-Poster für Golden Crust Bakery – handgefertigte Brote und Gebäck, 123 Maple Street, geöffnet 6–18 Uhr Dienstag bis Sonntag. Warmes Orange, nimm dieses Brotfoto.

Der Client wählt eine Vorlage und ruft create_poster auf. Unter der Haube ist das ein einziges JSON-Payload:

{
  "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%"
  }
}

Es gibt eine knappe Zeile zurück – path | 2480x3508 png | 191KB | ... – und die Datei liegt auf der Festplatte.

Zwei Dinge, die Sie beim Verfassen des Texts wissen sollten:

• Verwenden Sie \n in einer Schlagzeile, um zu bestimmen, wo sie umbricht. Der Generator skaliert die Schrift so, dass sie den von Ihnen geschriebenen Zeilenfall füllt – der Umbruch ist also eine Designentscheidung, und zwar Ihre.

• Halten Sie es kurz. Schlagzeile 2–5 Wörter, Untertitel unter 45 Zeichen, Fließtext zwei Zeilen. Die Schriftskala basiert auf extremem Kontrast; langer Text lässt ein Poster wie ein Flugblatt aussehen.

Galerie

Echte Ausgabe, jeweils ein einziger Tool-Aufruf.

Die Beispielbilder sind Platzhaltergrafiken zur

• Die Tool-Liste umfasst ~990 Tokens statt ~2.600. Sie enthält Namen, Optionen und Feld-Namen; die Feld-Bedeutungen wurden in list_poster_templates ausgelagert, das einmal von den Aufrufern aufgerufen wird, die es benötigen.

• list_poster_templates gibt ~390 Tokens statt ~1.700 zurück; übergib eine template-ID, um ein Layout statt aller vier zu erhalten.

• get_design_principles gibt ~280 Tokens statt ~1.700 zurück; detail: true für die vollständige Begründung.

• Ergebnisse sind eine knappe Zeile statt hübsch formatiertem JSON.

• Das Inline-Vorschaubild (200–500 Tokens pro Poster) ist über preview: true opt-in. Die Datei liegt in Documents, wo man sie sich besser ansehen kann.

npm test prüft das Budget der Tool-Liste, sodass eine Regression in der teuersten Oberfläche den Build scheitern lässt.

Entwicklung

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 schreibt den HTML-Quelltext neben das Bild – das ist der schnellste Weg, um zu sehen, warum etwas so angeordnet wurde. seed macht das Muster und den Jitter reproduzierbar.

Fehlerbehebung

Ersteller

Erstellt von Suprise Nkosi.

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

• GitHub — @suprisedr

Issues und Pull-Requests sind willkommen.

Lizenz

MIT — siehe LICENSE.