Qt 用 AI 把界面稿变成 QML

Qt 正式推出了面向嵌入式设备的 AI 原生界面设计工具 Clate，首个公开测试版本为 Clate 0.6 Beta，设计师可以在可视化画布上绘制界面，也可以直接用自然语言让 AI 创建或修改元素，最终将成果导出为工程师可继续开发的 QML 文件。Qt 于 2026 年 10 月 27 日在 Qt World Summit 2026 上公布这款产品，11 月 1 日相关 Beta 信息进一步进入国内开发者视野。(qt.io)

**Clate 是一款为嵌入式设备与 HMI 项目设计的无代码 UX 工具。**它不是给网页落地页、手机 App 原型或营销海报准备的另一个 Figma，而是希望覆盖工业控制面板、医疗仪器、车载屏幕和消费电子设备的界面设计流程。

这款产品最值得关注的地方并不是“AI 能画界面”，而是 画布中的对象会在后台对应到真实 QML 结构。过去嵌入式项目经常是设计师交付静态设计稿，开发者再用 QML、C++ 或设备厂商的 UI 框架重新实现一遍；Clate 想把这两步压缩成同一个过程，让设计稿从一开始就是可运行代码的一部分。

Clate 到底解决了什么问题

**HMI 是人与机器进行信息交换和操作控制的人机界面。**与普通网页相比，HMI 往往运行在内存、GPU、CPU 和存储空间都更受限制的硬件上，还要面对不同屏幕比例、触控方式、实时数据和长生命周期维护等问题。

嵌入式界面的难点因此从来不只是“做得好看”，而是设计效果能否在目标设备上稳定运行。设计师在桌面电脑上做出的模糊阴影、复杂渐变和高帧率动画，放到一块低功耗芯片上，可能马上变成掉帧、内存溢出或启动时间过长。

Qt 对 Clate 的定位很明确：让设计师使用类似现代设计软件的画布和属性面板，但让每一个矩形、文字、图片和层级关系都尽量落到 Qt Quick 的实际对象上。Clate 0.6 已支持无限画布、页面与图层管理，以及对象的移动、缩放、旋转、对齐、分布和复制；填充、描边、渐变和文字等属性也可以在属性编辑器中调整。(doc.qt.io)

**QML 是 Qt 用于描述用户界面结构、属性和状态关系的声明式语言。**它与 HTML 或声明式 UI 框架的思路相近：开发者主要描述界面“是什么”和属性之间“如何关联”，而不是逐步编写每一个绘制动作。

Clate 当前导出的目标版本是 Qt 6.12。设计师完成视觉界面后，可以预览选定图层在独立窗口中的运行效果，再导出普通 QML 文件；工程师则可以在这些文件上继续加入信号处理、业务逻辑、设备数据和 C++ 后端，而不是对着 PNG、PDF 或标注稿重新测量间距。(doc.qt.io)

这也是 Clate 与普通“截图转前端代码”工具最根本的差别。多数通用 AI UI 工具优先生成 React、HTML 和 CSS，但这些代码无法直接解决嵌入式设备上的 Qt Quick 渲染、输入事件和原生部署问题；Clate 生成的范围更窄，却更接近 Qt 项目的实际交付链路。

AI 助手不是聊天摆设

**Clate AI Assistant 是一个能够读取并修改当前设计项目的聊天式智能体。**设计师可以要求它创建一个仪表盘、调整按钮颜色、统一多个元素的圆角，或者重新排列一组选中的控件，AI 的修改会直接反映在画布上，而不是只在聊天窗口里返回一段建议。

首个 Beta 内置助手目前支持 Anthropic 的 Claude Agent，用户需要安装相应组件，并使用自己的 Claude 账号登录；Qt 表示未来还会加入其他模型服务。每次 AI 修改都会进入撤销历史，因此用户可以像撤销普通画布操作一样撤销 AI 的改动。(doc.qt.io)

**ACP 是用于连接应用与 AI 智能体服务的 Agent Client Protocol。**Clate 通过 ACP 接入内置的 Claude Agent，让用户可以在工作区内完成模型安装、登录和对话，而不必自行拼装聊天界面与工具调用流程。

