Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Sign and explain crabcrop image URLs, fetch processed-image metadata, and purge cached results.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
CRABCROP_BASE, CRABCROP_SECRETค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"crabcrop": {
"command": "npx",
"args": [
"-y",
"@crabcrop/mcp"
],
"env": {
"CRABCROP_BASE": "ใส่ค่าของคุณ",
"CRABCROP_SECRET": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add crabcrop --env CRABCROP_BASE='ใส่ค่าของคุณ' --env CRABCROP_SECRET='ใส่ค่าของคุณ' -- npx -y @crabcrop/mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"crabcrop": {
"command": "npx",
"args": [
"-y",
"@crabcrop/mcp"
],
"env": {
"CRABCROP_BASE": "ใส่ค่าของคุณ",
"CRABCROP_SECRET": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"crabcrop": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@crabcrop/mcp"
],
"env": {
"CRABCROP_BASE": "ใส่ค่าของคุณ",
"CRABCROP_SECRET": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
CRABCROP_BASE envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ผู้ลงทะเบียน (crabcrop) ไม่ใช่เจ้าของ repo (dayvson) อาจเป็นคนอื่นที่นำมาลงต่อ
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 0 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: CRABCROP_SECRET
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.0) เข้า registry 12 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Website · Documentation · Playground
Blazing fast, on-demand images.
crabcrop is a Rust-built, lightning-fast on-demand image API supporting all major formats in and out, with over 50 filters and AI features like background removal. It resizes, crops, converts, and filters your images straight from a signed URL. One binary, no pre-generated thumbnails, no build step: the URL is the API.
Everything an image pipeline does, in one signed URL: resize, crop, adjust, shape, overlay, and encode, chained in the order written, plus background removal, studio mode, smart face-safe crops, redaction, and content provenance. Ask for JSON instead of an image and the meta endpoint describes the picture: dimensions, detections, OCR text, and more.
crabcrop is for sites and apps that serve the same images at many sizes and want signed, cacheable image URLs in front of an origin image store.
Shell installer (macOS and Linux):
curl --proto '=https' --tlsv1.2 -LsSf https://github.com/dayvson/crabcrop/releases/latest/download/crabcrop-installer.sh | sh
Docker: the base image, and the AI variant with background removal and face detection on board:
docker pull ghcr.io/dayvson/crabcrop:0.9.9
docker pull ghcr.io/dayvson/crabcrop-ai:0.9.9 docker run -e CRABCROP_SECRET=your-secret-change-me -p 3000:3000 ghcr.io/dayvson/crabcrop:0.9.9
A secret of at least 16 bytes is the only required configuration; the server will not start without one. By default the loader fetches public sources and refuses sources that resolve to private addresses, and an allowlist names any exceptions. See Configuration.
Release binaries: prebuilt tarballs for macOS and Linux, on x86_64 and arm64, are on the releases page.
crates.io: cargo install crabcrop builds the current release from source; the prerequisites are in Deployment.
1. Start the server. For local development, also allow unsigned URLs:
CRABCROP_SECRET=local-dev-secret CRABCROP_ALLOW_UNSAFE=1 cargo run --release
2. Request an image. This resizes a source photo to 300x200:
curl "http://localhost:3000/unsafe/300x200/https://example.com/photo.jpg" --output photo.jpg
Replace example.com/photo.jpg with the URL of an image you control. You get back a 300x200 JPEG.
3. Sign your URLs in production. Drop CRABCROP_ALLOW_UNSAFE and put an HMAC signature in the first path segment:
curl "http://localhost:3000/9e24ae8bf61c0d40cb6f1ca9f9e1d3e771f6c8bc8b8ab7270e6d15458d4c14ab/300x200/https://example.com/photo.jpg" --output photo.jpg
That signature is HMAC-SHA256 of 300x200/https://example.com/photo.jpg under the secret from step 1. The SDKs and the crabcrop sign command compute it for you; the full signing rules are in URL grammar and signing.
Every image request has three parts:
GET /<signature>/<operations>/<source-url>
The signature is an HMAC-SHA256 (hex) of everything after it, or the literal unsafe on a server that allows it. Operations are zero or more segments, applied in path order. The source is a full URL, a bucket or file locator, or a short root: reference the server expands against origins it keeps to itself.
A signed URL names a transformation of a source locator, not the source's contents: the cache key is built from the operations and the locator, so if the image at a source changes, a purged entry re-renders the new image under the same URL. Because successful responses carry a one year immutable cache lifetime, a source that must stay fixed under its URL should be versioned or immutable itself (a content hash in the source path is the usual way). A render is cached under the canonical form of its operations, so equivalent spellings share one entry. A preset: segment names an operation string held on the server, so templates stay short and the transformation menu stays operator controlled.
https://img.example.com/<signature>/crop:1200x630:smart/filters:format(webp):quality(80)/https://example.com/photo.jpg
Smart-crops the photo to the 1200x630 social card size, keeping the subject and any detected faces whole, then encodes it as WebP at quality 80. Sign it with the TypeScript or Python SDK, the crabcrop-url Rust crate, the CLI, or plain curl: same inputs, same URL.
Send Accept: application/json with the same URL and the answer is the render's meta document instead of its bytes: dimensions, format, byte size, and provenance, with richer annotations as opt-ins.
format(...) always wins.root: reference. Originals can also arrive through the signed upload endpoint, off by default.filters: segment, everything running in the order written.studio(scene) reframes the photo on its subject and corrects the light and color.explain/ in front of any signed URL and the server reports on it instead of serving the image.This README is the front door. The full reference lives on the website and in this repo's docs folder:
Build and sign URLs from code: @crabcrop/url for TypeScript, crabcrop_url for Python, and the crabcrop-url Rust crate, all running the same spec test vectors, so client and server cannot drift. Loaders and integrations cover Next.js, Nuxt, Hydrogen, Astro, and SvelteKit, plus a WordPress plugin. For coding agents, a first-party MCP server exposes signing, explaining, meta, and purge over the same surface. Details in Clients and SDKs.
The server binary doubles as its own operator CLI: crabcrop sign, explain, meta, purge, seal, upload, and convert-thumbor run against a server (or offline, for the grammar-only verbs) with the same configuration conventions.
Migrating from another service: guides for Thumbor, imgproxy, Cloudinary, imgix, Cloudflare Images, ImageKit, and Gumlet.
Every recipe runs the same server, configured entirely through the environment. Release images are published to GHCR as ghcr.io/dayvson/crabcrop, with the AI variant at ghcr.io/dayvson/crabcrop-ai. Recipes ship for Kubernetes (Helm and Kustomize), ECS Fargate, Cloud Run, Container Apps, Docker Compose, and a binary on a VM, plus CDN guides for Cloudflare, CloudFront, Fastly, BunnyCDN, and Akamai. See Deployment.
cargo build --locked
bash scripts/test_all.sh
Found a security vulnerability? Please report it privately: see SECURITY.md. Please do not open a public issue, pull request, or discussion for security problems.
MIT. See LICENSE.