ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที รีวิวและบัญชีผู้ใช้จะมาในขั้นถัดไป
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน

Carbon MCP

โดย carbon-design-systemรุ่น 1.14.0i★ –iรันบนคลาวด์
ชื่อใน registrycom.carbondesignsystem.mcp/carbon-mcp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Explore Carbon docs, components, tokens, icons, charts, and code examples.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: รันบนคลาวด์
  • ช่องทาง (transport): Streamable HTTP
  • หมวด: ออกแบบ ภาพ และเสียง

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ต้องเตรียมก่อน

  • รันบนคลาวด์ไม่ต้องลงโปรแกรมเพิ่ม ต่อผ่านอินเทอร์เน็ตได้เลย

คุณใช้แอปไหน

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:

  1. เปิด Settings → Connectors
  2. กด Add custom connector
  3. วางที่อยู่ด้านล่างแล้วกด Add
  4. ถ้าให้ล็อกอิน ให้ล็อกอินกับผู้ทำ
SettingsConnectors1+ Add2https://…3
https://mcp.carbondesignsystem.com/mcp

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add --transport http carbon https://mcp.carbondesignsystem.com/mcp

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "carbon": {
      "url": "https://mcp.carbondesignsystem.com/mcp"
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "carbon": {
      "type": "http",
      "url": "https://mcp.carbondesignsystem.com/mcp"
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:

  1. เปิด ChatGPT บนเว็บ → Settings → Connectors (Apps)
  2. กด Create หรือ Add (บางแพ็กเกจต้องเปิด Developer mode ใน Advanced ก่อน)
  3. วางที่อยู่ด้านล่าง ตั้งชื่อ แล้วบันทึก
  4. ถ้าให้ล็อกอิน ให้ล็อกอินกับผู้ทำ
SettingsConnectors1+ Create2https://…3
https://mcp.carbondesignsystem.com/mcp

ชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569

  • ✓ ผ่าน

    ตัวตนผู้ทำตรงกับ repo

    ชื่อใน registry ยืนยันโดเมน mcp.carbondesignsystem.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)

  • … ยังไม่ตรวจ

    ยังมีคนดูแล

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    มีสัญญาอนุญาต (license)

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    endpoint ตอบ

    ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป

  • … ยังไม่ตรวจ

    ล็อกอินแบบ OAuth

    ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

  • ดาวมากกว่า 0% ของอีก 2760 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 49% ของอีก 2760 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 2760 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Carbon MCP ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 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

Figma Context MCP

โดย GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

รันบนเครื่อง★ 16,165MITอัปเดต 5 เดือนที่ผ่านมา
ติดตั้ง

Claude Real Video

โดย HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

รันบนเครื่อง★ 2,284MITอัปเดต 2 เดือนที่ผ่านมา
ติดตั้ง

Figma MCP Server

โดย figma

server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma

รันบนคลาวด์★ 2,152อัปเดต 13 เดือนที่ผ่านมา
ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

Carbon MCP

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


Why Carbon MCP

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.

BenefitWhat it means
Direct access to CarbonAI agents query the Carbon Design System for the context they need: colors, typography, component source, usage guidelines.
Better generated codeCode 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 teamDesigners, developers and PMs get consistent answers and examples from a shared source of truth, which reduces drift and rework.

Connect

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" } } }

ClientSetup
IBM BobOnboarding: IBM Bob
Claude DesktopOnboarding: Claude Desktop
CursorOnboarding: Cursor
Figma MakeOnboarding: Figma Make
Claude Code, VS Code, GitHub Copilot and other clientsOnboarding: Other clients
Clients without OAuthToken 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.

Token and session ID

If your client does not support OAuth discovery, you can authenticate with a token and session ID instead.

  1. Generate a token and session ID.
  2. Copy your credentials and add them to your Carbon MCP configuration.

Pair it with the Carbon Builder skill

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.

Tools

ToolWhat it returns
code_auditA check of your code against Carbon guidelines covering design tokens, component usage, accessibility, layout and best practices.
code_searchCarbon React and Web Components code examples, icons and pictograms, including complete example application files.
docs_searchCarbon Design System and IBM Products documentation, such as component guidance, usage, accessibility and reference material.
get_chartsCarbon Charts code examples for React, Angular, Vue, Svelte, Vanilla JS and HTML.
labs_searchCode examples, props, events and usage docs for Carbon Labs experimental components.

Coverage

Carbon MCP continues to evolve. Current coverage:

CorpusExamplesWhat is indexed
@carbon/reactButton, Tabs, TextInputCode examples and documentation, multiple variants per component, complete props and imports
@carbon/web-componentsbutton, tabs, text-inputCode examples and documentation, multiple variants per component, complete props and imports
Carbon for IBM ProductsTearsheets, PageHeaderCode examples and documentation, multiple variants per component, complete props and imports
Carbon Icons and PictogramsSettings, User, UserAvatarFilledCode examples and documentation, usage
@carbon/ai-chatbasic, custom-element, historyCode examples and documentation, full code examples, complete props and imports
@carbon/chartsChart types, with links to demosChart type descriptions, links to demos, full code examples, complete props and imports
@carbon-labs/*React: AnimatedHeader, Processing, Resizer, UIShell, What's NewCode examples and documentation for preview candidates, multiple variants per component, complete props and imports

The Concepts page describes the content in more detail.

Documentation

DocumentCovers
OverviewCarbon MCP overview and key benefits
ConceptsThe Carbon MCP tools and content coverage
Onboarding and setupAuthentication, connecting common MCP clients, installing the Carbon Builder skill
PromptsPrompting guidance and best practices

| Token conservation | Keeping

ตัดมาแค่ช่วงต้น อ่านต่อใน repo

ถาม PopNx