SuperAPI AI 工具集

figma-design-system-inventory

设计与创作

查看项目

更新于 10-15 23:57

技能介绍

用途:figma-design-system-inventory 通过一次 use_figma 调用遍历整个 Figma 文件,返回结构化套件,是“一次读取全部”的入口,服务于代码生成与设计库审计。

主要能力:提取 tokens(所有本地变量,按集合与模式分组)、components(独立组件与组件集,含属性定义和每个变体的精简 visualSpec)、styles(paint/text/effect 样式及解析值)。颜色以 hex 输出,间距/尺寸为 px,变量尽量把别名解析为 {Color.Brand.Primary} 形式的令牌名。

使用方式:先加载官方 figma-use 技能;通过 use_figma(skillNames: "figma-design-system-inventory")运行。在 scripts/inventory.js 中编辑常量控制响应大小:INCLUDE 可取 "tokens"、"components"、"styles"(默认三者全含);VERBOSITY 为 "full"(含每变体 visual spec)、"summary"(组件元数据与 props,无每变体 spec)或 "inventory"(仅名称/ID/数量,适合超大文件);COMPONENT_NAME_FILTER 为子串过滤,如 "Button"。脚本依赖的 Figma 插件 API 规则包括:使用顶层 await + return 的普通 JS(无 IIFE,不调用 figma.closePlugin(),console.log 不返回)、输入以 const 内联在脚本顶部、颜色取 0–1 范围、任何文本操作前加载字体、await figma.getNodeByIdAsync(...)、原子错误(脚本失败则不应用任何更改)。需读取变量时通过插件 API,因此适用于所有 Figma 方案,无 Enterprise REST 要求。

适用场景:需要一次性获取整个设计系统令牌、组件与样式的代码生成或库审计。单一组件无限深度请用 figma-deep-component;单个变体集作为 CSS 状态机请用 figma-analyze-component-set;磁盘令牌文件请用 figma-export-tokens。本技能捕获每个组件/变体的根 visualSpec 及其直接子级(childSpecs),不继续深入递归。

限制:结果过大时应降低 VERBOSITY 或缩小 INCLUDE / COMPONENT_NAME_FILTER 后重跑,不要尝试对巨大完整转储分页。visualSpec 字段详情参见 references/visual-spec.md。