Skip to main content
Glama

poster-design-mcp

An MCP server that designs business posters. Ask your AI client for a poster in plain language and it writes a real PNG or JPG to disk — print-resolution, laid out by a design system rather than by guesswork.

Every poster on this page was produced by a single tool call. More in Gallery.


Contents


Related MCP server: Canvora MCP

What it does

Most AI image tools paint a poster, so the type comes out melted and the phone number is fiction. This one typesets a poster. The headline is real text in a real font, the price is the price you gave it, and the output lands on exact pixel dimensions — 2480×3508 for A4 at 300 dpi, ready for a printer.

You get:

  • Four layouts derived from four reference posters — events, brand statements, product ads, and milestone numbers.

  • A palette from one hex code. Give it your brand colour; field, ink, accent and pattern ramp are derived from it, with the ink picked by contrast ratio so text stays legible.

  • Auto-fitted display type. The headline grows until the longest line touches the margin, then stops. You choose the line breaks; the server chooses the size.

  • Real photograph handling — full-bleed crops, focal points, gradient scrims so type never sits raw on an image.

  • Print or social sizes, PNG or JPG, on demand.

How it works

  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. The design system is numbers, not vibes. Twelve rules were read off four reference posters and written into src/design-system.js as values the templates actually consume — margin at 6.8% of the width, hero type between 0.055 and 0.155 of the width, leading 0.90, tracking −0.03em. The prose in DESIGN-PRINCIPLES.md and the rendered pixels read from the same constants, so the documentation cannot drift away from the output.

  2. A template turns your copy into a document. Each of the four templates (src/templates/) is a function: content in, HTML and CSS out. It places the bands, sets the type roles, generates the decorative pattern from a seed, and inlines every local image as a data URI.

  3. Headless Chrome does the layout. Rendering in a browser buys real text layout — font fallback, hyphenation, object-fit cropping, mix-blend-mode: multiply letterforms — and the auto-fit loop measures the actual laid-out headline and rescales until it fills the measure. The page is then screenshotted at the exact output dimensions with deviceScaleFactor doing the work, so a 300 dpi A4 is genuinely 2480×3508 pixels rather than an upscale.

  4. The file goes to Documents. An MCP server is launched by its client and has no meaningful working directory, so results are written somewhere findable and the tool returns the path.

Nothing is uploaded. No API key, no network call — the whole pipeline runs on your machine.

Install

Requires Node 20+ and a Chrome/Chromium binary.

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

npm install pulls Puppeteer, which normally downloads its own Chrome. If it didn't, or if you skipped the download:

npx puppeteer browsers install chrome

Chrome is located in this order: $POSTER_CHROME_PATH → Puppeteer's managed Chrome → Google Chrome or Chromium in the usual system locations. To point at a specific binary:

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

Check that it works:

npm test

That boots the server over stdio, exercises every tool and asserts the token budgets. Then, for something to look at:

npm run demo

One poster per template into ./examples.

Connect it to your AI client

Claude Code

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

Claude Desktop, or any MCP config file

Add to mcpServers (on macOS, Claude Desktop's config lives at ~/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"
      }
    }
  }
}

Use absolute paths — the client launches the server from an unpredictable directory.

Environment variable

Meaning

POSTER_BASE_DIR

What relative image and output paths resolve against

POSTER_OUTPUT_DIR

Moves the default output folder off ~/Documents/Poster Designs

POSTER_CHROME_PATH

Explicit Chrome/Chromium binary

Restart the client, and the four tools appear.

Using it

Once connected, you just ask:

Make me an A4 poster for Golden Crust Bakery — handcrafted breads and pastries, 123 Maple Street, open 6am–6pm Tuesday to Sunday. Warm orange, use this bread photo.

The client picks a template and calls create_poster. Under the hood that is one 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%"
  }
}

It returns one terse line — path | 2480x3508 png | 191KB | ... — and the file is on disk.

Two things worth knowing when you write the copy:

  • Use \n in a headline to choose where it breaks. The generator sizes the type to fill whatever rag you write, so the break is a design decision and it's yours.

  • Keep it short. Headline 2–5 words, subhead under 45 characters, body two lines. The type scale is built on extreme contrast; long copy is what makes a poster look like a flyer.

Real output, one tool call each.

