Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Render App Store and Google Play screenshots from layouts and image files via the AppScreen API.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"shotframe": {
"command": "npx",
"args": [
"-y",
"@reneturcios/shotframe",
"mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add shotframe -- npx -y @reneturcios/shotframe mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"shotframe": {
"command": "npx",
"args": [
"-y",
"@reneturcios/shotframe",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"shotframe": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@reneturcios/shotframe",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント CloudCorpRecords で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.1.0)がレジストリに届いたのは3 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.js, Dockerも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Need App Store or Google Play screenshots for a store listing? shotframe hands the AppScreen API a set of screen layouts plus the image files they reference, and gives you back either a render job you can poll or a direct download link for the finished screenshots.
How a render flows:
screens — the layouts, as JSON objects. Their structure is defined by the AppScreen API; shotframe passes them through untouched and cannot validate them for you.files — the images the layouts use. Each item names a file and carries exactly one source: a local path (the client reads the bytes off disk and encodes them; a leading ~/ expands to your home directory) or inline base64 (meant only for tiny synthetic test images). An unreadable path fails the call before any request is made.jobId for keyed/async renders or a download link for anonymous/inline ones, plus balance and cost when reported. Quota metadata the API reports is surfaced on the MCP result's _meta (quota, and balance / cost / upgradeUrl when present).Poll a job with its jobId to learn its status and, when it is done, get a signed download URL. Signed URLs expire after about an hour; poll again to refresh one.
The API key is optional — anonymous use works, capped by the service at 5 lifetime renders:
export APPSCREEN_API_KEY="your key" # optional
Rendering spends your own AppScreen workspace credits; when they run out the API answers 402 and the tool reports it as an insufficient_credits error carrying the API's cost and balance text. shotframe itself holds no payment instrument.
Other environment variables:
APPSCREEN_BASE_URL — API base URL (https://api.appscreen.co by default)APPSCREEN_MCP_CLIENT — sent as the X-MCP-Client header, identifying the calling clientnpx @reneturcios/shotframe render_screenshots '{"screens":[{"device":"iphone"}], "files":[{"name":"icon.png","path":"~/shots/icon.png"}]}'
npx @reneturcios/shotframe get_render_status '{"job_id":"job-123"}' npx @reneturcios/shotframe --version
Output is the API result body as JSON. Exit codes: 0 on success, 1 on a runtime error (including a validation failure, an unreadable file, or an upstream error), 2 on a usage error.
npx -y @reneturcios/shotframe mcp
MCP client config:
{
"mcpServers": { "shotframe": { "command": "npx", "args": ["-y", "@reneturcios/shotframe", "mcp"], "env": { "APPSCREEN_API_KEY": "your key" } } } }
render_screenshots — Render App Store and Google Play screenshots from screens (layout JSON) and image files. Returns a jobId for keyed/async renders or a download link for anonymous/inline renders. screens is required; files is optional.get_render_status — Poll a render job by jobId. Returns the status and a signed download URL when done. Signed URLs expire after about an hour; re-poll to refresh.docker run -i -e APPSCREEN_API_KEY="your key" ghcr.io/cloudcorprecords/shotframe
docker run --rm ghcr.io/cloudcorprecords/shotframe get_render_status '{"job_id":"job-123"}'
npm install
npm run build # tsc -> dist/ npm test # tsx --test test/*.test.ts (fake fetch + temp files, no network) npm run dev # run the CLI from source
MIT — Copyright (c) 2026 Rene Turcios