SuperAPI AI 工具集

figma-use-design-system

设计与创作

查看项目

更新于 10-16 08:06

技能介绍

用途:在 Figma 中依据组织设计系统构建或编辑设计、组件、整屏页面时,为 use_figma(MCP 工具)提供设计系统上下文。该技能定义“用什么资产”(库、令牌、组件、约定),配套的 figma-use 定义“怎么调用 API”。调用 use_figma 前必须先加载 figma-use;若目标为整屏/视图,另加载 figma-generate-design;若为新建组件或设计系统构建,另加载 figma-generate-library。调用时需在逗号分隔的 skillNames 参数中包含本技能名;若通过 MCP 资源加载,须加 resource: 前缀(如 resource:figma-use-design-system),该参数仅用于记录。

核心规则:一切颜色、间距、尺寸、圆角、阴影都绑定变量或样式,禁止硬编码 hex/px;优先语义令牌(--ds-background-color-、--ds-content-color-、--ds-border-color-、--ds-base-color-),全局基础色板仅在无对应语义映射时使用;组件必须从 UI Kit 实例化,不重建,属性覆盖用组件属性;高度用 --ds-shadow-{none,low,mid,high} 效果样式;文本用文本样式(通过 textStyleId,如 ds-heading-01..05、ds-body、ds-body-small、ds-caption、ds-code),字体为 Inter(UI)与 IBM Plex Mono(代码);主题通过集合模式切换(setExplicitVariableModeForCollection),不复制页面做暗色版;可访问性默认主题满足 WCAG 2.2 AA、高对比主题覆盖各等级;先发现再创建,检查目标文件与已有页面。

必要用法:按顺序执行——先用 get_libraries({ fileKey }) 确认 Variables、UI Kit、Icons 三个库已链接;在运行时解析资产键(不要猜测),可通过检查目标文件已有页面的 mainComponent、search_design_system(用 includeLibraryKeys 限定)或对库文件只读运行 use_figma 读取 .key;随后按 figma-use 增量流程构建(每次调用不超过 10 个操作,分批用 Promise.all 导入,组件用 setProperties 覆盖,颜色用 setBoundVariableForPaint、间距/圆角用 setBoundVariable、文本用 textStyleId、高度用 effectStyleId),设置正确主题模式,并返回所有创建/修改节点的 ID;最后用 get_screenshot 校验令牌是否真正绑定、文本样式、高度、主题模式、AA 对比度及组件是否为真实实例。

限制:资料中的库文件键与部分令牌值以占位符呈现(如 <variables-file-key>、<ui-kit-file-key>、<icons-file-key>),实际使用时需以运行时解析结果为准;getLocalVariableCollectionsAsync() 返回空不代表无变量,远程库变量需用 search_design_system 或检查已有页面获取。技能未提供定价、平台支持范围或性能数据。