poster-design-mcp

一个**设计商业海报的 MCP 服务器。**用自然语言向你的 AI 客户端提出海报需求，它就会把真正的 PNG 或 JPG 写入磁盘——印刷级分辨率，由设计系统排版，而不是靠猜。

本页的每一张海报都是由一次工具调用生成的。更多作品见 画廊。

目录

• 它能做什么

• 工作原理

• 安装

• 连接到你的 AI 客户端

• 使用

• 工具

• 模板

• 尺寸、配色和图片

• 海报保存位置

• Token 成本

• 开发

• 故障排查

• 作者

• 许可证

Related MCP server: Canvora MCP

它能做什么

大多数 AI 图像工具是画一张海报，结果文字糊成一团，电话号码也是编的。而这个工具是排版一张海报。标题是真实字体中的真实文字，价格就是你给的价格，输出落在精确的像素尺寸上——A4 在 300 dpi 下为 2480×3508，可直接送印。

你会得到：

• 四种布局，源自四张参考海报——活动、品牌宣言、产品广告和里程碑数字。

• **一个十六进制色号生成整套配色。**给它一个品牌色；底色、文字色、强调色和图案色阶都从它派生，文字色按对比度挑选，保证文本清晰可读。

• **自动适配的展示字体。**标题不断放大，直到最长的一行触到页边距才停下来。换行由你决定；字号由服务器决定。

• 真实照片处理——出血裁切、焦点定位、渐变遮罩，文字绝不会直接压在图片上。

• 印刷或社交尺寸，PNG 或 JPG，按需输出。

工作原理

  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. **设计系统是数字，不是感觉。**十二条规则从四张参考海报中读出，写成 src/design-system.js 中模板实际消费的数值——页边距为宽度的 6.8%，主标题字号为宽度的 0.055 到 0.155，行距 0.90，字距 −0.03em。DESIGN-PRINCIPLES.md 中的文字与渲染出的像素读自同一组常量，因此文档永远不会与输出脱节。

2. **模板把你的文案变成文档。**四个模板（src/templates/）各自是一个函数：内容进，HTML 和 CSS 出。它放置色带、设定字体角色、从种子生成装饰图案，并把每张本地图片内联为 data URI。

3. **无头 Chrome 负责排版。**在浏览器中渲染带来的是真正的文本排版——字体回退、断词、object-fit 裁切、mix-blend-mode: multiply 字形——自动适配循环会测量实际排出的标题并重新缩放，直到填满版心。然后页面以精确的输出尺寸截图，由 deviceScaleFactor 完成这一工作，所以 300 dpi 的 A4 是真正的 2480×3508 像素，而不是放大出来的。

4. **文件进入 Documents。**MCP 服务器由客户端启动，没有有意义的当前工作目录，因此结果会写入一个找得到的位置，并由工具返回路径。

不会上传任何内容。不需要 API 密钥，也没有网络调用——整个流水线都在你的机器上运行。

安装

需要 Node 20+ 以及一个 Chrome/Chromium 可执行文件。

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

npm install 会安装 Puppeteer，它通常会下载自带的 Chrome。如果它没有下载，或者你跳过了下载：

npx puppeteer browsers install chrome

Chrome 按以下顺序查找：$POSTER_CHROME_PATH → Puppeteer 管理的 Chrome → 系统常见位置中的 Google Chrome 或 Chromium。要指向某个具体的可执行文件：

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

检查它是否正常工作：

npm test

这会通过 stdio 启动服务器，运行每一个工具，并校验 token 预算。然后，为了有点东西可看：

npm run demo

每个模板各生成一张海报，输出到 ./examples。

连接到你的 AI 客户端

Claude Code

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

Claude Desktop，或任意 MCP 配置文件

添加到 mcpServers（在 macOS 上，Claude Desktop 的配置文件位于 ~/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"
      }
    }
  }
}

使用绝对路径——客户端会从无法预测的目录启动服务器。

重启客户端，四个工具就会出现。

使用

连接好之后，你只需要说：

为 Golden Crust Bakery 做一张 A4 海报——手工面包和糕点，123 Maple Street，周二至周日早上 6 点到晚上 6 点营业。暖橙色，用这张面包照片。

客户端会选一个模板并调用 create_poster。在底层，这是一个 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%"
  }
}

它返回一行简洁的信息——path | 2480x3508 png | 191KB | ...——文件就已经在磁盘上了。

写文案时，有两件值得了解的事：

• 在标题中使用 \n 来选择断行位置。生成器会缩放字体，让它填满你写出的任何参差行幅，所以在哪里断行是一个设计决定，而且由你来做这个决定。

• **保持简短。**标题 2–5 个词，副标题不超过 45 个字符，正文两行。字号层级建立在强烈对比之上；冗长的文案正是让海报看起来像传单的原因。

画廊

真实输出，每张各来自一次工具调用。

示例照片是用于演示的占位图片；请换成你自己的。

工具

模板

它们背后的规则在 DESIGN-PRINCIPLES.md 中——每张海报一个信息，用色带不用框，6–12× 字号对比，一个页边距值，以胶囊形按钮收尾。

尺寸、配色和图片

尺寸。a4-print（2480×3508 @300dpi）、a3-print、a5-flyer、poster-hd、instagram-post、instagram-portrait、story、web-banner——或者传以像素为单位的 width 和 height。输出会精确落在这些尺寸上。

**配色。**传一个十六进制色值作为 brandColor，整套配色就从它派生。或者传 palette 指定一组命名配色（festival-block、prism-glass、night-drive、signal-teal、mono-ink），它的优先级高于 brandColor。

图片。image、logo、badge.logo 和 partners[].logo 接受本地路径（绝对路径、~ 或相对于 POSTER_BASE_DIR 的路径）或 http(s) URL。本地文件会在渲染前内联为 data URI。对于 stat-hero，在透明 PNG 上放一个抠出的主体，就能得到主体跨越数字的效果。

海报保存位置

成品海报输出到 ~/Documents/Poster Designs。

设置 POSTER_OUTPUT_DIR 可把默认位置移到别处，或者设置 outputPath 指定一个确切的文件。

Token 成本

MCP 服务器的工具列表会在每个会话的每一次请求中重新发送，因此这个服务器在编写时就尽量做到在上下文中保持低成本：

• 工具列表约为 990 个 token，从约 2,600 个缩减而来。 它包含名称、选项和字段名称；字段含义改由 list_poster_templates 提供，需要这些含义的调用方只需调用一次。

• list_poster_templates 返回约 390 个 token，而不是约 1,700 个；传入一个 template id 可获取一种布局，而不是全部四种。

• get_design_principles 返回约 280 个 token，而不是约 1,700 个；detail: true 可获取完整推理。

• 结果是一行简洁的文本，而不是格式化的 JSON。

• 内联预览图片（每张海报 200–500 个 token）通过 preview: true 选择启用。文件位于 Documents 中，那里是查看它的更好位置。

npm test 会对工具列表预算进行断言，因此开销最大的部分一旦回归，构建就会失败。

开发

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 会将 HTML 源文件写到图片旁边，这是弄清某个元素为何如此布局的最快方式。seed 让图案和抖动可复现。

故障排查

作者

由 Suprise Nkosi 构建。

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

• GitHub — @suprisedr

欢迎提交 Issue 和 Pull Request。

许可证

MIT — 参见 LICENSE。