DINGDING.
返回全部作品

Buda

多智能体工作台与产品发布设计

Buda 将 Agent 任务、沙箱执行与云端 Drive 文件连接在同一个工作台中。我参与工作台、文件与多端体验迭代，设计并实现官网动效与 Mini UI，并用 Remotion 制作产品发布视频。

原项目交互演示Buda 官网原版 Hero
原产品界面 · 演示数据展开原版演示 ↗

关键设计判断

怎样让一次 Agent 运行既可理解，又能继续处理？

设计依据
Agent 通过工具与沙箱执行任务，Drive 保留云端文件供后续使用。任务步骤仍在运行时，部分产物可能已经可用；官网需要把执行过程与文件交付接起来。
关键取舍
工作台保留任务与文件上下文，分开表达执行状态和产物状态；官网用 Mini UI 删去次要信息，保留真实任务、文件与关键状态。
交付与验证
以工作台截图、官网组件和交付记录对照任务、工具调用与文件状态，同时核对响应式和多语言呈现，让界面实现与设计规则保持一致。

产品逻辑

从 Agent 执行，到云端文件复用

以一次产出文件的任务为例：用户在工作台提出需求，Agent 使用工具与沙箱执行，产出进入云端 Drive，供后续任务查找和使用。

  • 用户 · 工作台

    提出当前任务

    请求、会话与当前工作保留在同一上下文。

  • Agent · 组织执行

    调用工具处理

    围绕任务组织工具操作与过程反馈。

  • 沙箱 · 执行环境

    运行代码与工具

    在沙箱环境中完成需要执行的工作。

  • Drive · 云端存储

    保留文件产物

    保留文件名称、所属空间与操作入口。

    • 文档
    • 代码
    • 媒体

  • 后续任务 · 再使用

    从已有文件继续

    通过 Drive 找到产物，继续下一次处理。

沙箱承接执行，Drive 承接文件保存与复用。任务进度和文件状态分别表达：部分文件已经可用时，其他步骤仍可继续运行。

典型界面讲解

工作台里的三种上下文

我把会话、当前工作和工具入口留在同一工作台，让任务切换后仍能找到正在处理的内容。

  1. Agent 与会话

    左侧保留会话列表，切换时仍能识别当前任务。

  2. 当前工作内容

    中间承接请求与回复，沿同一上下文继续工作。

  3. 工具与文件入口

    右侧集中文件、浏览器与终端入口，减少离开任务的往返。

执行进度与文件状态，分开呈现

运行中的任务不等于所有文件都不可用。我将计划、执行反馈与产物入口分别呈现，让用户核对过程，也能继续查看文件。

运行中的任务 · Growth Analytics

  1. 开始执行前，让计划可检查

    先展示步骤与预期产物，再由用户开始执行。计划、运行与等待人工处理分别呈现，避免把“已开始”理解成“已完成”。

    计划卡片示例 · Claw-Man
    Claw-ManCode Generator · Game Renderer · Game Loopplanning
    Code Generator
    Game Renderer
    Game Loop
    Will produceclaw-man.tsx· Agent workspace
    Execute plan

  2. 任务完成后，仍能找到生成的文件

    文件卡保留名称与 Drive 归属，让用户离开对话后仍能定位交付物，避免结果只剩一条成功提示。

    文件产物示例 · Growth Analytics
    AgentDriveBrowserGit
    CMO+CIO scorecard draft
    Report Builder · synced to Drive

把执行过程拆成可复用的卡片

我围绕计划、工具调用、文件产物与人工确认，整理卡片的状态和动作。下面用基于既有工作流重建的组件示例，展示每一步如何说明进度、结果与下一步操作。

执行前的计划

先看步骤与预期产物，再决定是否执行。

Claw-ManCode Generator · Game Renderer · Game Loopplanning
Code Generator
Game Renderer
Game Loop
Will produceclaw-man.tsx· Agent workspace
Execute planWaiting on you to approve the plan

