Canvo · AI 原生多模态创作工具

用高保真原型推敲画布交互，让 Agent 的状态可见、计划可改、花费可控。

用高保真原型推敲画布交互，让 Agent 的状态可见、计划可改、花费可控。

Design Owner

AI 原生创作工具

端到端设计与实现

个人项目 · 桌面端

canvoai.com

01

About Canvo

Canvo 是面向视觉创作者的 AI 工作台，支持在无限画布上调用多模型，生成和迭代文本、图像、视频与音频。

Agent 可读取画布、调用生成工具，再将结果放回画布。当它连续执行多步任务时，用户如何理解进展，并保有创作控制权？

1.1 我的职责与项目范围

我负责 Canvo 的产品定义、交互与视觉设计，以及开发实现。

  • 产品定义
  • 信息架构
  • 交互设计
  • UI 设计
  • 设计系统
  • 开发实现

项目处于小范围内测。本案例聚焦 Agent 与画布的协作：在提高执行效率的同时，让用户知情并保有决策权。

02

Problem Framing

Agent 接手执行后，用户从逐步操作转向审阅与决策，需要掌握进展、调整计划并控制花费。

Role shift in AI-assisted creation: the user decides and executes in manual creation; with Agent assistance, the Agent plans and executes while the user reviews and decides.

Problem 1

对话结束后，难以判断生成是否完成。

Problem 2

Agent 拟定的计划缺少执行前调整机会。

Problem 3

连续生成的累计花费无法设限。

让用户看得见进展、改得动计划、拦得住花费。

03

Design Strategy

设计策略对应三个问题。

1拦得住2改得动生成计划与参数3看得见执行进展

点击金字塔层级，查看对应策略。

04

Key Design Decisions

4.1 Agent 状态与生成状态分开显示

Agent 结束本轮对话时，视频可能仍在渲染。若此时提示完成，用户会误以为结果已生成。

我将两种状态分开：消息流显示 Agent 当前操作；输入区上方常驻显示当前项目正在生成的任务数和最长等待时间。对话结束后仍保留，直到生成结束。

基于参考图，生成三个视频镜头。

我会先检查画布，再准备生成所需的节点和参数。

读取画布

已查看画布中的节点与连接。

读取节点文字海边小屋

已读取参考节点的提示词。

查看图片海边小屋

已查看参考图的主体与构图。

读取节点文字 ×2海边小屋、分镜草稿

已读取两个节点的提示词与参数。

修改输入框海边小屋
思考中
消息流中的 Agent 工作状态

已发起三个镜头的生成，结果会回到画布上。

镜头 1
镜头 2
镜头 3
输入区上方常驻的项目生成状态

4.2 生成计划在执行前可改

Agent 拟定生成内容、模型与数量，费用却由用户承担；生成后再发现偏差，成本已付出。

生成前，Agent 提交可编辑的计划卡片。用户可就地修改提示词、模型、比例、数量或时长、清晰度，确认后按修改后的计划执行。

用户也可让 Agent 只建节点并填好提示词与参数，由用户在画布上检查、修改后再手动生成；准备节点不占用本轮生成额度。

输入区中的紫色 Agent 改动标记、Undo 按钮和手动生成入口
  1. Agent 修改的提示词与参数就地标出
  2. 不满意时可撤销修改
  3. 检查并调整后，由用户发起生成

取舍

「执行前确认」会让 Agent 逐份等待，因此提供「跳过所有确认」以连续执行；累计花费仍受单轮生成上限约束。

「执行前确认」会让 Agent 逐份等待，因此提供「跳过所有确认」以连续执行；累计花费仍受单轮生成上限约束。

4.3 用单轮上限约束累计生成花费

跳过所有确认后，Agent 可连续执行，但用户难以预知本轮的生成次数与累计积分花费。

屏幕前没有人的时候，产品还能替他守住什么？

系统默认设有单轮生成上限，独立于确认设置；可随时调整或选「不限制」，无需每轮重设。

设置单轮生成上限
A turn that hit its cap pauses and hands control back: a “Waiting on you” banner sits above a card stating the credits this generation needs and the current limit, with an inline stepper for a new limit, what would remain after submission, and two ways out — adjust and continue, or skip this generation. The raised limit applies to this turn only.
超限时，在对话中调整上限或跳过生成

为什么按整轮计算

一轮从用户提交任务到 Agent 回复结束。同轮多次生成合并计算，避免单次花费不高、累计却超出预期。

若预计下一次生成会使本轮累计超限，系统会在发起前暂停，并在对话中显示本次所需积分与当前上限。用户可调整上限后继续，或跳过本次生成。

05

Canvas Interaction

5.1 输入区常驻画布底部

输入区随选中节点浮动时，既会遮挡画布，也让用户在切换节点后重新寻找输入位置。

我将输入区固定在画布底部，减少位置变化，让注意力留在节点内容上。

常见做法

常见做法：输入区挂在节点下方

