Skip to Content
AI设计助理AI 设计助理

AI 设计助理

AI 设计助理功能

AI 设计助理可以理解你和他的对话上下文,通过对话的形式与你进行需求的讨论和沟通,AI 助理可以理解你的诉求,在需要的时候生成线框图、在画布上绘制原型图、在需求管理中创建需求文档卡片。

使用 AI 设计助理

进入文件编辑器,点击右下角 AI 设计助理按钮,即可开始与 AI 对话。

AI 设计助理使用场景

和 AI 讨论需求

你可以把想法告诉 AI 助理,和 AI 讨论需求的设计方案,让 AI 给你发散想法、提出补充、进行评价等等。只需要通过自然语言与 AI 对话即可

让 AI 生成原型图

你可以跳过线框图的阶段,直接让 AI 生成原型图。AI 会在画布上绘制原型图,你甚至可以继续与 AI 对话,提出编辑修改的要求,AI 会按照你的要求在画布中绘制新的原型图。 你向 AI 提供的信息越丰富,AI 就越能理解你的需求,生成的原型图也会更符合你的预期。

AI 编辑

AI 编辑功能允许你在 AI 生成原型图后,继续通过对话的方式对设计进行精细化的编辑和修改。

核心用法:

  • 选择目标页面:选择图层,或添加图层附件给 AI,用来标记要编辑的目标页面
  • 发送编辑需求:告诉 AI 页面中哪个模块(图层名)要修改成什么样,AI 会转交给 AI 编辑助理专门处理页面设计编辑。有两种方式可以发送编辑需求:
    • 选择画框容器后,在画布上弹出的快捷工具栏中选择 「AI 编辑」,然后输入编辑需求,发送,接口自动调起并 AI 对话并发送消息。
    • 选择目标图层,在 AI 对话中发送编辑需求给 AI。
  • 直接编辑图层:AI 页面设计编辑可以在原设计中直接编辑图层
  • 撤销/重做:编辑完成后,可通过 (Mac)或 Ctrl(Windows)+ Z 撤销,或 /Ctrl + Shift + Z 重做
  • 大范围编辑:当涉及到较大范围的编辑或重构时,AI 会倾向于创建副本做新的设计
  • 创建新页面:如果不想让 AI 直接在原图编辑,可以告知 AI 创建新页面来编辑

让 AI 生成 PRD

你可以通过需求描述,或者让 AI 在生成的线框图、原型图基础上生成 PRD 文档。

让 AI 为画布上的页面设计添加交互设计

AI 可以为画布上的设计添加或编辑交互设计。例如向 AI 发送指令:「为画布上的图层设计添加交互设计」,AI 会先调用工具获取并分析当前画布上的设计,然后切换至原型模式,逐个添加交互逻辑。

目前 AI 交互设计支持为页面设置尺寸和滚动方式,以及添加以下动作:

  • 前往页面
  • 返回上一级
  • 显示/隐藏图层
  • 打开链接

给 AI 添加附件

添加附件可以让 AI 获取更多上下文信息,以便更准确地满足你的需求,在 AI chat 界面点击附件按钮,在菜单中选择附件即可添加附件。 AI 可以基于附件完成原型编辑、新增,或需求文档的生成。你也可以通过在对话框中输入 @ 符号选择添加图层或需求卡片附件。

你可以添加四种类型的附件:

  • 图层:选择当前画布上的页面设计。
  • 需求:当前文件中的需求文档卡片。
  • 图片附件:从本地文件中选择图片上传,可以是 UI 截图或者手绘草图等。
  • 网页:在任意网页使用 Calicat 浏览器插件提取网页,即可将网页作为附件添加。详见 浏览器插件

让 AI 主动获取需要的信息

AI 设计助理可以通过工具获取画布结构信息、图层详细设计数据、需求文档列表、需求卡片内容、交互设计数据等。你可以通过向 AI 发送相关的明确指令,让 AI 自动获取需要的信息,而不必总是手动添加图层或需求附件。

最佳实践

让 AI 设计模块,使用自动布局将模块组合成页面: