Anywhere Door

Tag

product-design、interaction-design、visual-design、chrome-extension

Anywhere Door 是什么?

一个跨标签页的 AI 生成状态层,让用户在当前页面看见所有任务,并一键回到已完成的对话。

根据项目原稿生成的 Anywhere Door 浮窗与 Eye Icon 概念视觉

用户痛点

多个 AI 标签并行之后,等待本身不耗时,反复确认状态才消耗注意力。

日常工作里通常同时开着 4 至 6 个 ChatGPT 和 Gemini 标签页,每个页面都在处理不同任务。向 A 模型发出问题后切到 B 模型继续工作,但 A 何时完成并没有统一信号。

现有动作是记住每个标签,再逐一打开确认。标签页越多,用户越容易把任务状态、上下文和下一步都留在短期记忆里。

根据项目原稿生成的六个 AI 标签页反复切换示意

浏览器容器与任务状态的三层断裂

1 感知层:标签页不表达生成状态

标签标题只能说明页面存在,无法说明当前任务正在等待、生成、完成还是报错。用户看到的是容器,缺少状态。

2 操作层:检查状态必须切换页面

切换六个标签页只为确认一句回复是否完成,认知恢复与鼠标操作会反复打断当前工作。

3 注意层:完成事件没有主动出口

生成完成本应被告知,但浏览器不会把这类页面事件汇总给用户,最后只能依靠人工轮询。

根因判断:浏览器标签页负责容纳页面,不负责汇总页面内部正在发生的任务。Anywhere Door 增加的是跨标签页状态层。

设计方案

把状态放回当前画布,并用统一状态机隔离不同 AI 平台的 DOM 差异。

1 浮窗与 Eye Icon 是同一信息层的两种密度

完整浮窗负责浏览与跳转;Eye Icon 在遮挡内容时保留状态提醒。位置记忆跨标签页同步,收起后仍能感知任务变化。

根据项目原稿生成的完整浮窗与 Eye Icon 模式对比

2 用推断式状态机替代单一 DOM 监听

状态来自多个弱信号的组合:DOM 变化、aria-busy、Stop 按钮、消息文本变化与错误标记共同推断当前阶段。

根据项目原稿生成的 idle、waiting、generating、done 与 error 状态流转图

3 平台 Adapter 隔离变化,状态机与面板保持稳定

ChatGPT 与 Gemini 的 DOM 结构不同,平台层只负责翻译信号。新增平台时扩展适配器,不复制核心逻辑与界面。

  1. Platform Adapter 每个平台只维护 DOM 选择器与信号来源。
  2. Signal Fusion 组合 DOM 变化、aria-busy、Stop 按钮与文本变化。
  3. Core State 统一推断 idle、waiting、generating、done 与 error。
  4. Panel UI 同一套浮窗、通知与跳转交互消费统一状态。

4 轻量、现代、丝滑的安心感

明暗主题保持同一信息层级,柔和通知音承担完成反馈,展开与状态过渡降低打断感。

根据项目原稿生成的 Anywhere Door 明暗主题对比

结果与反思

从个人痛点到可用版本约两小时,随后通过真实使用逐步补齐通知、主题与收起模式。

角色
产品设计、交互设计、视觉设计与扩展开发
状态
已发布,Chrome Web Store v1.0.2
技术栈
Manifest V3、Vanilla JS、CSS Custom Properties

快速进入真实环境是正确的。个人工具先抵达可用状态,才能让后续判断建立在真实行为上。迭代从状态灯与跳转,逐步加入声音通知、桌面通知、Eye Icon、位置记忆与自适应主题。

品牌约束应更早进入版本。设计宪章把“轻量、现代、丝滑”和“安心感”固定为判断标准,避免默认样式与强提醒音效在早期版本里积累。

下一步是补充生成耗时。完成状态只回答“是否结束”,耗时信息还能帮助用户比较模型与任务类型,进一步优化并行工作流。