Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
제작자가 쓴 설명(영어 원문)
Push HTML prototypes to DesignPin for team review and pull reviewer feedback into your AI.
이 세 가지는 절대 하나의 점수로 합치지 않아요. 의견, 측정, 인기는 서로 다른 것이니까요.
이 서버는 아직 쉬운 말로 된 요약을 쓰지 못했어요. 아래는 레지스트리에서 읽어 온 사실이에요.
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
DESIGNPIN_API_KEY, DESIGNPIN_PROJECT_ID, DESIGNPIN_BASE_URL비밀로 표시된 값은 내 계정의 열쇠예요. 절대 다른 사람과 공유하거나 채팅에 붙여 넣지 마세요.
필요한 것
어떤 앱을 쓰세요?
위에서 앱을 고르세요. 기억해 두었다가 다음부터는 버튼에 “…에 설치”라고 표시해요.
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/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"
}
}
}
}브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.
프로젝트의 .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는 인터넷에 있는 서버에만 연결할 수 있어요. 다른 앱을 고르세요.
선택한 앱은 이 기기의 쿠키에만 저장돼요. 계정은 필요 없어요.
DESIGNPIN_PROJECT_ID envDESIGNPIN_BASE_URL env이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 7일 점검
레지스트리 이름이 GitHub 계정 opjhabuilds 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 1개 중 1개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
입력해야 할 값: DESIGNPIN_API_KEY
내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).
GitHub 저장소는 마지막으로 – 변경됐고, 최신 버전(0.1.2)은 6개월 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.
같은 카테고리에는: Spec Driven Development, Remote Desktop Commander, Asset Notation
같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.
카드 보는 법:★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.
Read and maintain an Asset Notation file on disk: net worth, holdings, valuations, CSV import.
제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
An MCP server that lets any AI assistant push HTML prototypes to [DesignPin](https://designpin.pro) for team review and read back reviewer feedback.
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.
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
npx -y @designpin/mcp-server --help
Each key is scoped to a single project. Generate separate keys per client / use case so you can revoke them individually.
Both CLI flags and environment variables are supported. Flags win when both are present.
| CLI flag | Env var | Required | Default | Description |
|---|---|---|---|---|
--api-key | DESIGNPIN_API_KEY | for uploadVersion, listComments | — | Your dp_live_... API key |
--project-id | DESIGNPIN_PROJECT_ID | for uploadVersion | — | Project ID the key is scoped to |
--base-url | DESIGNPIN_BASE_URL | no | https://designpin.pro | API base URL (override for testing) |
--help | — | no | — | Show usage and exit |
--version | — | no | — | Print version and exit |
Security note: CLI flags are visible in
psoutput on multi-user systems. Prefer environment variables on shared machines.
createShareLinkCreate 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.
| Input | Type | Required | Description |
|---|---|---|---|
html | string | yes | Complete HTML document to share |
title | string | yes | Display name for the share, max 80 chars |
authorName | string | no | Author 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'."
uploadVersionUpload 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.
| Input | Type | Required | Description |
|---|---|---|---|
html | string | yes | Complete HTML for the new version |
moduleId | string | yes | Target module within the configured project |
description | string | no | Version 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_def456with the description 'Address pin #3 contrast feedback'."
listCommentsFetch 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.
| Input | Type | Required | Description |
|---|---|---|---|
moduleId | string | yes | Module ID |
versionId | string | yes | Specific 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_def456at versionver_example_ghi789and tell me what's blocking approval."
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>
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):
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.
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.
MIT © 2026 Omprakash Jha