Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
AI media built for production. AI orchestration for image, video and audio, in any AI app.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://mcp.eachlabs.ai/mcpพิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http eachlabs https://mcp.eachlabs.ai/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"eachlabs": {
"url": "https://mcp.eachlabs.ai/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"eachlabs": {
"type": "http",
"url": "https://mcp.eachlabs.ai/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://mcp.eachlabs.ai/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน eachlabs.ai แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.3.0) เข้า registry 8 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Generate and edit images, video, music and voice with each::labs models, and run your organization's each::labs workflows, by asking in a conversation. The plugin also cuts, crops, resizes and converts media, and shows small interactive cards inside the chat where you upload a file, adjust a model's settings or pick one of several results.
It works in Claude Chat (claude.ai), Claude Desktop, Cowork and Claude Code, and in the Codex app, Codex CLI and Grok Build. You sign in with your each::labs account; there is no API key to paste.
The plugin is installed from its own marketplace, eachlabs/plugin. The same repository serves Claude, Codex and Grok Build.
| Where | How |
|---|---|
| Claude Chat, Claude Desktop | Customize, Plugins, Add marketplace, enter eachlabs/plugin, then add the eachlabs plugin |
| Claude Code | claude plugin marketplace add eachlabs/plugin, then claude plugin install eachlabs@eachlabs |
| Codex CLI | codex plugin marketplace add eachlabs/plugin, then codex plugin add eachlabs@eachlabs, then codex mcp login eachlabs |
| Codex app | Add the marketplace with the CLI command above, then install the eachlabs plugin from Plugins |
| Grok Build | grok plugin install eachlabs/plugin --trust, then sign in when Grok opens the each::labs page in your browser |
Team and Enterprise. An Owner can add the connector https://mcp.eachlabs.ai/mcp for the whole organization. Each member adds the plugin marketplace themselves, because organization-wide plugin sync on claude.ai accepts only the organization's own private repositories. Each member then signs in with their own each::labs account. That account must belong to the each::labs organization that should pay for the runs; a member who signs in with a personal account is billed there instead.
Updating. In Claude Chat and Claude Desktop a plugin installed from the marketplace updates automatically, with no restart. In Claude Code, run claude plugin update eachlabs@eachlabs, then /reload-plugins. In Codex, run codex plugin marketplace upgrade. In Grok Build, run grok plugin update eachlabs.
After installing, open the plugin's Connectors tab and choose Connect. A browser window opens on each::labs: sign in and pick the organization to use. Every model run and workflow run is billed to that organization, the same way as a run from the each::labs dashboard or API.
In Grok Build, the browser opens the first time the plugin is used. To sign in again, open /mcps and press i on eachlabs.
Ask in your own words. Claude chooses the model, reads its inputs and runs it. Some examples:
| Task | Example |
|---|---|
| Images | "Generate a product photo of a white sneaker on a marble table, soft studio light." |
| Images | "Give me 4 variants of a fantasy trading card with a fire dragon, I want to pick one." |
| Image editing | "Remove the background from this photo." "Turn this portrait into a watercolor painting." |
| Video | "Turn this image into a 5-second clip where the camera slowly pushes in." |
| Video | "Make a 10-second video of waves hitting a lighthouse at sunset." |
| Music | "Compose a 30-second upbeat lo-fi beat for an intro." |
| Voice | "Read this paragraph aloud in a calm male voice." "Transcribe this interview." |
| Cutting and cropping | "Cut the first 10 seconds of this video." "Crop this video to 9:16 for a story." |
| Converting | "Convert this clip to a GIF." "Extract the audio from this video as mp3." |
| Workflows | "Which workflows do we have?" "Run our product clip workflow with this photo." |
When a task has several steps, such as restyling a photo and then animating it, Claude first looks for one of your organization's workflows that does the whole job, and runs it if one fits.
In the chat apps, Claude Chat (claude.ai), Claude Desktop and the Codex app, some answers come with a small card instead of plain text. Terminals such as Claude Code, Codex CLI and Grok Build show the same results as text.
| You see | When |
|---|---|
| A file picker with "Choose a photo" and a progress bar | A model needs a file you have not linked. One card takes a whole set of files, for example all the screenshots for a slideshow. The files go from your browser straight to each::labs storage |
| A form with the model's settings and a Run button | You ask to adjust settings, or a run has options worth choosing first |
| The result: the image, a video or audio player, and download buttons | Every run that produces media. A file in several formats has one button per format. A workflow's outputs show together as a gallery |
| Several results to choose from, and a "Use this variant" button | You asked for several variants. Click between them as often as you like, then press "Use this variant"; Claude continues with that one, and the choice is final |
| A Compare button under an edited image or video | The result is an edit of a file you gave. Drag the handle to compare before and after |
| A timeline with two handles, or a rectangle on the first frame | You want to cut a clip or crop a frame and have not given exact numbers |
| A workflow's inputs as a form, with a file picker for each photo, video or audio input | A workflow needs inputs you have not given |
After you press a card's button, Claude continues on its own. You do not need to type anything. A card you already used stays locked on your choice when you come back to the conversation later.
After the first run of a model in a conversation, Claude ends its reply with a short Adjust generation settings line naming a few of that model's settings. Ask to change any of them and the settings form appears.
| Problem | What to do |
|---|---|
| A new card or an update does not show | Start a new conversation. If it still does not show, reload claude.ai or restart Claude Desktop |
| A card says it takes fewer files than you have | Tell Claude how many files you have, or ask for another card for the rest |
| Tools fail with a sign-in or permission error | Open the plugin's Connectors tab, disconnect, and connect again |
| A card does not appear, only text | Check you are in Claude Chat or Claude Desktop; Claude Code shows text only. Ask Claude to show the result again |
| A card says a file is no longer available | Ask Claude to show the file again; it fetches a fresh copy of the result |
| The wrong organization is billed | Disconnect the connector and sign in again, picking the right organization |
The plugin connects to one address, https://mcp.eachlabs.ai/mcp, and needs only an each::labs sign-in: no API key, and no scripts or hooks run on your machine.
Your prompts and input file links go to the each::labs MCP server, which runs them on the each::labs API under the organization you picked at sign-in. A file you add on a card goes from your browser to each::labs storage and does not pass through Claude. The plugin stores nothing itself.
How the repository is laid out, how the skills are generated and how a version is released is in CONTRIBUTING.md.