Figma 布局上下文 MCP

要解决的问题

把 Figma 文件丢给编码代理（Claude Code、Cursor 这类 MCP 兼容客户端）直接写 UI 时，代理手里往往只有一句「照着这个做」。它看不到 Frame 的约束、分组关系和间距标注，也分不清哪些图层是可复用组件、哪些只是装饰性填充。结果通常是间距靠猜、断点漏掉、装饰图层被当成真实内容渲染出来。

这个技能要补的正是「设计上下文传递」这一环：让代理在动手写组件之前，先通过 MCP 从 Figma 文件里取回一份干净的布局上下文，拿到真实的层级、位置与约束，而不是对着截图自行脑补。

技能如何工作

核心能力可以拆成三块：

• 拉取布局上下文：代理通过 MCP 调用读取 Figma 文件中的 Frame、Component 与图层树，拿到的是结构化描述，而非一张图片。
• 过滤噪音：只保留实现 UI 所需的结构信息，丢弃与渲染无关的元数据，避免上下文窗口被无用字段占满。
• 供编码阶段消费：返回的上下文直接作为实现依据，间距、对齐与层级都从源文件推断，而不是重新发明一套数值。

关键步骤：

1. 满足前置条件：本地具备 Node.js 与 npx，持有有效的 Figma personal access token，客户端支持 MCP。
2. 在客户端的 MCP 配置文件中登记 figma-developer-mcp 服务。
3. 代理发起请求，服务向 Figma API 取回目标 Frame 的布局上下文。
4. 代理基于返回的结构信息实现 UI。

适用边界与注意点

• Token 权限：访问 token 必须具备目标文件的读取权限，文件的共享范围决定了你能取到什么。
• 上下文不等于像素：结构化信息告诉你层级与约束，但不保证视觉还原，像素级验收仍要人工做。
• Frame 规模：超大 Frame 会带出海量节点，必要时需要分片或限定范围取数。
• 数据时效：Figma 侧的改动会让先前的结果失效，动手实现前应重新拉取，不要复用缓存上下文。