**MCP 是让 AI 模型发现并调用外部工具的 Model Context Protocol。**Clate 内部还提供本地 MCP Server，使支持 MCP 的外部 AI 工具能够读取页面和图层，并调用 Clate 提供的设计操作修改当前项目；换句话说，Claude 是首发内置选项，但 Clate 的工具接口并不准备永久绑定单一模型。(doc.qt.io)

这套架构比在设计软件旁边塞一个聊天机器人更有实际意义。AI 不是根据截图猜测最终代码，而是在受限的设计工具集合中执行创建对象、读取属性和应用修改等操作，理论上更容易保证结果仍然是 Clate 能识别、能撤销、能导出的工程结构。

不过，AI 仍然不是 Clate 当前最可靠的价值来源。社区对 AI 生成 QML 的评价并不一致：它可以快速完成基础布局和重复编辑，但也可能混淆 Qt 5 与 Qt 6 API、虚构属性，或生成视觉上接近、工程语义却不合理的结构。对于医疗设备、工业控制等场景，AI 适合负责初稿和机械修改，不适合跳过开发者审查。(reddit.com)

Clate、Figma 与 Qt Design Studio 怎么选

**Clate 的产品位置介于通用视觉设计工具和专业 Qt 开发工具之间。**它想保留 Figma 一类工具的易用性，同时让交付物更接近 Qt Design Studio 和 Qt Creator 所处理的真实 QML 工程。

| 工具或流程 | 主要用户 | 核心产物 | 嵌入式适配 | AI 能力 | 当前更适合的场景 | |---|---|---|---|---|---| | Clate 0.6 Beta | UI/UX 设计师、HMI 团队 | 可继续开发的 QML | 原生面向 Qt 与嵌入式设备 | 内置 Claude Agent，并提供 MCP Server | 新项目原型、静态界面、验证设计到 QML 的交付流程 | | Figma | 产品与视觉设计团队 | 视觉稿、组件和交互原型 | 默认面向 Web 与移动端 | 依赖插件及第三方服务 | 已有成熟设计系统、多人视觉协作和产品原型 | | Figma to Qt | 已使用 Figma 的 Qt 团队 | 从 Figma 转换的 QML 项目 | 面向 Qt 转换与预览 | AI 不是核心 | 不想迁移设计工具，但需要稳定输出 QML | | Qt Design Studio | 技术美术、Qt 前端和 3D 团队 | QML、Qt Quick 与 3D UI 工程 | 很强 | 不是主要卖点 | 复杂动画、3D 界面和需要开发者深度参与的项目 | | 手工重建 | QML/C++ 开发者 | 完全可控的工程代码 | 取决于团队能力 | 可配合编码助手 | 高度定制、强性能约束或已有成熟组件库的项目 |

Clate 对新项目最有吸引力，因为团队可以从第一张界面开始就在它的 QML 约束内设计。对于已经沉淀了数百个 Figma 组件、设计 Token 和插件流程的团队，立即迁移并不现实，继续使用 Figma to Qt 可能更稳妥。

Qt Design Studio 也不会因为 Clate 出现而失去意义。Qt 对二者的划分是：Clate 面向希望控制完整嵌入式体验、但不想直接写代码的 UX 设计师；Qt Design Studio 面向能够与开发者协作处理 QML、复杂动效和 3D 界面的技术美术与前端人员。(qt.io)

现在的 Beta 还远没有到生产就绪

**Clate 0.6 是技术预览，而不是可以直接替代成熟设计系统的正式产品。**当前版本已经能够绘制基础图形、管理图层、导入图片、自动保存项目、调用 AI、预览界面和导出 QML，但关键的工程化能力仍在路线图上。

| 能力 | Clate 0.6 状态 | Qt 公布的计划 | |---|---|---| | 基础图形、文字、图片与图层 | 已支持 | 持续完善 | | QML 导出 | 已支持，目标为 Qt 6.12 | 持续优化输出质量 | | AI 创建与修改界面 | 已支持 Claude Agent | 后续增加更多 AI 服务商 | | 可复用组件与实例 | 尚未支持 | 计划在 2026 年加入 | | 变量与数据绑定 | 尚未支持 | 计划在 2026 年加入 | | 动画和节点式交互 | 尚未支持 | 计划于 2027 年春季加入 | | 设计系统与 Design Token | 尚未支持 | 计划于 2027 年春季加入 | | 多人实时协作与评论 | 尚未支持 | 计划于 2027 年春季加入 | | 正式商用版本 | 尚未发布 | 预计 2027 年夏季推出 |

