AI Status Orb new AI 状态球 AI Status Orb web

IdleReady when you are
AI is idle

标本可交互,可以直接操作。

Anatomy — every part, named解剖 —— 每个部件的名字

  1. 1 Orb core球体核心 isolated visual

    The central shape that gives the status indicator a stable visual anchor.

    给状态指示器提供稳定视觉锚点的中心形状。

    Prompt fragmentPrompt 片段

    a 64px orb with a quiet center and bounded layered light, never a full-screen glow

    64px 状态球,中心安静,分层光照有边界,不做全屏发光

  2. 2 State motion状态动效 state machine

    The distinct motion grammar assigned to each AI state.

    分配给每个 AI 状态的不同动效语法。

    Prompt fragmentPrompt 片段

    Idle stays still, Listening breathes slowly, Thinking rotates a restrained halo, Speaking responds to activity, Error holds a clear static warning

    Idle 静止,Listening 缓慢呼吸,Thinking 旋转克制光环,Speaking 随活动响应,Error 保持清晰静态警示

  3. 3 State label状态标签 role=status

    The words that make the visual state understandable and searchable.

    让视觉状态可理解、可搜索的文字。

    Prompt fragmentPrompt 片段

    a persistent text label such as Listening or Thinking beside the orb, announced politely

    球旁持续显示 Listening 或 Thinking 等文字标签,并礼貌播报

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Build an AI status orb with explicit Idle, Listening, Thinking, Speaking, and Error states. Pair every visual state with a visible text label and role=status announcement, use a bounded layered glow and slow scale/pulse only for active states, stop or pause animation when hidden, keep the control keyboard accessible, and freeze the orb with a static state marker under prefers-reduced-motion.

构建一个 AI 状态球,包含 Idle、Listening、Thinking、Speaking 和 Error 五种明确状态。每个视觉状态都配有可见文字标签和 role=status 播报;活动状态只使用有边界的分层光晕和缓慢缩放/脉冲;隐藏时停止或暂停动画;控件支持键盘;在 prefers-reduced-motion 下冻结球体并保留静态状态标记。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my AI status orb. Check that the animation is driven by an explicit state machine rather than scattered booleans; Idle is visually distinct from Thinking and Speaking; the state is announced in text and aria-live without repeating every frame; focus and pointer controls remain usable; offscreen and hidden states stop expensive work; errors have a recovery action; and reduced-motion freezes movement while preserving the state distinction. The symptom:

调试我的 AI 状态球。检查:动画是否由明确状态机驱动,而不是散落的布尔值;Idle 是否和 Thinking、Speaking 有区别;状态是否通过文字和 aria-live 播报且不会重复每一帧;焦点和指针控件是否可用;离屏和隐藏状态是否停止昂贵工作;错误是否有恢复操作;reduced-motion 是否冻结运动但保留状态区别。症状:

In code代码里叫什么

Framework框架Symbol符号Note说明
ARIA role=status + aria-live name the state in words beside the visual在视觉旁用文字说明状态
Motion state machine map idle, listening, thinking, speaking, and error to deliberate motion把 idle、listening、thinking、speaking 和 error 映射到明确动效
CSS radial-gradient + transform bound the glow and animate only the isolated focal region限制光晕范围,只在独立焦点区域做动画
Motion prefers-reduced-motion freeze the pulse and retain a clear state marker冻结脉冲,但保留清晰的状态标记

See also相关词条

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。