Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
99 designed animated caption looks for AI video editors: list, inspect and build styled captions.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"captionseasy": {
"command": "npx",
"args": [
"-y",
"captionseasy",
"mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add captionseasy -- npx -y captionseasy mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"captionseasy": {
"command": "npx",
"args": [
"-y",
"captionseasy",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"captionseasy": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"captionseasy",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント Ishaan-Gpt で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.1.1)がレジストリに届いたのは22 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには: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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Bring your words, get styled captions. CaptionsEasy is a caption style layer for developers and AI editing agents: 99 designed, animated caption looks, a validator that turns timed words + a look into ready-to-render caption props, the React/Remotion components that draw them, a CLI and an MCP server.
npm i captionseasy adds one package, about 1.6 MB, with zero runtime dependencies.#12 Jumping Box, #105 Classic Subtitle). Each look lists the few controls it really responds to. Anything else is rejected with a clear error instead of silently doing nothing.--json. The MCP tools take JSON and return JSON.You already have word timings, for example from your editor, your ASR or your agent:
[{ "text": "Stop", "startMs": 380, "endMs": 840 }, { "text": "scrolling", "startMs": 840, "endMs": 1080 }]
npx captionseasy looks bold # pick a look (search: neon, karaoke, subtitle, "one word" ...)
npx captionseasy look 12 # what can I change on look #12? npx captionseasy build --words words.json --look 12 --set active.boxColor=#FF3366 --out props.json
props.json holds { doc, style, settings }, validated and complete. Render it with the CaptionsEasy composition in your own Remotion timeline (see Use the props in Remotion). If you would rather get a finished video file, add rendering.
import { listLooks, describeLook, buildCaptions } from "captionseasy";
listLooks({ query: "bold" }); // [{ number, id, name, section, tags, description, layout, wordsPerCard }] describeLook(12); // { ...summary, defaults, controls: [{ key, type, min, max, options, default, dependsOn }], settings: [...] }
const props = buildCaptions({ words, // [{ text, startMs, endMs }] look: 12, // number or id ("hormozi_box") overrides: { "active.boxColor": "#FF3366", "position.y": 0.6 }, settings: { maxWordsPerCard: 2 }, // pacing }); // { doc, style, settings, look: { number, id, name }, warnings }
Errors are CaptionsEasyError objects with a stable code: UNKNOWN_LOOK, BAD_OVERRIDE, BAD_SETTINGS, BAD_WORDS, BAD_ARGS, FILE_NOT_FOUND, ADDON_MISSING, NO_AUDIO, NO_VIDEO, TRANSCRIBE_FAILED or RENDER_FAILED. The details field carries machine-readable context, such as the valid keys, the allowed range or the install command.
Overrides can be flat dot paths ({"active.color": "#FF3366"}) or nested objects. Colours can be written as #RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba()/hsl(), or a basic name.
A control with dependsOn only works once another key is set:
captionseasy/remotion exports the same composition the CaptionsEasy studio uses. Its peer dependencies are react and remotion (^4.0.484).
import { Composition } from "remotion";
import { CaptionedVideo, CaptionsOverlay, calculateMetadata } from "captionseasy/remotion";
// captions only, transparent: put it on a track above your video
// or captions burned over a video
CaptionsEasyCompositions registers both compositions (CaptionedVideo, CaptionsOverlay). Fonts load from Google Fonts while rendering (free, no key).
captionseasy looks [query] [--tag <tag>] [--section <id>] list the looks
captionseasy look one look: defaults + the controls it honours captionseasy build --words --look [--set key=value ...] [--out props.json] captionseasy mcp MCP server on stdio captionseasy --look [--words w.json] ... render a video (add-on captionseasy-render) captionseasy transcribe [--out words.json] speech to timed words (add-on captionseasy-transcribe)
| option | meaning | ||
|---|---|---|---|
--look, -l | look number (12) or id (hormozi_box) | ||
--words | [{text,startMs,endMs}] or { "words": [...] } | ||
--set key=value | change the look, repeatable. Style keys and pacing keys (maxWordsPerCard, pauseMs, gapBehavior ...) both come from captionseasy look | ||
--overlay / `--format mov\ | webm` | render transparent captions only (ProRes 4444 .mov, or VP9 .webm) | |
--out, -o | output file | ||
| `--language en\ | hinglish\ | auto` | speech language when transcribing |
--json | one JSON document on stdout. Progress goes to stderr. Errors are printed as {"error":{"code","message","details"}} and exit with code 1 |
The tools are `list_looks`, `describe_look`, `build_captions`, `caption_video` and `transcribe`. All take JSON and use local file paths.
build_captions works with the core package alone.caption_video and transcribe need their add-on. Without it they return ADDON_MISSING with the exact install command.To add it to Claude Code:
claude mcp add captionseasy -- npx -y captionseasy mcp
claude mcp add captionseasy -- npx -y -p captionseasy -p captionseasy-render captionseasy mcp
For Cursor (~/.cursor/mcp.json), Claude Desktop, or any client that takes the usual shape:
{ "mcpServers": { "captionseasy": { "command": "npx", "args": ["-y", "captionseasy", "mcp"] } } }
On Windows, if your client cannot start npx directly, use "command": "cmd", "args": ["/c", "npx", "-y", "captionseasy", "mcp"].
captionseasy-render)npm i captionseasy captionseasy-render # ~75 MB; a headless Chrome (~100 MB) downloads on first render
npx captionseasy talk.mp4 --look 12 --words talk.words.json # -> talk.captioned.mp4 npx captionseasy talk.mp4 --look 12 --words talk.words.json --overlay # -> talk.captions.mov (alpha)
npx -p captionseasy -p captionseasy-render captionseasy talk.mp4 --look 12 --words talk.words.json
import { render } from "captionseasy"; // loads captionseasy-render on demand
await render({ video: "talk.mp4", words, look: 12, mode: "overlay", overlayFormat: "webm", out: "captions.webm" }); // { out, mode, durationMs, width, height, fps, look, words, renderMs, warnings }
.mov or VP9 .webm, both with an alpha channel, at the video's size and length.captionseasy-transcribe)No word timings yet? This add-on runs Whisper locally, using whisper-base with word timestamps through transformers.js on onnxruntime-node.
npm i captionseasy captionseasy-transcribe
npx captionseasy transcribe talk.mp4 --out talk.words.json # [{ text, startMs, endMs }]
With both add-ons installed, captionseasy talk.mp4 --look 12 transcribes and renders in one step.
// describe_look / captionseasy look 12 --json (trimmed)
{ "number": 12, "id": "hormozi_box", "name": "Jumping Box", "section": "popular", "layout": "sentence", "wordsPerCard": 3, "defaults": { "fontSize": 58, "active.boxColor": "#22C55E", "position.y": 0.72 }, "controls": [ { "key": "fontSize", "label": "Size", "type": "number", "min": 24, "max": 140, "step": 1, "default": 58 }, { "key": "active.effect", "label": "Spoken-word effect", "type": "enum", "options": ["none", "color", "box"], "default": "box" }, { "key": "stroke.width", "label": "Outline width", "type": "number", "min": 1, "max": 16, "default": 3, "dependsOn": "stroke.enabled=true" } ], "settings": [{ "key": "maxWordsPerCard", "type": "number", "min": 1, "max": 12, "default": 3 }] }
// build_captions / buildCaptions { "doc": { "version": 2, "language": "en", "words": [{ "id": "a1b2c3d4e5f6", "text": "Stop", "startMs": 380, "endMs": 840 }] }, "style": { "templateId": "boxed_word", "fontId": "Montserrat", "...": "every field filled in" }, "settings": { "maxWordsPerCard": 3, "pauseMs": 400, "...": "..." }, "look": { "number": 12, "id": "hormozi_box", "name": "Jumping Box" }, "warnings": [] }
// any error { "error": { "code": "BAD_OVERRIDE", "message": "Unknown style key \"wobble\". Jumping Box (#12) accepts: fontId, fontSize, ...", "details": { "validKeys": ["fontId", "..."] } } }
captionseasy-render or render the components in your own Remotion project.onnx-community/whisper-base_timestamped. The Hinglish model is ishaan-g/whisper-hinglish-swift_timestamped.