六月 26, 2026
对于 Qt 开发者而言，在 QML 中手动重建设计系统是一项繁琐的工作。一个典型的 Figma 设计系统可能包含数百个设计 token，涵盖颜色、字体、间距、圆角、阴影和动效时长，以及数十个 UI 组件，每个组件均包含多种变体和状态。每个数值都必须精确录入，即便是细微的差异，也可能悄然导致实现与 Figma 源文件之间的不同步。
两项全新 AI 技能填补了 Figma 与 Qt 之间设计系统到代码的差距。Qt Figma Token 提取技能可将 Figma 设计 token 直接转换为 QML 单例；Qt Figma 组件生成技能则将 Figma 组件库转换为调用这些单例的惯用 QML 控件。两者协同运作，实现完整设计系统交付的自动化。这些技能将整个工作流程交由 AI 智能体执行——智能体连接 Figma、读取设计系统，并生成可直接导入 Qt 项目的简洁、惯用 QML 代码。
视频：通过 Claude Code 中的 Figma MCP，将 Figma 设计 token 转换为 QML（序列已缩短并加速）
这两项技能适用于任何结构合理、使用 Figma Variables、Styles 和 Components 的 Figma 设计系统。两者均通过 MCP 服务器直接连接 Figma，目标项目为 Qt 6 Quick。在 token 提取步骤中，当设计团队独立运营时（例如在分包商处），可使用基于 curl 的备用方案，通过导出的 JSON 文件完成交付。组件生成始终需要有效的 Figma MCP 连接。两项技能均可扩展现有项目，也可快速搭建新项目。
此技能如何为开发者提取设计系统
技能被触发后，将接管原本需要开发者手动完成的工作流程：打开 Figma、逐一检查每个变量集合、组件和变体，将各数值映射到 QML 属性，并全程确保不引入错误。token 提取技能首先运行，构建设计系统基础；组件生成技能随后基于该基础生成 QML 控件。
阶段一：设计 Token 提取
步骤 1：连接 Figma
智能体通过 Figma MCP 服务器连接设计文件。对于多模式设计系统，或当 MCP 访问不适用时，可使用基于 curl 的备用方案，开发者运行一条简短的终端命令即可导出 JSON 文件，供智能体后续处理。
步骤 2：发现并分类 Token
智能体检查设计文件中的 Figma Variables 和 Styles，并将 token 分类为标准类别：颜色、字体、间距、尺寸、圆角、阴影、不透明度和动效。浅色和深色主题等多模式集合可自动检测。
步骤 3：解析别名
智能体解析 token 别名——例如语义 token color.surface.primary 指向基础 token color.neutral.900——并保留双层结构，确保生成的 QML 保持相同的语义间接引用，而非将所有内容扁平化为原始数值。
步骤 4：生成 design-tokens.json 和 QML 单例
智能体生成 design-tokens.json——作为 Figma 与 QML 输出之间的契约——随后生成一组 QML 单例：Colors.qml、Typography.qml、Spacing.qml、Radii.qml、Shadows.qml 和 Motion.qml。Theme.qml 单例将各类别整合在一起，并公开可切换的模式属性以支持浅色和深色主题。每个单例均采用 Qt 6 惯用模式，包含 pragma Singleton 和 readonly 属性。
步骤 5：一致性报告与总结
智能体生成一份带时间戳的 Markdown 一致性报告，涵盖已提取的内容、已跳过的内容以及发现的任何问题。
图片：在 GitHub Copilot 中使用智能体驱动的 Figma 设计 token 提取技能更新 QML 设计 token
阶段二：UI 组件生成
步骤 6：连接 Figma 并构建组件清单
智能体通过 MCP 连接 Figma，使用 get_metadata 获取文件结构，识别包含组件的页面和框架，并构建一个贯穿整个工作流程的组件清单表，从待处理到已完成或已阻塞逐一追踪。随后智能体向开发者询问需要生成哪些组件，或是否全部生成。
步骤 7：选择实现模式
在编写任何代码之前，智能体会要求开发者在两种实现模式中选择其一。模式 A（内联）是大多数项目的默认推荐：所有状态逻辑通过 readonly 属性的条件表达式内置于组件文件中，使输出自包含且便于调试。模式 B（Style 单例）将每个控件拆分为组件文件和配套的 ComponentStyle.qml pragma 单例，后者使用整数枚举为每个变体定义类型化组件对象——适用于已有主题切换层或需要支持多个可互换主题的项目。
步骤 8：读取参考资源
智能体读取与所选模式对应的参考资源。这些资源编码了输出中所期望的精确结构、属性命名规范和 token 使用方式，智能体以此校准其生成的每个控件。
步骤 9：提取并映射每个组件
对于清单中的每个组件，智能体对各主组件节点调用 get_design_context。先检查默认变体，再检查 Hover、Pressed 和 Disabled 等代表性变体，提取变体、交互状态、尺寸、颜色 token 引用、字体、边框定义及图标插槽的存在情况。随后读取实际项目单例文件，在将任何引用写入组件之前验证每个 token 名称。
步骤 10：生成 QML 控件
每个组件以 DS 前缀加 Figma 组件名称写入项目的 components/ 文件夹，例如 DSButton.qml、DSTextField.qml 等。
图片：在 Claude Code 中使用智能体驱动的 Figma 组件生成技能生成的设计系统 UI 组件
步骤 11：生成后审查与总结
智能体执行一致性检查：验证每个 token 引用是否存在于实际单例文件中，并收集应提升为 token 的字面数值。随后向开发者呈现总结，涵盖已生成的组件及任何被跳过的组件。
UI 组件生成的参考资源
组件生成技能内置了一套参考资源库——供智能体在按所选模式生成输出前读取的生产级 QML 源文件。属性命名规范、状态机结构、锚定模式、token 使用、动画规范及焦点环实现均直接从这些文件中推断。
模式 A 内置三个经 Figma 验证的参考控件：DSButton-reference.qml、DSTextField-reference.qml 和 DSCheckbox-reference.qml。
模式 B 内置 87 个 QML 文件——48 个组件文件和 39 个配套 style 单例——覆盖典型设计系统的完整范畴：交互控件、输入与搜索、展示元素、导航与容器，以及列表和链接控件。
使用自有参考资料自定义设计系统提取技能
两项技能均可扩展。由于参考资源是技能内文件夹中的普通 QML 文件，组织无需局限于内置默认值。
对于组件生成技能，您可以完全替换内置参考资源，也可以对其进行扩展。如果您的组织已建立自有的 QML 组件规范——例如滑块的内部样式、对话框动画的偏好模式或委托回收的特定方案——只需将现有控件作为参考资料替换进来。智能体将遵循您的规范而非默认值，确保每个生成的控件与团队现有代码库保持一致。您也可以为标准控件保留内置参考，同时为特定领域控件提供额外参考资源：工业 HMI 仪表、多轴摇杆可视化或自定义视频播放器控件。两种情况下，参考资源均为放置在技能 assets/ 文件夹中的普通 QML 源文件，无需任何注释或元数据。
对于 token 提取技能，生成的单例——Colors.qml、Theme.qml、Spacing.qml 等——均为普通 QML 文件，可直接用作参考资料。如果您的组织已建立颜色命名、主题模式结构或间距比例表达的规范，可将默认单例模板替换为您自有的版本。替换现有的 Colors.qml 或 Theme.qml 后，智能体将遵循您的属性名称和单例结构而非从默认值生成，使输出无需重命名即可融入您的代码库。您也可以仅为特定类别提供参考资源——例如提供自有的 Spacing.qml，同时保留其他类别的默认值。
设计系统提取技能的局限性
token 提取技能假定 Figma 源文件以合理规范的方式使用 Variables 和 Styles；仅应用于单个图层的临时本地样式无法可靠提取。一致性报告仅供参考——技能会标记 WCAG 对比度不符及结构性问题，但不会编辑 Figma 文件。
组件生成技能假定 Figma Components 和 Variants 以合理规范的方式使用；从未提升为命名组件的临时框架无法可靠提取。复杂的交互逻辑——例如日期选择器的日历导航或自动完成字段的过滤行为——无法仅从静态 Figma 文件中推断。智能体将生成具有适当属性和信号的视觉外壳，并在需要开发者补充交互逻辑之处标注 TODO 注释。
两项技能中引用的自定义字体必须单独提供给 Qt 项目——任何技能均无法从 Figma 中提取字体二进制文件。
智能体驱动的设计系统提取与 Figma to Qt 并行使用
两项提取技能与 Figma to Qt 是面向不同受众和设计到代码流程不同阶段的独立产品。
Figma to Qt 专为设计师打造，无需离开 Figma 即可将完成的 Figma 界面和设计系统（颜色、组件、样式）交付为可开发的 QML。它将完整 UI 转换为 QML 代码，并完整保留设计决策、视觉布局、交互性和结构。Figma to Qt 是专用的转换工具而非生成式工具：导出的 QML 代码精确反映设计师在导出前预览、验证和批准的项目。
提取技能专为使用 Claude、Codex 或 GitHub Copilot 等 AI 智能体的开发者打造。它们将 UI 界面背后的构建模块——组成设计系统本身的设计 token 和 QML 控件——转换为开发团队可拥有和扩展的代码库。
Qt 在设计师和开发者各自习惯的工作环境中与他们相遇。
依赖项
两项技能均需要安装 Qt 6 以验证生成的 QML，以及配置好的 Figma MCP 服务器和具有目标设计文件读取权限的 Figma 个人访问 token。
测试环境
技能已在 Claude Code CLI、Qt Creator 20 和 VS Code 中的 GitHub Copilot 上完成测试。Claude Sonnet 4.6、GPT 5.4 和 Gemini 3.1 Pro 均可取得良好效果。
获取技能
您可以从 GitHub 代码仓库获取 Qt 智能体技能：https://github.com/TheQtCompanyRnD/agent-skills。
您也可以通过 Claude 应用市场直接安装技能，作为 qt-development 插件的一部分（搜索"qt-development"）。如果您之前已安装该插件，可触发手动拉取 git 仓库克隆以获取最新技能。
