poster-design-mcp

MCP-сервер, который создаёт бизнес-плакаты. Попросите ваш AI-клиент сделать плакат обычным языком — и он запишет на диск настоящий PNG или JPG: в печатном разрешении, свёрстанный по дизайн-системе, а не наугад.

Каждый плакат на этой странице создан одним вызовом инструмента. Больше — в Галерее.

Содержание

• Что делает

• Как это работает

• Установка

• Подключение к AI-клиенту

• Использование

• Инструменты

• Шаблоны

• Размеры, палитры и изображения

• Где сохраняются плакаты

• Стоимость токенов

• Разработка

• Устранение неполадок

• Автор

• Лицензия

Related MCP server: Canvora MCP

Что делает

Большинство AI-инструментов для изображений рисуют плакат, поэтому текст получается «поплывшим», а номер телефона — выдумкой. Этот же набирает плакат. Заголовок — настоящий текст настоящим шрифтом, цена — та цена, которую вы указали, а результат получается точно заданных размеров — 2480×3508 для A4 при 300 dpi, готовый к печати.

Вы получаете:

• Четыре макета на основе четырёх эталонных плакатов — события, брендовые заявления, реклама продуктов и юбилейные цифры.

• Палитру из одного hex-кода. Укажите фирменный цвет; из него выводятся фон, чернила, акцент и палитра узора, причём чернила подбираются по коэффициенту контраста, чтобы текст оставался читабельным.

• Автоподбор заголовочного набора. Заголовок растёт, пока самая длинная строка не коснётся поля, и останавливается. Разрывы строк выбираете вы; размер — сервер.

• Работу с настоящими фотографиями — обрезка под заливку (full-bleed), фокусные точки, градиентные подложки, чтобы текст никогда не ложился прямо на изображение.

• Печатные или социальные размеры, 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. Вёрстку выполняет Headless Chrome. Рендеринг в браузере даёт настоящую текстовую вёрстку: запасные шрифты, переносы, обрезку через object-fit, литеры с mix-blend-mode: multiply, — а цикл автоподбора измеряет фактически свёрстанный заголовок и масштабирует его, пока он не заполнит заданную ширину набора. Затем страница снимается ровно в выходных размерах, причём deviceScaleFactor делает всю работу, так что A4 при 300 dpi — это действительно 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 → управляемый Chrome от Puppeteer → Google Chrome или Chromium в обычных системных расположениях. Чтобы указать конкретный бинарный файл:

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

Проверьте, что всё работает:

npm test

Эта команда запускает сервер через stdio, прогоняет все инструменты и проверяет бюджет токенов. Затем, чтобы было на что посмотреть:

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

Используйте абсолютные пути — клиент запускает сервер из непредсказуемой директории.

Перезапустите клиент — и появятся четыре инструмента.

Использование

После подключения вы просто просите:

Сделай мне плакат A4 для пекарни Golden Crust Bakery — хлеб и выпечка ручной работы, 123 Maple Street, открыто с 6:00 до 18:00 со вторника по воскресенье. Тёплый оранжевый, используй это фото хлеба.

Клиент выбирает шаблон и вызывает 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 в виде hex-кода — из него будет выведена вся палитра. Либо передайте 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 для одного конкретного файла.

Стоимость токенов

Список инструментов MCP-сервера переотправляется при каждом запросе каждой сессии, поэтому этот сервер написан так, чтобы его содержание в контексте обходилось дёшево:

• Список инструментов занимает ~990 токенов вместо ~2 600. Он содержит названия, параметры и имена полей; смысл полей перенесён в list_poster_templates, который вызывается один раз теми, кому он нужен.

• list_poster_templates возвращает ~390 токенов вместо ~1 700; передайте id в template, чтобы получить один макет вместо всех четырёх.

• get_design_principles возвращает ~280 токенов вместо ~1 700; detail: true — для полного обоснования.

• Результаты — это одна краткая строка, а не форматированный JSON.

• Встроенное изображение предпросмотра (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

Приветствуются issues и pull requests.

Лицензия

MIT — см. LICENSE.