#设计系统 (1)

Framelink MCP for Figma:把设计稿压成模型能吃的上下文,而不是一张截图

即 Figma-Context-MCP,npm 包名 figma-developer-mcp,TypeScript,MIT,第三方实现(不是 Figma 官方的 Dev Mode MCP)。对外只有两个工具:get_figma_data(只读)与 download_figma_images(可用 –skip-image-downloads 整个关掉,且只在 –image-dir 之内写文件)。工具面窄是刻意的,工程量全在背后那条 fetch → simplify → serialize 管线:simplify 用可组合抽取器(layout / text / visuals / component,另有 allExtractors、layoutAndText、contentOnly、visualsOnly、layoutOnly 五档组合)在单次树遍历里把 Figma 原始响应压成语义化的布局与样式,支持 maxDepth 与 nodeFilter,输出 tree(默认,最省 token)/ yaml / json 三档。最值得同行学的是它把「压缩有没有效果」做成每次调用都算出来的指标:rawSizeKb 对 simplifiedSizeKb、rawNodeCount 对 simplifiedNodeCount、组件与实例与文本与图片节点数、namedStyleCount(源码注释直说数值高是设计系统成熟度信号)、hasVariables(有没有用上 Figma Variables)、以及 fetch/simplify/serialize 三段分开的耗时;同一批钩子还驱动 MCP progress 通知与心跳,大文件拉几十秒时客户端不会看起来像卡死。细节里全是判断:node ID 支持普通与深层嵌套实例两种形状、depth 的工具描述写着「除非用户明确要求不要用」、代理默认值刻意不在无代理变量时装 EnvHttpProxyAgent 以免陈旧变量把流量导到会返 403 的中间人、stdio 模式没设 image-dir 会在启动时警告。凭据支持 FIGMA_API_KEY 或 FIGMA_OAUTH_TOKEN,遥测可用 –no-telemetry / DO_NOT_TRACK=1 关且上报会脱敏。15.9k★。它不生成任何前端代码——产物是设计事实,翻译成 React/Vue/SwiftUI 的是你的 coding agent。我们未连自己的 Figma 文件跑过,也未做「截图 vs 结构化数据」的准确率对照,记为待复现。