banded-editorial — pattern band, photograph, type block. A4, 2480×3508.

The same poster with no photo. Drop the image field and the middle band becomes a monogram of the brand initial.

photo-overlay — full-bleed photograph, duotone scrim, headline low-left, pill CTA and a legal rail.

stat-hero — one flat field, a giant numeral as artwork, tight copy stack.

chromatic-type — one word past the margins, letters overlapped and multiplied into new colours.

banded-editorial as an event bill, with a badge and a sponsor rail.

Sample photography is placeholder imagery included for demonstration; swap in your own.

Tools

Tool

What it does

list_poster_templates

The four layouts and when to use each, plus palettes, sizes and fonts. Pass a template id for that one layout's full field guide

get_design_principles

The twelve rules, type scale and layout ratios. Pass detail: true for the reasoning, brandColor for the derived palette

create_poster

Renders one poster to PNG/JPG and returns the path. Pass preview: true for an inline thumbnail

create_poster_variants

The same copy across up to 4 templates or palettes, for comparison

Templates

id

Based on

Use it for

banded-editorial

A jazz festival bill

Events, launches, line-ups. Pattern band + photograph + type block + sponsor rail

chromatic-type

A typographic brand poster

Brand statements and campaign words, when there is no photograph worth printing

photo-overlay

An insurance campaign ad

Product and service advertising with a call to action and small print

stat-hero

An anniversary ad

Milestones, results and offers with a number in them

The rules behind them are in DESIGN-PRINCIPLES.md — one message per poster, bands not boxes, 6–12× scale contrast, one margin value, end on a pill.

Sizes, palettes and images

Sizes. a4-print (2480×3508 @300dpi), a3-print, a5-flyer, poster-hd, instagram-post, instagram-portrait, story, web-banner — or pass width and height in pixels. Output lands on exactly those dimensions.

Colour. Pass brandColor as a hex and the full palette is derived from it. Or pass palette for one of the named sets (festival-block, prism-glass, night-drive, signal-teal, mono-ink), which wins over brandColor.

Images. image, logo, badge.logo and partners[].logo take a local path (absolute, ~, or relative to POSTER_BASE_DIR) or an http(s) URL. Local files are inlined as data URIs before rendering. For stat-hero, a cut-out subject on a transparent PNG gives you the effect of the subject crossing the numeral.

Where posters are saved

Finished posters go to ~/Documents/Poster Designs.

outputDir

Resolves to

omitted

~/Documents/Poster Designs

"Q3 campaign"

~/Documents/Poster Designs/Q3 campaign

"./build", "~/Desktop", or an absolute path

exactly that — relative forms against POSTER_BASE_DIR

Set POSTER_OUTPUT_DIR to move the default somewhere else, or outputPath for one exact file.

Token cost

An MCP server's tool list is re-sent on every request of every session, so this one is written to stay cheap to keep in context:

  • The tool list is ~990 tokens, down from ~2,600. It carries names, options and field names; field meanings moved behind list_poster_templates, which is called once by the callers that need it.

  • list_poster_templates returns ~390 tokens instead of ~1,700; pass a template id for one layout instead of all four.

  • get_design_principles returns ~280 tokens instead of ~1,700; detail: true for the full reasoning.

  • Results are one terse line rather than pretty JSON.

  • The inline preview image (200–500 tokens per poster) is opt-in via preview: true. The file is in Documents, which is a better place to look at it.

npm test asserts the tool-list budget, so a regression in the most expensive surface fails the build.

Development

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 writes the HTML source next to the image, which is the fastest way to see why something laid out the way it did. seed makes the pattern and jitter reproducible.

Troubleshooting

Symptom

Fix

Could not find Chrome

npx puppeteer browsers install chrome, or set POSTER_CHROME_PATH

Tools don't appear in the client

Use an absolute path to src/server.js, then restart the client

Images don't render

Local paths resolve against POSTER_BASE_DIR; set it, or pass an absolute path

Poster written somewhere unexpected

Default is ~/Documents/Poster Designs; override with outputDir or POSTER_OUTPUT_DIR

Headline overflows

Put your own \n breaks in it, or shorten it — 2–5 words is the design target

Creator

Built by Suprise Nkosi.

Issues and pull requests are welcome.

License

MIT — see LICENSE.

Available Tools

4 tools
create_posterB

