SuperAPI AI 工具集

figma-generate-design

设计与创作

查看项目

更新于 10-15 22:33

技能介绍

用途:在 Figma 中新建或更新屏幕、视图与多区块 UI 容器(整页、模态框、对话框、抽屉、侧栏、面板等),方式是复用已发布设计系统中的组件、变量与样式,而不是用硬编码数值绘制原始形状。触发场景包括将应用页面、视图或多区块布局翻译到 Figma。

主要能力与流程:调用 use_figma 前必须同时加载 figma-use(其包含颜色范围、字体加载等关键规则)。作为本技能的一部分,调用 use_figma 时始终传入 skillNames: "figma-generate-design"(仅用于日志记录,不影响执行)。标准流程为:先理解交付物并拆解页面区块与所用组件,若含图片且为 Web 应用,需并行运行 generate_figma_design 截图工作流;随后收集组件 key、变量与样式(先查 Code Connect 文件,再检查现有屏幕,最后才用 search_design_system,变量发现需注意本地与远程库变量 API 的差异,不得仅凭 getLocalVariableCollectionsAsync 为空就断定无变量);接着先创建包裹框架,再在各区块中直接构建内容,避免跨调用重挂节点。

适用场景:交付物为基于设计系统组件实例组合而成的 Figma 视图(新建或更新);若需创建新的可复用组件或变体,应直接使用 figma-use;若需编写 Code Connect 映射,应切换到 figma-code-connect。

限制与前提:需连接 Figma MCP 服务器;目标文件需有已发布的设计系统组件或团队库访问权限;用户需提供 Figma 文件 URL/file key 或目标文件上下文,以及待构建/更新视图的源代码或描述;use_figma 插件 API 无法抓取外部图片 URL,存在图片时必须走 generate_figma_design 并行捕获,否则图片框会留空。收费、价格等信息资料未提供。