tuval-studio

Tuval Studio MCP サーバー 🎨

AI エージェント向けグラフィックデザイン MCP、AI デザイン MCP、PDF 生成 MCP

Tuval Studio MCP は、Tuval Studio（tuval.site）の公式 MCP サーバーです。

CodeDL、Claude Desktop、Cursor、Codex、Antigravity、Windsurf、Cline、Roo-Code、OpenCodeなどのデスクトップ AI エージェントに、自律型のビジョンガイド付きデザインエンジンを提供します。

• 🎨 グラフィックデザイン MCP と AI デザイン MCP： ベクター構成、タイポグラフィ、メッシュグラデーション、スマートレイアウト監査を自動化します。
• 📄 PDF 生成 MCP とカタログ生成： 複数ページの PDF カタログ、雑誌レイアウト、パンフレット、ピッチデックを生成します。
• 📊 プレゼンテーション生成とスライドデック： タイポグラフィを同期し、ビジュアルブランディングに一貫性を持たせた高解像度の複数ページスライドを作成します。
• 📱 ソーシャルメディアデザイン： テキストがはみ出さないマーケティングバナー、Instagram ストーリー、YouTube サムネイル、広告をワンクリックで作成します。

デザイン MCP、PDF MCP、カタログ MCP、または グラフィックデザイン MCP をお探しですか？Tuval Studio MCP は、プライバシーを完全に保護し、リアルタイムのビジュアルフィードバックを提供するインタラクティブなクライアント側ブラウザーキャンバスに、AI エージェントを直接接続します！

---

🌟 主な機能

• ⚡ APIDL Engine（apidlai.com）を活用： apidlai.com が開発した、画期的なクローズドループのデザインオーケストレーションです。自動品質ゲート監査を備え、2～3 回の反復フェーズ（draft -> refine -> final）で収束するため、従来の単一呼び出し型 MCP ツールと比べてトークンコストを 約92% 削減し、実行速度を 10倍 に向上させます。
• 🚀 クラウド不使用、プライバシーを完全保護： 高速なローカル WebSocket ブリッジ（ws://127.0.0.1:8765）を通じて、すべてローカルブラウザー上で動作します。アカウントもサーバーへの保存も不要です。
• 📚 複数ページ対応 PDF カタログエンジン： pdf_export_catalog により、複数ページの雑誌、ルックブック、製品パンフレット、ピッチデックを自律的に作成、管理、エクスポートできます。
• 👁️ マルチモーダルなビジョン・イン・ザ・ループ： 各操作で高解像度のビジュアルスナップショット（Base64 PNG）とレイヤー座標を返すため、AI エージェントはデザインを視覚的に確認、評価、改善できます。
• 🛡️ はみ出し防止と境界ガード： タイポグラフィ、ボタン、バッジに最小50pxの安全マージンを確保し、切り取りを防ぐ検証プロトコルを内蔵しています。
• ✨ グラフィック機能一式： 複数レイヤーのベクター操作、カスタム Google Fonts（Sora、Inter、Playfair、Cinzel、Syne など）、メッシュグラデーション、幾何学模様のテクスチャ、ワンクリックの AI 背景除去に対応しています。
• 💻 ローカルファイルの読み込み： コンピューターのハードドライブにあるローカル写真、素材、ロゴをキャンバスに直接読み込み、合成できます。

---

⚡ AI エージェントのクイックセットアップ

以下の設定を AI エージェントの MCP 設定ファイルに追加します。

1. Claude Desktop（claude_desktop_config.json）

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

2. CodeDL、Cursor、Codex、Antigravity、Windsurf、Cline、Roo-Code

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

仕組み： ブラウザーのタブで Tuval Studio を開きます。AI エージェントがデザインコマンドを実行すると、アクティブなキャンバスタブにすぐ接続します！

---

🛠️ MCP ツール一覧

1. ドキュメントと複数ページ PDF エンジン

ツール	説明
pages_list	ドキュメント内のすべてのページについて、インデックス、寸法、アクティブ状態を一覧表示します。
pages_add	カタログやパンフレットのワークフロー向けに、新しいページ（空白またはテンプレートの複製）を作成します。
pages_switch	アクティブなキャンバスの表示を、指定したページインデックス（0, 1, 2...）に切り替えます。
pages_duplicate	現在のページレイアウトとすべてのレイヤーを複製し、ビジュアルの一貫性を保ちます。
pages_delete	ドキュメントからページを削除します。
pages_reorder	複数ページのフィルムストリップ内で、ページをある位置から別の位置へ移動または並べ替えます。
pdf_export_catalog	すべてのページをまとめて、印刷対応の高解像度な複数ページ PDF ドキュメントを作成します。

2. キャンバスとアートボードの設定