Render a business poster to a PNG/JPG in ~/Poster Designs. Auto-fitted display type, band structure, one accent colour, protected legibility. Returns the file path.

ParametersJSON Schema
NameRequiredDescriptionDefault
seedNoSame seed = same pattern/jitter.
sizeNoDefault a4-print.
fontsNoRoles display/text. grotesque|humanist|black|geometric|serif|mono or a CSS font-family.
widthNoCustom px width (with height).
formatNoDefault png.
heightNo
contentYesCopy and imagery. Fields (* = required): banded-editorial(headline*, subhead, details, eyebrow, badge, partners, image, imageFocus, patternDensity); chromatic-type(word*, tagline, brandLine, overlap, jitter, shards, bleed, fill); photo-overlay(headline*, subhead, cta, brandName, logo, logoBadge, legal, image*, imageFocus, scrim, treatment); stat-hero(headline*, subhead, figure*, labelTop, labelBottom, body, tag, image, cutout, logo, figureStyle). Field meanings: list_poster_templates. Use \n in a headline to set the rag.
paletteNofestival-block|prism-glass|night-drive|signal-teal|mono-ink or a hex. Beats brandColor.
previewNoReturn an inline thumbnail to look at. Costs tokens; default false.
qualityNoJPEG quality 1-100, default 92.
filenameNoName without extension.
saveHtmlNoAlso write the HTML source.
templateYes
outputDirNoAbsolute path, or a subfolder of ~/Poster Designs (the default).
brandColorNoBrand hex; a full palette is derived from it.
outputPathNoExact output path.

TDQS

B3.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full behavioral disclosure burden. It does transparently mention file output formats, the output directory, and the return value, and it adds design automation traits such as auto-fitted display type and protected legibility. However, it does not mention overwrite behavior, permissions, or other side effects beyond writing the poster file.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is compact and front-loaded: purpose, key output behavior, and return value appear in three short sentences. The design-behavior clause is useful but uses some jargon (e.g., 'band structure', 'protected legibility') that is not explained; still, there is minimal waste.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (16 parameters, nested content objects, four templates), the description is brief but the schema compensates with rich parameter documentation. It covers the output path and basic design behavior, but it lacks guidance on when to choose this tool over create_poster_variants and does not summarize template requirements in the main description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is high (88%), and the schema already documents parameter meanings, defaults, enums, and nested template-specific fields. The description adds no parameter-level detail beyond general design intent, so the baseline 3 applies because the schema carries most of the semantic weight.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific action ('Render a business poster to a PNG/JPG'), a target location ('~/Poster Designs'), and the return value ('Returns the file path'). It clearly identifies this as a poster-generation tool, though it does not explicitly distinguish it from the sibling create_poster_variants.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is given on when to use this tool versus create_poster_variants, or how it relates to list_poster_templates and get_design_principles. Usage context is only implied by the phrase 'Render a business poster' and the parameter schema; there are no exclusions or alternative-selection hints.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

create_poster_variantsA

Same message across several templates/palettes in one call, to compare directions.

ParametersJSON Schema
NameRequiredDescriptionDefault
contentYesShared copy; fields as in create_poster.
templateNoFallback when a variant names none.
variantsYesUp to 4 override objects: template, palette, brandColor, seed, fonts, filename or extra content fields. Any create_poster option may also be set at the top level as a shared default.

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the behavioral disclosure burden. It accurately communicates the key batch behavior (several variants in one call) and the comparison intent, but it does not mention return format, failure modes, or any side effects. This is adequate but not rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One concise sentence that delivers the core value proposition without wasted words. It is front-loaded with the batch concept and ends with the purpose, making it easy to scan. Slightly more explicit structure would improve it, but it is appropriately sized.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 3-parameter tool with nested objects and no output schema, the description gives enough context to select the tool and understand its general purpose. However, an agent would still need to rely on the schema for override semantics and would not know what the response contains. Functional for selection, incomplete for full invocation confidence.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the structured schema already documents content, template fallback behavior, and variant overrides. The description adds the conceptual 'same message across templates' framing but no additional parameter-level detail beyond what the schema provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly conveys that the tool generates the same message across multiple templates/palettes in a single call, which differentiates it from the singular create_poster sibling. It lacks an explicit verb but the resource and batch scope are unmistakable.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'to compare directions' provides a clear context for when this tool is appropriate: when the user wants to explore multiple visual directions at once. It does not explicitly name alternatives or exclusions, but the batch comparison purpose is evident from the description alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_design_principlesA

