Tuval Studio

io.github.ariferol01v1.0.7更新于 Oct 6, 2026

Tuval Studio MCP: Graphic design, AI design & PDF catalog generator for Claude, Cursor & AI agents.

已验证STDIO仅桌面Files & StorageMedia & Design

概览

AI 生成的概览

让 AI 助手在本地浏览器画布上设计图形，并导出多页 PDF 目录、幻灯片和社交媒体横幅。

功能
Tuval Studio MCP 驱动一个交互式浏览器画布，让智能体创建和编辑设计：页面、画板、背景、渐变与图案，使用 Google 字体的文字、矢量形状、SVG 徽章、图片和滤镜。它可管理图层、对齐、变换和批量操作，并审计版面是否溢出或碰撞。视觉工具返回 Base64 PNG 快照和图层树，便于智能体检查并改进作品；导出可生成多页 PDF 或 PNG、JPG、WebP、SVG 下载。
适用场景
当你希望智能体产出视觉成品而非代码时使用：多页产品目录、宣传册、杂志、路演材料、幻灯片演示，或社交媒体横幅与缩略图。适合有人能在桌面端观察画布并反复调整设计的智能体工作流。
运行要求
通过 npx 以本地方式运行 npm 包 @ariferol01/tuval-studio-mcp（需要 Node.js）。仅支持桌面端，无网页版。未声明任何账号、API 密钥、环境变量或请求头。它通过 ws://127.0.0.1:8765 的 WebSocket 桥接连接本地浏览器画布，因此需要在浏览器标签页中打开 Tuval Studio 编辑器页面。
安装前请注意
设计操作会写入画布，并可删除页面或图层（pages_delete、layer_delete、canvas_clear），导出会触发浏览器下载。它会从本地磁盘路径读取图片（assets_load_from_path、assets_list_local），因此只应指向你愿意让智能体访问的目录。它在 127.0.0.1:8765 上运行本地 WebSocket 桥接，并要求 Tuval Studio 编辑器标签页处于打开状态。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Tuval Studio，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

Tuval Studio MCP Server 🎨

The Graphic Design MCP, AI Design MCP & PDF Generator MCP for AI Agents

[npm version] [License: MIT] [Node.js] [Model Context Protocol]

Tuval Studio MCP is the official MCP server for Tuval Studio (tuval.site).

It empowers desktop AI agents — including CodeDL, Claude Desktop, Cursor, Codex, Antigravity, Windsurf, Cline, Roo-Code, and OpenCode — with an autonomous, vision-guided design engine for:

  • 🎨 Graphic Design MCP & AI Design MCP: Automated vector composition, typography, mesh gradients, and smart layout audits.
  • 📄 PDF Generator MCP & Catalog Generator: Multi-page PDF catalog generation, magazine layouts, brochures, and pitch decks.
  • 📊 Presentation Generator & Slide Decks: High-resolution multi-page slide creation with synchronized typography and consistent visual branding.
  • 📱 Social Media Design: 1-click marketing banners, Instagram stories, YouTube thumbnails, and ads with zero text overflow.

Looking for a design MCP, PDF MCP, catalog MCP, or graphic design MCP? Tuval Studio MCP connects your AI agent directly to an interactive, client-side browser canvas with 100% privacy and real-time visual feedback!

