Frame0 MCP Server

🚀 Frame0 MCP サーバ

Frame0 は、Balsamiq に類似した、現代的なアプリケーションのワイヤーフレームツールの代替品です。Frame0 MCP サーバ を使用すると、プロンプトを通じて Frame0 内でワイヤーフレームを作成および変更することができます。

🚀 クイックスタート

📦 インストール

前提条件

• Frame0 v1.0.0-beta.17 以上。
• Node.js v22 以上。

Claude Desktop の claude_desktop_config.json を以下のように設定します。

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "npx",
      "args": ["-y", "frame0-mcp-server"]
    }
  }
}

--api-port=<ポート> というオプション引数を使用すると、Frame0 API サーバの別のポート番号を指定できます。

💻 使用例

基本的な使用法

以下は、Frame0 MCP サーバで使用できるサンプルプロンプトの例です。

• “スマートフォン用のログイン画面を作成する”
• “スマートフォン用の Instagram ホーム画面を作成する”
• “テレビ用の Netflix ホーム画面を作成する”
• “ログインボタンの色を変更する”
• “Twitter のソーシャルログインを削除する”
• “絵文字をアイコンに置き換える”
• “Google ログインボタンから Google サイトへのリンクを設定する”

高度な使用法

Frame0 MCP サーバで使用できるツールは以下の通りです。

• create_frame
• create_rectangle
• create_ellipse
• create_text
• create_line
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• get_available_icons
• move_shape
• align_shapes
• group
• ungroup
• set_link
• export_shape_as_image
• add_page
• update_page
• duplicate_page
• delete_page
• get_current_page_id
• set_current_page_by_id
• get_page
• get_all_pages
• export_page_as_image

🔧 開発手順

1. このリポジトリをクローンします。
2. npm run build を実行してビルドします。
3. Claude Desktop の claude_desktop_config.json ファイルを以下のように更新します。
4. Claude Desktop を再起動します。

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<完全パス>/frame0-mcp-server/build/index.js"]
    }
  }
}