AI 面板界面

面板状态

AI 面板在运行期间会显示不同的状态：

空闲状态：已准备好接收你的输入。当没有聊天记录时，会显示四条建议提示词，帮助你快速开始。已准备好接收你的输入。当没有聊天记录时，会显示四条建议提示词，帮助你快速开始。点击建议提示词可填充输入框。提示词会被输入，但不会自动提交。

处理中状态：AI 正在分析你的请求。你会看到类似“正在获取...”或“正在分析...”的状态指示。

编辑状态：AI 正在主动修改你的原型。画布底部会出现横幅，显示“ProtoPie AI is taking control”，并带有一个[停止]按钮，可在需要时取消。

聊天行为

• 已提交的提示词会显示在聊天区域顶部

• 聊天记录在会话之间不会保存——关闭标签页或重置都会清空历史记录

• 要重新开始，请点击面板标题栏中的重置按钮

使用 @ 提及

在提示词中输入 @ 可提及特定图层。这会为 AI 提供更好的上下文，相比仅通过名称描述图层，能生成更精确的交互。

示例：“让 @ButtonLayer 在点击时变灰”

响应控制

AI 回复后，你有多个选项：

👍 / 👎 反馈：为回复质量评分，以帮助改进 AI。

复制回复：将完整回复内容（包括代码块）复制到剪贴板。

重写：为同一提示词重新生成不同的回复。

• 仅对最新回复可用

• 如果你发送新提示词或进行手动编辑，该选项会消失

AI 回复类型

Studio AI 会根据你的请求提供不同的回复格式：

文本回复

支持格式化的纯文本说明，包括标题、正文文本、链接、行内代码、引用块和表格。用于说明、文档问答和一般回复。

Mermaid 图表

当你要求绘制流程图、用户流程或其他图表时，AI 可以使用 Mermaid.js 语法生成可视化图表。流程图基于工作区中现有对象和交互。图表会渲染为可交互图像，并提供以下选项：

• 复制代码：复制 Mermaid.js 源代码

• 下载为图片：将渲染后的图表保存为 .svg

公式块

专用于 ProtoPie 公式的代码块，显示包括：

• 语法高亮

• 复制按钮

• 指向 ProtoPie 公式文档的如何使用链接

代码块

通用代码示例（JSON、JavaScript 等），包含语言标签、语法高亮和复制按钮。

资源卡片

当 AI 引用文档时，会显示可交互的资源卡片：

官方文章：ProtoPie 图标、文章标题和面包屑路径、“Official Article”标签

YouTube 视频：视频缩略图、“Youtube Video”标签

外部链接：带 URL 的地球图标

多个资源会以带分页的轮播形式显示。

计划块

在创建交互时，AI 会显示其规划过程：

规划中：显示“Planning...”，并带有可展开内容以展示完整分析。

完成时：折叠为“Planned”并显示对勾。内容包括：

• 目标：AI 打算创建的内容

• 结构：将使用的元素

• 创建顺序：分步执行计划

• 交互：触发器 → 响应映射

任务块

显示交互创建的执行进度：

进行中：“Working...”并带有旋转图标

已完成：“X tasks done”并带有对勾

每个任务会显示操作类型（添加、编辑、删除等）和受影响的元素。对勾表示已完成任务，旋转图标表示进行中的任务。