雪花膏 · Project Showcase
Project Showcase · AI Companion · Scene Dialogue
如果 AI 助手真的“在场”呢?
雪花膏 是一个把聊天框变成场景化对话空间的 AI 助手 Demo。
普通 AI 助手很会回答,但很少让人感觉“她正在某个地方陪你聊天”。雪花膏 的尝试,是让一个助手拥有视觉场景、人格语气、环境声音和可切换的对话状态。
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
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
Fig. 04 · Rainy 场景被拆成行为指令、语气参数、语言风格和微行为。
2C · 声音沉浸 / Audio Immersion
Act II · 05
2C · 声音沉浸
声音是最小但最有效的沉浸层。
不需要大音乐,只需要轻微环境声,就能让用户觉得自己进入了 雪花膏 的空间。
`audio-immersion.js` 负责开屏音、环境音、切换音和消息反馈。声音非常轻: 咖啡馆有杯碟和咖啡机,雨天有窗边雨声,深夜有低频房间声和纸笔声。它们不抢对白,只负责让场景“有空气”。
Opening
1.5s
开屏音轻、短、透明,像 雪花膏 推开窗出现。
Ambient
4loop
日常房间、咖啡馆、雨天窗边、深夜房间。
Interaction
3sfx
场景切换、用户发送、雪花膏 回复出现。
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 · Execution 页面形态
MuleRun · Execution 人物素材
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