Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
License-first federated image search with attribution, dimensions, and download tooling.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
UNSPLASH_ACCESS_KEY, PEXELS_API_KEY, PIXABAY_API_KEY, BRAVE_API_KEY, SERPAPI_KEYค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"webfetch": {
"command": "npx",
"args": [
"-y",
"getwebfetch-mcp"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"PEXELS_API_KEY": "ใส่ค่าของคุณ",
"PIXABAY_API_KEY": "ใส่ค่าของคุณ",
"BRAVE_API_KEY": "ใส่ค่าของคุณ",
"SERPAPI_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add webfetch --env UNSPLASH_ACCESS_KEY='ใส่ค่าของคุณ' --env PEXELS_API_KEY='ใส่ค่าของคุณ' --env PIXABAY_API_KEY='ใส่ค่าของคุณ' --env BRAVE_API_KEY='ใส่ค่าของคุณ' --env SERPAPI_KEY='ใส่ค่าของคุณ' -- npx -y getwebfetch-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"webfetch": {
"command": "npx",
"args": [
"-y",
"getwebfetch-mcp"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"PEXELS_API_KEY": "ใส่ค่าของคุณ",
"PIXABAY_API_KEY": "ใส่ค่าของคุณ",
"BRAVE_API_KEY": "ใส่ค่าของคุณ",
"SERPAPI_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"webfetch": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"getwebfetch-mcp"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"PEXELS_API_KEY": "ใส่ค่าของคุณ",
"PIXABAY_API_KEY": "ใส่ค่าของคุณ",
"BRAVE_API_KEY": "ใส่ค่าของคุณ",
"SERPAPI_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub ashlrai ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: UNSPLASH_ACCESS_KEY, PEXELS_API_KEY, PIXABAY_API_KEY, BRAVE_API_KEY, SERPAPI_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.5) เข้า registry 6 เดือนที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
License-first image search and download for any MCP-speaking agent.
Every result ships with a structured license tag (CC0, CC_BY, CC_BY_SA, platform-license tags, EDITORIAL_LICENSED, ...), a confidence score, and a ready-to-render attribution line. Covers 25 providers, with 19 in the default set — no API key needed for Wikimedia Commons, Openverse, iTunes, MusicBrainz CAA, NASA, The Met, Library of Congress, Internet Archive, Wellcome Collection, and Burst.
Most image-search tools give you URLs. webfetch gives you URLs plus the legal metadata needed to classify them as open/commercial reusable, platform-license, editorial-only, or exploration-only. The MCP layer exposes seven composable tools — search, specialize by artist/album, download with a hash, resolve an arbitrary URL's license, reverse-image-search, and triage a source page — so an agent can go from prompt to attributed asset in a single conversation turn.
attributionLine string, ready for a tooltip or credits footercurl -fsSL https://raw.githubusercontent.com/ashlrai/webfetch/main/install/install.sh | bash
Installs bun if missing, builds the server, symlinks webfetch onto $PATH, and merges the MCP block into ~/.claude/settings.json.
Add to ~/.claude/settings.json:
{
"mcpServers": { "webfetch": { "command": "bun", "args": ["run", "/path/to/webfetch/packages/mcp/src/index.ts"] } } }
Add to ~/.cursor/mcp.json:
{
"mcpServers": { "webfetch": { "command": "bun", "args": ["run", "/path/to/webfetch/packages/mcp/src/index.ts"] } } }
Paste into Cline's MCP settings JSON (VSCode sidebar → Cline → MCP Servers):
{
"mcpServers": { "webfetch": { "command": "bun", "args": ["run", "/path/to/webfetch/packages/mcp/src/index.ts"], "disabled": false, "autoApprove": ["search_images", "search_artist_images", "search_album_cover", "probe_page"] } } }
Replace /path/to/webfetch with your clone path (default after installer: ~/.webfetch/repo).
| Tool | Description | Key params |
|---|---|---|
search_images | Federated search across 25 providers. Returns the top candidates with license + attribution. Does not download. For large batches, use CLI handoff: webfetch batch --jsonl. | query, providers[], licensePolicy, minWidth, minHeight |
search_artist_images | Specialized artist image search with kind-aware provider routing: portrait, album, logo, performing. | artist, kind, providers[] |
search_album_cover | Canonical album artwork via MusicBrainz CAA + iTunes + Spotify. Results are EDITORIAL_LICENSED. | artist, album |
download_image | Download a URL to local disk cache. 20 MB cap, content-type guard, SHA-256 hash, host blocklist enforced. | url, maxBytes, cacheDir |
fetch_with_license | Resolve license for any URL via host heuristics + page metadata ( , dc.rights, OG tags). | url, probe (also download bytes) |
find_similar | Reverse-image-search a reference URL. Requires SERPAPI_KEY. Returns leads — verify before shipping. | url, providers[] |
probe_page | Enumerate every on a webpage with inferred dimensions and per-image heuristic license. Respects robots.txt. | url, respectRobots |
Results carry one of: CC0 · PUBLIC_DOMAIN · CC_BY · CC_BY_SA · UNSPLASH_LICENSE · PEXELS_LICENSE · PIXABAY_LICENSE · EDITORIAL_LICENSED · PRESS_KIT_ALLOWLIST · UNKNOWN (rejected by default). Use open-only when platform/editorial licenses are not acceptable.
Migration note: Unsplash, Pexels, and Pixabay are no longer reported as CC0. Agents should treat UNSPLASH_LICENSE, PEXELS_LICENSE, and PIXABAY_LICENSE as platform-license results, not Creative Commons/public domain results.
MCP tools are meant for interactive agent calls. For hundreds or thousands of queries, have the agent hand off to the CLI:
webfetch batch --file queries.txt --jsonl --continue-on-error --candidates 3
Input lines are query or query provider-a,provider-b. Each output line contains index, query, status, candidateCount, candidates, top, downloads, and provider diagnostics.
| Provider | Env var | Free tier? |
|---|---|---|
| Wikimedia Commons | — | Yes (no key) |
| Openverse | — | Yes (no key) |
| Unsplash | UNSPLASH_ACCESS_KEY | Demo key rate-limited |
| Pexels | PEXELS_API_KEY | Free tier available |
| Pixabay | PIXABAY_API_KEY | Free tier available |
| Spotify | SPOTIFY_CLIENT_ID + SPOTIFY_CLIENT_SECRET | Dev app required |
| Brave Search | BRAVE_API_KEY | Free tier available |
| SerpApi | SERPAPI_KEY | Required for find_similar |
| Bright Data managed browser | BRIGHTDATA_API_TOKEN | Optional server/cloud fallback |
MusicBrainz CAA and iTunes require no key. Missing keys cause the provider to skip gracefully — other providers still respond.
Try these in Claude Code or Cursor after installing:
Find me a CC-licensed portrait of Miles Davis I can use on an album liner page.
Search for album artwork for "Kind of Blue" by Miles Davis and show me the attribution line.
Probe the page at https://commons.wikimedia.org/wiki/File:Miles_Davis.jpg and tell me if I can use it commercially.