用途:该技能用于读取和检查 Figma 设计,从 Figma URL 出发提取结构、设计令牌、截图、元数据与用户可见文案。它只做只读操作,不生成生产代码,也不执行 Figma 写入类操作(创建文件、上传资源、生成图表、映射 Code Connect、修改 Figma 对象等均不在范围内);若确需写入,应直接调用底层 MCP 工具并取得用户明确同意。
前置条件:Figma Dev Mode MCP 服务器不由本插件捆绑,需用户自行安装并认证,可选桌面服务器(需付费 Figma 计划的 Dev 或 Full 席位)或远程服务器。若会话中无 Figma MCP 工具,应停止并提示用户先安装认证。部分工具仅远程可用,桌面服务器上不可用,需查阅 Figma 文档。
URL 解析:Figma URL 中关键部分是 fileKey 和 nodeId。URL 的 node-id 用 - 分隔(如 123-456),而 MCP 服务器期望 : 分隔(如 123:456),传入工具前需转换。若 URL 无 node-id,则指向整个文件,应先询问用户具体指哪个 frame,避免返回过多上下文。
主要工具(按任务选择最小够用的工具):get_design_context 读取 frame 的设计上下文(代码+截图+元数据),支持 framework 参数,默认 React + Tailwind;get_metadata 获取稀疏 XML 结构轮廓(图层 ID、名称、类型、位置、尺寸),开销小;get_screenshot 仅获取渲染图像;get_variable_defs 提取选区使用的变量与样式(颜色、间距、字体);get_libraries 查看文件关联的设计库;search_design_system 按文本查询组件、变量、样式;get_figjam 检查 FigJam 板;whoami 识别已认证用户。Code Connect 只读工具包括 get_code_connect_map、get_code_connect_suggestions、get_context_for_code_connect。
决策规则:不要习惯性调用 get_design_context,简单问题(如背景色)用 get_variable_defs 更省上下文;先用 get_metadata 定位;get_screenshot 供人参考,get_metadata 供机器推理,非必要不两者都加载;本技能不生成代码,生产代码生成属于仓库专用输出技能。
与其他技能组合:design-review 先用 get_screenshot + get_metadata 定位,涉及令牌时用 get_variable_defs,仅当代码形态本身是问题时才升级到 get_design_context;content-style-guide 用 get_design_context 或 get_metadata 找出所有用户可见字符串,但不在本技能内改写文案,只返回发现与建议;preparing-design-handoff 用 get_metadata 验证 Ready-for-Dev 分区,用 get_variable_defs 确认令牌绑定到库而非原始十六进制值;evolving-design-system-components 先用 search_design_system 和 get_libraries 确认是否已有现成模式。
提取前应先向用户说明将要调用的工具及原因。输出格式建议包含:frame 与阶段(文件名、frame 名、30/60/90 阶段)、结构(相关层级的图层轮廓,不粘贴原始 XML)、令牌与库绑定、用户可见字符串(如涉及文案)、待澄清的开放问题。
限制:仅只读;依赖用户自行安装认证的 Figma MCP 服务器;部分工具仅远程可用;不生成生产代码;不执行 Figma 写入操作。详细安装与认证说明见 references/setup.md,工具参数与返回结构以 Figma 官方文档 developers.figma.com/docs/figma-mcp-server/tools-and-prompts/ 为准。