プロトタイプ · プレビュー版:公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。レビューとアカウント機能は今後のステップで始まります。
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説

Designpin MCP Server

作者:opjhabuildsバージョン 0.1.2i★ –iパソコンで動く
レジストリ名io.github.opjhabuilds/designpin-mcp-server

インストール

概要

作者による説明(英語の原文)

Push HTML prototypes to DesignPin for team review and pull reviewer feedback into your AI.

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

  • 接続方法: パソコンで動く
  • トランスポート: stdio
  • カテゴリ: ウェブ・ブラウザ
  • 入力が必要なもの:DESIGNPIN_API_KEY

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

  • 基本チェック:1項目中1項目に合格
  • あなたのパソコンで、あなたのユーザーと同じ権限(ファイル、ネットワーク、アプリ)で動きます。
  • 自分で入力するもの: DESIGNPIN_API_KEY, DESIGNPIN_PROJECT_ID, DESIGNPIN_BASE_URL

「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。

必要なもの

  • npmNode.jsのインストール(npxコマンドに必要)

どのアプリを使っていますか?

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます

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

ターミナルでこれを実行します

claude mcp add designpin --env DESIGNPIN_API_KEY=your-value --env DESIGNPIN_PROJECT_ID=your-value --env DESIGNPIN_BASE_URL=your-value -- npx -y @designpin/mcp-server

動かす前に、空欄の値を入力してください。

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

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

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "designpin": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@designpin/mcp-server"
      ],
      "env": {
        "DESIGNPIN_API_KEY": "your-value",
        "DESIGNPIN_PROJECT_ID": "your-value",
        "DESIGNPIN_BASE_URL": "your-value"
      }
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

自分で入力する値

  • DESIGNPIN_API_KEY 秘密 env
    DesignPin project-scoped API key. Generate at https://designpin.pro under Project Settings. Required for uploadVersion and listComments tools; not required for createShareLink.
  • DESIGNPIN_PROJECT_ID env
    Firestore project document ID the API key is scoped to. Required when using uploadVersion or listComments.
  • DESIGNPIN_BASE_URL env
    API base URL. Defaults to https://designpin.pro. Override only for testing against a staging or alternate host.

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名は、リポジトリを所有するGitHubアカウント opjhabuilds で確認済みです

  • … 未チェック

    今もメンテナンスされている

    このリポジトリはまだGitHubから読み取っていません

  • … 未チェック

    ライセンスがある

    このリポジトリはまだGitHubから読み取っていません

  • – 対象外

    エンドポイントが応答する

    これはパソコンで動くため、インターネット上のエンドポイントはありません

  • – 対象外

    OAuthでサインイン

    パソコンで動き、代わりにローカルの設定を使います

  • … 未チェック

    ツールの説明に隠れた指示がない

    パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

ウェブ・ブラウザのほかのサーバーとの比較i

  • このカテゴリのほかの1378件のうち0%よりスターが多い
  • このカテゴリのほかの1378件のうち8%より最近レジストリに公開
  • 基本チェックの結果が、このカテゴリのほかの1378件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Designpin MCP Serverは安全ですか?

当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか?

入力が必要なもの:DESIGNPIN_API_KEY

パソコンで動きますか、それともクラウドですか?

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。

今もメンテナンスされていますか?

GitHubリポジトリの最終更新は–、最新バージョン(0.1.2)がレジストリに届いたのは6 か月前です。

どのアプリで使えますか?

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは?

同じカテゴリには:Browser Use, Chrome DevTools MCP, MCP Server Browser

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i

Browser Use

作者:browser-use

Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.

パソコンでもクラウドでも★ 120,087MIT18 日前更新
インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

DesignPin MCP Server

