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 & Storage Media & 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 中

開啟儀表板中的 Tuval Studio，將其新增到工作區。
為需要使用其工具的對話啟用該服務。

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

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

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

Tool	Description
`pages_list`	Lists all pages in the document with indices, dimensions, and active status.
`pages_add`	Creates a new page (blank or cloned template) for catalog & brochure workflows.
`pages_switch`	Switches the active canvas viewport to a specific page index (`0, 1, 2...`).
`pages_duplicate`	Clones the current page layout and all layers to maintain visual consistency.
`pages_delete`	Deletes a page from the document.
`pdf_export_catalog`	Compiles all pages into a print-ready, high-resolution multi-page PDF document.

2. Canvas & Artboard Setup

Tool	Description
`studio_check_status`	Checks connection status and instructs agent to open `https://tuval.site/editor`.
`canvas_create_new`	Initializes a blank canvas with custom width, height, and background color.
`canvas_set_dimensions`	Applies standard dimensions or social presets (`1080x1080`, `1080x1920`, `1280x720`, `1200x630`).
`canvas_set_background`	Sets solid background color, alpha transparency, or full-bleed background textures.
`canvas_set_gradient`	Applies mesh gradients (`cyber`, `sunset`, `emerald`, `space`, `gold`, `candy`, `noir`).
`canvas_set_pattern`	Applies geometric textures (`dots`, `grid`, `carbon`, `isometric`, `topography`, `circuit`).
`canvas_load_template`	Loads curated design templates (`neon-sale-story`, `social-launch`, `youtube-thumbnail`).
`canvas_clear`	Clears all objects from the current canvas.

3. Typography & Vector Shapes

Tool	Description
`text_add`	Adds text with Google Fonts (`Sora`, `Inter`, `Playfair Display`, `Bebas Neue`, `Cinzel`, `Syne`).
`text_update_style`	Updates font family, font size, color, letter spacing, line height, text align, and content.
`shape_add`	Inserts geometric shapes (`rect`, `circle`, `triangle`, `star`, `hexagon`, `heart`, `pill`, `badge`).
`shape_update_style`	Modifies shape fill color, border stroke, corner radius (`rx/ry`), opacity, and shadow.
`svg_add`	Places curated badges, trust stickers, flares, stars, and callouts onto the canvas.

4. Images, Media & Local Assets

Tool	Description
`assets_load_from_path`	Reads an image from the user's local hard drive and converts it for instant canvas placement.
`assets_list_local`	Scans and lists local images and logos available in the workspace.
`image_add`	Inserts an image from URL, local file path, or Base64 (supports `{ isBackground: true }`).
`image_crop`	Crops images by bounding box coordinates or aspect ratio.
`image_remove_bg_auto`	1-click client-side background remover.
`image_remove_bg_magic`	Magic wand background extraction with configurable color tolerance.
`filter_apply_preset`	Applies aesthetic color grading (`Warm Film`, `Cyberpunk`, `Moody Noir`, `Vivid HDR`, `Film Grain`).

5. Layer Management, Layout Audit & Vision Inspection

Tool	Description
`design_audit_layout`	Automated zero-overflow and collision audit across all text and image layers.
`studio_get_view`	Captures high-res canvas snapshot (Base64 PNG) & layer tree for visual AI audit.
`layer_reorder`	Moves layers in stack (`bring_to_front`, `send_to_back`, `bring_forward`, `send_backward`).
`layer_align`	Aligns layers to canvas center, left, right, top, or bottom.
`layer_transform`	Adjusts rotation angle, flip X/Y, opacity, drop shadow, and blend modes.
`layer_duplicate` / `layer_delete`	Duplicates or removes specific layers.
`studio_batch_actions`	Executes sequential multi-step commands in a single atomic call.
`project_set_title`	Renames the design project.
`project_export_download`	Triggers 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

來源：README.md，提交 6e6f0f7

工具

工具後設資料尚未被收錄。

版本歷史

v1.0.7最新Oct 6, 2026