Frame0 MCP Server

フレーム0 MCPサーバー

Frame0は、Balsamiqに代わる、モダンなアプリ向けのワイヤーフレームツールです。Frame0 MCP Serverを使用すると、プロンプトに従ってFrame0でワイヤーフレームを作成および変更できます。

設定

前提条件:

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

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

--api-port=<port>オプション パラメータを使用すると、Frame0 の API サーバーに別のポート番号を使用できます。

プロンプトの例

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

ツール

• 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 を再起動します。