输入区随节点浮动，遮挡画布。

输入区随节点浮动，遮挡画布。

Canvo

Canvo：输入区常驻画布底部
Canvo：输入区常驻画布底部

输入区固定在画布底部。

输入区固定在画布底部。

取舍

固定位置也削弱了输入区与节点的空间关联。因此，我在输入区上方常驻节点标签，明确当前引用对象。

5.2 参数选择在输入区内联展开

比例、清晰度、时长等参数若通过浮层选择，会增加界面层级并遮挡画布。我希望基础参数的选择留在输入区内。

常见做法

常见做法：模型选择器在输入区上方弹出浮层

参数选择另开浮层。

参数选择另开浮层。

Canvo

参数选择在输入区内展开。

参数选择在输入区内展开。

选择器临时替换输入区内容，关闭后恢复原文。代价是选参数时看不到提示词；换来的是不增加浮层，视线留在同一区域，输入也不会丢失。

06

Reflection

Canvo 1.0.8 仍在小范围内测，尚无用户数据。以下三项设计判断仍待真实使用验证。

6.1 还没被验证的判断

计划卡是否需要完整编辑能力

4.2 假设用户需要在生成前调整计划。若大多数人直接确认，需结合修改频次与避免的生成损失，评估是否可简化为确认与重做。

常驻不等于被看见

4.1 将任务数和最长等待时间常驻显示，但仍可能被忽略。若用户仍误判任务已完成，就需验证何时应主动提醒。

内联是否更连贯

5.2 将参数选择与提示词放在同一区域，代价是两者不能同时查看。若选参数时需要对照提示词，往返切换可能打断思路，需要在真实任务中验证。

6.2 优先观察的三类行为

计划卡：已确认的计划中，直接确认与编辑后确认各占多少。

生成状态：等待期间的离开与返回行为，结合访谈判断用户是否理解任务仍在生成。

参数选择：记录返回提示词的次数与停留时长，结合操作过程和用户反馈，评估切换是否影响连贯性。

07

AI 协作开发

界面增加后，同类控件出现不同实现；进入新对话，已确认的做法也要重新交代。

7.1 让设计系统进入实际工作流程

Canvo 的插件设置由 Agent 在不同对话中分别完成：已安装的用开关，可添加的用「连接」按钮。同一列出现两种控件，用户需先辨认操作方式。

我将它们统一为设计系统中的同一个开关，并复用于设置页和技能页。开启表示正在使用；等待浏览器授权时显示加载状态，未成功则恢复关闭。

之前

已安装

即梦

可添加

Figma连接
Notion连接

同一列里，开关和按钮混用

之后

已安装

即梦

可添加

Figma
Notion

统一为开关，授权期间转圈等待

把设计规则变成自动检查

为让后续开发沿用规则，我将检查写进锁定测试：识别常见手写开关并提示替换组件，校验颜色和字阶定义，以及指定样式与组件中的表外字号。

controls.lock.test.ts TypeScript 
const HAND_ROLLED = /role(=|:\s*|=\{\s*)["']switch["']/
test('no hand-rolled switches: use the design system Switch', () => {

识别到常见手写开关 → 该项检查报错

复用 Switch → 符合该项复用规则

7.2 将 AI 协作经验整理成可复用方法

我曾扫过 Agent 的长计划就放行，直到完成后测试才发现理解偏差，浪费了一轮时间与 token。确认方向，并不代表理解一致。

我会先让 Agent 用最小示意呈现理解，例如骨架、草图或一条真实路径，尽早纠偏、减少返工。对齐深度随投入调整，改一处文案可直接做。

我将这些经验整理成 Skill：先判断任务缺什么、需要怎样协作，再调用对应方法，无需每次重走整套流程。

在 GitHub 查看 vibe-project-guide

Skill 结构

可复用方法

阶段指南

这个任务需要什么？

  • 产品
  • 架构
  • 基础
  • 实现
  • 交付
  • 迭代

按需选择指南

协作方法

我们该怎么配合？

  • 访谈澄清
  • 比较决策
  • 诊断问题
  • 执行落地

知识规则

下一个任务需要知道什么？

  • 更新记录
  • 关联证据
  • 恢复上下文

复用研究参考可视化

按需读取

任务流程

  1. 读取上下文
  2. 选择相关方法
  3. 执行与验证
  4. 更新与交接
  5. 项目文档 决策验证交接

需要时由人决策

下一个任务
方法复用在 Skill，项目知识留在项目。

08

Other Designs

输入区支持拖拽调整尺寸

长提示词在固定尺寸的输入区中难以完整查看和修改。我在左右上角加入双向拖拽手柄，让用户按内容调整可视区域。

画布性能优化

画布默认加载预览图，放大看细节时再加载原图。我接受略大的预览文件，以保留常用缩放下的清晰度，减少过早加载原图的开销。

Lightweight image previews on a canvas switch to full resolution when zoomed in, then return to previews when zoomed out.