SuperAPI AI 工具集

figma-generate-design

设计与创作

查看项目

更新于 10-16 09:48

技能介绍

用途:把应用页面、视图或多区块布局转化(写入或更新)到 Figma。交付物是组合好的 Figma 视图,包括整页屏幕、弹窗、对话框、抽屉、侧栏、面板等由设计系统组件实例构成的多区块容器。若目标是新建可复用组件或变体,应直接用 figma-use;若写 Code Connect 映射,则用 figma-code-connect。

主要能力:强调复用已发布设计系统中的组件、变量(颜色、间距、圆角)与样式(文本、效果),避免硬编码十六进制色值和像素值。可通过 Code Connect 文件解析组件键,或检查已有同体系屏幕获得权威组件映射,最后才用 search_design_system 搜索;变量与样式同样先查已有屏幕再搜索库。

必要用法:必须先加载 figma-use 再调用 use_figma,并在 skillNames 参数中逗号分隔地包含 figma-generate-design(若通过 MCP 资源加载需加 resource: 前缀,该参数仅用于日志)。需连接 Figma MCP 服务,目标文件需有已发布设计系统或可访问团队库,并提供目标文件 URL 或 fileKey 及源码或说明。先建外层容器再在其内逐段构建,避免先建顶级区块再重新挂载。

适用场景:Web 应用页面从代码写入 Figma;更新已有屏幕;弹窗、抽屉、侧栏等组合视图。源含图片的 Web 应用必须并行运行 generate_figma_design 截图流程以获取 imageHash,否则无法设置图片填充。非 Web 应用(iOS、Android 等)或更新已有屏幕用标准流程。

限制:具体收费、价格、平台细节暂未提供。