Project Showcase · AI Companion · Scene Dialogue

如果 AI 助手真的“在场”呢?

雪花膏 是一个把聊天框变成场景化对话空间的 AI 助手 Demo。

普通 AI 助手很会回答,但很少让人感觉“她正在某个地方陪你聊天”。雪花膏 的尝试,是让一个助手拥有视觉场景、人格语气、环境声音和可切换的对话状态。

4
对话场景
8
音频资产
3
人格文档
1
可演示网页
OCR
下一步扩展
Scroll · Why It Matters
Act I · Why It Matters
Act I

为什么要做

我不是想再做一个聊天框,而是想做一个让人能立刻感到“她在这里”的 AI 助手。

1A · 问题开场 / Why This Demo
Act I · 01
1A · 问题开场

AI 助手已经很聪明了,但它们经常不像“一个人”。

雪花膏 想解决的是“在场感”: 她在哪里、用什么语气、怎样陪你进入对话。

大多数助手的体验是一块输入框: 你问,它答。雪花膏 的方向不是让模型多说几句温柔的话,而是把聊天发生的“空间”也做出来。用户点开页面时,会看到她站在一个具体场景里,而不是漂浮在一个空白界面中。

所以我把 Demo 拆成三层: 视觉上有场景,语言上有不同场景的回复策略,听觉上有环境声和交互反馈。它仍在继续迭代,但已经能让人看见一个方向: AI 助手可以更像一个存在于场景里的人。

雪花膏这个名字,来自我第一次去上海买伴手礼。那盒经典上海雪花膏上的女生头像,是一个民国时期的上海女生形象;她的脸和我想象中的这个角色特别像。于是,我把她叫作雪花膏。

Frontend
1
`index (2).html` 已挂载音频沉浸脚本。
Dialogue
4
Normal / Cafe / Rainy / Thinking 分别对应不同回复策略。
Audio
8
开屏、切换、收发消息和四类环境声。
Not just answers, but presence - 不只是回答,而是在场。
页面想说: “我做 雪花膏,不是因为缺一个 AI 聊天框,而是因为我想试试看,一个 AI 助手能不能拥有自己的空间、语气和场景记忆。”
1B · Demo 承诺 / What Audience Sees
Act I · 02
1B · Demo 承诺

打开页面的人看到的不是一份文档,而是一个能进入的对话空间。

她看起来像 雪花膏,说话像 雪花膏,切到不同场景时也仍然是 雪花膏。

打开页面后,你会先看到: 顶部是四个场景按钮,右上角是静音按钮,底部是 雪花膏 的对话框。然后切到深夜场景,让大家看到视觉氛围、台词状态和声音反馈一起变化。

这比单纯展示 Prompt 更容易让第一次接触这个项目的人理解: 我做的不是“一个角色设定”,而是一个把人设、网页、声音和对话策略拼在一起的 AI 体验 Demo。

Visual + Voice + Audio - 三层一起建立代入感。
“你来啦...坐窗边这个位子吧,今天上海的光刚好落在桌子上。” 来源 · 雪花膏 日常场景开场台词
雪花膏 开屏画卷展开首屏实拍
Fig. 01 · 开屏「画卷展开」首屏实拍:上海雪花膏横幅与双画轴,点击展卷进入。
Act II · How It Works
Act II

怎么实现

真正让 Demo 变得“像 雪花膏”的,不只是角色图,而是人格引擎、场景路由和声音反馈一起工作。

2A · 人格引擎 / Persona Engine
Act II · 03
2A · 人格引擎

雪花膏 不是换了皮的聊天框,而是一套人格编排系统。

Base Persona、Knowledge Base、Scene Prompt 和 Orchestration Guide 共同决定她每一轮怎么说话。

这里我把这件事讲得很简单: 雪花膏 的拟人化不靠模型临场发挥,而是先把“她是谁”“她知道什么”“她在不同场景怎么说话”“每轮对话怎么组装”拆成几层。这样人们就能理解,雪花膏 的角色感不是一张立绘,而是一套可执行的人格系统。

