القائمة
修改小莫助手右下角图标的完整规范——按统一标准重设计动态头像 + 全套状态指示(含录音态)，确保始终动态、美观、且录音状态可见
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/nutshellai-tech/mobius --skill assess-appearanceيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
you are a helpful assistant to help user operate the mobius AI system. When asking user confirmation, you must refer to "正确服务话术案例"!
制作 Mobius 图文使用教程（理解用户意图 → Playwright 截图 → 红色编号标注 → 上传图床 → 写 markdown → 改 mkdocs → 本地构建验证 → commit/push 的全流程）。当用户说"加教程 / 写教程 / 图文教程 / tutorial"或要求把某个功能做成带截图的指南时使用。含本机所有硬编码常量、安全红线（绝不能截到密钥）和踩过的坑。
Mobius 自我测试能力。部署后自动跑、也可手动跑一组 HTTP 冒烟(健康/鉴权/核心读 API/语音配置, 可选写往返), 快速确认重新部署后系统是否真的可用。当你怀疑系统异常、或刚部署完需要验收时使用。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | assess_appearance |
| description | 修改小莫助手右下角图标的完整规范——按统一标准重设计动态头像 + 全套状态指示(含录音态)，确保始终动态、美观、且录音状态可见 |
本 Skill 指导如何重设计 / 调整「小莫助手」右下角浮动图标(以下称 FAB 图标)。 目标:让图标始终在动态变化、好看、美观,并且任何重设计后都必须保留全套状态指示(尤其是「录音中」状态)。
适用对象:对
mobius/frontend前端做自迭代的 agent / 用户。 作用域:仅 FAB 图标本身(assistant-fab+mo-avatar+ 状态浮层)。不要改动助手面板(assistant-panel)、消息流、语音后端逻辑。
任何一次图标修改,最终交付必须同时满足以下四条。验收清单(见 §10)逐条核对,任何一条不过则视为失败、返工。
.assistant-fab--voice-recording + .assistant-fab__voice-badge 长按录音时的红色麦克风指示必须保留且醒目(见 §5、§6)。| 角色 | 文件 | 位置 |
|---|---|---|
| FAB 按钮渲染 + 状态变量 | mobius/frontend/src/components/assistant-chat.tsx | FAB <button> 约 L3372–3413;状态派生约 L3348–3368 |
图标组件 MoAvatar | 同上 | MoAvatar() 约 L615–640 |
| 粒子常量 | 同上 | MO_PARTICLES = Array.from({length:18},...) 约 L32 |
| 长按进入录音 | 同上 | ASSISTANT_FAB_VOICE_HOLD_MS = 1500 约 L37;collapsedVoiceHoldState 约 L1600 |
| FAB 样式(容器/halo/各状态) | mobius/frontend/src/index.css | .assistant-fab* 约 L1446–1638 |
| 头像样式(球体/环/核/粒子/keyframes) | 同上 | .mo-avatar* 约 L4540–4709 |
| 状态动画 keyframes | 同上 | 约 L3359–3393 |
| 减弱动画兜底 | 同上 | @media (prefers-reduced-motion: reduce) 约 L4711 起 |
行号会漂移,以选择器名 / 类名 / 函数名为准,行号仅作辅助定位。
<button class="assistant-fab fixed bottom-5 right-5 z-[60] w-14 h-14 rounded-full ..."> ← FAB 容器(见 §3)
├── <MoAvatar> ← 动态头像本体(见 §3.1)
│ ├── .mo-avatar 容器,mo-life-float 漂浮
│ ├── .mo-avatar__field 渐变能量球,mo-field-breathe 呼吸
│ ├── .mo-avatar__ring--outer 外轨道环,mo-ring-turn
│ ├── .mo-avatar__ring--inner 内轨道环,mo-ring-turn-reverse
│ ├── .mo-avatar__core 白蓝高光核,mo-core-pulse
│ └── .mo-avatar__particle--1..18 18 粒子,各持 drift-a/b/c + 独立 delay/color
├── .assistant-fab__speaking-waves 说话时 3 道扩散波环(可选渲染)
├── .assistant-fab__hold-ring 长按蓄力旋转环(可选渲染)
├── .assistant-fab__voice-badge 录音(红 Mic)/ 转写(蓝旋转 RefreshCw)徽标(可选渲染)
├── .assistant-fab__close 打开态的关闭 X(可选渲染)
└── .assistant-fab__completion-badge 任务完成绿色提示(可选渲染)
容器还有个伪元素 .assistant-fab::before —— 这是招牌光晕:conic-gradient + blur + 缓慢旋转,决定了「高级感」,重设计务必保留一个等价光晕层。
.mo-avatar--lg (46px) 用于 FAB;.mo-avatar--sm (26px) 用于消息气泡头像。em 单位(容器 font-size 决定整体缩放),内部所有 .07em、left:47% 等百分比/em 让粒子在 lg/sm 下等比缩放。重设计时保持 em/百分比体系,别写死 px,否则 sm 头像会崩。.mo-avatar--lite:消息列表逐条头像用的性能变体,禁用全部无限动画(animation:none !important)只渲染静态渐变球。禁止改动 lite 的禁动画策略——长会话滚动时 18 粒子 + filter 持续重绘会严重掉帧。MoAvatar 的 active prop 为真时(打开/发送中/有活动任务/说话/录音)挂 .mo-avatar--active,把主要动画 animation-duration 调短(球/核 4.8s、粒子 6.4s),让图标「兴奋起来」。重设计应保留这种「空闲慢、活跃快」的节奏对比。
一份合格的图标至少叠 4 层持续动画,确保任何瞬间都不静止:
mo-life-float(整体轻位移 + 微缩放 + 微旋)。mo-field-breathe(饱和度/亮度/形状微变)。mo-ring-turn + 内环 mo-ring-turn-reverse(双向)。mo-particle-drift-a/b/c,每颗独立 animation-delay(用负 delay 错峰),避免齐步走显得机械。当前用 18 颗粒子覆盖球体四周。减少颗数可以,但别低于 10,且每颗 delay 必须各不相同(现在用 -1.1s ~ -8.5s 交错)。
infinite;时长相互错开(球 7.4s / 外环 13s / 内环 9.5s / 核 5.8s / 粒子 8.8s)避免周期性同步导致的「卡顿感」。ease-in-out / linear(旋转类),禁止线性硬切的闪烁。@media (prefers-reduced-motion: reduce) 块约 L4711 起,把 .assistant-fab::before、.assistant-fab--speaking、波环、hold-ring、voice-badge、.mo-avatar 全家动画置为 none。重设计新增的任何动画元素都要补进这个媒体查询,否则违反无障碍。MoAvatar 与所有浮层都带 aria-hidden="true"(纯装饰),保留。FAB 的 className 由 assistant-chat.tsx 约 L3362–3368 动态拼装。这是行为契约,TSX 侧不要改;重设计只动 CSS / DOM 外观。
| 状态 | TSX 变量(约 L3348–3352) | 容器 class | 渲染的浮层 | 用户语义 |
|---|---|---|---|---|
| 说话中(语音播报播放) | fabSpeaking = voicePlaybackState==='playing' | --speaking | .assistant-fab__speaking-waves | 小莫在说话 |
| 长按蓄力(未松手,>1.5s 前的过渡) | fabVoiceHolding = !open && state==='holding' | --voice-holding | .assistant-fab__hold-ring | 继续按进入语音 |
| 录音中 | fabVoiceRecording = !open && state==='recording' | --voice-recording | .assistant-fab__voice-badge(红 <Mic>) | 松开结束录音 |
| 转写中 | fabVoiceTranscribing = !open && voiceState==='transcribing' | --voice-transcribing | .assistant-fab__voice-badge(蓝 <RefreshCw> 自旋) | 正在转写语音 |
| 打开(面板展开) | open | — | .assistant-fab__close(X) | 收起小莫 |
| 任务完成未读 | !open && unreadCompletion>0 | — | .assistant-fab__completion-badge(绿) | N 项任务完成 |
MoAvatar 的 active 在「打开 / 发送中 / 有活动任务 / 说话 / 任一语音态」时为真,加速动画。
重设计守则:每个状态都要有可被一眼区分的视觉(颜色/形状/动效不同),且互不冲突。徽标用 z-index 分层(现在 close=3、badge=5、hold-ring=4、waves=1、completion=6、avatar=2),新增浮层注意层级。
当前实现(index.css 约 L1528–1545、L1588–1591;TSX 约 L3394–3402):
.assistant-fab__voice-badge:右下角 26px 圆,background: rgba(239,68,68,.96)(红),内含 <Mic> 图标,带白色描边 + 红色外发光阴影,assistant-fab-recording-badge 动画(1s 缩放 + 阴影脉冲扩散)。.assistant-fab--voice-recording::before:把招牌光晕从青/紫/粉改成「红」基调 conic-gradient,opacity 提到 .9,让整圈泛红,录音感更强。重设计录音态时必须保证:
<Mic> 不可替换为无语义图形:用户要能从图标认出「正在录音」。.assistant-fab__voice-badge 当前 26px、右下外溢 -4px。重设计可调整但别小于 22px、别藏到 FAB 内部不可见。assistant-fab-recording-badge 这类循环动画,「正在采集」感。静态红点不合格。--voice-recording 改 ::before 光晕色 —— 保留这一层,让录音时整颗图标都泛红脉动,而不只是角落一个小点。<RefreshCw>(--voice-transcribing),别让两者变一样。验收时(见 §9)必须人工触发长按录音并确认:徽标出现、为红色、有脉冲动效、整圈泛红、松手后消失。
#2dd4bf / 蓝 #38bdf8/#7dd3fc / 紫 #818cf8/#c4b5fd / 粉 #f472b6/#fda4af / 金 #facc15/#fde68a。高光白蓝核。整体偏「能量/生命」冷调 + 暖点缀。rgba(10,14,22,.72) 深玻璃底 + 白 14% 描边 + 多层青/金外发光阴影。.light .assistant-fab*,约 L1615–1638):浅底 + 深字 + 阴影降饱和。改暗主题配色务必同步 .light 一组,明暗都要好看。#ef4444、转写 = 蓝 #0ea5e9、完成 = 绿 #22c55e、说话 = 青。状态色与球体色系分开,避免混淆。.assistant-fab::before:conic-gradient + filter:blur(14px) + 缓慢旋转(mo-halo-turn)。重设计至少保留一层等价光晕;说话态把 opacity/saturate 拉满 + 加速(现 .assistant-fab--speaking::before)。.assistant-fab__close 已用),新增浮层可沿用。inset 给球体立体感(__field 的 inset 0 0 ... + 底部暗 inset)。.32s cubic-bezier(.2,.9,.25,1))。linear infinite;呼吸/脉冲用 ease-in-out infinite。MoAvatar、FAB <button> 渲染段、.assistant-fab* 与 .mo-avatar* 两段 CSS,理解现状再动手。aria-hidden、lite 性能策略、reduced-motion 策略。index.css。需要新增 DOM 层(如更多粒子)才动 MoAvatar,且务必同步 reduced-motion。.light 一组。cd mobius/frontend && npm run build(= vite build)必须通过,见 §8。# 仅验证前端编译是否通过(快):
cd /app/mobius/frontend && npm run build
# 纯前端改动,编译 + promote 产物(不重启后端、无交互,适合自动化迭代):
cd /app && python3 start.py --only-update-frontend
# 全量(编译 + 重启后端 + code-server,非交互环境会卡 attach 提示,慎用):
cd /app && python3 start.py
vite build 报错先修 TSX/CSS 语法,再继续。
浏览器打开应用,操作右下角小莫图标,确认每个状态视觉正确:
active 加速,动画变快。infinite。npm run build 通过。aria-hidden、lite 性能、reduced-motion。每次完成修改,先 commit 所有文件(含非本人改动的),再执行 python3 start.py 更新代码。
<用户名>: <代码变动说明>(用户名用英文或拼音,如 chenyang: ...)。python3 start.py(或 --only-update-frontend)编译 + promote 前端产物。.assistant-fab::before、改用扁平无阴影。animation:none 策略。prefers-reduced-motion。.light 一组。aria-hidden 等行为契约。npm run build 与人工逐状态验收就交付。