Agent 工作台

让 AI 改代码之前，先问你一句

Jarvis 是我给自己做的本地 Coding Agent。第一版拿 3 个真实任务验收，没有一个是它自己完成的：人看不出它在做什么，它停下来时也接不住。这一页讲重做后的界面：把 Agent 每一步在读什么、改什么、等什么，翻译成不写代码的人也看得懂的样子。

交互原型 · 数据为预设剧本

  • ROLE独立设计与实现
  • TIME2026
  • PLATFORM桌面 Web · 本机运行

01Problem

功能都在，但界面说的是系统的话

旧版里，Agent 停下来等审批的那一刻。

旧版
悬停查看 · 点击固定 · Esc 取消
旧版审批界面：顶栏一行堆着状态字段，审批卡写着写入文件、操作 write、查看调用参数，底部三个按钮挤在一排
  1. 1
    Header.Status

    顶栏一行 6 个字段、2 个标签

  2. 2
    Approval.Detail

    卡片写的是 write 和调用参数，看不出要改哪个文件

  3. 3
    Approval.Actions

    拒绝、要求调整、允许一次挤在同一排

悬停或点一个标注，这里展开它的设计细节

02Architecture

三种界面，看的是同一份记录

Jarvis 架构 GUI、CLI、TUI 三种界面读写同一套事件与状态。运行时里有权限门、工具与模型、会话记录、本机服务四块。完成要过完成判定：确定性检查、需求逐条对照、你的确认。 SURFACES RUNTIME GUICLITUI 这一页 EVENTS 同一套事件 三种界面看到的是同一份记录，换界面不丢进度 权限门写文件、跑命令、联网、碰敏感路径，先过这一道 工具与模型读写文件、终端；模型按档位选 会话记录JSONL，只追加不改写，能回放 本机服务界面只监听本机，不对外开端口 VERDICT 完成判定 确定性检查需求逐条对照你的确认 三样都过才算完成

03Flow

一次任务里，你只在三个地方出手

一次任务的泳道图 四条泳道：你、Jarvis、项目文件、检查。你发任务；Jarvis 读代码、给方案，然后等你；你允许后 Jarvis 改代码，写入 2 个文件；跑测试和类型检查，没通过就回去再改；通过后 Jarvis 汇报，你看结果，改动可以撤销。 理解方案确认修改检查交付 你Jarvis项目文件检查 发任务允许看结果 读代码给方案停下来等你改代码汇报 只读写入 2 个文件可撤销 测试 + 类型 没通过，再改
你出手的三个地方：发任务、允许、看结果
任务状态图 任务从空开始，进入运行。运行中可能停下来等你确认，允许后回到运行；可能检查没通过，让 Jarvis 修好后回到运行；可能被停止，继续后回到运行；最后完成，完成后可以撤销和恢复。 空运行 等你确认完成没通过已停止 允许后回到运行可撤销，也能恢复让 Jarvis 修好，回到运行从停下的地方继续 6 STATES
原型里 6 种状态都能直接打开，后面的录屏就是按这张图挨个点过去

04Before / After

前后对比 · 5 处改动

同一个审批时刻，重做成一个问题、两个按钮

  1. 01 审批卡直接问“要修改 2 个文件，可以吗？”
  2. 02 决定按钮允许为主，想换做法就在输入框里说
  3. 03 顶栏只留任务名
  4. 04 左栏按项目列出全部任务
  5. 05 输入框权限、模型、花费收进底边

05Interactions

从发任务到改设置，每个交互都录了下来

做任务

运行中插话还在看代码时补一句，原地接上
审批先看改动，再允许，卡片原位收成一行
没通过看输出，让 Jarvis 修好，第 2 轮通过
撤销与恢复撤销前确认一次，撤了还能恢复

管理与设置

左栏搜索、按状态筛选、拖动排序、重命名
附件带一张截图发出去，点开看大图
设置权限三档、设置各页、深色模式、快捷键
新窗口打开交互原型

06Results

改完以后，换三种角度看它做了什么

右栏改动单栏 / 并排，预览对比与手机宽度，终端，拖动调宽
画布链路、状态、时间三种图，能拖能缩放
讲解图分层拆解、改动前后、做法

07Evolution

同一个审批时刻，做过 7 版

前 6 版一直在加信息，最后一版改成删。

  1. 01
    V13 工作台审批态

    V13 工作台

    审批卡第一次放进对话流

  2. 02
    对齐修复后的审批态，右侧多了证据栏

    对齐修复

    右侧加了常驻的证据栏

  3. 03
    审批卡里直接显示即将写入的代码

    写入预览

    卡片里直接看要写入的代码

  4. 04
    人工检查表：每一项要勾选并填理由

    人工检查

    完成前逐条勾选检查项

  5. 05
    精修版，右侧是快捷面板

    精修

    工具收进右侧快捷面板

  6. 06
    旧版审批态：状态行、告警条、急停都在

    旧版

    状态行、告警条、急停都齐了，也是信息最多的一版

  7. 新版
    新版审批态：一个问题、文件列表、允许按钮

    新版

    从“用户这时想知道什么”出发，删到一个问题、两个按钮

08Design system

原型做完，再把每个状态收进 Figma

按原型逐个整理成组件，审批、没通过、深色、窄屏都有对应的一张。改一个主组件，引用它的界面一起变。

  • 348变量
    颜色、字阶、间距、圆角
  • 84图标
    统一尺寸与线宽
  • 863主组件与变体
    按钮、输入到 Agent 模块
  • 47界面
    桌面、深色、390 窄屏
审批卡组件：要修改 2 个文件，可以吗？下面列出两个文件和预览入口，允许、这个任务都允许、不允许三个选项
ApprovalBody待审批
结果卡组件的检查失败态：改完了，但检查没通过，下面是让 Jarvis 修好、看预览、撤销
Section检查失败
权限选择弹层：只讨论、改之前问我、自动三档，下面一个这个任务里不再问的开关
Popover权限三档
要做的事清单组件：9 项全部完成，其中一项标着你补充的
Todos完成态
时间图组件：每一步花了多久，从你提了要求到改好了，共 9 行
TimeMap每一步花了多久
深色主题下的完成态界面
深色主题同一套变量换一组颜色
390 宽窄屏下的待审批界面
390 窄屏待审批

组件库按交互原型整理，数据同为预设剧本。

09Review

加信息容易，删信息要先想清楚用户在问什么

做得好的

  1. 01每个状态先写“用户这时想知道什么”，再决定界面上留什么；状态条四格都来自真实字段，不编进度百分比。
  2. 02失败按原样记录，“安全停下来”和“任务成功”分开记，界面改动从真实运行里出的问题倒推。
  3. 03改动、检查、撤销都放在对话里；6 种状态都能直接打开，评审时不用等 Agent 跑到那一步。

做得不够好的

  1. 01长任务还不够稳——一次真实运行里，界面突然断线，审批按钮被禁用，只能强杀。我把现象交给 Agent 排查：输出量暴增时，推送管道把“缓冲区暂时写满”误判成了断线。修复后我验收过，这次仍记为未完成；真实网络和系统异常下稳不稳，还要更多运行来验证。
  2. 02原型还没接真实运行——这一页的数据是预设剧本。前 6 版一直在补信息，直到第 7 版才回头删；大项目里多个任务同时读写文件会怎样，还没验证。
  3. 03只有我自己用过——还没请别的设计师上手，不知道不熟悉命令行的人能不能接手一个跑到一半的任务。

界面替 Agent 说话，说的应该是用户这时想知道的事。