mcpField
M
Mockuuups

Mockuuups

ローカル
github.com/MockuuupsAI・エージェント570 週間前に更新
リポジトリ

Mockuuups について

Mockuuupsは、AIチャットや自動化ツールからデバイスのシーン付きモックアップを生成する、デザイナー、マーケター、開発者向けのリモートMCPサーバーです。画像またはウェブページのスクリーンショットURLを受け取り、生成画像のリンクを返します。

主な機能

  1. 01画像やURLからモックアップを生成
  2. 02デバイス、シーン、IDの指定
  3. 03生成画像リンクの返却
  4. 04AIツールや自動化からの接続

活用シーン

  1. 01ウェブページの画像をスマートフォンのモックアップに配置
  2. 02デザインを指定したシーンで表示
  3. 03Make.comやZapierで生成を自動化

MCP 対応

リモートMCPサーバーは`https://mcp.mockuuups.studio/mcp`で`generate_mockup`ツールを提供し、画像やスクリーンショットURLを受け取ってモックアップ画像のURLを返します。旧式のツール向けにSSEエンドポイントもあり、接続にはMockuuups APIキーが必要です。

#mockup#design-tool#automation

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "mockuuups": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote"
      ]
    }
  }
}
起動コマンドnpx -y mcp-remote

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmmcp-remote

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Mockuuups MCP サーバー

Mockuuups MCP サーバーは、Model Context Protocol（MCP）の機能をデザインのワークフローに取り入れ、お気に入りのAIチャットや自動化ツールから、すばらしいモックアップをすぐに生成できるようにします。

Mockuuups MCPを使う理由

  • アプリを切り替える必要はありません： Claude、ChatGPT、またはMCP対応ツールから直接モックアップを作成できます。
  • ワークフローを強化： Make.com、Zapierなどでモックアップの作成を自動化できます。
  • デザイナー、マーケター、開発者のために： 時間を節約して作業に集中し、美しいビジュアルをより速く仕上げられます。

クイックスタート

  1. 無料の開発者アカウントを作成：
    Mockuuups Developer Portalに登録して、APIキーを取得します（無料クレジット50件）。

  2. AIツールに接続：

    • MCPエンドポイントURL： https://mcp.mockuuups.studio/mcp
    • フォールバック用SSEエンドポイント： https://mcp.mockuuups.studio/sse（古いツール向け）
    • APIキー： 求められたらキーを貼り付けます。

  3. モックアップの生成を開始：
    AIアシスタントに次のように尋ねるだけです。

    「Theverge.comのスクリーンショットを撮って、iPhone 16のモックアップに配置して。」

前提条件

  • Mockuuups Developer APIキー（こちらから取得）
  • MCP対応ホスト（Claude、ChatGPT、VS Codeなど）

インストール

Claude、ChatGPT、その他のAIツールで使用する場合
  • ツールの設定で「Connect Apps」または「Add Integration」を開きます。
  • 次の情報を入力します。
    • ツール名： Mockuuups
    • MCPエンドポイントURL： https://mcp.mockuuups.studio/mcp
    • APIキー： お使いのMockuuups APIキー
Make.com、Zapier、カスタム自動化で使用する場合
  • HTTPまたはMCPモジュールで、同じエンドポイントとAPIキーを使用します。
  • 自動化の例を参照してください。

設定

  • APIキー： Mockuuups Developerダッシュボードで確認できます。
  • エンドポイント：
    • MCP：https://mcp.mockuuups.studio/mcp
    • SSE（レガシー）：https://mcp.mockuuups.studio/sse

ツールリファレンス

Mockuuups MCPでは、次のツールを利用できます。

  • generate_mockup
    URLまたは画像から、デバイス、シーン、またはモックアップIDを指定してモックアップを生成します。

    パラメーター：

    • image_url または screenshot_url
    • mockup_id（任意）

    戻り値：

    • 生成されたモックアップ画像のURL

プロンプトの例

  • 「この画像 [your-public-image-url.png] を、女性が手に持っているスマートフォンに配置して。」
  • 「リビングルームのテレビでDribbble.comを表示したところを見せて。」
  • 「新しいMockuuupsのランディングページのスクリーンショットを、デスクの上のMacBook Proに配置して。」
  • 「このデザイン [your-public-image-url.png] をモックアップ ZvMSqqPA3wFkHM3Y に配置して。」

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。