Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/nutshellai-tech/mobius --skill assess-appearanceThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| 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 与人工逐状态验收就交付。