SuperAPI AI 工具集

qt-figma-component-generation

设计与创作

查看项目

更新于 10-15 21:33

技能介绍

用途:从 Figma 设计系统提取组件元数据,生成消费设计系统单例的生产级 QML 控件文件。

前置条件:项目中需存在 design-tokens.json(来自令牌提取技能)以及 design-system/ 文件夹中的 QML 单例 Primitives.qml、Theme.qml、Spacing.qml、FontInterface.qml;若缺失需先运行 qt-figma-token-extraction。需确认 Figma MCP 已连接,即工具列表中有 get_metadata 和 get_design_context,否则需先行配置连接。

主要流程:一、用 get_metadata 获取文件结构,向用户确认要生成哪些组件,并维护组件清单表(组件名、节点 ID、QML 文件、状态)。二、在读取资源或写代码前请用户选择实现模式:Pattern A(内联自包含)或 Pattern B(Style 单例,支持多主题),不确定时默认推荐 Pattern A。三、按所选模式读取 references/ 或 assets/qt-controls/ 中的对应参考文件(如 Button.qml、TextField.qml、CheckBox.qml 等)。四、对每个组件用 get_design_context 提取单个主组件节点(而非组件集节点)的变体、状态、尺寸、颜色令牌、排版、边框、图标槽等信息。五、进行 Figma 到 QML 的映射,先阅读项目单例的实际属性名,再选择基础类型(如 Button 用 AbstractButton,TextInput 用 ColumnLayout + TextInput 等)并套用变体、状态、图标槽、尺寸令牌、焦点环、颜色动画、光标等模式。六、写入 components/ 文件夹,使用 PascalCase 命名,并按规范添加文件头、公共 API、私有辅助属性及缺失值的 TODO 注释。七、生成后做一致性检查:颜色令牌名必须真实存在、数值尺寸须来自令牌、交互组件须有焦点环和 HoverHandler、文件头记录所检查的节点 ID,最后更新清单并汇总 TODO。

限制与注意事项:不可在组件集节点上调用设计上下文,必须下钻到单个组件;不要照搬参考资源中的示例令牌名,应以项目单例为准;避免硬编码已有令牌覆盖的值;注意部分选中状态、AbstractButton 默认内边距归零、Behavior 动画块、Popup 的 z 序(需 parent: Overlay.overlay);Pattern A 字符串变体与 Pattern B 整数枚举变体不可混用。多行文本域等部分控件暂无参考资源,需按说明自行处理。具体收费、平台等信息资料未提供。