An MCP server that lets any AI assistant push HTML prototypes to [DesignPin](https://designpin.pro) for team review and read back reviewer feedback.

What this does

DesignPin is a tool for reviewing HTML prototypes with DOM-anchored comments. This package wraps the DesignPin REST API as a Model Context Protocol server, exposing three tools — createShareLink, uploadVersion, listComments — to any MCP-compatible AI client.

Once configured, your AI assistant — Claude Desktop, Cursor, VS Code (Copilot), Gemini CLI, or any other MCP-compatible client — can ship a generated HTML prototype to a shareable review link, pull back reviewer comments to incorporate, and push iterations as new versions, all from inside the same conversation that produced the design.

For ChatGPT users: ChatGPT does not currently support MCP servers. Use the direct REST API via Custom GPT Actions instead — no MCP server needed.

Install + run

The server is invoked by your MCP client; you don't run it directly during normal use. The simplest path is npx invocation, which fetches and runs without a global install:

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

For most workflows you'll set this in your MCP client's config file rather than running it manually — see Client config examples below.

To verify the install works:

npx -y @designpin/mcp-server --version

→ 0.1.0

npx -y @designpin/mcp-server --help

→ usage info

Get an API key

  1. Open designpin.pro and sign in.
  2. Open any project (or create one).
  3. Click API & Integrations in the project header.
  4. Click Generate new key, give it a name (e.g. "Claude Desktop").
  5. Copy the key immediately — it's shown once and cannot be retrieved later.

Each key is scoped to a single project. Generate separate keys per client / use case so you can revoke them individually.

Configuration

Both CLI flags and environment variables are supported. Flags win when both are present.

CLI flagEnv varRequiredDefaultDescription
--api-keyDESIGNPIN_API_KEYfor uploadVersion, listComments—Your dp_live_... API key
--project-idDESIGNPIN_PROJECT_IDfor uploadVersion—Project ID the key is scoped to
--base-urlDESIGNPIN_BASE_URLnohttps://designpin.proAPI base URL (override for testing)
--help—no—Show usage and exit
--version—no—Print version and exit

Security note: CLI flags are visible in ps output on multi-user systems. Prefer environment variables on shared machines.

Tools

createShareLink

Create a public review link for an HTML prototype. No project setup required — creates a brand-new throwaway project. Rate-limited to 10 requests/hour per IP.

InputTypeRequiredDescription
htmlstringyesComplete HTML document to share
titlestringyesDisplay name for the share, max 80 chars
authorNamestringnoAuthor name shown on review page

Returns: JSON with url, reviewToken, projectId, moduleId, versionId.

Example prompt to your AI assistant:

"Take this HTML and create a DesignPin share link titled 'Landing page hero V3'."

uploadVersion

Upload a new HTML version to an existing DesignPin module. Auto-increments versionNumber. Requires the API key + projectId from configuration plus a moduleId from the user.

InputTypeRequiredDescription
htmlstringyesComplete HTML for the new version
moduleIdstringyesTarget module within the configured project
descriptionstringnoVersion description shown in the sidebar

Returns: JSON with url, versionId, versionNumber.

Example prompt:

"Push this revised HTML as a new version to module mod_example_def456 with the description 'Address pin #3 contrast feedback'."

listComments

Fetch comments visible on a specific version of a DesignPin module. Uses chronological cutoff semantics matching the web UI: a comment is visible on version V if its origin version is V or any earlier version.

InputTypeRequiredDescription
moduleIdstringyesModule ID
versionIdstringyesSpecific version to view comments on

Returns: JSON with a comments array and a summary string like "3 open, 1 resolved".

Example prompt:

"Get the comments on module mod_example_def456 at version ver_example_ghi789 and tell me what's blocking approval."

Client config examples

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{

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

Restart Claude Desktop after saving.

Cursor

Edit ~/.cursor/mcp.json:

{

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

Reload Cursor after saving.

VS Code (Copilot with MCP)

Add to your VS Code user settings JSON or a workspace .vscode/mcp.json:

{

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

</details>

Gemini CLI extension

Edit your Gemini CLI config (path varies by version). Both the env-style and the flag-style work; flag-style is shown here:

{

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

</details>

Example conversation

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.

Direct REST API

If you want to call the DesignPin API without an MCP server, the OpenAPI 3.1 spec is published at:

https://designpin.pro/openapi.json

Import it into Postman, generate a client SDK, or use it directly with ChatGPT Custom GPT Actions.

Links

  • DesignPin app: https://designpin.pro
  • OpenAPI spec: https://designpin.pro/openapi.json
  • GitHub: https://github.com/opjhabuilds/designpin-mcp-server
  • Issues: https://github.com/opjhabuilds/designpin-mcp-server/issues

License

MIT © 2026 Omprakash Jha

PopNxに聞く