【生活娱乐】临终酒馆 - 与历史人物对饮最后一杯

TRAE AI 创造力大赛 【大赛初赛专区】
1

0. 自我介绍

大家好，我是围城，一名刚经历完高考的应届高三毕业生，同时也是一名独立开发者——这个暑假，我把"备考之外的时间"投进了动手做产品这件事，一边体验大学前难得的空档期，一边用 AI 工具把脑子里的想法真正做出来。这次的《临终酒馆》就是这样一次尝试：用 TRAE，把"AI + 前端"能做到的沉浸感和情感浓度，实实在在地做出来给大家看看。

1. Demo 简介

临终酒馆 是一个沉浸式 Web 体验——推开一扇古老的酒馆大门，走进烛光摇曳的暗色空间，20位历史人物正围坐在各自的主题桌前，度过他们人生的最后一夜。选一位坐下、倒酒、开口，听他讲述自己的故事，试着说服他改写命运——但历史自有引力，总会把他拉回原本的结局。

  • 产品形态：单页沉浸式 Web 应用（React + Vite + Tailwind CSS）

  • 面向谁：对历史感兴趣、喜欢有仪式感和情绪浓度的深度对话体验、也想看看"如果能和历史人物聊聊"这个假设能被做成什么样的用户

  • 核心体验：

  1. 推门入场：双开木门 3D 推开动画，配合真实光影和门声音效，从"打开网页"过渡到"走进酒馆"

  2. 20位历史人物围桌而坐：6张主题桌（权力/笔墨/镜中/真理/音符/星辰），每桌人物围坐一圈，俯视椭圆木桌带蜡烛和酒杯

  3. 角色主动开口：入座即对话，角色先自述生平与临终心境，直接把你拉进情境，不用你先开口破冰

  4. 历史引力机制：你的每句劝说都会推动"改变"倾向，但角色的回应会把"命运"拉回史实——最多12轮拉锯，能不能说服历史，见真章

  5. 引导选项：每轮角色回复后自动生成3个可选回应，降低表达门槛，也可以自己手打

  6. 对饮记录卡：对话结束生成一张羊皮纸风格的记录卡，记下这场"最后的对话"，可保存分享

酒馆大厅
酒馆大厅1920×1057 261 KB

一间岁月酒馆，古今名士围桌对酌，闲话千秋功过

对话界面
对话界面1920×1057 259 KB

屏前共饮，与历代风云人物同坐一席，倾谈半生得失

记录卡
记录卡1920×1057 125 KB

残卷酒馆，千秋风云人物留笺记酒，叙尽平生起落

2. Demo 创作思路

灵感来源：有一次我在想，如果能穿越回过去，在那些伟大人物生命的最后一晚和他们喝一杯，会聊些什么？项羽会不会后悔不过江东？梵高在开枪前在想什么？爱因斯坦在拒绝手术时说了什么？这些问题驱使我做了这个项目。

想解决的问题：市面上的 AI 对话产品大多是"你问我答"的工具感，缺乏情感沉浸和场景感。临终酒馆试图把 AI 对话包装成一个有仪式感的体验——你不是在跟 AI 聊天，你是在和一个人的灵魂对饮。

为什么做这个方向：历史人物对话天然适合 LLM 的角色扮演能力，而"最后一夜"的设定天然制造了戏剧张力。加上"历史引力"机制，让对话不只是闲聊，而是一次有意义的尝试——你能说服历史吗？

3. Demo 体验地址

在线体验：https://last-tavern.pages.dev

注意：体验前需在设置中配置自己的 API Key（支持 DeepSeek / OpenAI / 硅基流动），配置仅保存在本地浏览器。

4. TRAE 实践过程

技术栈

  • React 19 + Vite 8 + TypeScript + Tailwind CSS 3

  • Zustand 5（状态管理 + localStorage 持久化）

  • Web Audio API（程序化音效：门声、酒杯、钟声）

  • html2canvas（记录卡截图导出）

开发流程

第一阶段：创意设计