The design rules, type scale and layout ratios the generator applies. For writing copy that fits, or critiquing output.

ParametersJSON Schema
NameRequiredDescriptionDefault
detailNoFull rationale per rule instead of one line each.
brandColorNoAlso return the palette derived from this hex.

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden of explaining behavior. It communicates that this is a read-oriented informational tool returning rules, type scale, and ratios, but it does not explicitly state the return format, side effects, or any constraints such as whether brandColor changes the returned rules.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two short sentences with no filler. The first sentence establishes what the tool returns and the second gives actionable usage guidance, so every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple getter with two optional parameters and no output schema, the description names the key return content and intended use. It would be more complete with a sentence about what the response contains, but for this complexity the coverage is adequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents both parameters. The description adds no parameter-level meaning, but the baseline of 3 applies because the schema handles the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly identifies the resource as the generator's design rules, type scale, and layout ratios, and states its intended use in writing or critiquing copy. It does not explicitly contrast with sibling tools, but the subject matter is obviously distinct from template listing and poster creation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The second sentence gives explicit use cases: 'For writing copy that fits, or critiquing output.' It does not state exclusions or point to alternatives, so it stops short of a 5, but the situational context is clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_poster_templatesA

Field guide for the poster layouts, plus palettes, sizes and fonts. Pass a template id for that one layout only. Call once before create_poster if unsure.

ParametersJSON Schema
NameRequiredDescriptionDefault
templateNoJust this layout, in full.

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden of behavioral disclosure. It implies read-only behavior through 'field guide' and describes the optional filter behavior ('Pass a template id for that one layout only'), which adds useful context. However, it never explicitly states that the operation is read-only, nor does it describe the default return behavior when no template is passed.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three short sentences with no fluff. The purpose is front-loaded, the optional parameter behavior is stated in the second sentence, and the workflow guidance is in the third. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with one optional parameter and no output schema, the description adequately covers what the tool returns, the filtering behavior, and when to call it. The main gap is the absence of any distinction from the sibling get_design_principles, which could leave an agent uncertain which reference tool to select.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents the template parameter. The description adds only 'for that one layout only,' which reinforces the schema's 'Just this layout, in full' but does not materially extend it. This is the appropriate baseline when the schema handles parameter documentation.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly identifies the tool as a reference for poster layouts, palettes, sizes, and fonts, which is a specific resource and content scope. It does not explicitly use the verb 'list' but the name and 'field guide' make the informational purpose clear. It distinguishes itself from create_poster by placement in workflow, though it does not differentiate from sibling get_design_principles.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives explicit contextual guidance: 'Call once before create_poster if unsure.' This tells the agent when to use the tool and provides a workflow cue. It does not state when not to use it or explicitly compare to get_design_principles, so it stops short of full alternative routing.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updatesv1.1.0
    • First observedcreate_poster
    • First observedcreate_poster_variants
    • First observedget_design_principles
    • First observedlist_poster_templates

TDQS

A3.8/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: discovering templates, learning design principles, creating a single poster, and creating variants. Even the two create tools are distinguishable by single vs. batch behavior.

Naming Consistency5/5

All tool names follow the same verb_noun snake_case pattern: list_, get_, create_, create_. The naming is predictable and indicates the action and resource clearly.

Tool Count5/5

Four tools is well-scoped for a poster design server, covering discovery, guidance, creation, and variation. The set feels intentionally minimal rather than bloated or incomplete.

Completeness4/5

The core workflow is covered: browse templates, learn design rules, create a poster, and generate variants. Minor gaps exist around modifying or deleting generated posters, but these are not clearly required for the server's stated purpose.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables AI agents to generate on-brand visuals from ideas, URLs, documents, or PDFs in over 100 formats and 150+ languages, with consistent brand kits.
    25 npm
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Generates logos, social media posts, app-store screenshots, comic panels, and visual-novel assets from natural-language prompts using 119 templates.
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to create high-resolution marketing images from simple JSON configs without design skills or API keys. Provides presets, themes, and layouts to render deterministic PNGs locally.
    MIT