sketch/design — System Design Interview Board

Name: sketch/design — System Design Interview Board
Author: tGhattas

作者：tGhattas版本 0.1.2i★ –i在你的电脑上运行

注册名称io.github.tGhattas/sysdesign-board

安装

概览

作者提供的说明（英文原文）

Hand-drawn whiteboard for system design mock interviews; your AI watches, asks and gives feedback.

PopNx MCP 的三大支柱

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

用户评价i暂无评价评价功能将在后续阶段与账户功能一起开放
我们的基础检查i1 项中通过 1 项依据公开信息检查；尚未扫描代码
使用情况i尚未统计★ –

它能帮你做什么

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

连接方式: 在你的电脑上运行
传输方式: stdio
分类: 设计、图片与音频

安装

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

安装之前

基础检查：1 项中通过 1 项
在你的电脑上运行，拥有你的用户账户的权限（文件、网络、应用）。
需要你自己填写： SYSDESIGN_PORT

你需要

npm已安装 Node.js（用于 npx 命令）

你用的是哪个应用？

ClaudeClaude CodeCursorVS CodeChatGPT

在上方选择你的应用。我们会记住它，下次按钮会显示“安装到 …”。

打开 Claude Desktop → Settings → Developer → Edit Config，把下面的内容粘贴到 claude_desktop_config.json

{
  "mcpServers": {
    "sysdesign-board": {
      "command": "npx",
      "args": [
        "-y",
        "sysdesign-board"
      ],
      "env": {
        "SYSDESIGN_PORT": "your-value"
      }
    }
  }
}

在终端中运行这条命令

claude mcp add sysdesign-board --env SYSDESIGN_PORT=your-value -- npx -y sysdesign-board

运行前请先填写空着的值。

在 Cursor 中打开

或者自己复制设置

粘贴到项目中的 .cursor/mcp.json，或 ~/.cursor/mcp.json

