用途:把应用页面、视图或多区块布局翻译成 Figma 屏幕(新建或更新),核心是复用目标文件中已发布的设计系统(组件、变量、样式),而非用硬编码值画基础图形。
主要能力:先理解屏幕结构,识别各区块及所用 UI 组件;发现设计系统,优先检查现有屏幕中的实例与绑定变量,否则用 search_design_system 搜索组件、变量(颜色/间距/圆角)与样式(文本/效果),并读取组件属性键;先创建页面外层框架,再逐区块在其中构建;用 setProperties() 覆盖实例文本,按组件属性键设置;用 get_screenshot 逐区块校验,检查文字裁切、元素重叠、占位文本、错误变体等。
使用方式:必须同时加载 figma-use 后才可调用 use_figma,并在调用时传入 skillNames: "figma-generate-design"。前置条件包括:Figma MCP 服务已连接;目标文件有已发布设计系统或团队库访问权;用户提供文件 URL/文件键或目标文件线索,以及待构建/更新的源代码或描述。Web 应用可并行运行 generate_figma_design 截取像素级截图作视觉参照,完成后删除该输出。
适用场景:交付物是 Figma 屏幕且由设计系统组件实例组成时。若需从设计生成代码改用 figma-implement-design;创建新可复用组件或用 figma-use;编写 Code Connect 映射改用 figma-code-connect-components。更新现有屏幕时用 get_metadata 检查结构,按节替换组件实例、更新文本或布局、删除废弃区块、新增区块。
限制:仅适用于可捕获运行页面的 Web 应用并行工作流,非 Web 应用或更新现有屏幕走标准流程。禁止硬编码十六进制颜色或像素间距(存在设计系统变量时)。不要用 getLocalVariableCollectionsAsync() 返回空来判定无变量,应配合 search_design_system 检查库变量。跨多次调用移动节点会自动失败,需先建外层框架再逐区块追加。缺少 figma-use 的规则(颜色范围、字体加载等)会导致脚本出错。未提供的收费标准、平台限制等信息暂未提供。