Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Platform image sizes with safe zones (free), plus AI extend, upscale and background removal.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
Authorizationค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http cropden https://cropden.com/mcp --header 'Authorization: ใส่ค่าของคุณ'เติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"cropden": {
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"cropden": {
"type": "http",
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
Authorization ความลับ HTTP headerค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 6 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
get_image_sizesExact image sizes for Instagram, YouTube, TikTok, X, LinkedIn, Facebook, Discord, Twitch, Pinterest, marketplaces and passport photos, with safe zones (pixel areas the app covers or crops), upload limits and minimum sizes. Free, no API key. With no arguments it lists every size i
ai_extend_imageExtend an image to a wider or taller shape with AI, e.g. a portrait photo to a 16:9 YouTube thumbnail without cropping the subject. Costs 5 CropDen credits per run, refunded if it fails. Needs a CropDen API key. Input: PNG, JPEG or WebP, up to 10 MB and 2048 px on the longest sid
ai_upscale_imageUpscale an image 2x or 4x with AI. Costs 8 credits for 2x and 12 for 4x, refunded if it fails. Needs a CropDen API key. Input: PNG, JPEG or WebP, up to 10 MB; longest side up to 2048 px for 2x or 1024 px for 4x. Returns a link to the result, valid 7 days.
ai_remove_backgroundRemove the background of an image with AI; the result is a PNG with transparency. Costs 1 credit per run, refunded if it fails. Needs a CropDen API key. Input: PNG, JPEG or WebP, up to 10 MB and 2048 px on the longest side. Returns a link to the result, valid 7 days.
get_ai_taskStatus of an AI run that was still working when its tool returned. Pass the task_id it gave you; wait about 10 seconds between checks.
get_credit_balanceHow many CropDen credits the API key owner has left.
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub geektao1024 ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตอบกลับใน 1104 ms (HTTP 200)
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 6 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: Authorization
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.0.0) เข้า registry 6 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Image sizes for 14 platforms: 55 sizes with safe zones, upload limits and minimum sizes, plus specs for 6 passport and visa photos. As JSON, an npm package, an agent skill and an MCP server. Data under CC BY 4.0.
Most size lists stop at width × height. When you crop, you also need to know what the app puts on top of your image: the profile picture over a YouTube banner, the caption bar at the bottom of a Story, the 3:4 profile grid that trims a 4:5 Instagram post. This dataset has those areas in pixels.
One size per row. Each group has more sizes in the data.
| Platform | Image | Size (px) | Ratio | Crop on CropDen |
|---|---|---|---|---|
| 3:4 portrait post (+3 more) | 1080 × 1440 | 3:4 | Crop | |
| Story (+2 more) | 1080 × 1920 | 9:16 | Crop | |
| Profile picture (+1 more) | 320 × 320 | 1:1 | Crop | |
| YouTube | Channel banner (+1 more) | 2560 × 1440 | 16:9 | Crop |
| YouTube | Video thumbnail (4K) (+2 more) | 3840 × 2160 | 16:9 | Crop |
| YouTube | Short (9:16) (+1 more) | 1080 × 1920 | 9:16 | Crop |
| Cover photo (+2 more) | 851 × 315 | 2.70:1 | Crop | |
| Feed post (4:5) (+3 more) | 1080 × 1350 | 4:5 | Crop | |
| Discord | Profile banner (+3 more) | 600 × 240 | 5:2 | Crop |
| Discord | Custom emoji (+2 more) | 128 × 128 | 1:1 | Crop |
| Profile background (+3 more) | 1584 × 396 | 4:1 | Crop | |
| X (Twitter) | Header photo (+3 more) | 1500 × 500 | 3:1 | Crop |
| Twitch | Profile banner (+3 more) | 1200 × 480 | 5:2 | Crop |
| TikTok | Video / photo slide (+2 more) | 1080 × 1920 | 9:16 | Crop |
| Standard pin (2:3) (+2 more) | 1000 × 1500 | 2:3 | Crop | |
| Snapchat | Story / Spotlight | 1080 × 1920 | 9:16 | Crop |
| Etsy | Listing photo (4:3) (+2 more) | 3000 × 2250 | 4:3 | Crop |
| Shopify | Product image | 2048 × 2048 | 1:1 | Crop |
| eBay | Listing photo | 1600 × 1600 | 1:1 | Crop |
| Amazon | Main product image | 2000 × 2000 | 1:1 | Crop |
Passport photos (make one on CropDen):
| Document | Pixels | Print size |
|---|---|---|
| US passport & visa | 600 × 600 | 50.8 × 50.8 mm |
| UK passport | 600 × 771 | 35 × 45 mm |
| EU / Schengen | 600 × 771 | 35 × 45 mm |
| Canada | 600 × 840 | 50 × 70 mm |
| Australia | 600 × 771 | 35 × 45 mm |
| China visa | 600 × 873 | 33 × 48 mm |
All sizes and their zones are in data/social-media-image-sizes.json. To crop an image to any of them in your browser, follow the link in the last column.
npm install social-media-image-sizes
import { getSize, groups } from 'social-media-image-sizes';
const post = getSize('instagram-post/portrait-34'); // { width: 1080, height: 1440, ratio: '3:4', exact: true, ... }
const youtube = groups.filter((g) => g.platform === 'YouTube');
CommonJS works too: const { getSize } = require('social-media-image-sizes').
const res = await fetch('https://cropden.com/data/social-media-image-sizes.json');
const { groups, passportPhotos } = await res.json();
The endpoint allows cross-origin requests and is cached for an hour.
skills/social-media-image-sizes is an Agent Skill for Claude Code, Codex, Cursor and other agents that read SKILL.md. Ask "turn this photo into a YouTube banner" or "what size is an Instagram story?". It picks the size, crops the image on your machine with sharp, keeps the file under the upload limit, and draws a preview with the covered areas in red.
npx skills add geektao1024/social-media-image-sizes
Or copy the folder into ~/.claude/skills/ (Claude Code) or your agent's skills folder.
CropDen runs a remote MCP server at https://cropden.com/mcp (Streamable HTTP).
| Tool | What it does | Cost |
|---|---|---|
get_image_sizes | Sizes, safe zones and upload limits from this dataset | Free, no key |
ai_extend_image | Extend an image to a wider or taller shape (outpainting) | 5 credits |
ai_upscale_image | Upscale 2x or 4x | 8 or 12 credits |
ai_remove_background | Transparent PNG | 1 credit |
get_ai_task, get_credit_balance | Check a long run, check your balance | Free, needs a key |
Claude Code:
claude mcp add --transport http cropden https://cropden.com/mcp \
--header "Authorization: Bearer YOUR_CROPDEN_API_KEY"
Other clients: add https://cropden.com/mcp as a Streamable HTTP server with the same header. Get a key at cropden.com under Settings → API keys. The AI tools use the same credits as the website, and a failed run is refunded. Without a key, only get_image_sizes works.
| Field | Meaning |
|---|---|
id | / , e.g. youtube-banner/banner |
width, height | Pixels to export |
ratio | Aspect ratio, e.g. 3:4 |
exact | false means only the ratio matters |
recommended | The size we'd pick when a group has several |
minWidth, minHeight | Smallest upload the platform accepts or needs |
maxBytes | Upload limit in bytes (1 MB = 1,000,000) |
zones | Areas in pixels: safe-area (keep content inside), ui-overlay (covered by the app), crop-preview (what another view shows) |
zones[].measured | Measured in the live app; the platform doesn't publish it |
zones[].x, y, ... | Pixels from the top-left of the image. A zone can reach past the edge, like a profile picture that overlaps the bottom of a banner |
note | One-line tip, in English and Chinese |
Each group also has formats, facts (video length and similar), verified and a url to crop on CropDen. Passport photos add print size in millimetres and head and eye-line ranges as fractions of the photo height.
measured: true were measured in the apps. Apps move their buttons around, so treat those as guides.verified is the month a group was last checked. Source links for every group are coming in 0.2.0.If you only want values the platforms document themselves, use The Social Specification, which marks everything else as not documented. This dataset is made for cropping, so it fills those gaps with practical sizes and safe zones.
CropDen does the cropping. Pick a size, see the safe zones over your own image, and export at the exact pixel size and under the upload limit. The crop and resize tools run in your browser. The site also has batch resizing and AI tools: extend, upscale and remove background.
data/, and the same data in index.js and index.cjs): CC BY 4.0. Credit it like this: Image size data by CropDen (https://cropden.com), CC BY 4.0. On a website, the link is enough.SammaPix (MIT) was our starting reference for which platforms and passport photos to cover, and we cross-checked sizes against its data files.
If this saved you a lookup, a star helps other people find it.
Built in public by Geektao (@geektao0319, posts in Chinese).