设计：nanoMuse 从 Muse 学了什么，又在哪里不同
这是一份对 Muse 屏幕的研究——发布公告、演示和宣传视频、Meta 公开的应用截图——以及 nanoMuse 据此做出的选择。它存在的目的，是让应用在长大的过程中保持一致，也让贡献者分得清「有意为之」和「还没做到」。这里没有任何 Meta 的代码或素材；毛绒玩偶、小熊猫和布局都是项目自己的。
Muse 长什么样
底色。 浅色模式接近纯白（#fcfcfc 左右），深色模式接近纯黑；没有渐变，基本没有卡片阴影。层次来自一级灰色（一个 surface-2），用在气泡、小标签和标签栏上。一种强调色，饱和的蓝，用得很省：发送按钮、链接、有东西在跑时的状态行、选中的标签页。
字体。 Meta 自家的 Optimistic；字号大、亲切，标题字距紧，气泡里行高宽松。所有东西都用一个字族、三四个字号排出来。
聊天。 智能体的气泡是灰色，你的是浅蓝色，都是大圆角。工具的使用不藏着：每个动作一个小标签（「正在查价格」「找到 3 个选项」），点开看细节。审批请求是对话里的卡片，把要做的动作一字不差地写出来，按钮上写的就是它做的事。智能体做出来的文件显示成带预览的方块。
形象。 一只有名字的毛绒玩偶——Meta 发布时的例子有 Veda、Sunny 等——在暖色的素底前拍下来。它坐在聊天顶部的一个圆圈里，下面是智能体的名字，再下面是一行状态（「正在查价格」）。它不是一张固定的图：玩偶的姿势跟着智能体正在做的事变——干活时戴着耳机坐在笔记本前，打招呼时挥手，其余时候待命——还会轻轻动：晃一下，眨个眼。点它会弹出一个面板：大图的玩偶、同一行状态、正在跑的任务上的一个停止控件，然后是一组分段控件——活动、审批、权限、日程——以及所选那一项的列表，按天分组。
导航。 底部一条悬浮栏，五个图标，没有文字：聊天、动态、点子、目标、资源库。聊天是主页。智能体的其余一切——记忆、连接、设置——都在形象后面。
动态、点子、目标、资源库。 动态：写给你的短文，还有一个地方可以说你想多看什么。点子：按领域分组的建议网格，点一下就发出去。目标：带进度的列表，每个点开是一份带步骤的计划和下一次跟进时间。资源库：智能体做出来的东西，最新的在前，带预览。
动效。 很少。状态行变一下；一个小标签冒出来；形象晃一下。除了状态旁边一个小转圈，没有别的加载动画。
nanoMuse 怎么用它
| Muse | nanoMuse | 在哪里 |
|---|---|---|
| 接近纯白 / 接近纯黑，一种蓝 | 同一套调色板：bg、surface-2、fg、muted，强调色 #0064d4；深色模式跟 prefers-color-scheme | web/src/index.css、android/…/values/colors.xml |
| Optimistic | Figtree（OFL），已内置；比例和温度都接近 | web/public/fonts/ |
| 灰色 / 浅蓝色气泡，工具用小标签，审批用卡片 | 一样；小标签点开是工具调用，卡片上是哨兵（Sentinel）写的摘要和范围按钮（一次、本次对话、总是；手机上是一次、本聊天、总是） | web/src/screens/ChatScreen.tsx、web/src/components/ |
| 会换姿势的毛绒玩偶 | 小熊猫，一个实时绘制的 SVG，每种状态一个姿势；六只毛绒玩偶（Sunny、Moss、Sky、Fox、Bolt、Plum）和一个 emoji 作为备选 | web/src/components/RedPanda.tsx、web/public/avatars/ |
| 形象下面是名字和状态；点开面板 | 同样的头部；面板里是大图的形象、状态、停止、四个按钮（审批、活动、权限、日程）以及记忆、技能、连接、设置几行 | web/src/components/MuseSheet.tsx |
| 五图标悬浮栏 | 同样的五个：聊天、动态、点子、目标、资源库 | web/src/App.tsx |
| 很少的动效 | 玩偶和 emoji 的呼吸 / 摇摆 / 蹦跳；小熊猫自己的姿势；prefers-reduced-motion 下全部关闭 | web/src/index.css、RedPanda.css |
小熊猫
从 0.1.11 起，默认面孔是内置的小龙（手机、桌面和网页上都一样）；下面的小熊猫 曾留作一个可选形象，直到 0.1.23 和六只玩偶一起退役；留在这里，是「一张随状态换姿势的脸」最初是怎么画出来的记录。
Muse 的玩偶不用转圈就说明了「这儿有人，而且它在忙」。nanoMuse 的回答是一只小熊猫——圆脑袋，两只带环纹的小耳朵，奶油色的脸往下分成两瓣脸颊、收到一个深色鼻头，带高光的大黑眼睛，一条环纹尾巴——画成 SVG，这样它的姿势可以由应用的状态驱动，而不是在几张照片之间切换。
为什么是这种动物，为什么这样画。 大熊猫是最显眼的吉祥物，也是人人都已经在用的那个；小熊猫个头小、颜色暖、好奇，读起来是「一个小帮手」而不是「一个国家符号」。画法做了简化——零件少，眼睛大，每种状态只换一处表情——所以缩到 16 px 也能看。再大一点它是 2.5D 的：毛发、身体和脸颊上有径向渐变，头顶一层光泽，下巴下面一道阴影，身体坐在一片投影里——有毛绒玩偶那种圆润，却不用 3D 渲染，因为 3D 渲染既没法用 CSS 摆姿势，也没法保持在几 KB。它从来不是写实渲染，也从来不是带描边的插画；零件是平面形状，上面打了柔光。
三个细节层级（组件上的 detail，没给时由 detailFor 按 size 选）：mark 用到 28 px，纯色平涂，脑袋放大到填满底盘——logo、标签栏和列表的尺寸；avatar 用到 160 px，带渐变；hero 再往上，加上光泽、更细的尾巴环纹和小道具。图标、Android 启动器图标和 MobileGym 的启动器图标都是用同一套几何（web/src/components/redPandaShapes.ts）渲染的 mark 层级，形状只在这一个地方：组件和素材生成器都从它读。
| 状态 | 应用知道什么 | 小熊猫做什么 |
|---|---|---|
| idle | 没有东西在跑 | 呼吸；每隔几秒眨一次眼；左右张望；耳朵抖一下；尾巴摇 |
| working | status.state == "working" | 坐在一台小笔记本前打字，点着头，眼睛盯着屏幕 |
| waiting | status.state == "waiting"——有一张审批卡片或一个提问开着 | 举起一只爪子，旁边浮着一个「!」气泡，小小地蹦一下 |
| happy | 一轮刚从 working 回到 idle（3 秒）或者你点了它 | 弹一下，张嘴笑，两颗星星 |
| error | 一次工具调用失败或被拒绝（4 秒） | 抖一下，皱眉，一滴汗 |
| sleepy | 应用加载了但连不上服务器 | 闭着眼，慢慢呼吸，三个 z |
状态来自 web/src/mood.ts：status 给出它保持的姿势；store 记下的两个时刻——finishedAt、mishapAt——给它短暂地染上色彩。动效是作用在 SVG 组上的 CSS 关键帧；每个零件都按坐标定位，这样变换才能做动画，transform-box: view-box 加上显式的原点让轴心待在该待的地方。still 把它冻住，给列表和选择器用；prefers-reduced-motion 让它全停。
同一幅画缩成只剩脑袋，就是 logo：web/public/icon.svg 和 mark.svg、PWA 图标、README 封面、Android 自适应启动器图标（森林绿的底盘；脑袋是平涂、没有渐变，因为启动器的遮罩和主题图标反正会把一切压平；主题图标和状态栏用的是一个镂空了眼睛、鼻子和嘴的单色剪影），还有 MobileGym 应用的启动器图标。web/ 里的 npm run mascot:assets 从 redPandaShapes.ts 写出矢量图，npm run site:mascot 为网站渲染六种状态，python scripts/mascot_png.py 把 PWA 图标和封面栅格化——没有任何东西画两遍，所以各份拷贝不会走样。RedPanda.test.tsx 保存着平涂脑袋、剪影和待命 hero 的快照；改画的话必须有意地更新它。
颜色和字体，用数字说
| 变量 | 浅色 | 深色 |
|---|---|---|
bg | #fcfcfc | #181819 |
surface | #ffffff | #202022 |
surface-2 | #f2f2f4 | #2a2a2d |
border | #e7e7ea | #333337 |
fg | #111112 | #ffffff |
muted | #6b6b71 | #9d9da4 |
accent | #0064d4 | #1793ff |
| 用户气泡 | #d8e9ff | #1c3d66 |
小熊猫：毛色 #d8632e，亮部到 #ee8a4c，暗部到 #9e3f18，深毛色 #bf4f23（耳朵、尾巴环纹、爪子），奶油色 #fff4e6，从 #fffaf2 到脸颊处的 #f3dfc6，纹路 #2a1a14，眼睛高光 #4a302a，腮红 #f4a0a0；应用里它身后的底盘 #dcebdc，logo 的底盘 #2f7a5a。mark 层级只用基础色。
通篇 Figtree，按 Tailwind 的字号表排：气泡里 15 px，状态行和说明文字 12–13 px，标题 17–20 px 半粗。
身份：名字排第一
Muse 一打开先问该叫它什么，然后这个名字无处不在——头部、通知、它谈起自己的方式。nanoMuse 也一样：
- 第一次打开是一张清单，不是一组幻灯片：三句话说它是什么（替你做事；App 关了也继续干；要紧的地方先问你），然后三项——认识你的 nanoMuse、添加模型、连接邮箱、日历、通讯录（可选）——做完一项打一个勾，「开始」在有模型应答之前一直锁着。中途刷新不会丢掉勾，因为勾是从已保存的内容读出来的，不是从页面上。
- 起名页：1–20 个字符，留空回落到
nanoMuse；六个建议的名字做成小标签（三个中文、三个英文）加一个「换一批」；形象；名字下面一行标语（≤ 60 字符）；然后是它怎么说话——语气（正式 / 随和 / 活泼 / 简洁）、说多少（简短 / 详细 / 要点列表）、其他想交代的自由填写，以及它该怎么称呼你。这些每一项在系统提示词里都是单独一段（nanomuse/server/service.py里的Profile），所以改语气不用动自由填写的那段。 - 名字是穿在里面的，不是贴在外面的：头部和问候语、审批和权限的文案（「{name} 想要执行的操作……」）、命令行的横幅（
nanoMuse v0.1.0 · Momo）、MobileGym 桥接的标题、设置页（「你和 Momo」）。凡是指产品本身的地方——应用、文档、README——仍然是 nanoMuse。 - 自己的 key，不在我们这儿开账号。 模型表单把服务商按协议分组列出（OpenAI 兼容的 Chat Completions · Responses API · 本地或你自己的端点），每家带厂商小字，key 默认遮住、可以点开查看，每家厂商一个「去 … 申请 key」的链接，Base URL 没有路径时补上
/v1，还有完全不需要 key 的端点（Ollama，或者勾了「无需密钥」的自定义端点）。模型列表问端点自己的/models；连不上时由一份静态目录顶替；手动输入的模型永远不会被替换。没有 OAuth 订阅登录，1.0 也不打算有：经我们登录，会让 nanoMuse 成为你和厂商之间的账号持有者，而这正是这个项目存在的意义所要避免的那一种关系。（写于 0.1.18 之前。此后 nanoMuse Cloud 的账号给一份起步的免费额度，0.1.39 起 ChatGPT 套餐可以登录；两者的 key 或令牌都留在设备上，和厂商的关系仍是你自己的，见 cloud.md 和 own-key.md。）
nanoMuse 有意不同的地方
- 手机屏幕是看得见的。 Muse 从不给你看截图；nanoMuse 的手机步骤是聊天里的一行行（
phone_act: tap "发送" …），手指的叠层就显示在手机本身上，因为一个人应该能看见一只手在自己手机上干什么。 - 一个够得着的刹车。 nanoMuse 操作手机的整个过程中，有一个胶囊一直浮在应用上方——小熊猫、正在进行的步骤，以及一个红色的停止。点一下，没有菜单；它结束正在进行的那一步，拒绝接下来的几步，智能体转而来问你，而不是继续干。Muse 的手机操作发生在一台你看不进去的云端虚拟机里；在你自己的手机上，这只手必须能被手的主人叫停。屏幕也是最后一级阶梯：技能、抓取或浏览器先上，活动视图会显示屏幕被用到的频率。
- 审批写明范围。 Muse 问是 / 否；nanoMuse 的卡片给出一次、本次对话、总是——手机、网页版和终端上是同一个中间档——并把授权列在权限下面，每条带一个撤销按钮。
- 一切都有纯文本的形式。 同一个智能体在终端里也能跑（
nanomuse chat），审批一样；每个屏幕背后都是一套有文档的 REST + WebSocket API，所以另一个前端可以驱动它。 - 吉祥物是画出来的，不是拍出来的。 它只占几 KB，姿势由状态驱动，还能印在贴纸上。
来源
Meta 的发布公告（about.fb.com，2026 年 9 月）、那个页面上的演示和宣传视频，以及随之发布的应用截图。CopilotKit 的 OpenMuse，参考了它对持久任务、监视项和带依据的点子的产品设计。两者都没有抄任何东西；这一页记下的是学到了什么。