Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Zero-auth MCP: image optimize, cited storage/format data, and dev utilities LLMs get wrong.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://mcp.cleanor.app/mcpเปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"cleanor": {
"command": "npx",
"args": [
"-y",
"@cleanor/mcp"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http cleanor https://mcp.cleanor.app/mcpclaude mcp add cleanor -- npx -y @cleanor/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"cleanor": {
"url": "https://mcp.cleanor.app/mcp"
}
}
}วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"cleanor": {
"command": "npx",
"args": [
"-y",
"@cleanor/mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"cleanor": {
"type": "http",
"url": "https://mcp.cleanor.app/mcp"
}
}
}วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"cleanor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@cleanor/mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://mcp.cleanor.app/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน cleanor.app แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.6.1) เข้า registry 4 เดือนที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
A hosted, zero-auth MCP server with 22 tools: optimize and convert images, generate QR codes, and run the deterministic dev utilities LLMs get wrong.
No API key. No signup. No OAuth. Point any Model Context Protocol client at one URL and 22 tools appear, all read-only and safe to hand to an autonomous agent.
| Streamable HTTP endpoint | https://mcp.cleanor.app/mcp |
| npm package (stdio) | @cleanor/mcp |
| Official MCP Registry | app.cleanor/cleanor |
| Homepage | cleanor.app/mcp |
| Auth | none |
| Tools | 22 |
| Version | 0.6.0 |
Pick your client. Every option below points at the same hosted server, so there is nothing to build, install or key.
claude mcp add --transport http cleanor https://mcp.cleanor.app/mcp
Then run claude mcp list to confirm it connected. Full walkthrough: docs/add-an-mcp-server-to-claude-code.md.
Add to .cursor/mcp.json (per project) or ~/.cursor/mcp.json (global):
{
"mcpServers": { "cleanor": { "url": "https://mcp.cleanor.app/mcp" } } }
Run code --add-mcp '{"name":"cleanor","type":"http","url":"https://mcp.cleanor.app/mcp"}', or add the server to .vscode/mcp.json in the workspace:
{
"servers": { "cleanor": { "type": "http", "url": "https://mcp.cleanor.app/mcp" } } }
Open Settings, then Connectors, then "Add custom connector", and paste the endpoint:
https://mcp.cleanor.app/mcp
Or run the server locally over stdio from claude_desktop_config.json:
{
"mcpServers": { "cleanor": { "command": "npx", "args": ["-y", "@cleanor/mcp"] } } }
The npm build is the same tool registry compiled for Node. It uses sharp (an optional dependency) for local image encoding; the other 21 tools need nothing.
The endpoint speaks the MCP Streamable HTTP transport, so you can drive it with curl or any HTTP client:
curl -s https://mcp.cleanor.app/mcp \
-H 'content-type: application/json' \ -H 'accept: application/json, text/event-stream' \ -d '{"jsonrpc":"2.0","id":1,"method":"initialize", "params":{"protocolVersion":"2025-06-18","capabilities":{}, "clientInfo":{"name":"curl","version":"1"}}}'
There is also a plain REST surface for non-MCP callers: GET /v1/capabilities (feature detection, machine-readable tool list) and POST /v1/optimize (one image in, optimized bytes out).
22 tools, every one of them carrying an input and an output schema, so a client gets typed structuredContent back and not just a wall of text.
| Tool | What it does | Key params | |||
|---|---|---|---|---|---|
optimize_image | Fetches an image from a public URL and re-encodes it smaller. Returns the optimized image plus before and after byte counts. Input capped at 25 MB. | image_url (required), format (webp \ | avif \ | jpeg, default webp), width (16 to 4096 px, optional), quality (1 to 100, default 80) | |
placeholder_image | Dependency-free SVG placeholder at any size, with a label and custom colors. | width (default 600), height (default 400), bg, color, text | |||
qr_code | Encodes text or a URL as a crisp SVG QR code you can paste anywhere. | text (required, up to 2000 chars), ecc (L \ | M \ | Q \ | H, default M), size (64 to 1024, default 320) |
| Tool | What it does | Key params | ||
|---|---|---|---|---|
storage_capacity | How many photos or minutes of video actually fit in a storage tier, corrected for real OS and filesystem overhead. Returns a per-format breakdown. | storage_gb (required, 1 to 4096), content (photos \ | video, default photos) | |
image_format_savings | How much smaller WebP, AVIF or JPEG XL are than JPEG at matched perceptual quality, from a controlled benchmark on the 24-image Kodak suite. Also reports the HEIC conversion tax. | format (webp \ | avif \ | jxl, default avif), quality (web = SSIM 0.95, high = SSIM 0.98, default web) |
The operations an LLM is unreliable at: hashing, counting, radix math, timezones. Pure compute, no network, no state.
| Tool | What it does | Key params | ||||
|---|---|---|---|---|---|---|
hash | SHA-1/256/384/512 hex digest of text. MD5 is deliberately not offered. | input (required), algorithm (default sha-256) | ||||
hmac | Keyed HMAC signature, hex or Base64. For signing and verifying webhooks. | message (required), secret (required), algorithm (default sha-256), encoding (hex \ | base64) | |||
uuid | UUID v4 (random) or v7 (time-sortable, the better database key). | version (v4 \ | v7, default v4), count (1 to 100) | |||
base64 | Base64 encode or decode, UTF-8 safe, optional URL-safe alphabet. | input (required), mode (encode \ | decode), url_safe (boolean) | |||
json_format | Validates JSON, then pretty-prints or minifies it, optionally deep-sorting keys. Returns a precise parse error if invalid. | input (required), mode (pretty \ | minify), sort_keys (boolean) | |||
jwt_decode | Decodes a JWT header and payload and flags expiry. The signature is not verified and no secret is needed. | token (required) | ||||
regex_test | Runs a JavaScript regex against sample text and returns every match with its index and captured groups (first 100). | pattern (required), input (required), flags (default g) | ||||
cron_describe | Explains a 5-field cron expression in plain English and lists the next 5 run times in UTC. | expression (required) | ||||
unit_convert | Exact conversion across length, mass, data size, time, speed and temperature. | value (required), from (required), to (required) | ||||
datetime | The real current time, or any timestamp, rendered in an IANA timezone as ISO, Unix and human forms. | input (optional Unix timestamp or ISO string), timezone (default UTC) | ||||
url_parse | Splits a URL into scheme, host, port, path, decoded query params and fragment. | url (required) | ||||
base_convert | Integer conversion between bases 2 and 36, BigInt-exact so large values stay exact. | value (required), from_base (default 10), to_base (default 16) | ||||
diff | Line-by-line diff of two texts with an added and removed count. Up to 1000 lines per side. | a (required), b (required) | ||||
color | Converts one color into hex, RGB and HSL at once. Accepts hex, rgb(), hsl() and CSS names. | value (required) | ||||
color_palette | Derives a harmonious palette from one base color. | color (required), harmony (complementary \ | analogous \ | triadic \ | tetradic \ | monochromatic) |
slugify | Clean, URL-safe slug from a title: lowercased, hyphenated, accents stripped. | input (required), separator (- \ | _) | |||
count | Exact characters (code points), UTF-16 units, words, lines and UTF-8 bytes. | input (required) |
Every tool is annotated readOnlyHint: true. Only optimize_image touches the network (openWorldHint: true); the other 21 are pure functions of their input.
Full input and output schemas: docs/mcp-tools-reference.md.
data/tools.csv is the same 22 tools as a flat, machine-readable table: name, title, category (image, data, dev), summary, required and optional parameters, and output fields. Handy for diffing releases, feeding an MCP directory, or comparing this server against another.
The file is generated, not hand-written: every value is read out of the tool's Zod schema in src/tools/. If you add or change a tool, regenerate it.
npm run tools:csv # rewrite data/tools.csv from src/tools/
npm run tools:csv:check # exit 1 if data/tools.csv is out of date
| Page | What it answers |
|---|---|
| How to add an MCP server to Claude Code | The claude mcp add command for stdio, HTTP and SSE servers, the three config scopes, and how to debug a server that will not connect. |
| MCP server for image optimization | How to let an AI agent compress and convert images (WebP, AVIF, JPEG) through MCP, and the measured savings per format. |
| MCP tools reference | All 22 tools, one section each, with the complete input and output schema and an example call. |
Yes. It is free to use, with no account, no API key and no paid tier. The hosted endpoint is rate-limited per IP (120 requests per minute in general, 30 per minute for image optimization) so one client cannot starve the rest, and the source is MIT licensed if you would rather run it yourself.
No. Auth is none, which you can verify for yourself at GET https://mcp.cleanor.app/v1/capabilities. There is no signup, no OAuth flow and no token to rotate. Point your client at https://mcp.cleanor.app/mcp and start calling tools.
Only what you pass to a tool. 21 of the 22 tools are pure functions evaluated on the server, and optimize_image additionally fetches the public image URL you hand it. There is no account, no user identifier, and no database or object store in the server: it is a single Cloudflare Worker with no persistence binding for your inputs. If your data is sensitive, run the stdio build locally with npx -y @cleanor/mcp and nothing leaves your machine.
Yes, in two ways. Run it locally over stdio with npx -y @cleanor/mcp (the same tool registry, with sharp doing the image encoding instead of Cloudflare Images), or deploy this repo to your own Cloudflare account with wrangler deploy, since the Worker entry point and wrangler.jsonc are both in the tree. The Dockerfile builds the stdio server for registries and scanners that prefer to start it themselves.
A local (stdio) server is a process your client spawns on your machine: it can reach your filesystem, but you have to install it, keep it updated and carry its dependencies. A hosted (Streamable HTTP) server is just a URL: no install, no version drift, and the heavy work runs on someone else's CPU. Cleanor MCP is offered both ways, and the hosted endpoint is the one to prefer for image optimization, because Cloudflare Images does the encoding and you never install sharp.
Any MCP client that speaks Streamable HTTP: Claude Code, Claude Desktop (as a custom connector), Cursor, VS Code, and the agent frameworks with MCP support. Clients that only speak stdio can run the npm package instead. Both paths expose the identical 22 tools, because both register the same tool array from src/tools/.
storage_capacity and image_format_savings return numbers from Cleanor Labs' publish
ตัดมาแค่ช่วงต้น อ่านต่อใน repo