Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Photos in: a 3D model at the object's real size and its metadata as JSON, for any kind of object.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
THICKEN_VISION_URL, THICKEN_VISION_KEY, THICKEN_VISION_MODELS, GOOGLE_BOOKS_API_KEYค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"thicken": {
"command": "npx",
"args": [
"-y",
"thicken",
"mcp"
],
"env": {
"THICKEN_VISION_URL": "ใส่ค่าของคุณ",
"THICKEN_VISION_KEY": "ใส่ค่าของคุณ",
"THICKEN_VISION_MODELS": "ใส่ค่าของคุณ",
"GOOGLE_BOOKS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add thicken --env THICKEN_VISION_URL='ใส่ค่าของคุณ' --env THICKEN_VISION_KEY='ใส่ค่าของคุณ' --env THICKEN_VISION_MODELS='ใส่ค่าของคุณ' --env GOOGLE_BOOKS_API_KEY='ใส่ค่าของคุณ' -- npx -y thicken mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"thicken": {
"command": "npx",
"args": [
"-y",
"thicken",
"mcp"
],
"env": {
"THICKEN_VISION_URL": "ใส่ค่าของคุณ",
"THICKEN_VISION_KEY": "ใส่ค่าของคุณ",
"THICKEN_VISION_MODELS": "ใส่ค่าของคุณ",
"GOOGLE_BOOKS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"thicken": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"thicken",
"mcp"
],
"env": {
"THICKEN_VISION_URL": "ใส่ค่าของคุณ",
"THICKEN_VISION_KEY": "ใส่ค่าของคุณ",
"THICKEN_VISION_MODELS": "ใส่ค่าของคุณ",
"GOOGLE_BOOKS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
THICKEN_VISION_URL envTHICKEN_VISION_MODELS envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub bikemeardsley ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: THICKEN_VISION_KEY, GOOGLE_BOOKS_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.3.0) เข้า registry เมื่อวานซืน
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Photos in. Out comes the object: its 3D model and its metadata.
thicken turns photos of a real object into a GLB model at its real size and its metadata as JSON, read off the object by vision models and looked up in public catalogs. What it knows about each kind of object lives in a profile: a few come with thicken, and you can add your own.
In each, the photos going in and the model coming out, with its metadata, like the one below. The logo above is a thicken model too, made by its lettering profile: thicken lettering thicken .
The other half: its metadata. Part of the first one's, a graded Giannis Antetokounmpo card:
{
"profile": "slab", "holder": "cgc", "grader": "cgc", "cert": "6072896005", "widthMm": 80.5, "heightMm": 135, "depthMm": 7.5, "read": { "grade": "9", "gradeName": "MINT", "autoGrade": "10", "autoGradeName": "AUTO", "signed": "G. ANTETOKOUNMPO, 8/2/25", "name": "Giannis Antetokounmpo", "year": "2024-25", "maker": "Panini", "set": "Court Kings Basketball", "number": "#5", "variant": "Blank Slate" }, "readBy": { "grade": "agreed", "autoGrade": "agreed", "set": "disputed" }, "inside": { "card": { "widthMm": 63.5, "heightMm": 88.9, "corners": "square", "foil": "none" }, "label": { "widthMm": 66.4, "heightMm": 26.9 } } }
The grader and certificate number come from the label's QR code; the vision models read the rest off the slab. What each profile records is in the table of profiles, and every field is described in USAGE.md.
npm install -g thicken # Node 22.18 or later; or npx thicken …
thicken photo.jpg # it works out what it is: a code on it, or the vision models thicken book cover.heic back.heic spine.heic thicken --isbn 9780061120084 # no photo: the cover and size from Open Library thicken slab front.jpg back.jpg thicken card front.jpg back.jpg --pt 130 # a thick patch card thicken badge badge.png --width 50 # cut-out artwork, extruded thicken lettering thicken # the logo thicken batch ~/Pictures/books --preview # a model per photo, PDF, video or folder thicken profiles --json # each profile's name, about and photo-search phrases
Each run writes .glb and .json beside the first picture, and with --preview a picture of both sides. Photos straight on and cropped work as they are; uncropped photos, angled shots and video need a vision roster, any OpenAI-compatible endpoint (Vision). As a library: import { thicken } from 'thicken', then thicken(files, options) gives the GLB's bytes and the sidecar.
thicken is an MCP server too (thicken mcp), with an Agent Skill that tells the agent when and how to use it: ask for a model of the book on your desk, and the agent makes it. In Claude Code:
/plugin marketplace add bikemeardsley/thicken
/plugin install thicken@thicken
Or for any MCP client, npx -y thicken mcp on stdio. Codex, Copilot, Cursor, Antigravity, Gemini CLI and the rest are in USAGE.md.
<img src=".github/flow.svg" width="820" alt="Photos, a video, words or an ISBN go in; thicken matches them to a profile, processes them (the vision models find each face, cut it out and straighten it, and read what's printed), builds the object at its real size, and writes a GLB model and a J
ตัดมาแค่ช่วงต้น อ่านต่อใน repo