Frame0 MCP Server

Frame0 MCP サーバー

Frame0 は、現代的なアプリ向けの Balsamiq の代替ワイヤーフレームツールです。Frame0 MCP サーバーを使うと、プロンプトで指示して Frame0 のワイヤーフレームを作成、編集できます。

セットアップ

前提条件：

• Frame0 v1.7.0 以上。（Settings > API Server で Run on start オプションが有効になっていることを確認してください。）
• Node.js v22 以上。

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

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

Frame0 の API サーバーに別のポート番号を使用するには、任意で --api-port=<port> パラメーターを指定できます。

プロンプトの例

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

ツール

• create_frame
• create_rectangle
• create_ellipse
• create_text
• create_line
• create_polygon
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• search_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": ["<full-path-to>/frame0-mcp-server/build/index.js"]
    }
  }
}