Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Generate og:image social cards and signed ogmake.com image URLs from your AI assistant.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
OGMAKE_API_KEYค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"ogmake": {
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
],
"env": {
"OGMAKE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add ogmake --env OGMAKE_API_KEY='ใส่ค่าของคุณ' -- npx -y ogmake-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"ogmake": {
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
],
"env": {
"OGMAKE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"ogmake": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
],
"env": {
"OGMAKE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน ogmake.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: OGMAKE_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.2) เข้า registry 27 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Local stdio MCP server for ogmake.com og:image generation. Run it with npx -y ogmake-mcp.
OGMAKE_API_KEY).OGMAKE_API_KEY set: renders template (+ optional params, format, preset, scale, v, bg, font — a Google Fonts family) via the authenticated API and returns its hosted URL plus the image bytes.OGMAKE_API_KEY: renders a watermarked free image from title (+ optional description, site) and returns image bytes only — no hosted URL (the free endpoint never stores one).POST /v1/batch); returns a batch_id immediately. Optional webhookUrl (https) gets a signed batch.completed event. Needs OGMAKE_API_KEY.OGMAKE_API_KEY.template without rendering it.OGMAKE_SIGNING_SECRET + OGMAKE_SIGNING_KEY_ID set: signs the URL locally (HMAC-SHA256) — the signing secret never leaves your machine and is never sent to the model.OGMAKE_PUBLIC_KEY_ID set: builds an unsigned /p/:keyId/:template URL (the key must be marked public and allow-list that template on ogmake.com).og:image/twitter:image meta tag snippet for a given framework (html, hugo, jekyll, rails, laravel, django, wordpress, ghost) and image URL.OGMAKE_API_KEY account. Requires OGMAKE_API_KEY.Every secret (OGMAKE_API_KEY, OGMAKE_SIGNING_SECRET) stays local: it is read from the environment once at startup and is never echoed back in a tool result, error message, or log line.
| Variable | Required for |
|---|---|
OGMAKE_API_KEY | authenticated render_image, render_html, create_batch, get_batch, get_usage |
OGMAKE_BASE_URL | optional — override the API origin (defaults to https://ogmake.com) |
OGMAKE_SIGNING_SECRET | local signing in build_image_url (base64url) |
OGMAKE_SIGNING_KEY_ID | local signing in build_image_url (paired with the secret above) |
OGMAKE_PUBLIC_KEY_ID | unsigned /p URLs in build_image_url |
claude mcp add ogmake --env OGMAKE_API_KEY=og_live_... -- npx -y ogmake-mcp
Or add to .mcp.json (project scope) / ~/.claude.json (user scope); Cursor takes the same block in ~/.cursor/mcp.json:
{
"mcpServers": { "ogmake": { "command": "npx", "args": ["-y", "ogmake-mcp"], "env": { "OGMAKE_API_KEY": "og_live_..." } } } }
Without OGMAKE_API_KEY only list_templates, watermarked free render_image, build_image_url and og_snippet work.
Support: support@ogmake.com · License: MIT
pnpm --filter ogmake-mcp run test # unit tests, 100% coverage
pnpm --filter ogmake-mcp run test:e2e # spawns the packed CLI over stdio against a local wrangler dev pnpm --filter ogmake-mcp run build # tsup bundle -> dist/index.js pnpm --filter ogmake-mcp run pack # build + npm pack -> pack-out/*.tgz
vendor/ holds the SDK and request-signing helper this server bundles, so the repository builds standalone: npm install && npm run build && npm test.