让每幅画都会讲故事，让每个孩子都被听见。
每个孩子都是天生的画家。他们可能还不太会用文字表达自己，但一支画笔、一张白纸，就能画出他们眼中的世界。画里有牵着手的爸爸妈妈，也有那些说不出口的想念和不安。
心理学研究表明，儿童的画作能反映出他们真实的心理状态。一个把全家福画得特别小的孩子，可能内心缺乏安全感。画面颜色总是很暗的孩子，可能正在经历某种情绪困扰。这些藏在画笔下的信号，是了解孩子内心世界的一扇窗。
而在中国，有超过 900 万留守儿童。他们的父母远赴他乡打工，一年到头见不了几次面儿。他们不会主动说我很难过，但会在画里画出来。
乡村老师一个人要管几十个学生，有心关注每一个孩子却分身乏术，传统心理辅导又需要专业知识。如果数以百万计的留守儿童心理需求长期被忽视，不仅影响个人成长，也会给社会带来更大的治理成本。
这就是我做「童画心声」的原因，让孩子画一幅画，用 AI 去读懂它，帮助乡村老师看见每个孩子内心的声音，让留守儿童感受到被理解和被关心。
下面是项目的详细介绍。
一、摘要
面向乡村留守儿童和他们的老师，在孩子画画后通过 AI 自动生成故事和心理分析，帮助老师在不具备专业心理学背景的情况下，也能通过孩子的画作了解他们的内心世界。目前通过本地测试验证，AI 能准确识别画作元素并生成温暖的故事，心理分析报告的情绪标签和教师建议具备参考价值。
二、真实场景与需求
**目标人群：**乡村小学的教师和留守儿童。
**痛点描述：**我了解到一个很现实的问题，乡村学校里有很多留守儿童，他们的父母常年在外打工，孩子内心有很多话不知道怎么表达。学校的老师也想关心这些孩子，但一个老师往往要管几十个学生，很难逐一去了解每个孩子的心理状态。传统的心理辅导需要专业的心理学知识，乡村老师大多没有这方面的培训，而且请专业的心理老师来学校，成本太高了，根本不现实。
**现有做法：**现在乡村学校主要靠老师日常观察和家访来了解学生，但这种方式效率很低，而且孩子面对老师直接询问时，往往不太愿意敞开心扉。有些学校会引入专业的心理测评工具，但那些工具通常是标准化的问卷，对低年级的孩子来说太抽象了，而且一次测评就要花不少时间，很难持续做下去。
**我的想法：**孩子画画是一种很自然的表达方式，他们会在画里不知不觉地画出自己真实的情感。比如画全家福时把自己画得特别小，或者画面颜色特别暗。如果能有一个工具，让老师只需要让孩子画一幅画，就能自动得到一些关于这个孩子心理状态的参考信息，那该多好。
三、作品介绍
「童画心声」是一个纯前端的网页应用，打开浏览器就能用，不需要安装任何东西。
核心功能有四个：
1、在线小画板
孩子可以直接在网页上画画，也支持拍照上传之前画好的作品。画板有调色板、画笔粗细调节、橡皮擦和填充工具，操作很简单，低年级的孩子也能用。
2、AI 讲故事
画完之后，点击一个按钮，AI 就会自动看这幅画，然后编一个温暖有趣的故事。故事会用打字机效果一个字一个字地显示出来，还可以点"听故事"让 AI 用语音读出来。孩子还能跟 AI 聊天，说说自己画的是什么、为什么这么画，AI 会像一个温柔的美术老师一样回应。
3、心理关怀看板
这是给老师用的。AI 在分析画作的同时，会生成一份心理分析报告，包括孩子的情绪状态、社交倾向、创造力评估，以及给老师的具体建议。看板上会按学生分组展示，老师一眼就能看到哪些孩子需要多关注。
4、亲情分享
老师可以把孩子的画作和 AI 生成的故事做成一张精美的分享卡片，下载成图片发给远方的父母。虽然我们的项目是纯前端的，没办法直接发送，但至少能让这份心意以图片的形式传递出去。
四、用 SOLO 实现的过程
我是怎么拆解任务的：
一开始我只有一个模糊的想法，我先让 SOLO 帮我对齐方案，确定了产品方向（留守儿童绘画陪伴+心理关怀）、技术栈（纯前端）、AI 能力（调用火山大模型 API）和产品名字（童画心声）。
然后我们一步一步来，先搭项目骨架，再做画板功能，再接 AI 接口，再做故事展示，再做心理分析看板，最后做分享功能。
1、用了 SOLO 哪些能力：
代码生成：整个项目 8 个文件、2000 多行代码，基本都是 SOLO 帮我写的。从 HTML 页面结构、CSS 样式、到各个 JS 模块的逻辑，它都能根据我的描述直接生成。
**Bug 修复：**开发过程中遇到了不少问题，比如 API 消息格式不对、AI 聊天回复不显示、分享卡片图片变形、文字被截断等等，每次我把问题描述给 SOLO，它都能快速定位到问题并修复。
**UI 优化：**我不是设计师，但我知道自己想要什么感觉。比如我会说，工具按钮要加悬浮提示，否则孩子不知道是干什么的，SOLO 就加了自定义 tooltip。我说Loading 页面一直显示同一句话，用户体验不好，SOLO 就帮我实现了文字轮转的动画效果。
**功能决策：**有时候我会纠结某个功能该怎么做，SOLO 会帮我分析技术可行性，并且给出一个合理的建议。
2、关键 Prompt 和操作过程：
在 /plan 模式下，SOLO 会根据我的想法描述，帮我先规划完整的产品方案和技术架构，在我们对齐后，它就开始帮我生成项目代码。
之后每一步我都是用自然语言描述需求，比如：
“画板里的清除功能会把画布重置为当前选择的颜色，这个体验太差了，应该清除为白色。“
“故事集里有些画没有生成故事，但它们存在 localStorage 里看不见，能不能让它们显示出来，标记为待分析？“
“分享卡片的橙色标题区域太高了，故事文字字号也偏小，调整下。“
3、中间踩过的坑：
1）API 消息格式错误
一开始我把 prompt 当成字符串直接传给 API，但豆包 API 要求 messages 必须是对象数组格式。这个错误卡了我一会儿，SOLO 帮我定位到了问题。
2）AI 聊天一直显示正在思考
`addChatMessage()` 函数忘了 return DOM 元素，导致后续代码拿到的是 undefined。这种小错误人工排查真的很痛苦，但 SOLO 一眼就看到了。
3）分享卡片文字显示不全
我把字号从 14px 改到 16px，但忘了同步更新 Canvas 高度计算中的字符宽度估算参数，导致画布高度不够，文字被截断了。
4）浏览器缓存问题
有一次代码改了但浏览器还是用的旧版本，我还以为是代码写错了，折腾了半天才发现是缓存。
5）分享当前故事 bug
`shareCurrentStory()` 方法硬编码取第一幅画，导致无论查看哪幅画点分享，显示的都是第一幅。这个 bug 是我上传了两幅同样的画才发现的。
五、成果展示
在线体验地址：https://tonghua-xinsheng.vercel.app/
代码库地址：GitHub - sarahxu0205/tonghua-xinsheng: 一个帮助老师在不具备专业心理学背景的情况下，也能通过孩子的画作了解他们的内心世界的小工具。 · GitHub
下图为，亲情链接模块下，分享给爸爸妈妈看的功能中，保存分享卡片的效果：
下图为，孩子作品的分析报告页面：
下图为，故事集模块下，点开一幅作品的详情页：
1、技术成果：
- 8 个文件，一套完整的纯前端 Web 应用
- 集成火山引擎豆包视觉大模型，支持多模态（图片+文本）AI 分析
- 6 大功能模块：在线画板、AI 故事、AI 对话、心理看板、亲情分享、数据管理
2、功能亮点：
- 儿童友好的暖色调 UI（橙色+绿色+黄色），圆润边角，活泼字体
- AI 故事打字机效果 + 语音朗读
- 心理分析强调，不贴标签、多发现闪光点
- Loading 等待时文字轮转动画，提升等待体验
- 待分析画作可见化，支持后续补生成
- 分享卡片 Canvas 渲染下载
六、验证方式与下一步
1、验证方式：
1）功能测试
完整走通了 画画→AI 分析→生成故事→心理分析→分享卡片 的全流程，验证了在线画画和拍照上传两种模式，验证了待分析画作的补生成功能。
2）AI 效果验证
使用豆包视觉大模型（doubao-seed-1-6-vision-250815），测试了多幅不同主题的儿童画作，AI 均能准确识别画中元素并生成温暖的故事，心理分析报告的情绪标签和教师建议具备参考价值。
3）UI/UX 测试
在桌面浏览器和移动端均进行了测试，响应式布局正常，触摸操作流畅。
2、下一步计划：
1）AI Prompt 优化
— 根据实际使用中 AI 生成内容的质量，持续优化 Prompt，让故事更有趣、心理分析更准确。
2）增加更多功能
比如画作时间线（展示一个孩子不同时期的画作变化趋势）、教师端数据导出报告等。
最后，附 SOLO 使用的截图：
