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.
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
Authorization标为机密的值是你账户的钥匙。千万不要分享给别人,也不要粘贴到聊天里。
你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
这个地址需要在请求的 header 中放入密钥,而添加连接器的菜单无法设置。请改用 Claude Code、Cursor 或 VS Code。
在终端中运行这条命令
claude mcp add --transport http cropden https://cropden.com/mcp --header 'Authorization: your-value'运行前请先填写空着的值。
粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"cropden": {
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"cropden": {
"type": "http",
"url": "https://cropden.com/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个地址需要在请求的 header 中放入密钥,而添加连接器的菜单无法设置。请改用 Claude Code、Cursor 或 VS Code。
你的选择通过 Cookie 保存在这台设备上,无需账户。
Authorization 机密 HTTP header这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
工具名称和描述与服务器在 2026年11月6日 报告的完全一致。这些内容由作者撰写,不是我们写的;我们以纯文本形式显示。
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.
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月10日
注册名称已通过 GitHub 账户 geektao1024 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
在 1104 毫秒内响应(HTTP 200)
无需登录
已读取 6 个工具描述,未发现针对 AI 的隐藏指令
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 3 项适用的基础检查中通过了 3 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
你需要填写:Authorization
它在作者的云端运行。通过互联网连接,无需安装,但你发送的内容会经过作者的服务器。
GitHub 仓库最后更新于–,最新版本(1.0.0)于8天前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。它通过 URL 连接,所以接受远程 MCP 服务器的应用也可以使用,例如开启开发者模式的 ChatGPT。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
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.
The Figma MCP server brings Figma design context directly into your AI workflow.
按原文从作者的仓库复制。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).