AI 交互创建

概述

AI 交互创建使你能够使用自然语言构建交互，无需手动配置触发器和响应。描述你希望发生的效果，Studio AI 将生成相应的交互逻辑。

工作原理

1. 打开 AI 面板

2. 用自然语言输入你的交互请求

3. 使用 @ 提及 引用特定图层，以获得更高精度

4. AI 会分析你的工作区，规划交互，然后逐步执行

5. 查看结果，并在需要时手动优化

示例提示词

基础交互：

• “点击时更改 @Button 的颜色”

• “当点击 @Card 时导航到场景 2”

• “让 @Layer 仅可水平拖动”

复杂交互：

• “添加一个停止和开始交互，改变右侧按钮的颜色和文本。同时相应地启动和停止计时器。”

• “如果邮箱无效，将按钮改为灰色”

• “创建一个切换交互。第一次点击显示面板，第二次点击隐藏它”

理解 AI 的处理流程

当你输入提示词时，Studio AI 会：

1. 分析你的工作区：查看已选图层、现有变量和场景上下文

2. 规划交互：向你展示其打算执行的步骤摘要

3. 逐步执行：创建触发器、响应和公式，同时高亮受影响的图层

4. 确认完成：显示完成状态，并在需要时提供回退选项

上下文感知

Studio AI 理解你的工作区上下文：

• 已选图层：引用你当前选中的图层

• 现有变量：在合适时复用变量，而不是创建重复项

• 场景结构：理解图层层级与分组

• 先前交互：在同一会话中记住更早的请求

处理 AI 结果

查看已生成的交互：

• 当被提及时，AI 创建的元素会在画布上以彩色边框高亮显示

• 属性面板会显示所有交互细节

• 你可以在聊天中展开/折叠 AI 的解释部分

编辑与优化：

• 所有 AI 生成的交互都可通过 Studio 界面完全编辑

• 可在属性面板、交互面板或直接在画布上进行修改

• AI 会识别你的手动编辑，并在后续请求中尊重这些更改

停止与回退

停止：执行期间点击 [停止] 可取消。更改将自动回退。

回退：完成后点击 [回退] 可撤销 AI 最近的更改。在你手动编辑画布之前，始终可使用回退。

停止后会发生什么：

• 如果在任务完成后停止：保留编辑，任务块冻结

• 如果在任务进行中停止：回退编辑，恢复提示词输入

限制

在 Beta 期间，AI 交互创建：

• 无 VLM：AI 无法“看到”画布上的视觉设计，但它只会读取图层结构和属性数据

• 为现有图层创建交互（不会生成新设计或布局）

• 对于非常复杂的条件逻辑，可能仍需进一步优化

• 无法在组件内创建或修改交互

• 聊天记录不会跨会话保存