Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Design-style library for AI agents: find a style by use or mood, preview it, apply its spec.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
Authorizationค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http curio https://mcp.designbycurio.com/mcp --header 'Authorization: ใส่ค่าของคุณ'เติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"curio": {
"url": "https://mcp.designbycurio.com/mcp",
"headers": {
"Authorization": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"curio": {
"type": "http",
"url": "https://mcp.designbycurio.com/mcp",
"headers": {
"Authorization": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
Authorization ความลับ HTTP headerค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
server ให้ล็อกอินก่อนจึงจะแสดงรายการเครื่องมือ
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน designbycurio.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตอบกลับใน 71 ms (HTTP 401)
ประกาศวิธีล็อกอินแบบ OAuth ให้โปรแกรม AI พาไปล็อกอินเอง
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: Authorization
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.5.0) เข้า registry 17 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Connect your AI to Curio — a design-style library built for AI agents. Thousands of design styles (real design movements, brands, cultural traditions), each with a machine-readable spec your agent can apply directly to slides, websites, and products.
https://mcp.designbycurio.com/mcp (streamable HTTP)| Tool | What it does | Cost |
|---|---|---|
search_styles | Keyword search (English or Chinese), with filters: use (what you're making), mood, kind (where the style comes from), color, era, region, dark | free |
list_styles | Browse / paginate with the same filters | free |
get_style | Metadata + cover image for one style; pass scenes for screenshots of real layouts (slide-cover, slide-content, slide-data, dashboard, price, article, or all) | free |
get_style_spec | Full design spec (DESIGN.md) for a style you've unlocked; for a locked style it returns the cost, your balance and a link to buy credits | free |
unlock_style | Unlock a style for good and return its spec — your AI asks you first | 1 credit, once per style |
get_balance | Your credit balance, how many styles you've unlocked, and a link to buy more | free |
Your AI never spends a credit on its own: get_style_spec only reads, and unlock_style is meant to be called after you agree. Unlocking a style you already own costs nothing.
gemini extensions install https://github.com/designbycurio/curio-mcp-extension
claude mcp add --transport http curio https://mcp.designbycurio.com/mcp
Settings → Connectors → Add custom connector → https://mcp.designbycurio.com/mcp
The button opens Cursor and adds Curio for you. Or add it to ~/.cursor/mcp.json yourself — Cursor opens a browser to sign in on first use:
{
"mcpServers": { "curio": { "url": "https://mcp.designbycurio.com/mcp" } } }
The button opens VS Code and installs Curio in your user MCP config. Or add it to .vscode/mcp.json yourself — VS Code opens a browser to authorize on first connect:
{
"servers": { "curio": { "type": "http", "url": "https://mcp.designbycurio.com/mcp" } } }
codex mcp add curio --url https://mcp.designbycurio.com/mcp
kimi mcp add --transport http --auth oauth curio https://mcp.designbycurio.com/mcp
Settings → Apps & Connectors → Developer mode → add https://mcp.designbycurio.com/mcp.
Some clients can't open a browser to sign in — they only have a field for a token (ZCode, WorkBuddy, Qoder, Trae, Cherry Studio, Antigravity, Manus…). For those, create a personal API key and send it as a request header. Clients that can sign in with OAuth don't need one.
curio_sk_ and is shown only once.Authorization: Bearer curio_sk_…
Most clients take a JSON block like this. Some name the address field serverUrl or httpUrl, or ask for a transport type — pick streamable HTTP.
{
"mcpServers": { "curio": { "url": "https://mcp.designbycurio.com/mcp", "headers": { "Authorization": "Bearer curio_sk_…" } } } }
Claude Code takes the header on the command line:
claude mcp add --transport http curio https://mcp.designbycurio.com/mcp --header "Authorization: Bearer curio_sk_…"
Codex reads the key from an environment variable, so it never sits in a config file:
export CURIO_API_KEY=curio_sk_…
codex mcp add curio --url https://mcp.designbycurio.com/mcp --bearer-token-env-var CURIO_API_KEY
VS Code can prompt for the key and store it securely instead of writing it into mcp.json:
{
"inputs": [ { "type": "promptString", "id": "curio-key", "description": "Curio API key", "password": true } ], "servers": { "curio": { "type": "http", "url": "https://mcp.designbycurio.com/mcp", "headers": { "Authorization": "Bearer ${input:curio-key}" } } } }
Two kinds of key. A read-only key (the default) can search, browse and fetch styles you've already unlocked, and never spends credits. Tick Allow it to spend credits to unlock styles when you create a key and your AI may also call unlock_style — after asking you, same as over OAuth. Treat a key like a password: don't paste it into a chat or commit it to a repo. Revoke it any time on the same page; clients using it stop working within 30 seconds.
Website · Gallery · Pricing · Docs · Privacy · Terms · support@designbycurio.com