designpin-mcp-server

DesignPin MCP サーバー

任意の AI アシスタントが HTML プロトタイプを DesignPin に送信してチームレビューを受け、レビュアーからのフィードバックを読み戻せる MCP サーバーです。

これは何をするものですか

DesignPin は、DOM に紐づけたコメントで HTML プロトタイプをレビューするためのツールです。このパッケージは DesignPin REST API を Model Context Protocol サーバーとしてラップし、createShareLink、uploadVersion、listComments の 3 つのツールを MCP 対応の AI クライアントに提供します。

設定すると、Claude Desktop、Cursor、VS Code（Copilot）、Gemini CLI、その他の MCP 対応クライアントから、AI アシスタントが生成した HTML プロトタイプを共有可能なレビューページに送信し、レビュアーのコメントを取得して反映し、同じ会話の中で新しいバージョンとして改訂版を送信できます。

ChatGPT ユーザーの方へ： ChatGPT は現在、MCP サーバーに対応していません。代わりに Custom GPT Actions 経由で直接 REST API を使用してください。MCP サーバーは不要です。

インストールと実行

サーバーは MCP クライアントによって起動されるため、通常の利用時に直接実行することはありません。最も簡単な方法は npx で呼び出すことです。グローバルインストールせずに取得して実行できます。

npx -y @designpin/mcp-server --api-key dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --project-id proj_example_abc123

ほとんどのワークフローでは、手動で実行するのではなく、MCP クライアントの設定ファイルで設定します。以下のクライアント設定例を参照してください。

インストールが正常に動作することを確認するには、次を実行します。

npx -y @designpin/mcp-server --version
# → 0.1.0

npx -y @designpin/mcp-server --help
# → usage info

API キーの取得

1. designpin.pro を開いてサインインします。
2. 任意のプロジェクトを開きます（または新規作成します）。
3. プロジェクトヘッダーの API & Integrations をクリックします。
4. Generate new key をクリックし、名前（例：「Claude Desktop」）を付けます。
5. キーをすぐにコピーしてください。キーは一度しか表示されず、後から取得できません。

各キーは単一のプロジェクトにスコープ設定されます。個別に失効できるよう、クライアントや用途ごとに別々のキーを生成してください。

設定

CLI フラグと環境変数の両方に対応しています。両方が指定されている場合は、フラグが優先されます。

セキュリティに関する注意： マルチユーザーシステムでは、CLI フラグが ps の出力に表示されます。共有マシンでは環境変数を使用してください。

ツール

createShareLink

HTML プロトタイプの公開レビューページを作成します。プロジェクトの事前設定は不要で、使い捨ての新規プロジェクトを作成します。IP あたりのリクエスト数は 1 時間につき 10 件に制限されています。

戻り値： url、reviewToken、projectId、moduleId、versionId を含む JSON。

AI アシスタントへのプロンプト例：

「この HTML を使って、『Landing page hero V3』というタイトルの DesignPin 共有リンクを作成してください。」

uploadVersion

既存の DesignPin モジュールに新しい HTML バージョンをアップロードします。versionNumber は自動的にインクリメントされます。設定済みの API キーと projectId、およびユーザーから指定された moduleId が必要です。

戻り値： url、versionId、versionNumber を含む JSON。

プロンプト例：

「この改訂版 HTML を、新しいバージョンとしてモジュール mod_example_def456 に送信し、説明を『Address pin #3 contrast feedback』にしてください。」

listComments

DesignPin モジュールの特定のバージョンで表示されるコメントを取得します。ウェブ UI と同じ時系列のカットオフ方式を使用します。コメントの起点となるバージョンが V 以前であれば、そのコメントはバージョン V で表示されます。

戻り値： comments 配列と、"3 open, 1 resolved" のような summary 文字列を含む JSON。

プロンプトの例：

「バージョン ver_example_ghi789 のモジュール mod_example_def456 のコメントを取得して、承認を妨げている要因を教えてください。」

クライアント設定の例

{
  "mcpServers": {
    "designpin": {
      "command": "npx",
      "args": ["-y", "@designpin/mcp-server"],
      "env": {
        "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "DESIGNPIN_PROJECT_ID": "proj_example_abc123"
      }
    }
  }
}

{
  "mcpServers": {
    "designpin": {
      "command": "npx",
      "args": ["-y", "@designpin/mcp-server"],
      "env": {
        "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "DESIGNPIN_PROJECT_ID": "proj_example_abc123"
      }
    }
  }
}

{
  "servers": {
    "designpin": {
      "command": "npx",
      "args": ["-y", "@designpin/mcp-server"],
      "env": {
        "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "DESIGNPIN_PROJECT_ID": "proj_example_abc123"
      }
    }
  }
}

{
  "mcpServers": {
    "designpin": {
      "command": "npx",
      "args": [
        "-y", "@designpin/mcp-server",
        "--api-key", "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "--project-id", "proj_example_abc123"
      ]
    }
  }
}

会話の例

You:  Generate a pricing page with three tiers (Free, Pro $12, Team $29).
      Push it to DesignPin so my team can review.

AI:   [generates HTML, calls createShareLink]
      Share link created. Send this to your team:
      https://designpin.pro/review/EXAMPLE_TOKEN_xyz

      Project: proj_example_abc123
      Module:  mod_example_def456
      Version: ver_example_ghi789

[team reviews and leaves 4 comments]

You:  Pull the feedback from module mod_example_def456 at version
      ver_example_ghi789 and address the must-fix comments.

AI:   [calls listComments]
      Open comments (4):
      - P0 Pin #1 "CTA contrast fails WCAG AA on the Pro tier"
      - P1 Pin #2 "Pricing hidden until hover — make always visible"
      - P1 Pin #3 "Annual toggle is ambiguous — show savings %"
      - P2 Pin #4 "Logo could link back to homepage"

      I'll regenerate the HTML with the two P0/P1 issues addressed.

You:  Push the revision.

AI:   [generates updated HTML, calls uploadVersion]
      v2 uploaded. Same review URL — your team can compare versions.

REST API を直接利用する

MCP サーバーを使わずに DesignPin API を呼び出す場合は、OpenAPI 3.1 仕様を次の場所で公開しています。

https://designpin.pro/openapi.json

Postman にインポートしたり、クライアント SDK を生成したり、ChatGPT Custom GPT Actions で直接使用したりできます。

リンク

• DesignPin アプリ： https://designpin.pro
• OpenAPI 仕様： https://designpin.pro/openapi.json
• GitHub： https://github.com/opjhabuilds/designpin-mcp-server
• 課題： https://github.com/opjhabuilds/designpin-mcp-server/issues

ライセンス

MIT © 2026 Omprakash Jha