Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者提供的说明(英文原文)
Use existing brand guidelines with AI. Turn websites, PDFs, and Figma into a .brand runtime.
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
打开 Claude Desktop → Settings → Developer → Edit Config,把下面的内容粘贴到 claude_desktop_config.json
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": [
"-y",
"@brandsystem/mcp"
]
}
}
}在终端中运行这条命令
claude mcp add brandsystem -- npx -y @brandsystem/mcp粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": [
"-y",
"@brandsystem/mcp"
]
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"brandsystem": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@brandsystem/mcp"
]
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个服务器在你的电脑上运行,而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。
你的选择通过 Cookie 保存在这台设备上,无需账户。
这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月6日
注册名称已通过 GitHub 账户 Brandcode-Studio 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
注册中心没有列出必需的密钥,不过有些服务器会在首次使用时要求你登录。
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于–,最新版本(0.18.0)于11天前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况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、图片和脚本已被移除。链接会离开本站。
`@brandsystem/mcp` turns the brand material you already have into context AI agents can use. Give it a website, PDF guide, Figma library, local files, or a Brandcode Studio brand. It produces a portable .brand/ runtime with design tokens, voice rules, provenance, and compliance checks.
Local-first. No account required. The default Core profile exposes 12 tools covering the complete adopt → use → check loop.
Install it for your agent, then ask: “How do I use my brand guidelines with AI?”
# Codex
npx @brandsystem/mcp install --client codex --write
npx @brandsystem/mcp install --client claude-code --write
npx @brandsystem/mcp install --client cline --write
Claude Desktop (one-click): download brandsystem-mcp- .mcpb from the latest GitHub release and double-click it (or drag it into Settings > Extensions). Claude Desktop asks for the folder that holds your .brand/ directory — no Node install or JSON editing needed.
install is a dry run unless you pass --write. Replace claude-code with cline, cursor, windsurf, or claude-desktop as needed. JSON-file targets preserve existing settings; Cline and Codex setup delegate to their official MCP commands so their current schemas remain authoritative. Agents can follow the compact installation guide without reading this entire README.
Already configured? Tell your agent:
Use my existing brand guidelines with AI. Start from this website/PDF/Figma library and show me what needs human confirmation.
AI tools default to category-average output because they have no brand context. Brand guidelines live in PDFs, Figma files, and people's heads — none of which AI tools can read at the moment of creation. The dominant failure mode isn't "broken output"; it's "correct but generic" — output that passes mechanical checks but reads like a competent generalist could have made it.
This MCP server is the authoring half of the "Two MCPs, One Brand" model. It extracts brand identity from live sources, compiles it into a .brand/ directory with structured governance (anti-patterns, proof-point status, voice rules, application rules) plus DTCG tokens, brand-runtime.json, and interaction-policy.json. That directory is the portable brand runtime — the artifact that travels with your brand from surface to surface.
.brand/ directory natively when pointed at a governed repobrand-runtime.json at generation timebrand-report.html / brand-runtime.json) or via a remote MCP connection — see Compatibilitymcp.brandcode.studio/{slug}With brand-runtime.json loaded, agent prompts collapse from 200-400 tokens of inline brand context to just the delta. First output is on-brand. No review bottleneck.
Copy this into .mcp.json (Claude Code), .cursor/mcp.json (Cursor), or Windsurf MCP settings. Codex users can run npx @brandsystem/mcp install --client codex --write instead:
{
"mcpServers": { "brandsystem": { "command": "npx", "args": ["-y", "@brandsystem/mcp"] } } }
For project-level configs committed to a repository, pin a version ("@brandsystem/mcp@ ") so collaborators never auto-run an unreviewed release; npx @brandsystem/mcp install writes a pinned spec for you.
Tell your AI tool:
Run brand_start with client_name="Acme Corp", website_url="https://acme.com", and mode="auto"
That single command extracts colors, fonts, and logo from the website, escalates to rendered or deeper multi-page extraction when the cheap pass is weak, compiles DTCG tokens, generates design-synthesis.json + DESIGN.md, and generates a portable HTML brand report -- all in under 60 seconds.
.brand/
brand.config.yaml ← brand name, source URLs, session state core-identity.yaml ← colors (with roles), fonts, logo specs tokens.json ← DTCG design tokens brand-runtime.json ← single-file brand context for any AI agent interaction-policy.json ← anti-patterns, voice constraints, never-say words design-synthesis.json ← spacing, radius, shadows, component signals DESIGN.md ← portable design brief (agent-readable) brand-report.html ← visual report (paste into any AI chat) assets/logo/ ← extracted logo files (SVG/PNG)
Load brand-runtime.json into any sub-agent's context. First output is on-brand. No per-prompt boilerplate.
Run brand_write for a social-graphic about "Q3 product launch"
The AI now has your full brand context — colors, typography, logo, anti-patterns, voice rules — and generates on-brand content.
Encode the brand once, then drop it into each tool in the format that tool already reads. brand_export writes to .brand/exports/:
| Target | Output | Where it goes |
|---|---|---|
agents-md | AGENTS.md section (between brandsystem:start/end markers) | Project-root AGENTS.md — read by Codex, Cursor, and other AGENTS.md-aware agents |
cursor-rules | brand.mdc with description / globs / alwaysApply: false frontmatter | .cursor/rules/brand.mdc — auto-attached to UI files |
css-variables | :root { --brand-color-*; --brand-font-* } plus a [data-theme="dark"] / prefers-color-scheme: dark block when the brand has a dark palette | Any stylesheet |
tailwind | Tailwind CSS v4 @theme { --color-brand-*; --font-brand-*; --radius-brand-* } | After @import "tailwindcss"; |
shadcn | shadcn/ui :root + .dark variables (--background, --primary, --ring, --radius …) mapped from brand roles | globals.css in a shadcn/ui project |
claude-skill, chat, code, team, email, pdf | Skill file, chat upload, CLAUDE.md snippet, guidelines, summary, PDF guide | Claude skills, AI chats, teammates |
Run brand_export with target="tailwind"
CSS targets are generated from the compiled DTCG tokens; brand strings are validated (hex colors, plausible font names, quoted families) so nothing extracted can break out of a declaration. Instruction targets (agents-md, cursor-rules) carry the provenance notice and keep brand values in a fenced data block.
| Session | What it adds | Command |
|---|---|---|
| 1. Core Identity | Colors, fonts, logo, tokens | brand_start (done above) |
| 2. Visual Identity | Composition, anti-patterns, illustration style | brand_deepen_identity |
| 3. Messaging | Voice, tone, never-say words, brand story | brand_compile_messaging |
| 4. Content Strategy | Personas, journey stages, themes | brand_build_personas |
Each session enriches brand-runtime.json. Stop at any point — Session 1 alone is valuable.
Run brand_brandcode_connect to save on Brandcode Studio
Your brand persists on brandcode.studio. Teammates pull the same brand into their tools. One source of truth.
Session 1: Core Identity -- Extract colors, fonts, and logo from a website or Figma file. Compile into DTCG tokens, a structured design synthesis layer, a portable DESIGN.md, and an HTML report.
Session 2: Visual Identity -- Define composition rules, pattern language, illustration style, and anti-patterns through a guided interview. Anti-patterns become enforceable compliance rules.
Session 3: Messaging -- Audit existing website voice, then define perspective, voice codex (tone, vocabulary, AI-ism detection), and brand story through a guided interview.
Session 4: Content Strategy -- Build buyer personas, journey stages, editorial themes, and a persona x stage messaging matrix.
Each session builds on the previous. Stop anywhere -- you get value immediately.
Local-first MCP flow -- Start from a website or Figma file, build a .brand/ directory locally, and use it immediately in chat or code tools with no account required.
Brandcode Studio-connected flow -- Connect an existing hosted brand from Brandcode Studio, pull the packaged brand into .brand/, and keep it synced over time.
The .brand runtime is the product. Two MCPs serve it:
`@brandsystem/mcp` — Build (this package). Author and compile the .brand runtime locally. Extract from websites, Figma, and PDFs. Compile governance (anti-patterns, proof-point status, voice rules, application rules) plus DTCG tokens, brand-runtime.json, and interaction-policy.json into a single .brand/ directory. Portable, versionable, ready to commit to any repo.
`@brandcode/mcp` — Use (hosted). Connect authorized MCP clients to the live Full Brand Runtime at https://mcp.brandcode.studio/{slug} with Brandcode bearer-key auth. Agents fetch the current runtime, search approved knowledge, check drafts, retrieve package-safe assets, leave append-only review feedback, and, with explicit capture scope, queue taste captures for human review — no per-tool guideline copy, no stale snapshots, no canonical mutation from the MCP. Tagline: *"Your brand, live in every AI tool."*
Same .brand runtime artifact. Two consumption paths. Build authors it; Use serves it.
Phase 0 for Brandcode MCP is locked in specs/brandcode-mcp-phase-0-lock.md as the original 8-tool read/append-only surface. The current hosted implementation adds capture_taste as a scoped contribute-tier tool: it requires explicit capture scope, queues a review candidate for human review, and never promotes canon.
Hosted availability: Brandcode MCP is pre-release and available to approved clients only — it is not yet publicly launched or registry-listed. Brand data on the hosted service is client-owned; feedback is append-only; agent history is scoped and redacted. Deletion and export requests are handled through your Brandcode Studio contact. Until public launch, use @brandsystem/mcp for local build/sync, and Live Mode (brand_brandcode_live) for connected reads that refresh from the hosted runtime within a short cache TTL.
Maintainers can verify a hosted deployment end-to-end with the smoke harness (npm run smoke:hosted-mcp with BRANDCODE_MCP_SMOKE_URL and scoped test keys). It verifies MCP initialize, tools/list, the locked hosted tool order, core hosted tool calls, and read-only insufficient-scope behavior. It never hardcodes keys; mi
只显示了开头部分;其余内容请在仓库中阅读