【社会服务\社会公益】毛孩子守护者
0. 先和大家打个招呼吧 
-
你是谁： 大家好，我是六只毛孩子的妈妈和奶奶，AI Agent深度使用者，希望可以用AI给天下的毛孩子一个温暖的家；
-
你是怎么用 TRAE 把 Demo 做出来的： 遇到TRAE的时候，我在想，目前我最想做的事情是什么，通过与TRAE对话，让它帮我从网页的框架到功能一步一步搭起来，有时候会遇到TRAE搭出来的功能没有达到想要的结果，这个时候再通过对话一步一步去修正，最终就得到了现在毛孩子守护者啦
-
如果问我为什么想要做出这样的一个作品，我的回答可能会有点老套–因为毛孩子是人类最忠诚的朋友。目前我养了六只猫咪，年龄最大的这只是猫妈妈，是我从地铁站附近捡回来的，捡回来不久就生了五只小猫咪，说到这里，我既觉得庆幸又觉得有点压力，庆幸的是怀孕的猫猫遇到了我，不需要面临野外生产和独自抚养幼子食不果腹的处境；有压力的是我需要抚养六只猫猫的日常起居，其中五只还是幼猫，而且在抚养的过程中猫猫生病去宠物医院花了至少有3W。如果当时有这样一个网站—有可靠的养宠知识，可靠的领养人，和有可靠的养宠人交流渠道，这一切都可以变得更简单，再加上近期不断出现的虐待宠物的新闻以及宠物保护法立法的推动，让我更想在这个领域做出一点什么，于是，毛孩子守护者就诞生了。
1. Demo 简介
-
是什么
「毛孩子守护者」是一个面向流浪动物救助与宠物领养的一站式公益网站。项目基于纯前端技术栈（HTML/CSS/JS）构建，采用粉紫、Tiffany蓝、小黄鸭黄等温暖治愈的配色风格，集成了 AI 智能领养匹配、健康管家、上门照护、寻宠互助、养宠知识百科、积分商城等模块，旨在用技术手段连接每一只待领养宠物与它未来的家人。
-
面向谁
核心用户群体包括：有领养意愿但不知道如何选择合适宠物的准铲屎官、流浪动物救助站和志愿者、需要发布寻宠信息的宠物主人，以及希望获取科学养宠知识的普通宠物家庭。
-
主要功能
平台围绕"救助-领养-养护-照护"全链路，构建了七大核心模块：
1. AI 智能领养
• AI 匹配：用户回答 7 道关于居住空间、经济预算、陪伴时间等维度的问卷，系统通过权重算法计算匹配分数，从待领养宠物库中推荐最适合的伴侣，附带高/中/低匹配度标签。
• 发布待领养：救助站或志愿者可填写宠物基本信息（名称、品种、年龄、健康状况、性格、救助故事、照片等），发布后直接进入 AI 匹配池供他人浏览。
2. 健康管家
• 症状识别：用户输入宠物症状，系统基于规则引擎给出初步健康建议和注意事项。
• 医院推荐：根据用户所在地区推荐附近的宠物医院。
• 疫苗驱虫提醒：建立宠物疫苗和驱虫档案，自动计算下次接种/驱虫时间并提醒。
3. 上门照护
• 照护师匹配：展示认证照护师列表，包含服务经验、评分、价格、可预约时段等详细信息。
• 在线预约：支持日历选择日期 + 自定义时间范围（小时+分钟），实时计算服务时长和预估费用。
• 履历查看：点击照护师可查看完整履历，包括教育背景、专业证书、工作经历和客户评价。
4. 我的宠物
• 宠物档案：录入宠物全身照、侧身照，建立完整的数字身份档案。
• 鼻纹识别：上传宠物鼻纹照片，建立生物特征 ID，为未来防冒领和丢失找回提供技术基础。
• 领养追踪：领养后自动开启追踪系统，首月每周打卡、1年内每月打卡、之后每季度打卡，每次打卡需上传正面照、侧面照和不少于 20 秒视频，平台根据照片进行 AI 评估并奖励积分。
5. 交流贴吧
• 日常交流：铲屎官分享养宠日常、求助问答、经验交流。
• 寻宠榜：基于地理位置的走失宠物信息发布平台，支持三级地区筛选（省-市-区），无数据时自动 fallback 显示全部寻宠告示。首页以滚动 Marquee 形式展示最新寻宠信息，提高曝光率。
6. 养宠知识百科
• 猫狗专区：分别收录 20 篇科学养宠文章，涵盖疫苗接种、驱虫、绝育、营养饮食、疾病识别、日常护理、行为心理、老年照护等主题。
• 权威溯源：所有文章均标注权威来源（AAFP、AVMA、AAHA、AVSAB、WSAVA、默沙东兽医手册等），支持点击跳转原文。
• 搜索与分页：支持标题、内容、分类的模糊搜索，分页支持 10/20/50 条每页。
7. 积分商城
• 双币体系：商品同时显示积分价和现金价，用户可通过积分兑换或直接购买。
• 积分获取：每日打卡、成功领养、发布帖子、参与活动等方式均可获得积分。
8. 首页交互增强（附加）
• 动态通知：首页中间区域根据后台配置动态展示重要活动/通知卡片，无通知时自动回退到温馨漫画横幅。
• 悬浮 AI 客服：右下角渐变圆形 AI 客服按钮，基于规则引擎回答领养、健康、照护、积分等常见问题，支持回车发送和消息缓入动画。
• 导航下拉菜单：鼠标悬停导航项时展开子模块菜单，纯 CSS 实现平滑动画。
图 1：首页整体设计图 2：AI 领养匹配功能
2. Demo 创作思路
-
灵感来源
国内流浪动物数量 千万级别，但领养渠道高度分散——有人在朋友圈发领养信息，有人在抖音、闲鱼、本地论坛发帖，信息孤岛严重。另一方面，很多有领养意愿的人因为"不知道选什么品种适合自己""担心健康问题"而望而却步。这种信息不对称和匹配效率低下的问题，让我想到可以用一个整合平台来打通领养全链路。
-
想解决的问题
1. 领养匹配效率低：传统领养靠人工浏览大量信息，用户难以快速找到适合自己生活场景的宠物。
2. 走失宠物信息传播慢：目前主要依赖朋友圈转发，传播范围有限，黄金寻找时间（走失后 72 小时）内往往覆盖不到足够多的人。
3. 宠物健康管理碎片化：疫苗、驱虫、体检记录分散在不同医院和笔记本里，缺乏统一的数字档案。
-
为什么做这个方向
流浪动物救助是一个典型的"供给侧分散、需求侧模糊"的公益场景。相比捐款捐粮这种一次性行为，建立一个可持续的数字化平台能够产生更长尾的社会价值。同时，这个方向技术门槛适中，适合在初赛周期内完成一个可演示的 MVP，又能切实展示 AI 辅助决策在公益场景中的应用潜力。
3. Demo 体验地址（三选一）
-
在线体验： 毛孩子守护者 - 一站式宠物服务公益平台
网站已部署至 GitHub Pages，可直接访问。建议使用桌面浏览器获得最佳体验，移动端也做了基础适配。
4. TRAE 实践过程
-
整个项目从 0 到 1 完全在 TRAE 中完成，没有使用任何其他 IDE 或代码编辑器。以下是关键开发阶段的完整流程。
Step 1：项目骨架搭建（Day 1）
向 TRAE 描述需求后，AI 直接生成了单页应用（SPA）的基础架构：
• index.html：所有页面的容器，通过 page 类切换显示
• css/style.css：全局样式变量和组件样式
• js/data.js：模拟数据层，基于 localStorage 持久化
• js/app.js：核心应用逻辑，包含路由、渲染、事件绑定
TRAE 在生成代码的同时自动处理了模块间的依赖关系，比如导航栏点击事件与页面切换的联动、登录状态的局部更新等。
-
Session ID 2064209119030308:a4c53c7c4d030f2acd4d3e7e9086a4ed_6a4af2074654597ed05a009a.6a4af5044654597ed05a00fe.6a4af5044654597ed05a00fc:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 08:21:24)
Step 2：核心功能迭代（Day 2-3）
AI 领养匹配：通过多轮对话，让 TRAE 实现了一个 7 步问卷 + 权重打分算法。每道题对应不同的匹配维度（居住空间、经济预算、陪伴时间等），最终按加权总分排序推荐宠物。
寻宠榜与地理筛选：在论坛模块中增加"寻宠榜"标签页，TRAE 帮我实现了三级地区选择器（省-市-区）和基于城市的 lost pets 过滤逻辑。当用户选择的城市没有数据时，自动 fallback 显示全部寻宠信息并提示"暂无，显示全部"。
鼻纹身份识别：在"我的宠物"模块中增加了鼻纹上传和 AI 比对（模拟）功能，为未来真实的鼻纹识别 API 接入预留了接口。
-
Session ID 2064209119030308:9fce2eca630593e70a2f6133f49d629d_6a4af2074654597ed05a009a.6a4b5b974654597ed05a0476.6a4b5b974654597ed05a0474:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 15:39:03)
Step 3：视觉全面升级（Day 4）
这是整个开发过程中最惊艳的环节。我向 TRAE 提出"粉紫、Tiffany蓝、小黄鸭黄为基调，温暖明亮但不刺眼"的需求后，TRAE 完整重写了 CSS 色彩系统：
• 导航栏改为粉紫 Tiffany 蓝梦幻渐变
• 卡片增加四色交融的顶部装饰线
• 按钮采用柔糖质感 + 高光反射效果
• 全局背景使用多层径向渐变营造温馨氛围
同时，TRAE 调用图像生成工具为首页创作了 3 张猫狗漫画风格装饰图，与整体色调高度统一。
-
Session ID 2064209119030308:c5e6d8a721eef80bac4498c9ca969213_6a4af2074654597ed05a009a.6a4b75b64654597ed05a09cb.6a4b75b54654597ed05a09c9:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 17:30:30)
Step 4：交互细节打磨（Day 5）
• 动态通知系统：首页中间区域在有重要活动时显示通知卡片，无活动时自动回退到横幅图片。TRAE 用 20 行代码实现了这个状态切换逻辑。
• 悬浮 AI 客服：右下角渐变圆形按钮 + 固定定位对话窗口，支持回车发送、关键词自动回复、消息缓入动画。
• 导航栏下拉菜单：鼠标悬停时显示子模块菜单，TRAE 用纯 CSS 的 opacity + visibility + transform 组合实现了无 JavaScript 的平滑展开动画。
-
Session ID 2064209119030308:178f0315530c1818310140a4514424ce_6a4af2074654597ed05a009a.6a4b469f4654597ed05a0324.6a4b469f4654597ed05a0322:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 14:09:35)
Step 5：部署上线（Day 6）
在 TRAE 的协助下完成了 GitHub Pages 部署：
• 使用 Git CLI 初始化仓库并提交代码
• 配置 GitHub Pages 从 master 分支自动构建
• 解决 GitHub CLI PATH 和权限问题
-
Session ID 2064209119030308:173531cf09447e8810184b6b550e3370_6a4af2074654597ed05a009a.6a4cac46c584c2354eb4e837.6a4cac46c584c2354eb4e835:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 15:35:34)
最终成功上线： 毛孩子守护者 - 一站式宠物服务公益平台
-
开发关键步骤截图
5. 对应的报名审核通过的帖子链接
【社会服务|社会公益】毛孩子守护者（一站式宠物服务公益应用） - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
