CodeIsland Agent Room:预览图要讲清什么

About 5 min read

多终端、多模型融进同一协作房间——下一版概念图该强化路由、状态、权限与最终产物。

Contents · 6 sections · jump to a heading

CodeIsland 风格的 Agent Room 概念图需要让人一眼看懂:

多个独立终端 session 与不同 AI 模型,融进同一个协作房间。Agent 可互传消息、派发任务、回调、调用工具、请求权限,并围绕共同任务交付结果。

它在产品层表达 multi-agent 协作,在工程层呈现 Agent Harness:房间把编排、路由、权限与交付投影到 UI 上。

当前图已经有的

  • 暗色终端 / CodeIsland-like 视觉
  • ROOM 模式与共享任务(如 Fix login bug)
  • 多角色:Planner / Backend / QA / Reviewer
  • 多模型来源:Claude、Codex、Qwen、Gemini
  • 进度条与工具调用片段
  • 底部 @agent 输入

这些元素已经能说明「有多个 agent 在干活」,但观众仍可能把它读成聚合日志面板。下一版需要把 Agent 之间的融合与互操作画出来。

下一版要补强的八件事

  1. 消息路由 —— 卡片标题写清 Planner → Backend, QA,别只剩统一日志流。
  2. 终端来源 —— 如 Codex · Ghostty #api,强调「真终端融合」,不是虚拟群聊。
  3. 有意义的状态 —— 用 editing · patch ready 替代全员 live。
  4. Agent Bus —— 左侧列表与时间线之间的轻量路由视觉。
  5. 更像刘海浮层 —— 减弱普通 App 窗口感,保留 notch、等宽字、霓虹绿、像素 mascot。
  6. 权限请求 —— Approve / Deny / Modify,人类可介入。
  7. 具体输入框 —— 如 @reviewer focus on security risk...。
  8. 最终 Artifact —— Diff、测试、review、可交付文件列表,闭环。

工具调用片段(tool.search、tool.edit、$ pnpm test)应呈现真实 tool use 轨迹。权限卡对应 harness 的执行门:模型可以请求,人类与策略决定是否放行。

5 秒验收清单

用户应立刻读出:

  1. CodeIsland-like 刘海浮层
  2. 处于 ROOM 模式
  3. 多模型 + 多终端已连接
  4. 围绕同一任务协作
  5. 消息在 Agent 间路由
  6. 人类可 @ 插话与审批
  7. 最终有可交付结果

风格分支

分支强调
更原生 CodeIsland黑空间、notch、terminal badge、像素 mascot
更产品 Dashboard左列表 / 中时间线 / 右产物面板
更系统浮层桌面上浮、极简 chrome、高信息密度

选型取决于用途:对内对齐产品叙事时,原生 CodeIsland 身份优先;对外路演讲「多 agent 如何交付」时,Dashboard 更清晰。同一信息架构可以出两套皮肤,但路由 / 状态 / 权限 / 产物四件套不要丢。

为什么值得记

这份笔记用可视化表达 multi-agent 协作的产品语义:共享任务、消息总线、工具调用、权限门和交付物。设计 Agent Room 或类似 harness 前端时,可以用上述清单验收信息架构,再调整颜色与圆角。

若你在设计 Coding Agent 的「房间模式」,优先保证信息架构正确,再抠霓虹与像素:用户先要懂 谁在跟谁说话、在哪个终端、卡在哪一步、人类能否插手、最后交付什么。

生成与迭代顺序

  1. 用强化版中文提示词出下一张图。
  2. 与基准图并排:路由与终端融合是否一眼可见。
  3. 不够则单点迭代(只加 bus,或只加权限卡),避免一次改十处。
  4. 定稿后把图回链到产品笔记,作为 Agent Room 概念锚点。

Share this note on Twitter / X · Browse all articles · Feedback via @qianyuhe.

Thanks for reading.

– 千羽鹤