designpin-mcp-server

DesignPin MCP 服务

一款 MCP 服务，可让任何 AI 助手将 HTML 原型推送到 DesignPin，供团队审核并读取审核者的反馈。

功能简介

DesignPin 是一款用于审核 HTML 原型的工具，支持锚定到 DOM 元素的评论。此软件包将 DesignPin REST API 封装为 Model Context Protocol 服务，向任何兼容 MCP 的 AI 客户端提供三种工具：createShareLink、uploadVersion 和 listComments。

完成配置后，你的 AI 助手（Claude Desktop、Cursor、VS Code（Copilot）、Gemini CLI 或任何其他兼容 MCP 的客户端）就能将生成的 HTML 原型发布为可分享的审核链接，获取审核者的评论并据此修改，还能将迭代版本推送为新版本，所有操作都可以在生成设计的同一段对话中完成。

ChatGPT 用户须知： ChatGPT 目前不支持 MCP 服务。请改用 直接调用 REST API 的方式，通过 Custom GPT Actions 操作，无需 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 每小时最多请求 10 次。

返回： 包含 url、reviewToken、projectId、moduleId 和 versionId 的 JSON。

给 AI 助手的提示词示例：

“把这段 HTML 制作成 DesignPin 分享链接，标题为‘Landing page hero V3’。”

uploadVersion

将新的 HTML 版本上传到现有的 DesignPin 模块。versionNumber 会自动递增。需要使用配置中的 API 密钥和 projectId，以及用户提供的 moduleId。

返回： 包含 url、versionId 和 versionNumber 的 JSON。

提示词示例：

“将这段修改后的 HTML 作为新版本推送到模块 mod_example_def456，说明为‘处理 pin #3 的对比度反馈’。”

listComments

获取 DesignPin 模块特定版本中可见的评论。采用与网页 UI 一致的按时间顺序截断语义：如果评论的来源版本是 V 或更早版本，则该评论在版本 V 中可见。

返回： JSON，包含 comments 数组和类似 "3 open, 1 resolved" 的 summary 字符串。

提示词示例：

"获取模块 mod_example_def456 在版本 ver_example_ghi789 中的评论，并告诉我哪些问题阻碍了审批。"

客户端配置示例

{
  "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