SuperAPI AI 工具集

qt-figma-token-extraction

设计与创作

查看项目

更新于 10-15 21:05

技能介绍

用途:该技能从 Figma 文件中提取设计令牌(颜色、排版、间距、圆角、阴影等变量与文本样式),映射为 QML 类型,并生成 design-tokens.json 与可直接使用的 QML 设计系统,包含统一的 Theme 单例。

主要能力:支持通过 Figma MCP 或本地 curl 两种方式提取;可处理多变量模式(如 Light/Dark);可提取 Variables 与 Styles(文本、颜色、效果),自动检测文件使用哪种来源;解析别名引用;按命名规范映射 Figma 变量类型到 QML 类型(映射规则见 references/token-mapping.md);生成 Primitives.qml、Theme.qml、FontInterface.qml、Spacing.qml、Typography.qml 等模板文件。

使用方式:先确认目标 Qt 项目(新建或已有),再询问是否使用多模式、是否可用终端,据此选择 MCP 或 curl 方法。curl 方法需 Figma Personal Access Token(Viewer 权限),先验证:curl -H "X-Figma-Token: YOUR_TOKEN" "https://api.figma.com/v1/me",再提取变量:curl -H "X-Figma-Token: YOUR_TOKEN" "https://api.figma.com/v1/files/FILE_KEY/variables/local" -o design-tokens-raw.json;文本样式需先取样式列表再取节点属性。MCP 方法需已连接 Figma MCP,使用 get_variable_defs、get_design_context 等工具。新建项目时创建 main.cpp(使用 QGuiApplication 与 loadFromModule)和 Main.qml,CMake 配置在最后一步写入。

适用场景:需要将 Figma 设计系统同步到 Qt Quick/QML 项目的团队,尤其是使用 Qt Design Studio 命名与组织模式的场景。

限制:社区文件无法直接访问,需先复制到自己的草稿;curl 方法仅适用于自己账户内的文件,否则返回 403;MCP 方法只能读取当前激活的变量模式,多模式需手动切换;别名无法解析时需回退提取对应文件;具体收费、价格与平台支持情况暂未提供。