Layer 01

Base Persona

规定 雪花膏 是谁: 她的性格、说话底色、边界和最核心的“活人感”。

Layer 02

Knowledge Base

存放她喜欢什么、不喜欢什么、常用表达和可调用的知识习惯。

Layer 03

Scene Prompt

把日常、咖啡馆、雨天、深夜拆成不同语气、节奏和微行为。

Layer 04

Orchestration

决定一次回复里先取哪层信息、怎么组合,以及什么时候切换场景。

Persona Orchestration - 把人设变成可执行的系统。

这也是这个 Demo 对第一次接触这个项目的人最容易讲清楚的技术点: 我不是只写了一段“温柔一点”的 Prompt,而是在做一个可以被调用、被切换、被继续扩展的人格底座。

“任何 AI Agent 拿到此文档,可按步骤执行 雪花膏 人格对话系统的完整对话生成流程。” 来源 · 雪花膏_Prompt_Orchestration_Guide.md
MuleRun 服务端方案确认截图
Fig. 03 · 人格和服务端方案被拆成可继续执行的工程节点。
2B · 场景路由 / Scene Policy
Act II · 04
2B · 场景路由

四个场景不是背景按钮,而是对话策略。

日常负责执行,咖啡馆负责发散,雨天负责承接情绪,深夜负责深度分析。

这一步解决了旧版 Demo 的核心问题: 不同场景不再只是换图,而是开始拥有不同回复策略。用户发消息时,当前 scene 会被一起提交;系统再根据情绪和意图决定保持场景,或切换到更合适的语气。

Normal

日常执行

任务整理、快速建议、时间管理。语气高效清晰,像把三色笔摆好后开始帮你拆事。

Cafe

松弛发散

灵感、推荐、复盘、选题发散。语气更有审美判断,允许留白。

Rainy

情绪承接

低落、焦虑、想放弃时优先进入。少建议,先听,必要时锁定雨天场景。

Thinking

深度分析

决策、复盘、人生选择。语气安静,先找真正卡住的点,再拆结构。

Scene-conditioned Dialogue - 场景决定怎么说,而不只是站在哪里。

从日常切到深夜,改变的不只是背景图,还有标题、开场台词、雪花膏 的语速和回答方式。

“route(current_scene, user_emotion, user_intent, context) -> {target_scene, policy, temperature, pace, micro_actions, transition_phrase}” 来源 · 这个雪花膏_Scene_Dialogue_Prompts_v2.md
MuleRun 雨天场景 Prompt 思维导图截图
Fig. 04 · Rainy 场景被拆成行为指令、语气参数、语言风格和微行为。
2C · 声音沉浸 / Audio Immersion
Act II · 05
2C · 声音沉浸

声音是最小但最有效的沉浸层。

不需要大音乐,只需要轻微环境声,就能让用户觉得自己进入了 雪花膏 的空间。

`audio-immersion.js` 负责开屏音、环境音、切换音和消息反馈。声音非常轻: 咖啡馆有杯碟和咖啡机,雨天有窗边雨声,深夜有低频房间声和纸笔声。它们不抢对白,只负责让场景“有空气”。

Opening
1.5s
开屏音轻、短、透明,像 雪花膏 推开窗出现。
Ambient
4loop
日常房间、咖啡馆、雨天窗边、深夜房间。
Interaction
3sfx
场景切换、用户发送、雪花膏 回复出现。
Opening · 入场提示音
Cafe · cafe_ambient_loop.mp3
Rainy · rainy_window_loop.mp3
Thinking · thinking_night_loop.mp3
Ambient Audio as Presence - 环境声不是配乐,是在场感。
scene switch:
old ambient 300ms fade out
play scene_switch_soft.wav
new ambient 500ms fade in

message:
send -> ui_message_send.wav
receive -> ui_message_receive.wav
mute -> sound control
Act III · Experience
Act III

体验预览

第一次接触这个项目的人最需要先看清楚: 这个 Demo 长什么样、能怎么切场景、为什么它比普通聊天框更有代入感。

