poster-design-mcp

ビジネスポスターをデザインするMCPサーバーです。AIクライアントに平易な言葉でポスターを依頼すると、実際のPNGまたはJPGをディスクに書き出します。印刷解像度で、当てずっぽうではなくデザインシステムによってレイアウトされます。

このページのポスターはすべて、1回のツール呼び出しで生成されたものです。詳細は**ギャラリー**をご覧ください。

目次

• 概要

• 仕組み

• インストール

• AIクライアントに接続する

• 使い方

• ツール

• テンプレート

• サイズ、パレット、画像

• ポスターの保存先

• トークンコスト

• 開発

• トラブルシューティング

• 作者

• ライセンス

Related MCP server: Canvora MCP

概要

多くのAI画像ツールはポスターを描くため、文字が溶けたようになり、電話番号もでたらめになります。このサーバーはポスターを組版します。見出しは実際のフォントによる実際のテキストであり、価格は指定した価格のまま、出力は正確なピクセル寸法—A4・300dpiなら2480×3508—で生成され、印刷にそのまま使えます。

次のものが得られます。

• 4つのレイアウト—4枚の参考ポスター（イベント、ブランドステートメント、商品広告、マイルストーン数字）から導出。

• 1つのhexコードから生成されるパレット。 ブランドカラーを渡すと、地色・インク色・アクセント色・パターンの階調がそこから導出されます。インク色はコントラスト比で選ばれるため、テキストは読みやすさを保てます。

• 自動フィットの見出し書体。 最長の行がマージンに届くまで見出しは大きくなり、そこで止まります。改行位置はあなたが決め、サイズはサーバーが決めます。

• 実際の写真の処理—フルブリードの切り抜き、フォーカルポイント、グラデーションのスクリムを備え、文字が画像の上に素のまま載ることがありません。

• 印刷用・SNS用のサイズ、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. デザインシステムは数値であり、雰囲気ではありません。 12のルールを4枚の参考ポスターから読み取り、テンプレートが実際に使用する値としてsrc/design-system.jsに書き込みました。マージンは幅の6.8%、ヒーロー書体は幅の0.055〜0.155、行送り0.90、トラッキング−0.03em。DESIGN-PRINCIPLES.mdの文章とレンダリングされたピクセルは同じ定数を参照しているため、ドキュメントが出力から乖離することはありません。

2. テンプレートがコピーをドキュメントに変換します。 4つのテンプレート（src/templates/）はそれぞれ関数であり、コンテンツを入力するとHTMLとCSSを出力します。バンドの配置、タイプの役割の設定、シードからの装飾パターンの生成、ローカル画像のdata URIとしてのインライン化を行います。

3. レイアウトはHeadless Chromeが行います。 ブラウザでのレンダリングによって、実際のテキストレイアウト—フォントフォールバック、ハイフネーション、object-fitによる切り抜き、mix-blend-mode: multiplyの文字形—が得られ、オートフィットループは実際に組まれた見出しを測定して、行長（メジャー）を満たすまで再スケーリングします。その後、deviceScaleFactorの働きにより、ページは正確な出力寸法でスクリーンショットされます。そのため、300dpiの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経由で起動し、すべてのツールを実行してトークン予算を検証します。次に、目で確認できる何かを作るには:

npm run demo

各テンプレートにつき1枚のポスターを./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"
      }
    }
  }
}

絶対パスを使用してください。クライアントは予測不能なディレクトリからサーバーを起動するためです。

クライアントを再起動すると、4つのツールが表示されます。

使い方

接続が完了したら、依頼するだけです:

Golden Crust BakeryのA4ポスターを作ってください。ハンドメイドのパンとペストリー、123 Maple Street、営業時間は火曜〜日曜の午前6時〜午後6時。暖かいオレンジ色で、このパンの写真を使ってください。

クライアントはテンプレートを選び、create_posterを呼び出します。内部では、これは1つの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%"
  }
}

1行の簡潔な出力—path | 2480x3508 png | 191KB | ...—を返し、ファイルがディスクに保存されます。

コピーを書くときに知っておくとよいことが2つあります:

• 見出しに\nを使うと改行位置を指定できます。ジェネレーターは、あなたが書いたラグ（行端の不揃い）を埋めるように書体サイズを調整するため、改行位置はデザイン上の決定であり、それはあなたのものです。

• 短くまとめる。 見出しは2〜5語、サブ見出しは45文字以内、本文は2行まで。タイプスケールは極端なコントラストに基づいて構築されており、長いコピーはポスターをチラシのように見せてしまいます。

ギャラリー

実際の出力であり、それぞれ1回のツール呼び出しで生成されたものです。

サンプル写真はデモ用に含まれたプレースホルダー画像です。ご自身の画像に差し替えてください。

ツール

テンプレート

これらの背景にあるルールは**DESIGN-PRINCIPLES.md**にあります—ポスターごとに1つのメッセージ、ボックスではなくバンド、6〜12倍のスケールコントラスト、マージンは1つの値、最後はピル型で締める。

サイズ、パレット、画像

サイズ。 a4-print（2480×3508 @300dpi）、a3-print、a5-flyer、poster-hd、instagram-post、instagram-portrait、story、web-banner—またはwidthとheightをピクセルで指定します。出力は指定した寸法に正確に一致します。

色。 brandColorをhexで渡すと、そこからパレット全体が導出されます。または、名前付きセット（festival-block、prism-glass、night-drive、signal-teal、mono-ink）のいずれかをpaletteで渡すこともでき、こちらはbrandColorより優先されます。

画像。 image、logo、badge.logo、partners[].logoには、ローカルパス（絶対パス、~、またはPOSTER_BASE_DIRからの相対パス）またはhttp(s) URLを指定できます。ローカルファイルはレンダリング前にdata URIとしてインライン化されます。stat-heroでは、透明なPNG上の切り抜き済みの被写体を使うと、被写体が数字を横切る効果が得られます。

ポスターの保存先

完成したポスターは**~/Documents/Poster Designs**に保存されます。

デフォルトの保存先を変更するにはPOSTER_OUTPUT_DIRを、1つの正確なファイルを指定するにはoutputPathを設定します。

トークンコスト

MCPサーバーのツールリストは、各セッションのすべてのリクエストで再送信されるため、このサーバーはコンテキストに保持しても安価で済むように設計されています:

• ツールリストは 約990トークン（従来は約2,600） になりました。名前・オプション・フィールドの名前を含み、フィールドの意味は list_poster_templates の背後に移動しました。list_poster_templates はそれを必要とする呼び出し元によって一度だけ呼び出されます。

• list_poster_templates は約1,700トークンの代わりに約390トークンを返します。4つすべてではなく1つのレイアウトに対して template IDを渡してください。

• get_design_principles は約1,700トークンの代わりに約280トークンを返します。完全な推論を得るには detail: true を指定します。

• 結果は整形されたJSONではなく、簡潔な1行です。

• インラインのプレビュー画像（ポスターあたり200〜500トークン）は 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 とプルリクエストを歓迎します。

ライセンス

MIT — LICENSE を参照してください。