尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
【AI Agent 独立开发】拒绝精神内耗:一个基于大模型的治愈系 微应用《小木的心屋》
# 【AI Agent 独立开发】拒绝精神内耗一个基于大模型的治愈系 微应用《小木的心屋》 **摘要** 本文分享一款为深夜疲惫打工人打造的轻量级 AI 陪伴与情绪调节 H5 应用——《小木的心屋》。文章结合真实界面截图详细介绍了如何整合 LLM Prompt 工程、结构化数据输出JSON Structured Output、ECharts 动态雷达图绘制以及睡眠呼吸调节系统的设计思路并附带完整在线体验链接。---### 一、 项目背景为什么想做这个 AI 应用作为每天面对屏幕、频繁加班的打工人深夜卸下一天的疲惫回到家时往往会有一种深深的无力感。明明身体已经极度疲惫但大脑却处于高频运转后的惯性兴奋中——刷着手机不想睡也不敢睡。传统的心理测试工具大多过于严肃、冰冷且充斥着繁琐的单选题而普通的聊天 AI 又往往缺少具体的场景感与情绪引导逻辑。为了给每一个在深夜感到压抑、焦虑或无所适从的朋友提供一个“零门槛、低负担、有温度”的避风港我独立开发了这个结合 **AI 陪伴 Agent** 与 **场景化交互** 的微型 应用——**《小木的心屋》**。*▲ 《小木的心屋》首页开屏干净无干扰提示戴上耳机获得更佳体验*---### 二、 沉浸式交互流程与界面设计整个应用在 UI/UX 上主打暖色调与沉浸感旨在帮助用户快速切断外界噪音放松神经#### 1. 场景推门与沉浸式引入点击“轻轻推开门”后伴随着吱呀的开门声与光影特效用户将被引导进入小屋伴有极具代入感的文字与背景画面。*▲ 动态推门交互伴随暖黄灯光溢出正式开启自愈之旅*#### 2. 多场景随机切换与共情对话系统内置了 10 套随机生活化场景如火炉旁喝咖啡、看晚霞、听风扇转动等。在这里AI 角色“小木”会像老朋友一样在炉火旁递上一杯咖啡轻声引导用户诉说心事。| 场景一窗前晚霞 | 场景二火炉咖啡 || :---: | :---: || ![晚霞场景]| ![火炉咖啡场景]|| *把窗帘拉开一点看最后一点晚霞* | *在火炉旁坐下聊完绘制专属「心情地图」* |---### 三、 可视化「六维心情地图」与动态处方#### 1. 结构化数据解析与雷达图渲染对话完成后AI 后台会将用户的自然语言输入转换为结构化的情绪指标前端使用 ECharts 实时渲染出专属的 **「六维心情地图」**涵盖情绪、压力、焦虑、睡眠、社交、自我六个维度。![六维心情地图雷达图]*▲ 专属「六维心情地图」直观量化心灵能量值与情绪状态*#### 2. 六维细看与 AI 动态处方除了雷达图系统还会对各项指标进行细化拆解并由 AI 根据当前用户的独特状态生成一份针对性的“暖心处方”。![六维细看与暖心处方]*▲ 细化数据与 AI 专属处方给出接地气的实操小建议*#### 3. 睡前呼吸调节引导最后应用内置了可视化的光球呼吸练习引导用户跟着光球膨胀与收缩的节奏进行深呼吸平复交感神经帮助快速入睡。![呼吸练习界面]*▲ 引导式呼吸练习跟随光球节奏平复睡前焦虑*---### 四、 核心技术实现亮点1. **共情型 AI Agent Prompt 架构**针对“小木”角色进行了深度 Prompt 调优使其具备严密的情绪识别能力能够捕捉用户文本中的隐性焦虑输出语气克制、温暖且富有同理心的回复。2. **自然语言 ➔ JSON 结构化数据Structured Output**利用大模型的 Function Calling / Structured Output 能力从对话上下文中提取情绪因子并转化为 JSON 格式的数值为前端雷达图和进度条提供实时数据支撑。3. **前端渲染与性能优化**基于 Canvas 与 ECharts 完成雷达图的轻量化绘制全站资源经过压缩保证在移动端 Web 及微信内置浏览器中秒级加载。---### ️ 五、 技术栈参考* **前端交互** HTML5 / CSS3 / JavaScript / ECharts (雷达图)* **AI 驱动** 大语言模型 API / Agent Prompt Engineering / JSON 结构化解析* **部署环境** 全端iOS/Android/PC适配 H5 容器---### 六、 项目体验与技术交流本项目已完成 Web H5 端的部署与全端适配可直接在浏览器中载入访问地址复制到浏览器打开xiaomu.heart.donglingjiu.top/games/xiaomuhearthouse/---交流探讨全网同名「今夜不打烊情绪馆」欢迎对 AI Agent 交互设计、Prompt 工程与大模型情绪分析感兴趣的朋友一起交流探讨### 开发者寄语 树叶落地从不考虑角度晚风拂过从不寻找方向。欢迎大家体验并在评论区提出改进建议如果你也在深夜感到疲惫希望这个小应用能为你带来一丝丝温暖。今晚早点睡晚安
RELATED