3A · 体验画面 / Playable Moment
Act III · 06
3A · 体验画面

先让人看清楚这个 Demo。

先看大图,再看场景切换与移动端;每张实拍截图都给足展示空间,不挤成看不清的小卡片。

这一段让人一眼看清楚: 顶部有四个场景按钮,右上角有静音按钮,底部有对话框,雪花膏 的人物形象和场景背景已经组合在一起。

雪花膏 日常场景主界面实拍大图
Main Demo日常场景全画面
雪花膏 深夜思考场景实拍截图
Thinking深夜场景
雪花膏 用户正在输入消息的状态实拍截图
Input对话状态 · 用户输入中
雪花膏 真实对话实拍:人格引擎的场景化拆解回复
Real Chat真实对话实拍 · 人格引擎的场景化回复
雪花膏 咖啡馆场景切换实拍截图
Scene Switch场景切换实拍 · 咖啡馆
雪花膏 雨天场景切换实拍截图
Scene Switch场景切换实拍 · 雨天
雪花膏 移动端开屏画卷展开实拍截图
Mobile移动端实拍 · 开屏
雪花膏 移动端主界面实拍截图
Mobile移动端实拍 · 主界面
移动端实拍 · 全尺寸自适应,竖屏画面从顶部完整呈现。
页面想说: “先看这个页面,不用先听我解释。你能看到她在哪里、现在是什么场景、她准备用什么状态跟你说话。”
Visual Scene + Voice Scene + Audio Scene - 三层一起制造代入感。
3B · 协作链路 / Collaboration Flow
Act III · 07
3B · 协作链路

不是一个工具独立做完,而是一条分工明确的协作链路。

从调研方法、体验设计到执行开发和最终优化,每个工具负责不同环节;角色方向、素材取舍与最后验收始终由我来决定。

Kimi 先用于梳理“怎样获得更好调研结果”的方法论,再把这套方法用于人格相关问题,整合为角色底稿;Codex 基于这份底稿设计四个场景的 Prompt、对话策略和环境音效;MuleRun 负责把明确需求落成页面和服务端;K3 在完成阶段对体验做最后一轮优化。下面的过程截图对应的是 MuleRun 的执行开发环节,而不是整个项目的全部创作过程。

Kimi 调研方法:查看调研方法文章 过程证据 · 如何获得更好调研结果,并用于人格相关研究
01
角色方向
我确定雪花膏的命名来源、人格方向、场景边界与验收标准。
02
Kimi · 调研方法
先梳理如何获得更好调研结果的方法,再用于人格相关研究并整合成角色底稿。
03
Codex · 体验设计
把角色底稿转为场景 Prompt、对话策略与环境音效方案。
04
MuleRun · 执行开发
将被确认的需求执行为可运行的页面、服务端与场景功能。
05
K3 · 最终优化
对完成的 Demo 做最后一轮体验优化,收束为当前版本。
MuleRun 执行开发时的页面形态选择截图
MuleRun · Execution页面形态
MuleRun 执行开发时的人物素材确认截图
MuleRun · Execution人物素材
MuleRun 执行开发时的服务端方案确认截图
MuleRun · Execution服务端方案
Research → Design → Build → Refine - 多工具分工,最终由人来判断。
Act IV · Next Step · 未来扩展
下一步,
让 雪花膏 不只会聊天,
还能看懂你给她的图。

项目介绍最后不必停在文件清单,而要落到下一步: 雪花膏 已经有视觉、场景、声音和人格路由,下一层可以接入 OCR 图片理解,让她读截图、总结图片、回答和图片有关的问题。

从这里继续往前,她就不只是一个聊天陪伴角色,而是能进入更多任务场景的多模态助理: 看到图片、理解上下文,再用 雪花膏 自己的方式回应。

Demo / 雪花膏 AI Assistant Game 协作 / Kimi · Codex · MuleRun · K3 主导 / 方向取舍 · 最终验收 下一步 / OCR 识图对话
Persona Orchestration Scene Router Audio Immersion Multimodal Agent