Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Description from the maker (original English)
Platform image sizes with safe zones (free), plus AI extend, upscale and background removal.
These three are never merged into one score: opinions, measurements and popularity are different things.
We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.
Pick the AI app you use, then copy the settings.
AuthorizationValues marked secret are keys to your account. Never share them or paste them into a chat.
You need
Which app do you use?
Pick your app above. We remember it, so next time the button says “Install in …”.
This address needs a key in a request header, which the add-connector menu cannot set. Use Claude Code, Cursor or VS Code instead.
Run this in your terminal
claude mcp add --transport http cropden https://cropden.com/mcp --header 'Authorization: your-value'Fill in the empty values before running it.
Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json
{
"mcpServers": {
"cropden": {
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
Paste into .vscode/mcp.json in your project
{
"servers": {
"cropden": {
"type": "http",
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
This address needs a key in a request header, which the add-connector menu cannot set. Use Claude Code, Cursor or VS Code instead.
Your choice stays on this device in a cookie; no account needed.
Authorization secret HTTP headerThese settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.
Tool names and descriptions exactly as the server reported them on Nov 6, 2026. The maker wrote them, not us; we show them as plain text.
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.
We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 9, 2026
The registry name was verified with the GitHub account geektao1024, which owns the repo
We have not read this repo from GitHub yet
We have not read this repo from GitHub yet
Responded in 1104 ms (HTTP 200)
No sign-in needed
Read 6 tool descriptions and found no hidden instructions to the AI
Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.
It passed 3 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.
You need to fill in: Authorization
It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.
The GitHub repo last changed –, and the latest version (1.0.0) reached the registry 8 days ago.
Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.
In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server
Servers in the same category from other makers, sorted by stars.
Reading a card:↓ Downloads per weeki★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the 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.
Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.
Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.
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).