缺少可复用组件是当前最明显的限制。一个工业控制台通常会反复使用按钮、状态灯、报警卡片、仪表盘和导航栏，如果每个页面都只能由独立的 frame、shape、text 和 image 拼装，修改成本很快就会失控。

缺少数据绑定则意味着 Clate 0.6 更像“能输出真实 QML 的高保真静态设计工具”，还不是完整的 HMI 行为设计平台。例如，设计师暂时不能完整定义温度超过 27 摄氏度时颜色变红、压力值变化时仪表指针旋转，或设备离线时按钮进入禁用状态；这些逻辑仍要由工程师在导出后补充。

Beta 的导出流程也存在一些需要注意的细节。官方文档称，Clate 遇到无法表达为 QML 的设置时，可能直接忽略该设置而不显示提示；导出到已有目录时，它会覆盖同名文件，但不会主动删除旧文件，因此测试时最好使用空目录，并通过版本控制检查每次导出的差异。(doc.qt.io)

平台信息目前还有轻微的文档不同步。Clate 产品页已经列出 Windows、macOS 和 Linux 下载入口，但 0.6 Release Notes 仍写明该版本运行于 Windows 和 macOS；Linux 用户在正式用于项目之前，应以实际安装包和最新说明为准。(qt.io)

Clate 真正的护城河是“设计即实现”

**Clate 最有价值的产品判断，是把设计文件视为软件工程的一部分，而不是软件工程的参考资料。**AI 生成页面很容易被复制，聊天框、提示词和模型接入也不是长期壁垒；真正难的是让设计对象、QML 输出、运行预览、性能限制和后续工程修改保持一致。

这一点对嵌入式行业尤其重要。网页开发可以依赖浏览器、强大的设备性能和成熟的响应式布局体系，但嵌入式产品可能要在同一套代码上覆盖不同芯片、不同分辨率和数年的硬件生命周期，界面设计如果脱离真实运行环境，后期返工几乎不可避免。

Qt 还计划为 Clate 加入帧率和内存占用监控，让设计师在设计阶段就能看到视觉决策的硬件成本。如果这部分最终落地，Clate 才会真正形成与 Figma 类工具的差异：它不只告诉设计师界面看起来如何，还能告诉团队这套界面在目标硬件上是否跑得动。

但 Clate 的优势同时也是它的边界。当前输出只面向 QML 和 Qt，这意味着它不是跨框架的通用设计平台；如果项目最终使用 Web、Flutter、原生 Android 或厂商私有 GUI 框架，Clate 的直接价值会明显下降。

我们的判断

**Clate 0.6 值得 Qt 嵌入式团队试用，但还不值得立即替换现有生产流程。**它现在最适合用一个独立页面或小型设备项目做验证，重点观察 QML 输出是否清晰、导出后的修改能否持续维护，以及设计师与开发者能否真正减少重复劳动。

Clate 对行业更深层的影响，是 Qt 开始争夺设计流程的上游入口。过去 Qt 的优势主要集中在框架、IDE、运行时和跨平台部署，设计师通常在 Figma 或其他工具里完成前期工作；Clate 如果成熟，Qt 就可以从第一张草图开始进入项目，并把设计、代码和目标设备锁进同一条工具链。

这是一场比“AI 会不会画一个按钮”更重要的尝试。Clate 要证明的不是模型能否生成漂亮页面，而是设计师交付的内容能否真的成为产品代码，并在资源受限的设备上保持可维护、可运行和可迭代。

现阶段，Clate 的方向比功能更成熟。组件、数据绑定、动画、设计系统、协作和性能监控全部落地之后，它才可能成为完整的嵌入式 UX 工作台；在此之前，Clate 0.6 更像一份可以亲手试用的产品宣言。

参考来源

• IT之家：Qt 推出零代码嵌入式界面设计工具 Clate — 介绍 Clate 0.6 Beta、QML 导出、Claude Agent 接入与产品路线图。
• Reddit：Clate 视觉设计工具发布讨论 — Qt 开发者社区对 Clate、QML 导出和 AI 集成的初步讨论。
• Reddit：AI 在 Qt/QML 开发中的能力与局限 — 社区用户分享 AI 生成 QML 时的实际效果和常见错误。