从Claude Code的Loading文案看AI Agent体验设计：状态反馈与实现方法

Ivy

发布时间：2026-09-15 | 3人浏览过

原创

AI 编程助手执行任务时，用户面对的往往不是完整答案，而是一段等待。Claude Code 的动态动词让这个间隙更有性格，也提出一个产品问题：界面上的“正在处理”，怎样才能既不沉闷，又不让人误解任务进度？

先区分文案数量与设计价值

网络文章曾以“187种 Loading 文案”讨论这一现象，但当前官方资料未确认它是固定数量。词库会随版本变化，讨论体验时更值得关注的是文案如何出现、表达什么，以及任务出错时如何退出等待状态。

Claude Code 提供自定义 spinner 动词的设置。这个功能可以改变界面语气，但它本身并不是一套业务进度追踪系统。随机出现的动词不能证明模型真的在进行文字所描述的具体动作。

把等待界面分成三层

第一层：真实状态

“正在运行测试”“等待授权”“连接失败”应当由真实事件驱动。这一层承担解释任务位置的责任，不能随机切换。用户看到“等待授权”时，应有明确入口可以继续处理。

第二层：活动提示

转动图标或轻量动画表明界面仍然活跃。它不应该伪装成完成比例；不知道剩余工作量时，使用不确定进度比一个不断逼近 99% 的虚假进度条更诚实。

第三层：语气与个性

轻松的短语可以放在辅助区域，帮助形成产品风格。应避开“已完成验证”“正在提交代码”等具有明确事实含义的句子，以免用户把装饰性文字当成系统日志。

在 Claude Code 中尝试自定义动词

若当前版本支持该设置，可将下面字段合并到个人 ~/.claude/settings.json，保留原文件中的其他配置。以下词语是本文自拟示例。

{
  "spinnerVerbs": {
    "mode": "replace",
    "verbs": ["酝酿中", "思索中", "构思中"]
  }
}

replace 使用自定义词库，append 将词语加入默认词库。修改后开启新会话观察；若没有生效，检查 JSON 是否有效、修改的配置范围和客户端版本。不要为修改界面文案覆盖整个配置文件。

为自己的 Agent 实现状态反馈

下面是一个简化的原创 JavaScript 示例：状态由任务事件更新，辅助文案由计时器维护。它是产品实现思路，不是 Claude Code 的内部源码。

const phrases = ["酝酿中", "思索中", "构思中"];
let current = -1;
let timer;

function beginWaiting(render) {
  clearInterval(timer);
  render({ state: "running", hint: "正在处理" });
  timer = setInterval(() => {
    current = (current + 1) % phrases.length;
    render({ hint: phrases[current] });
  }, 6000);
}

function endWaiting(render, state, message) {
  clearInterval(timer);
  render({ state, hint: message });
}

生产实现还需要为每个任务维护独立状态，并在成功、失败、取消和组件卸载时清除计时器。这里采用轮换方便展示；需要随机时，应避免连续重复同一句。