Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
NVIDIA Elements UI design system and agent tools for AI/ML, robotics, and autonomous vehicles.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"elements": {
"command": "npx",
"args": [
"-y",
"@nvidia-elements/cli",
"mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add elements -- npx -y @nvidia-elements/cli mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"elements": {
"command": "npx",
"args": [
"-y",
"@nvidia-elements/cli",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"elements": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@nvidia-elements/cli",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント NVIDIA で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(2.2.16)がレジストリに届いたのは4 日前です。
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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.
The @nvidia-elements/cli is a dual-mode command-line tool for the Elements Design System. It provides interactive CLI commands and a Model Context Protocol (MCP) server for AI assistant integration.
This package serves two primary modes:
The best way to get started is to run the install script.
curl -fsSL https://nvidia.github.io/elements/install.sh | bash
On Windows, run the PowerShell installer.
irm https://nvidia.github.io/elements/install.ps1 | iex
For agents and CI, invoke the canonical path directly: $HOME/.nve/bin/nve on macOS and Linux, or $env:LOCALAPPDATA\nve\bin\nve.exe on Windows.
Alternatively you can install with Node.js and npm.
npm install -g @nvidia-elements/cli
| Command | Description |
|---|---|
nve | Show About and help output. |
nve api.list [format] | Get a list of all available Elements (nve-*) APIs and components. |
nve api.get [--format ] | Get documentation for one to five known components or attributes (nve-*). |
nve api.validate [paths..] | Check HTML and JSON from explicit file paths, glob patterns, or standard input (--stdin) using Elements lint rules. |
nve api.imports.get | Get ESM imports for an HTML template using Elements APIs (nve-*). |
nve api.tokens.list [format] [query] | Get available semantic CSS custom properties and design tokens for theming. |
nve api.icons.list [format] | Get available icon names for nve-icon and nve-icon-button. |
nve examples.list [format] | Get available Elements (nve-*) starter templates, patterns, and examples. |
nve examples.get [format] | Get the full template of a known example or pattern by ID. |
nve project.create [cwd] [start] | Create a new starter project. |
nve project.setup [cwd] | Set up or update a project to use Elements. |
nve project.validate [cwd] | Check project configuration and dependencies. |
nve packages.list | Get latest published versions of all Elements packages. |
nve packages.get | Get details for a specific Elements package. |
nve packages.changelogs.get [format] [limit] | Retrieve changelog details by package name. |
nve skills.install [--global] | Install the Elements agent skill in the project or for the current user. |
nve mcp | Start the MCP server. |
| Option | Description |
|---|---|
--help | Show help. |
--version | Show version number. |
--upgrade | Upgrade Elements CLI (nve) to the latest version. |
--debug | Enable debug output for tools. |
The fastest way to configure MCP is with the project.setup command:
nve project.setup
This detects your package manager, configures the MCP server for Cursor, Codex, and Claude Code, and adds Elements core dependencies to the project.
Install to Claude Code by adding the configuration to your .mcp.json file. The file is typically located at ~/.config/claude-code/.mcp.json or %APPDATA%\claude-code\.mcp.json on Windows.
{
"mcpServers": { "nvidia_elements": { "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples", "command": "nve", "args": ["mcp"] } } }
After adding the configuration, restart Claude Code for the changes to take effect. The Elements MCP tools are then available for use in your conversations.
Install to Cursor with the MCP configuration below.
// .cursor/mcp.json
{ "mcpServers": { "nvidia_elements": { "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples", "command": "nve", "args": ["mcp"] } } }
Install to Codex with the MCP configuration below.
[mcp_servers.nvidia_elements]
description = "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples" command = "nve" args = ["mcp"]
| Prompt | Description | Example Prompt |
|---|---|---|
/artifact | Create a standalone Elements UI artifact | /artifact Create an example login form |
/doctor | Verify Elements setup and MCP configuration | /doctor |
/create-project | Create a new Elements starter project | /create-project Create a todo app |
/migrate | Migrate from deprecated Elements APIs | /migrate Migrate this project from deprecated Elements APIs |
Elements provides one elements skill with reference files for artifact creation, setup checks, project integration, and migration. Install the complete directory in the current project:
nve skills.install
This writes .agents/skills/elements/ and .claude/skills/elements/. Add --global to install it for the current user at ~/.agents/skills/elements/ instead. The command replaces existing elements directories at the selected destinations so stale references do not remain.
Alternatively, install the Elements agent skill with the open skills CLI:
npx skills add https://github.com/nvidia/elements --skill elements
This route does not install the Elements CLI or configure the MCP server. Use nve project.setup for complete project setup, and continue to use the CLI or MCP tools for deterministic API lookup and template validation.
| Tool | Description |
|---|---|
api_list | Get list of all available Elements (nve-\*) APIs and components. |
api_get | Get documentation known components or attributes by name (nve-\*). |
api_validate | Checks HTML and JSON files or supplied content with Elements lint rules. |
api_imports_get | Get esm imports for a given HTML template using Elements APIs (nve-\*). |
api_tokens_list | Get available semantic CSS custom properties / design tokens for theming. |
packages_list | Get latest published versions of all Elements packages. |
packages_get | Get details for a specific Elements package. |
packages_changelogs_get | Retrieve changelog details by package name. |
examples_list | Get list of available Elements (nve-\*) patterns and examples. |
examples_get | Get the full template of a known example or pattern by id. |
project_create | Create a new starter project. |
project_validate | Check project for configuration issues and dependencies. |
project_setup | Setup or update a project to use Elements. |