相关推荐

Linux磁盘分区与Swap和磁盘故障查询

Linux磁盘分区与Swap和磁盘故障查询

Linux 磁盘分区 GPT、swap 与磁盘故障排查总结一、磁盘分区实操:GPT GPT,全称是 GUID Partition Table,中文一般叫“全局唯一标识分区表”。 如果说 MBR 是老式分区表,那么 GPT 就是现在新服务器、大容量磁盘更常见的分区方式。尤…

📅 2026/11/9 18:16:38
RS232转RS485/422转换器:工业通信的桥梁与实战指南

RS232转RS485/422转换器:工业通信的桥梁与实战指南

1. 项目概述:为什么需要RS232转RS485/422?在工业自动化、楼宇自控、安防监控这些领域里摸爬滚打久了,你会发现一个很有意思的现象:控制室里工控机的屁股后面,往往拖着一个不起眼的小盒子,一头连着电脑的九针…

📅 2026/11/13 4:56:13
解决笔记本独显功耗异常:NUC x15电池续航优化实战

解决笔记本独显功耗异常:NUC x15电池续航优化实战

1. 项目概述:当你的NUC x15独显“偷吃”电池电量最近在折腾一台Intel NUC x15(LAPKC71F)笔记本,遇到了一个挺典型但又容易被忽略的问题:机器在仅使用电池供电时,独立显卡(我这款是RTX 3070 Lapt…

📅 2026/11/11 10:16:57
MORE NEWS

更多资讯

📰

电工证分为哪些部门千万别踩坑 三门峡项目现场管理员亲身经历

电工证分为哪些部门千万别踩坑 三门峡项目现场管理员亲身经历 之前考的证在外省能不能转过来?我跟你说,这事儿千万别踩坑,我身边就有人因为没搞清楚电工证的部门划分,差点被罚了5000块。…

📰

电工证在国家查询不到?学历不高怕报不上名?保姆级教程帮你解决

电工证在国家查询不到?学历不高怕报不上名?保姆级教程帮你解决 你是不是也遇到过这种情况?辛辛苦苦考了电工证,结果在国家平台上查不到,心里慌得一批?更头疼的是,学历不高,生怕报名时被拒,白白浪费时间和钱。别急,这篇保姆级教程,专门帮你解决“电…

📰

长沙考电工证没考过怎么办?内部消息教你避开这些坑

长沙考电工证没考过怎么办?内部消息教你避开这些坑 之前考的证在外省能不能转过来?这几乎是每个从外地来长沙打工的电工兄弟都关心的问题。现在我们来聊聊 长沙考电工证没考过 的情况,结合 内部消息 ,帮你搞清楚流程和避坑方法。…

📰

考电工证理论流程行业前景与薪资待遇

电工证理论流程全攻略:上岗必备,别被中介坑了 你是不是还在为考电工证发愁?不知道去哪儿报名?怕被中介坑?别急,这篇文章就是为你准备的,从 考电工证理论流程 到证书补办,全给你讲明白,真正帮你少走弯路, 上岗必备 的电工证,咱得一步到位。…

📰

太原高压电工证好考吗?考前押题能帮你少走弯路

太原高压电工证好考吗?考前押题能帮你少走弯路 你是不是也跟我们班组一样,想考太原高压电工证,但不知道从哪儿开始?怕被中介坑了钱还拿不到证?别急,老手教你一套靠谱的流程,还附上 考前押题 的技巧,帮你少走弯路。…

📰

涂料工算不算特种工人千万别踩坑 这些地方你必须知道

涂料工算不算特种工人千万别踩坑 这些地方你必须知道 之前考的证在外省能不能转过来?这是很多从业者最关心的问题,特别是像你这样在三门峡从事公路工程的涂料工,证书归属和转移直接影响到你能否跨区域执业。 千万别踩坑…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