用 TRAE 的头脑风暴技能，从"LLM + 历史人物对话"出发，逐步明确：

  • 13位→20位人物，覆盖政治、文学、科学、音乐、艺术等领域

  • "历史引力"机制：用户劝说推进"改变"条，角色回应拉回"命运"条

  • 单页沉浸式架构，4个场景：门→酒馆大厅→对话浮层→记录卡

创意设计
创意设计1920×3621 515 KB

Session ID：
3569479071041050:b12daf62ebf6e1afd53e6db46d08b1d8_6a4cab20cd2c966c4e086e54.6a4cb4e6cd2c966c4e0873aa.6a4cb4e6cd2c966c4e0873a8:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 16:12:22)

第二阶段：核心实现

依托 Trae 给出的规格文档和实施计划，一步到位

  1. 角色系统：20位历史人物，每人有系统提示词（身份锚定+历史约束+对话规范+回复格式）、生平背景、临终独白、史料锚点

  2. 命运之秤（"历史引力"机制的具体实现）：用户每次发言 +15 倾向改变，角色回复 -20 拉回命运，最多12轮

  3. 对话持久化：切换角色自动保存/恢复对话记录，刷新不丢失

  4. 角色主动开口：进入对话自动触发角色介绍生平

核心实现
核心实现2559×1527 325 KB

Session ID：3569479071041050:5954a5159158aa1896e447068b712001_6a4cab20cd2c966c4e086e54.6a4cbec0cd2c966c4e087968.6a4cbec0cd2c966c4e087966:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 16:54:24)

第三阶段：视觉打磨
调用 frontend-design 技能，不断用 Trae 打磨整体的 UI/UX 设计

  1. AI 生成20张统一油画风格肖像 + 3张氛围背景图

  2. 真实双开门（3D 透视 + 木纹 + 铁铰链 + 铆钉 + 光缝）

  3. 椭圆木桌（木纹年轮 + 划痕 + 蜡烛 + 酒杯 + 地面投影）

  4. 对话浮层（backdrop blur 虚化酒馆背景，聚焦当前角色）

  5. 羊皮纸记录卡（深色文字在浅色背景上清晰可读）

视觉打磨
视觉打磨2559×1527 337 KB

Session ID：3569479071041050:3a04a741487b180269537c5b900fd6a6_6a4cab20cd2c966c4e086e54.6a4cd173cd2c966c4e088060.6a4cd173cd2c966c4e08805e:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 18:14:11)

第四阶段：音效与体验优化

  1. Web Audio API 程序化生成5种音效（门推、酒杯、发送、接收、背景音乐）

  2. 引导选项：LLM 每次回复后生成3个可选回应

  3. 移动端适配

音效与体验优化
音效与体验优化2560×1978 419 KB

Session ID：3569479071041050:749cf958a98bd3b916d47c81a9c7e5d7_6a4cab20cd2c966c4e086e54.6a4ddd5c08cf49725a3155c5.6a4ddd5c08cf49725a3155c3:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 13:17:16)

Session ID

  • Session ID 1: 3569479071041050:5954a5159158aa1896e447068b712001_6a4cab20cd2c966c4e086e54.6a4cbec0cd2c966c4e087968.6a4cbec0cd2c966c4e087966:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 16:54:24)

  • Session ID 2: 3569479071041050:5954a5159158aa1896e447068b712001_6a4cab20cd2c966c4e086e54.6a4cbec0cd2c966c4e087968.6a4cbec0cd2c966c4e087966:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 16:54:24)

  • Session ID 3: 3569479071041050:3a04a741487b180269537c5b900fd6a6_6a4cab20cd2c966c4e086e54.6a4cd173cd2c966c4e088060.6a4cd173cd2c966c4e08805e:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 18:14:11)

  • Session ID 4: 3569479071041050:749cf958a98bd3b916d47c81a9c7e5d7_6a4cab20cd2c966c4e086e54.6a4ddd5c08cf49725a3155c5.6a4ddd5c08cf49725a3155c3:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 13:17:16)

报名帖链接：【生活娱乐赛道】临终酒馆 —— 只营业一晚的酒馆，客人全是历史上最后一夜的人

1 个赞