{
  "mcpServers": {
    "sysdesign-board": {
      "command": "npx",
      "args": [
        "-y",
        "sysdesign-board"
      ],
      "env": {
        "SYSDESIGN_PORT": "your-value"
      }
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

在 VS Code 中打开

或者自己复制设置

粘贴到项目中的 .vscode/mcp.json

{
  "servers": {
    "sysdesign-board": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "sysdesign-board"
      ],
      "env": {
        "SYSDESIGN_PORT": "your-value"
      }
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

这个服务器在你的电脑上运行，而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。

你的选择通过 Cookie 保存在这台设备上，无需账户。

需要你填写的值

SYSDESIGN_PORT env
Local port for the whiteboard page (http://localhost: ). Defaults to 4321.

这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同，请以 README 为准。

它能做什么

它在你的电脑上运行；安装后，工具列表会显示在你的 AI 应用中。

基础检查i

我们检查的是任何人都能看到的信息；我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月7日

✓ 通过
作者与仓库一致
注册名称已通过 GitHub 账户 tGhattas 验证，该账户拥有此仓库
… 尚未检查
仍在维护
我们还没有从 GitHub 读取这个仓库
… 尚未检查
有许可证
我们还没有从 GitHub 读取这个仓库
– 不适用
端点有响应
它在你的电脑上运行，没有互联网端点
– 不适用
使用 OAuth 登录
在你的电脑上运行，改用本地设置
… 尚未检查
工具描述中没有隐藏指令
它在你的电脑上运行；我们只能读取互联网端点的工具列表

与“设计、图片与音频”中的其他服务器比较i

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

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

常见问题

sketch/design — System Design Interview Board 安全吗？

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

它需要哪些密钥或代码？

注册中心没有列出必需的密钥，不过有些服务器会在首次使用时要求你登录。

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

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

它还在维护吗？

GitHub 仓库最后更新于–，最新版本（0.1.2）于16天前进入注册中心。

哪些应用可以使用它？

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

有什么可以替代它？

同一分类中有：Figma Context MCP, Claude Real Video, Figma MCP Server

替代选择

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

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

Figma Context MCP

作者：GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

在你的电脑上运行★ 16,165MIT5个月前更新

安装

Claude Real Video

作者：HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

在你的电脑上运行★ 2,284MIT2个月前更新

安装

Figma MCP Server

作者：figma

The Figma MCP server brings Figma design context directly into your AI workflow.

在云端运行★ 2,15213个月前更新

安装

作者的 README

打开 README

按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。

sketch/design — the system design interview board

A hand-drawn whiteboard for system design mock interviews, plus an MCP server that turns Claude or ChatGPT into your interviewer. It sees your board, listens to you, talks back, pins questions on your components, and ends with scored feedback.

Pencil-style canvas: a paper or chalkboard theme, with shapes that look drawn by hand (rough.js + perfect-freehand)
27 system design components: load balancer, API gateway, CDN, cache, SQL and NoSQL databases, object store, queue, Kafka-style stream, pub/sub, workers, serverless functions, auth, monitoring, ML and more
Arrows that stay attached to components, with labels, curved or elbow routes, and dashed lines for async flows. Hover a component and drag its blue dot to connect it.
Interview panel: the problem, a timer, a phase tracker, chat, voice in (speech-to-text) and voice out (the interviewer's replies are read aloud)
The interviewer can read your diagram as structured data, look at a picture of it, pin comments on components, highlight things, sketch reference designs, and grade you at the end
Runs entirely on your machine. The AI runs in your own Claude or ChatGPT app, on your existing subscription, with no API keys.

Install

Requires Node.js 18+.

Your AI app	How to connect	Billed to
Claude Desktop	Double-click `sysdesign-board-x.y.z.mcpb` from Releases, or run `npx -y sysdesign-board install`	Claude Pro / Max
Claude Code	`claude mcp add sysdesign-board -- npx -y sysdesign-board`	Claude Pro / Max
Codex CLI	Add it to `~/.codex/config.toml` (below)	ChatGPT Plus / Pro
ChatGPT (desktop / web)	Developer Mode connector through a tunnel (below)	ChatGPT Plus / Pro
Cursor, Windsurf, VS Code, others	The standard MCP JSON (below)	Your plan there

The .mcpb one-click file is Claude Desktop only. Every other app runs the same npm package.

Claude Desktop

Option A: one-click. Download the .mcpb file from Releases and double-click it. Claude Desktop shows an install dialog.

Option B: command line. First quit Claude Desktop completely (macOS: ⌘Q; Windows: tray icon → Quit). Claude rewrites its config file from memory when it quits, which would drop the new entry. Then run:

npx -y sysdesign-board install

Reopen Claude Desktop.

Option C: edit the config yourself (again, with Claude Desktop quit). The file is at:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux (unofficial builds): ~/.config/Claude/claude_desktop_config.json

"mcpServers": { "sysdesign-board": { "command": "npx", "args": ["-y", "sysdesign-board"] } } }

On Windows, use "command": "cmd", "args": ["/c", "npx", "-y", "sysdesign-board"]. If Claude can't find npx (common with nvm, Volta or asdf), use the absolute path from which npx (macOS/Linux) or where npx (Windows).

Claude Code

Either add the server directly:

claude mcp add sysdesign-board -- npx -y sysdesign-board

Or install the plugin, which also adds an interview skill, from this repo's marketplace. Run these inside Claude Code:

/plugin marketplace add tGhattas/sysdesign-board

/plugin install sysdesign-board@sysdesign-board

Codex CLI

Add this to ~/.codex/config.toml (Windows: %USERPROFILE%\.codex\config.toml):

[mcp_servers.sysdesign-board]

command = "npx" args = ["-y", "sysdesign-board"] tool_timeout_sec = 120

ChatGPT app

ChatGPT connects to MCP servers over public HTTPS, so you run the board locally and expose only its /mcp endpoint through a tunnel. The board itself, its API and its WebSocket refuse any request that doesn't come from localhost.

Start the board, and keep this running:

   npx -y sysdesign-board serve

In another terminal, open a tunnel (here with cloudflared):

   cloudflared tunnel --url http://localhost:4321

Get your private connector token:

   npx -y sysdesign-board token

In ChatGPT, go to Settings → Apps & Connectors → Advanced, enable Developer Mode, then Create a connector with the URL https:// .trycloudflare.com/mcp?token= and no authentication.

Treat that URL like a password. To change the token, delete ~/.sysdesign-board/token, or set SYSDESIGN_TOKEN yourself.

Any other MCP client

{ "command": "npx", "args": ["-y", "sysdesign-board"] }

Use it

Start a new chat and say:

Start a system design interview with me on my sketch board.

Or use the interview prompt from your app's prompt or slash menu. The board opens at http://localhost:4321.

Draw your design. Talk with the 🎤 mic (your message is sent when you pause) or type in the panel.
The interviewer keeps listening between replies. It is woken by what you say, and when you stop drawing for a few seconds.
Click I'm done when you're finished to get a feedback card with scores.

The board also works without any AI: run npx -y sysdesign-board serve and open http://localhost:4321.

Tools the interviewer gets

Tool	What it does
`start_interview`	Sets the problem, level and duration, opens the board, and speaks the opening line
`wait_for_candidate`	Waits for your speech or messages, or for board changes once you stop drawing
`say`	Sends a chat message, read aloud
`get_board`	Structured diagram: components, connections (with labels; dashed means async), zones, notes, and what changed
`get_board_image`	A PNG of the whole board (for handwriting and sketches)
`annotate` / `clear_annotations`	Pin or remove "INTERVIEWER" comment bubbles on components
`highlight`	Makes components glow, optionally zooming to them
`draw_on_board`	Adds components, connections, notes and zones in the same sketchy style
`set_phase`	Requirements → Estimation → API & Data → High-level → Deep dive → Wrap-up
`end_interview`	Feedback card with 1–5 scores, strengths and improvements
`get_transcript`, `open_board`	Housekeeping

Voice

Speech-to-text uses the browser's Web Speech API. Use Chrome, Edge or Safari; Firefox doesn't support it.
Text-to-speech uses your system voices. Toggle it with "Voice replies" in the panel. The mic pauses while the interviewer speaks, so it doesn't transcribe itself.
The native voice modes inside the ChatGPT and Claude apps can't be piped into another page. Those voice models are only available through paid APIs.

Keyboard

V select · H hand / hold Space · R rect · D diamond · O ellipse · A arrow · L line · P pen · T text · N sticky note · F zone · E eraser · K laser · C components · I interview panel · Q tool lock · G grid snap · ⌘/Ctrl Z undo · ⌘/Ctrl D duplicate · ⇧1 fit · ? all shortcuts

Privacy Policy

The full policy is in PRIVACY.md. In short:

What it handles: your board, the interview chat and voice transcripts, your settings, and a local access token.
Where it's stored: only on your machine, in the browser's local storage for the board page and in ~/.sysdesign-board/. The author runs no server, and there are no accounts, analytics or telemetry.
What leaves your computer:
When the AI interviewer calls a tool, the AI app you connected receives the board description, a picture of the board, your messages and your transcripts, under that provider's privacy policy.
The mic uses your browser's speech recognition. Chrome sends the audio to Google; Safari uses Apple's speech service.
npx downloads the package from npm.
With the optional tunnel, /mcp requests pass through the tunnel provider.
Security:
The board, its API and its WebSocket only answer localhost requests from localhost pages. Other websites and tunnels are refused, which also blocks DNS-rebinding attacks.
The HTTP endpoint (/mcp) always requires the token.
Sharing and retention: nothing is sold or shared. Data stays until you clear the board or delete ~/.sysdesign-board/.
Contact: open an issue.

Troubleshooting

The server doesn't appear in Claude Desktop. Claude was probably running when the config was edited and saved over it. Quit it fully, run npx -y sysdesign-board install, then reopen.
"npx: command not found" in Claude's logs. Use an absolute path to npx (see Option C), or run npx -y sysdesign-board install, which writes absolute paths for you.
Port 4321 is taken. Set SYSDESIGN_PORT (or --port=5000). In the .mcpb extension it's a setting.
The mic does nothing. Open the board in Chrome, Edge or Safari and allow microphone access.
Several apps connected at once? That's fine. The first one hosts the board and the others share it.

CLI

sysdesign-board            MCP server over stdio (what AI apps launch)

sysdesign-board serve Board + HTTP MCP endpoint only sysdesign-board install Add to Claude Desktop (quit it first) [--npx | --local] sysdesign-board token Print the HTTP MCP token / URL

Development

git clone <this repo> && cd sysdesign-board

npm install npm run dev

npm run dev starts the hub on :4321 with reload, and Vite on :5173. Other scripts:

Command	What it does
`npm run build`	Builds the board UI and bundles the server into one file
`npm run build:mcpb`	Packs `build/sysdesign-board- .mcpb`
`npm run typecheck`	Type-checks the web and server code
`node scripts/mcp-smoke.mjs`	Drives every MCP tool against a running board
`npm run lock:plugin`	Refreshes the Claude plugin's `package-lock.json` (run after the new version is on npm)

Releasing a new version:

Run npm version --no-git-tag-version. This also updates server.json and the plugin's version and pinned dependency.
Run npm publish.
Run npm run lock:plugin. The lockfile needs the published package's checksum, so this comes after publishing.
Commit, then tag and push.
Make a GitHub release with npm run build:mcpb.
Run mcp-publisher publish for the MCP Registry.

The code lives in three folders:

web/: the board (React UI plus the canvas engine in web/src/engine.ts; renderer and component glyphs in web/src/render/)
server/: the hub (HTTP, WebSocket and persistence), the MCP tools and the CLI
shared/: the data model, component catalog and geometry

License

MIT