ツール	説明
studio_check_status	接続状態を確認し、エージェントに https://tuval.site/editor を開くよう指示します。
canvas_create_new	カスタムの幅、高さ、背景色を指定して、空白のキャンバスを初期化します。
canvas_set_dimensions	標準サイズまたはソーシャルメディア用プリセット（1080x1080、1080x1920、1280x720、1200x630）を適用します。
canvas_set_background	単色の背景色、アルファ透過、または全面に広がる背景テクスチャを設定します。
canvas_set_gradient	メッシュグラデーション（cyber、sunset、emerald、space、gold、candy、noir）を適用します。
canvas_set_pattern	幾何学模様のテクスチャ（dots、grid、carbon、isometric、topography、circuit）を適用します。
canvas_load_template	厳選されたデザインテンプレート（neon-sale-story、social-launch、youtube-thumbnail）を読み込みます。
canvas_clear	現在のキャンバスからすべてのオブジェクトを消去します。

3. タイポグラフィとベクター図形

ツール	説明
text_add	Google Fonts（Sora、Inter、Playfair Display、Bebas Neue、Cinzel、Syne）を使用してテキストを追加します。
text_update_style	フォントファミリー、フォントサイズ、色、文字間隔、行の高さ、テキストの配置、内容を更新します。
shape_add	幾何学図形（rect、circle、triangle、star、hexagon、heart、pill、badge）を挿入します。
shape_update_style	図形の塗りつぶし色、境界線、角の半径（rx/ry）、不透明度、影を変更します。
svg_add	厳選されたバッジ、信頼を示すステッカー、光のフレア、星、吹き出しをキャンバスに配置します。

4. 画像、メディア、ローカルアセット

ツール	説明
assets_load_from_path	ユーザーのローカルハードドライブから画像を読み込み、すぐにキャンバスへ配置できる形式に変換します。
assets_list_local	ワークスペースで利用できるローカル画像とロゴをスキャンして一覧表示します。
image_add	URL、ローカルファイルパス、または Base64 から画像を挿入します（{ isBackground: true } に対応）。
image_crop	バウンディングボックスの座標またはアスペクト比を指定して画像をトリミングします。
image_remove_bg_auto	クライアント側で背景をワンクリックで削除します。
image_remove_bg_magic	色の許容範囲を設定できるマジックワンドで背景を切り抜きます。
filter_apply_preset	美的なカラーグレーディング（Warm Film、Cyberpunk、Moody Noir、Vivid HDR、Film Grain）を適用します。

5. レイヤー管理、レイアウト監査、ビジョン検査

ツール	説明
design_audit_layout	すべてのテキストレイヤーと画像レイヤーを対象に、はみ出しや衝突がないか自動監査します。
studio_get_view	高解像度のキャンバススナップショット（Base64 PNG）とレイヤーツリーを取得し、ビジュアル AI 監査に利用します。
layer_reorder	レイヤーの重なり順を変更します（bring_to_front、send_to_back、bring_forward、send_backward）。
layer_align	レイヤーをキャンバスの中央、左、右、上、または下に揃えます。
layer_transform	回転角度、X／Y 方向の反転、不透明度、ドロップシャドウ、ブレンドモードを調整します。
layer_duplicate / layer_delete	特定のレイヤーを複製または削除します。
studio_batch_actions	複数ステップのコマンドを順番に、単一のアトミックな呼び出しで実行します。
studio_execute_apidl	反復型クローズドループ APIDL パイプライン：バッチデザインスクリプトを実行し、マルチモーダルなビジュアル状態とレイヤー衝突監査の結果を返します。黄金比の基準を適用し、2～3 回の反復（draft -> refine -> final）で収束させます。
project_set_title	デザインプロジェクトの名前を変更します。
project_export_download	PNG、JPG、WebP、または SVG の画像をブラウザーでダウンロードします。

---

🎯 AI エージェント（CodeDL、Claude、Cursor、Codex、Antigravity）向けプロンプト例

1. 複数ページの商品カタログと PDF の生成

「Tuval Studio MCP を使って、モダンなスカンジナビア家具の 4 ページカタログを作成してください。1 ページ目にはエディトリアルな表紙、2 ページ目と 3 ページ目には価格付きの商品グリッド、4 ページ目には連絡先と注文方法をデザインしてください。各ページをビジョン監査で確認して安全な余白を確保し、完成した複数ページの PDF をエクスポートしてください。」

2. ソーシャルメディアのデザインとバナー生成

「製品ローンチ向けに、コントラストの強いサイバーパンク風のソーシャルメディア広告バナー（1080x1080）をデザインしてください。暗いグラデーションの背景、大胆なタイポグラフィ、ネオンのコールアウトバッジを適用し、design_audit_layout でテキストが境界からはみ出していないことを確認してください。」

3. プレゼンテーションジェネレーターとピッチデッキ

「Tuval Studio で 5 枚のスライドからなるピッチデッキのプレゼンテーションを作成してください。ブランドカラー、モダンなタイポグラフィの階層、すっきりしたカードレイアウトを維持し、デッキ全体を印刷可能な PDF としてエクスポートしてください。」

---

🔍 タグとキーワード

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

---

📄 ライセンス

MIT © Tuval Studio