Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Explore Carbon docs, components, tokens, icons, charts, and code examples.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://mcp.carbondesignsystem.com/mcpพิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http carbon https://mcp.carbondesignsystem.com/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"carbon": {
"url": "https://mcp.carbondesignsystem.com/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"carbon": {
"type": "http",
"url": "https://mcp.carbondesignsystem.com/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://mcp.carbondesignsystem.com/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน mcp.carbondesignsystem.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.14.0) เข้า registry 29 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
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.
server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
The Carbon Design System, available to any AI agent.
Carbon MCP is a hosted server that gives AI agents direct access to Carbon's components, icons, charts and documentation through MCP, the open Model Context Protocol standard for connecting AI applications to external tools and data. It runs on IBM Cloud, so any MCP client can connect with a URL and an IBMid sign-in. This repository is where you report issues, request features and get the Carbon Builder skill.
Connect · Carbon Builder skill · Tools · Coverage · Report an issue
Terms of Use for the hosted service · Apache-2.0 for the Carbon Builder skill
Carbon MCP makes any agentic AI application an instant expert in the Carbon Design System, so teams deliver consistent, high-quality user experiences with greater speed.
| Benefit | What it means |
|---|---|
| Direct access to Carbon | AI agents query the Carbon Design System for the context they need: colors, typography, component source, usage guidelines. |
| Better generated code | Code examples and documentation from Carbon MCP let AI tools generate high-fidelity Carbon UI code that follows design and development practice. |
| One answer for the whole team | Designers, developers and PMs get consistent answers and examples from a shared source of truth, which reduces drift and rework. |
The Carbon MCP server is hosted remotely at https://mcp.carbondesignsystem.com/mcp. Add it to your client as a remote MCP server and sign in with your IBMid when asked.
Clients that read an mcp.json file use this minimal configuration:
{
"mcpServers": { "carbon-mcp": { "type": "streamable-http", "url": "https://mcp.carbondesignsystem.com/mcp" } } }
| Client | Setup |
|---|---|
| IBM Bob | Onboarding: IBM Bob |
| Claude Desktop | Onboarding: Claude Desktop |
| Cursor | Onboarding: Cursor |
| Figma Make | Onboarding: Figma Make |
| Claude Code, VS Code, GitHub Copilot and other clients | Onboarding: Other clients |
| Clients without OAuth | Token and session ID |
The full onboarding and setup guide covers what to have before you begin, the prerequisites, connecting to the server and every client above.
If your client does not support OAuth discovery, you can authenticate with a token and session ID instead.
Carbon Builder is a portable AI skill that turns an agent into an expert Carbon Design System engineer. It retrieves live component examples, variants, props and documentation from the Carbon MCP server, generates Carbon React and Web Components code, and builds Carbon Charts across every supported framework.
The server supplies the facts; the skill tells the agent when to ask for them and how to turn the answers into working code. Together they produce better results than either alone.
Install it with the skills CLI, choosing the line for your agent:
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a bob
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a claude-code npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a cursor npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a codex npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a github-copilot npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a gemini-cli
The CLI supports many more agents; see skills.sh. The skill has its own page at skills.sh/carbon-design-system/carbon-mcp/carbon-builder.
To install without the CLI, download carbon-builder.zip, unzip it, and copy the carbon-builder/ folder to your client's skills location. The skill README lists the path for each client, and the onboarding guide walks through it in Set up your AI client and install the Carbon Builder skill.
| Tool | What it returns |
|---|---|
code_audit | A check of your code against Carbon guidelines covering design tokens, component usage, accessibility, layout and best practices. |
code_search | Carbon React and Web Components code examples, icons and pictograms, including complete example application files. |
docs_search | Carbon Design System and IBM Products documentation, such as component guidance, usage, accessibility and reference material. |
get_charts | Carbon Charts code examples for React, Angular, Vue, Svelte, Vanilla JS and HTML. |
labs_search | Code examples, props, events and usage docs for Carbon Labs experimental components. |
Carbon MCP continues to evolve. Current coverage:
| Corpus | Examples | What is indexed |
|---|---|---|
@carbon/react | Button, Tabs, TextInput | Code examples and documentation, multiple variants per component, complete props and imports |
@carbon/web-components | button, tabs, text-input | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon for IBM Products | Tearsheets, PageHeader | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon Icons and Pictograms | Settings, User, UserAvatarFilled | Code examples and documentation, usage |
@carbon/ai-chat | basic, custom-element, history | Code examples and documentation, full code examples, complete props and imports |
@carbon/charts | Chart types, with links to demos | Chart type descriptions, links to demos, full code examples, complete props and imports |
@carbon-labs/* | React: AnimatedHeader, Processing, Resizer, UIShell, What's New | Code examples and documentation for preview candidates, multiple variants per component, complete props and imports |
The Concepts page describes the content in more detail.
| Document | Covers |
|---|---|
| Overview | Carbon MCP overview and key benefits |
| Concepts | The Carbon MCP tools and content coverage |
| Onboarding and setup | Authentication, connecting common MCP clients, installing the Carbon Builder skill |
| Prompts | Prompting guidance and best practices |
| Token conservation | Keeping
ตัดมาแค่ช่วงต้น อ่านต่อใน repo