🌟 Core Features

  • 🚀 Zero-Cloud & 100% Private: Operates entirely in your local browser through a high-speed local WebSocket bridge (ws://127.0.0.1:8765). Zero account or server storage required.
  • 📚 Multi-Page PDF Catalog Engine: Autonomous creation, management, and export of multi-page magazines, lookbooks, product brochures, and pitch decks with pdf_export_catalog.
  • 👁️ Multimodal Vision-in-the-Loop: Every action returns high-res visual snapshots (Base64 PNG) and layer coordinates so AI agents inspect, critique, and perfect their designs visually.
  • 🛡️ Zero-Overflow & Boundary Guard: Built-in validation protocol ensuring all typography, buttons, and badges maintain safe margins (min 50px) with no clipping.
  • ✨ Full Graphic Suite: Multi-layer vector manipulation, custom Google Fonts (Sora, Inter, Playfair, Cinzel, Syne, etc.), mesh gradients, geometric pattern textures, and 1-click AI background removal.
  • 💻 Local File Loading: Load and composite any local photo, asset, or logo from your computer hard drive directly onto the canvas.

⚡ Quick Setup for AI Agents

Add the configuration below to your AI agent's MCP settings file:

1. Claude Desktop (claude_desktop_config.json)

json
{  "mcpServers": {    "tuval-studio": {      "command": "npx",      "args": ["-y", "@ariferol01/tuval-studio-mcp@latest"]    }  }}

2. CodeDL, Cursor, Codex, Antigravity, Windsurf, Cline & Roo-Code

json
{  "mcpServers": {    "tuval-studio": {      "command": "npx",      "args": ["-y", "@ariferol01/tuval-studio-mcp@latest"]    }  }}

How it works: Open Tuval Studio in your browser tab. When your AI agent executes design commands, it connects instantly to your active canvas tab!

🛠️ Complete MCP Tool Catalog

1. Document & Multi-Page PDF Engine

ToolDescription
pages_listLists all pages in the document with indices, dimensions, and active status.
pages_addCreates a new page (blank or cloned template) for catalog & brochure workflows.
pages_switchSwitches the active canvas viewport to a specific page index (0, 1, 2...).
pages_duplicateClones the current page layout and all layers to maintain visual consistency.
pages_deleteDeletes a page from the document.
pdf_export_catalogCompiles all pages into a print-ready, high-resolution multi-page PDF document.

2. Canvas & Artboard Setup

ToolDescription
studio_check_statusChecks connection status and instructs agent to open https://tuval.site/editor.
canvas_create_newInitializes a blank canvas with custom width, height, and background color.
canvas_set_dimensionsApplies standard dimensions or social presets (1080x1080, 1080x1920, 1280x720, 1200x630).
canvas_set_backgroundSets solid background color, alpha transparency, or full-bleed background textures.
canvas_set_gradientApplies mesh gradients (cyber, sunset, emerald, space, gold, candy, noir).
canvas_set_patternApplies geometric textures (dots, grid, carbon, isometric, topography, circuit).
canvas_load_templateLoads curated design templates (neon-sale-story, social-launch, youtube-thumbnail).
canvas_clearClears all objects from the current canvas.

3. Typography & Vector Shapes

ToolDescription
text_addAdds text with Google Fonts (Sora, Inter, Playfair Display, Bebas Neue, Cinzel, Syne).
text_update_styleUpdates font family, font size, color, letter spacing, line height, text align, and content.
shape_addInserts geometric shapes (rect, circle, triangle, star, hexagon, heart, pill, badge).
shape_update_styleModifies shape fill color, border stroke, corner radius (rx/ry), opacity, and shadow.
svg_addPlaces curated badges, trust stickers, flares, stars, and callouts onto the canvas.

4. Images, Media & Local Assets

ToolDescription
assets_load_from_pathReads an image from the user's local hard drive and converts it for instant canvas placement.
assets_list_localScans and lists local images and logos available in the workspace.
image_addInserts an image from URL, local file path, or Base64 (supports { isBackground: true }).
image_cropCrops images by bounding box coordinates or aspect ratio.
image_remove_bg_auto1-click client-side background remover.
image_remove_bg_magicMagic wand background extraction with configurable color tolerance.
filter_apply_presetApplies aesthetic color grading (Warm Film, Cyberpunk, Moody Noir, Vivid HDR, Film Grain).

5. Layer Management, Layout Audit & Vision Inspection

ToolDescription
design_audit_layoutAutomated zero-overflow and collision audit across all text and image layers.
studio_get_viewCaptures high-res canvas snapshot (Base64 PNG) & layer tree for visual AI audit.
layer_reorderMoves layers in stack (bring_to_front, send_to_back, bring_forward, send_backward).
layer_alignAligns layers to canvas center, left, right, top, or bottom.
layer_transformAdjusts rotation angle, flip X/Y, opacity, drop shadow, and blend modes.
layer_duplicate / layer_deleteDuplicates or removes specific layers.
studio_batch_actionsExecutes sequential multi-step commands in a single atomic call.
project_set_titleRenames the design project.
project_export_downloadTriggers browser download for PNG, JPG, WebP, or SVG graphics.

🎯 Example Prompts for AI Agents (CodeDL, Claude, Cursor, Codex, Antigravity)

1. Multi-Page Product Catalog & PDF Generation

"Use Tuval Studio MCP to create a 4-page modern Scandinavian furniture catalog. Design an editorial cover on Page 1, a product grid with pricing on Pages 2 and 3, and contact/order details on Page 4. Inspect each page with vision audit for safe margins and export the final multi-page PDF."

2. Social Media Design & Banner Generation

"Design a high-contrast Cyberpunk social media ad banner (1080x1080) for a product launch. Apply dark gradient backgrounds, bold typography, neon callout badges, and verify with design_audit_layout that no text overflows boundaries."

3. Presentation Generator & Pitch Decks

"Build a 5-slide pitch deck presentation in Tuval Studio. Maintain brand colors, modern typography hierarchy, clean card layouts, and export the entire deck as a print-ready PDF."

🔍 Tags & Keywords

Tuval Studio MCP · MCP server · graphic design MCP · AI design MCP · PDF generator MCP · PDF MCP · design MCP · catalog MCP · catalog generator · presentation generator · social media design · AI agents · CodeDL · Claude · Cursor · Codex · Antigravity

📄 License

MIT © Tuval Studio

来源：README.md，提交 6e6f0f7

工具

0
工具元数据尚未被收录。

版本历史

1
  1. v1.0.7最新Oct 6, 2026