Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
作者による説明(英語の原文)
Frame screenshots and screen recordings in Apple device bezels (device mockups). macOS only.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"bezelbub": {
"command": "npx",
"args": [
"-y",
"@dgr_labs/bezelbub-mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add bezelbub -- npx -y @dgr_labs/bezelbub-mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"bezelbub": {
"command": "npx",
"args": [
"-y",
"@dgr_labs/bezelbub-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"bezelbub": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@dgr_labs/bezelbub-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント cwooddgr で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.4.0)がレジストリに届いたのは19 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Spec Driven Development, Remote Desktop Commander, Microsoft Exchange Online MCP
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況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.
Exchange Online admin for MSPs: forwarding audits, EWS posture and offboarding, no PowerShell
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Bezelbub puts your screenshots and screen recordings inside realistic Apple device bezels, so you get pixel-accurate device mockups for iPhone, iPad, Mac, and Apple TV as framed images and videos. You can use it three ways:
bezelbub (brew install cwooddgr/tap/bezelbub). Frame a screenshot from a script, add a device frame to a screen recording, or export a transparent HEVC-with-alpha video with a VP9/WebM copy for Chrome and Firefox. We built it for shell scripts, CI, and AI agents. Jump to the CLI docs.Get Bezelbub on the App Store for Mac, iPhone, and iPad.
.mov, ready to lay over any web page or presentation.iphoneduo), the outer display with the phone closed (iphoneduoouter), or the outer display with the phone open and seen from the back (iphoneduoouteropen), in portrait or landscapebezelbub command-line toolWith bezelbub you can frame screenshots and screen recordings from a shell script, a CI pipeline, or an AI agent. There is no GUI and nothing ever prompts you. Every input is a flag with a sensible default, you can ask for JSON output, and when something goes wrong you get a distinct nonzero exit code plus a concrete suggestion on stderr (valid ids, matching devices, nearest screen sizes), so one failed call tells you how to fix the next one.
Install it with Homebrew:
brew install cwooddgr/tap/bezelbub
# Frame a screenshot. We detect the device from its pixel size.
bezelbub frame --input shot.png # writes shot-framed.png
bezelbub frame --input demo.mp4 # writes demo-framed.mp4
bezelbub frame --input demo.mp4 --background transparent # writes demo-framed.mov
bezelbub frame --input demo.mp4 --background transparent --webm
bezelbub devices [--json]
bezelbub devices --input shot.png # or demo.mp4, or --dimensions 1206x2622
bezelbub frame --input shot.png --device iphone17pro \ --color "Cosmic Orange" \ --orientation landscape \ --background "#1D1D1F" \ --output-size 50% \ --output framed.png --json
frame is the default subcommand, so bezelbub --input shot.png works too.
Leave out --device and we work out the device from the input's pixel dimensions. For iPhones and iPads that means an exact match on screen resolution, within a pixel. For Macs, iMac, Studio Display, and Apple TV it means an exact match on capture size: every macOS display zoom setting captures at a known pixel size per model, so a 3420×2214 screenshot can only have come from a 15" MacBook Air, whatever zoom it was taken at. Sizes we don't have on file, such as external monitors or downscaled recordings, fall back to aspect-ratio matching. When you frame a display capture, we scale it to fit the bezel's screen.
Detection succeeds when exactly one device matches. If several models share the size, the error lists them so you can run again with --device . If nothing matches, we suggest the nearest devices by aspect ratio. To check before framing anything, run bezelbub devices --input or bezelbub devices --dimensions WxH.
Pass --background transparent with a video input and you get HEVC with an alpha channel in a QuickTime .mov instead of an MP4: a device-framed recording with a fully transparent background, ready to lay over anything. Safari and Apple's frameworks (AVFoundation, AppKit, UIKit) play HEVC-with-alpha. Chrome and Firefox don't decode it.
For those browsers, add --webm and you also get a VP9/WebM copy that keeps the alpha channel. To make it we render a temporary ProRes 4444 master and hand that to ffmpeg, which must be on your PATH. We deliberately don't hand ffmpeg the HEVC .mov: ffmpeg builds older than 8.0 can't decode HEVC's alpha layer and silently write an opaque WebM. Version 8 and later decode it fine, but the ProRes route works on any build. Serve both files, with the .mov first:
<video autoplay loop muted playsinline>
The order matters. Safari can play VP9/WebM but drops its alpha channel, so if you list the WebM first, Safari shows your transparency as solid black. With the .mov first, Safari takes the HEVC-alpha file, while Chrome and Firefox skip video/quicktime and fall through to the WebM.
If you pass --output for a transparent export, the path must end in .mov. The WebM lands beside it with a .webm extension.
bezelbub frame --input <path> [options]
bezelbub devices [--input | --dimensions WxH] [--json]
Options for frame:
| Flag | What it does |
|---|---|
--input, -i | The screenshot (PNG, JPEG, HEIC) or video (.mov, .mp4, .m4v, chosen by extension). Required. |
--device, -d | A device id from bezelbub devices. Leave it out to detect from pixel size. |
--color, -c | A color name or id, case-insensitive. Defaults to the device's default color. |
--orientation | portrait, landscape, or auto (the default, taken from the input's shape). |
--background | A hex color (#RRGGBB or #RRGGBBAA) or transparent. Defaults to transparent for images and black for video. transparent on a video switches the output to HEVC-with-alpha .mov. |
--output-size | Scale the result, keeping the bezel's aspect: a width (1920), an exact WxH that matches the aspect, or a percentage (50%). Images go from 16 to 16,384 px, videos from 16 to 7,680 px. |
--output, -o | Where to write the result. Defaults to -framed.png, .mp4, or .mov beside the input. |
--webm | Also write a VP9/WebM copy with alpha. Video with --background transparent only; needs ffmpeg on PATH. |
--json | Print a JSON result on stdout instead of a text summary. |
devices lists the whole catalog (ids, display names, colors, orientations, screen sizes, and each display device's known capture sizes), or narrows it to the devices that fit an --input file or a bare --dimensions value. Filtering always exits 0. An empty matches array is the signal that nothing fits, and nearest (by aspect ratio) fills in when that happens.
frame --json prints one object:
{
"color" : "Cosmic Orange", "device" : "iphone17pro", "height" : 2760, "kind" : "image", "orientation" : "portrait", "output" : "/path/shot-framed.png", "width" : 1350 }
kind is "image" or "video". For video you also get "transparent": true|false and, when --webm ran, the "webm" output path. devices --json prints an array of {id, displayName, defaultColor, colors, landscapeOnly, hasPortraitBezel, screenWidth, screenHeight, captureSizes}. With --input or --dimensions it prints {width, height, matches, nearest} using the same device objects, and nearest is filled only when matches is empty.
Each failure type has its own code, so a script can branch without parsing stderr:
| Code | Meaning |
|---|---|
| 0 | Success |
| 1 | A flag value we couldn't parse, such as a malformed --background or --output-size |
| 2 | Unknown, ambiguous, or undetectable device. stderr lists the candidates. |
| 3 | Unknown color. stderr lists the device's valid colors. |
| 4 | We couldn't read the input image or video |
| 5 | Compositing or video export failed |
| 6 | We couldn't write the output |
| 7 | The --webm conversion failed because ffmpeg is missing from PATH or returned an error |
| 64 | Malformed arguments (the standard EX_USAGE) |
We built the CLI for non-interactive, programmatic use, by LLM agents (Claude Code, MCP tool wrappers, CI bots) as much as by people:
bezelbub devices --input shot.png --json to check the match, then bezelbub frame --input shot.png --json and read output from the result.This repo also includes a ready-made Claude Code skill at skills/bezelbub-cli/ that teaches an agent the whole wor
冒頭だけを表示しています。続きはリポジトリで読めます