原型 · 预览版:收录官方注册中心里的全部服务器,每 30 分钟同步一次。评价和账户功能将在后续阶段推出。
PopNx MCP为使用 AI 的人准备的 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 的三大支柱

这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。

它能帮你做什么

我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。

  • 连接方式: 在你的电脑上运行
  • 传输方式: stdio
  • 分类: 网页与浏览器
  • 你需要填写:DESIGNPIN_API_KEY

安装

选择你使用的 AI 应用,然后复制设置。

安装之前

  • 基础检查:1 项中通过 1 项
  • 在你的电脑上运行,拥有你的用户账户的权限(文件、网络、应用)。
  • 需要你自己填写: DESIGNPIN_API_KEY, DESIGNPIN_PROJECT_ID, DESIGNPIN_BASE_URL

标为机密的值是你账户的钥匙。千万不要分享给别人,也不要粘贴到聊天里。

你需要

  • npm已安装 Node.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月8日

  • ✓ 通过

    作者与仓库一致

    注册名称已通过 GitHub 账户 opjhabuilds 验证,该账户拥有此仓库

  • … 尚未检查

    仍在维护

    我们还没有从 GitHub 读取这个仓库

  • … 尚未检查

    有许可证

    我们还没有从 GitHub 读取这个仓库

  • – 不适用

    端点有响应

    它在你的电脑上运行,没有互联网端点

  • – 不适用

    使用 OAuth 登录

    在你的电脑上运行,改用本地设置

  • … 尚未检查

    工具描述中没有隐藏指令

    它在你的电脑上运行;我们只能读取互联网端点的工具列表

与“网页与浏览器”中的其他服务器比较i

  • 星标数多于此分类中其他 1380 个服务器的 0%
  • 发布到注册中心的时间比此分类中其他 1380 个服务器的 8% 更新
  • 基础检查结果等于或优于此分类中其他 1380 个服务器的 100%

与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。

常见问题

Designpin MCP Server 安全吗?

它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。

它需要哪些密钥或代码?

你需要填写:DESIGNPIN_API_KEY

它在我的电脑上运行还是在云端?

它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。

它还在维护吗?

GitHub 仓库最后更新于–,最新版本(0.1.2)于6个月前进入注册中心。

哪些应用可以使用它?

支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。

有什么可以替代它?

同一分类中有:Browser Use, Chrome DevTools MCP, MCP Server Browser

替代选择

同一分类中其他作者的服务器,按星标数排序。

如何看卡片:★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i

Browser Use

作者:browser-use

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

电脑或云端★ 120,087MIT18天前更新
安装

Chrome DevTools MCP

作者:ChromeDevTools

MCP server for Chrome DevTools

在你的电脑上运行★ 54,821Apache-2.016天前更新
安装

MCP Server Browser

作者:bytedance

MCP server for browser use access

在你的电脑上运行★ 39,550Apache-2.014个月前更新
安装

作者的 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