运行中的工具调用

已完成与运行中的步骤，在同一组里区分。

Workspace Search3s
Data Extractor9s
Report Builder12s

可继续打开的文件产物

保留文件名、类型与归属，让结果有迹可循。

CMO+CIO scorecard draftDoc · Drivewritten
OpenNothing needed from you
claw-man.tsxReact Component · 127 lineswritten
OpenNothing needed from you

等待人的确认

先说明待处理内容，再提供确认与审阅动作。

3 posts queued for approvalWeekly Focus · Cloud Workspacequeued
weekly-focus-nov4.mdMD · Drive
workspace-notes.mdMD · Drive
team-contact.csvCSV · Drive
Approve allReview eachWaiting for your approval

当前的执行，和已经完成的步骤

同一次任务中，已完成的工具调用仍保留在上下文里。将正在执行的一项放到前面，让当前进度与已完成工作各有位置。

工具调用组件示例 · 完整任务与卡片说明见上方

在手机上接续任务与文件

离开桌面后，用户仍会查看 Agent 进度与交付文件。我设计移动端会话、执行过程和文件查看界面，把核心状态留在当前页面，减少在列表、对话与文件之间的往返。

  1. 展开过程时，仍保留当前任务

    执行记录在当前会话内展开，保留已读取文件和已运行命令的反馈，便于判断 Agent 是否仍在工作。

    执行记录 · 局部放大

    读取文件、运行命令和修改结果，留在同一段执行记录里。

  2. 打开文件后，继续核对交付内容

    文件预览保留名称与正文，并列出读取过的源文件和变更说明，便于核对 Agent 交付了什么。

    源文件 · 局部放大

    交付内容保留源文件记录，查看结果时也能核对依据。

为官网实现连续的产品演示

官网首屏需要让访客理解 Buda 能完成什么。我设计并实现工具调用到文件交付的连续工作流动效，同时制作布局、Drive 和工具操作等 Mini UI，并检查响应式与多语言表现。

Go-to-Market Strategist
Help me build a 2-week launch plan.
I found competitor angles, drafted the calendar, and saved artifacts to Drive.

我保留 Agent 列表与当前会话的并列关系，让切换任务时仍能看到正在处理的内容。

面向首次了解 Buda 的访客，完成 8 张上架展示图的内容组织与视觉设计。以产品主张、Agent 协作和实际工作流分别承接不同的信息，统一版式与界面证据。

开场先建立产品识别

第一张承担品牌与产品主张，让第一次看到 Buda 的人先知道这是什么，再进入界面细节。我把它与后续操作画面分开，避免一张图同时解释所有能力。

用连续任务解释工具与产物

操作画面围绕 Agent 执行展开，把工具调用和交付结果放在同一叙事中。设计重点是让访客理解一次工作如何完成，而不是罗列互不相关的界面。

用纯代码制作产品发布宣传片

确定分镜、旁白与产品演示内容，通过 Vibe Coding 使用 Remotion 将 10 个段落实现为可复用组件，完成 150 秒 Buda 产品发布宣传片。

先建立品牌识别，再展开产品演示

品牌登场用于建立识别，随后用真实产品演示承接能力说明。我将两类信息安排在不同段落，减少旁白与画面同时争夺注意力。

将具体操作保留为可修改段落

产品界面会持续变化。我将演示内容拆进 Remotion 的可复用段落，使画面、旁白与字幕能围绕同一操作调整，而不必重新制作整支宣传片。

发布交付

Product Hunt 展示图
8张
产品发布宣传片
150秒
可复用视频段落
10

我为 Buda 完成 Product Hunt 展示图的内容组织与视觉设计，并用 Remotion 纯代码制作发布宣传片，将品牌、产品演示与具体场景分别放进可修改的段落。

复盘

如果重做一次，我会在制作前先统一标题、字幕和界面状态的规则，并让分镜、旁白与画面逐段对应，便于后续更新时检查一致性。

继续浏览

Busabase