-
【自我介绍】
大家好！我是 Shaker
籍贯：可以通过我的 App 名字来猜
职业：一具刚下岗1个月的 HMI / UI 设计尸
Vibe Coding 年限：0.25年，用的 TRAE Work
擅长什么：熟练使用 PS、Figma 等画图工具（
）性格、特点标签：乐于接触新事物，终身学习。（形式所迫）
为什么想做这个作品：
动机：
最近外婆因吞咽障碍住院，无法进食和说话，6月底我和外公去医院看望外婆时，拍下下图的这一幕：
外婆暂时还没法说话，外公耳背听不见，二老无法交流，只能眼眶湿润的抱在一起。看到这一幕真的没人受得了。于是我下定决心想为他们做点什么，且我相信外婆一定能康复。
于是给外婆买了一套手写板，用来表达基础需求。但外公的听损问题是长期的不可逆的，而且逢年过节在饭桌上，外公因为听不清我们说话，无法参与交流。我一直在找一个合适的解决方案，然后发现一些
痛点：
- 情绪痛点：忍受听不清带来的沟通困难和社交孤立。
- 价格痛点：专业助听器太贵，动不动就从千到万，对于很多家庭是负担。
- 门槛痛点：很多人想试试助听效果，但不想一开始就花大价钱、还需要多次验配调试。
- 技术痛点：便宜的助听器只是单纯把音量放大，没有针对性。
我相信有很多孩子都观察到了自己长辈的困境，只是手头还不够宽裕。市面上助听器良莠不齐，老人也不爱戴，还贵，哪怕是你拿AirPods Pro当助听器，也快2000了。
那么有没有更经济的方式呢？有的朋友，有的。
粉红听诊器大爷，有同学应该看过，也许搞笑，但是真能应急解决问题，只是原理上是单纯放大声音，没有频段补偿。
那么有没有一种更体面的方法呢？有的，有的朋友。
（在介绍产品前，我想说：虽然我开发免费的助听 App，但我真心希望各位，在能力范围内给自己的家人用最权威的最好的医疗设备，或治疗。）
-
【产品简介】
-
是什么：
听到鸟 / Heardit
—— 让所有人都能 0 成本使用助听功能的 App
PWA + 任意有线耳机 = 非专业助听器
PWA：Progressive Web App / 渐进式 Web 应用。（特点：网页可以添加到手机桌面、离线可用、接近原生 App 体验。）
任意有线耳机：不推荐蓝牙是因为：1.本产品主打低成本助听。2.蓝牙传输有硬性延迟。
App 关键词：
- 零成本 — 不买设备，普通手机+耳机即可
- 零安装 — 打开网页即用，无需应用商店
- 零上传 — 隐私无忧，数据全部本地存储
- 离线即用 — PWA 缓存后飞行模式全功能可用
- 临床验配 — NAL-NL2 听力验配公式
- 六频精调 — 6 频段独立 WDRC 压缩+EQ 补偿
- 超低延迟 — 端到端 <15ms，实时通讯级
- 智能防啸 — 自适应陷波+反馈延迟三级防护
- 双耳独立 — 左右耳分别测听、分别补偿
- 一键助听 — 开关即用，跳过测试也能体验
解决的核心问题：
大幅降低听力辅助的门槛。
我的测试耳机：
PDD ¥6.9 包邮。
-
核心目标用户：
- 轻度、中度听力损伤的中老年人。
- 因经济原因暂未配备助听器的听障人士。
- 临时性听力下降需要辅助的人群。
典型使用场景：
- 轻度听损老人的日常交流 张大爷 65 岁，听力轻度下降（26-40dB），子女说话声音小了听不清，但又不愿意花几千块配助听器。孙子帮他手机安装了 Heardit，花 2 分钟做完听力测试，插上有线耳机，手机放桌上就能听清家人的对话，不影响日常生活。
- 看电视不再扰民 李阿姨听力下降后，看电视音量越开越大，经常被邻居投诉。她用 Heardit 快速进入助听模式，手机放在电视机旁，戴着耳机就能以正常音量清晰听到电视声音，家人和邻居都不再受影响。
- 临时场景的听力辅助 王先生听力正常，但参加一个大型会议时坐在后排，主讲人声音太小听不清。他打开 Heardit 用"正常听力"开始助听功能，手机麦克风对准讲台，戴上有线耳机就能实时增强远处的语音，相当于一个随身"声音放大器"，用完即关。
-
完整功能清单：
功能流程图：
用户使用路径：
首先介绍 App 的添加方法：（不添加也可直接用，只是无法离线用）
1.手机浏览器打开链接。2.点击【…】，选择【共享】。3.点击【查看更多】，找到【添加到主屏幕】。4.等蓝鸟图标出来后点【添加】，【作为网页 App 打开】要打开。5.最后就添加到你的桌面上了，当作普通 App 用即可，离线也可用。
以下按 首次使用 和 日常使用 两条路径说明：
路径 A：首次使用（未做过听力测试）
图1.首页，选择开始听力测试。（不想一上来就做题也可选“跳过”）
选择1: 乖乖进行听力测试
选择2: 跳过听力测试，先进去看看怎么个事儿
图2.听力测试指引。页面中间有"点击试听"按钮，可提前感受测试音。
图3.正式开始听力测试。声音从极低开始逐步增大，听到声音就点击按钮，系统记录听阈后自动切换到下一个频率。先测左耳，再测右耳，共 12 次（6 频率 × 双耳）。可暂停，可退出。
图4.测试完成。下方是左右耳听力卡片（显示 dB 数值和分级标签），再下方是纯音测听图，展示左右耳各频率的听阈数据连线。点击信息图标可查看分级标准。
听力测试结束后，你就有了私人的听力数据，准备开始助听：
图1.待助听页面。和刚才测试完成显示的信息一致，都是你的听力数据。这里可以点击“听力测试”重新进行测试，刷新你的听力数据。
图2.询问麦克风访问权限。点击右下角纸杯听筒“开始助听”按钮，按钮变红，系统弹窗询问你是否可以访问麦克风，选“允许”即可。
图3.开始助听。“允许”后，网页调用你的麦克风开始助听。右上角显示运行状态。卡片显示内容从上到下依次是：
图4.开始助听页翻页。只要操作页面，大红按钮就会缩小，无操作时自动恢复。
路径 B：日常使用（已做过听力测试）
已经做过听力测试的用户，就看不到“大杯子”的首页了。打开即是能看到自己听力数据的“待助听页面”，即开即用，随用随关，离线无影响。
-
相比初赛 Demo 的升级：
从复赛入选版 v1.4.49（2026-07-10）到最新版 v1.6.19（2026-08-03），历时 24 天、跨越 120 个版本迭代。
重绘了 UI ，优化了UE，然后用 TRAE 还原了 UI 设计稿。最后进行了功能上的优化。
1.设计了“猫头鹰：鸮 ”的 IP 角色，增加了“纸杯听筒”的设计概念，使其贯穿整个 App。
猫头鹰是鸟类中听力最敏锐的物种，尤其是鸮，能靠听觉在黑暗中精准定位猎物。
用纸杯电话，是因为本产品主打零成本助听——纸杯听筒是很多人童年的第一个"助听器"，一根线两个杯，就能把声音传到耳朵里。最朴素的聆听工具，恰好呼应最朴素的产品理念：不需要花几千块，一副耳机一部手机就够了。
2.文字更大，方便视障人士。（左：初赛 / 右：复赛）
3.交互步骤做减法，优化了交互体验。
3.1 在首页增加了，“跳过听力测试”的按钮，避免一进来就要强制做“听力测试”题。让用户可以自己选择，先进去看看，觉得有兴趣再测自己的听力。
3.2 删掉了左耳测试完成的提示页面，左耳测完自动开始右耳，无缝衔接让测试体验更加流畅。
3.3 开始助听页的增益等级的调节，去掉了滑块，只保留了±，避免滑动过大造成突然的音量增大，影响体验。但是去掉滑块后就不知道当前等级所在位置了，因此用“纸杯听筒”做成了强度格。
3.4 测试结果页，将听力分级标准隐藏进了二级弹窗里，避免占据黄金位置。
4.其他优化。
-
【产品演示视频】
-
【产品创作历程】
最初灵感来源：
源自帖子开头描述的外婆的生病，和外公常年耳背给我带来的思考。想通过AI解决身边人的需求和问题。研究中又发现中国约 2.2 亿人存在不同程度的听力损失，但助听器佩戴率不足 10%。三重门槛将大多数人挡在门外：专业助听器价格从数千到数万元不等；验配流程需要多次往返专业机构；助听器在外观上被贴上"残疾"标签，许多老年人抗拒佩戴。
如果一个APP能让普通手机加一副有线耳机就变成助听器呢？不用买设备、不用去医院、不用学复杂操作——打开网页就能用，离线也能用。这就是「听到鸟」的起点。
初赛 Demo：从四条路线到一个方案（6 月 24 日 - 7 月 10 日）
复赛完整作品：UI 定稿 + 功能打磨（7 月 25 日 - 8 月 3 日）
复赛阶段分两条线并行推进：先在独立的 UI 原型文件夹中逐像素还原 Figma 设计稿，再将稳定的功能逻辑接入定稿 UI，进入全功能打磨。两条线合计 120+ 个版本迭代。
关键问题与解决思路：
这里不赘述 AI 在开发时遇到的技术问题，因为这是 AI擅长的，聊一下我遇到的问题与解法。
1.问题：传统开发流程做不出我要的产品。
使用AI开发的流程和我们在公司里做团队开发的流程不一样。产品写 PRD，设计做画 UE 画 UI，研发写代码，测试，这种传统流程在 AI 开发里不奏效，因为AI目前没有办法直接根据 PRD 一次成功做成界面。
解决思路：
我尝试出的最高效的方法还是通过简短的提示词，先把大框架做出来，根据大框架再去做增删。这种方式不是按PRD一层楼一层楼的建，然后发现地基挖浅了，要推倒重来。我觉得很像青蛙的变态发育过程，从卵到蝌蚪，从蝌蚪到青蛙，产品形态是可以差异很大的，可以在生长的过程中直接去掉尾巴，加上四肢，再变成更成熟的状态。
2.问题：AI 做 UI 设计稿还原还不够强。
直接把 Figma 源文件发给 AI 让他还原前端，效果是会很差。首先，自己实践后就会发现，目前网上的 AI 直接还原 UI 效果多么好是夸张过的。你还是需要调整的，和不停的改稿没有本质区别，只不过这次你改的是实实在在可用的产品前端。
解决思路：
此办法在 AI 时代显得不是很智能，但是有用。还是把 Figma 源文件和效果图，还有切图，都丢给它。没错，自己切图，切好告诉它文件位置，因为 AI 切的很乱，比如你在 figma 里镜像过的图，它切出来就没有镜像了，等等问题，还不如我直接切了算了。（等有空再调教）源文件+效果图+切图+描述，一起给它，出来的界面还原度尚可，至少元素都有了，再一页一页的像素级别的微调。
3.问题：AI 压缩上下文后还是会忘了你们的对话。
我一直有版本管理的习惯，我让 AI 每一次修改都帮我归档，直到前两天，我一直更新版本更新嗨了，更到某一版时更毁了，想回溯到前几版，但是压缩完上下文后，发现今天一天的版本都没有自动备份，中间的稳定版早就被覆盖掉了，直接炸毛。
解决思路：
因为赶时间，先用笨办法，每次更新都会加一句我的归档规则。后续我会做成skill，但是就算做成skill每次也要调用啊，这里留着待解。
重要的设计与技术决策：
-
【TRAE 实践过程】
初赛使用 TREA 完成产品开发流程：
TREA Work：需求梳理 ——> TREA Code：出产品DEMO ——> TREA Design：画UI ——> TREA Code：把功能嵌入UI里 ——>TREA Code：不停迭代修改，上线。
复赛使用 TREA 完成产品开发流程：
Figma：设计产品UI图 ——> TREA Design：根据Figma设计稿实现前端UI ——> TREA。Code：把初赛的功能嵌入新UI里 ——> TREA Code：分出测试版和生产版2条线，用测试版反复迭代优化，最后发布生产。
开发关键步骤截图 & Session ID：
1.TREA Design：根据Figma设计稿实现前端UI的雏形。
Session ID： 168648583418380:36a79730df48ca5582ccb4671246385c_6a3c1d0c81050336ce0c1793.6a6437742c426a178aa477ed.6a6437732c426a178aa477eb:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/25 12:11:32)2.TREA Design：根据Figma设计稿一页一页的抠细节
Session ID： 168648583418380:0ebcba23dec07fe421e19ba73cc8b9a9_6a646f3f2c426a178aa47a48.6a65a7632c426a178aa49a1f.6a65a7632c426a178aa49a1d:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/26 14:21:23)3.TREA Code：把初赛的功能嵌入新UI里
Session ID： 168648583418380:6fb9437e4e87541cd7eb34aa07b3552e_6a64b0302c426a178aa48c3a.6a699a969a6ef096c7ebdf72.6a699a969a6ef096c7ebdf70:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/29 14:15:50)4.TREA Code：在新UI版本的基础上不停迭代新功能
Session ID： 168648583418380:5af3b53b594c6b47b150b959c3188cab_6a6f07c2fbcf9226461d3826.6a6f339afbcf9226461d3c7e.6a6f339afbcf9226461d3c7c:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 20:10:02) -
【技术方案分享】
技术栈概览：
关键技术实现思路：
整个音频引擎用 Web Audio API 搭建了一条完整的助听器信号链，从麦克风采集到耳机输出，经过前置滤波、六频段 WDRC 压缩、NAL-NL2 听力补偿、啸叫防护、安全限幅五个阶段。
关键 AI 实现思路：
初赛：
TREA Work：需求梳理 ——> TREA Code：出产品DEMO ——> TREA Design：画UI ——> TREA Code：把功能嵌入UI里 ——>TREA Code：不停迭代修改，上线。
复赛：
Figma：设计产品UI图 ——> TREA Design：根据Figma设计稿实现前端UI ——> TREA。Code：把初赛的功能嵌入新UI里 ——> TREA Code：分出测试版和生产版2条线，用测试版反复迭代优化，最后发布生产。
-
【商业化或社会价值分析】
社会价值：
定位边界：「听到鸟」不替代专业助听器。重度听力损失患者仍需要专业医疗干预和定制设备。它的价值在于覆盖那些因为经济、操作、心理门槛而"什么都不做"的人群——让"先试试"变得毫无成本。
商业化路径：
免费基础版 + 付费高级功能
核心功能（听力测试、实时助听、NAL-NL2 补偿）永久免费，这是社会价值的基础。高级功能可付费解锁：多场景预设（餐厅降噪模式 / 会议增强模式 / 户外风噪模式）、远程验配师在线调整、听力变化趋势报告、云端听力档案同步。定价参考听力健康类 APP 的订阅模式（月费 9.9-29.9 元），远低于专业助听器维护成本。
B 端：养老机构与社区健康站
养老院、社区卫生健康服务中心、老年大学等机构需要批量听力筛查工具。「听到鸟」的 PWA 特性意味着机构只需在平板上打开网页，即可为每位老人完成听力测试和初步助听体验。B 端授权按机构规模年费收费，同时提供管理后台（批量听力档案、趋势统计、异常预警）。
数据服务（脱敏聚合）
用户的听力测试数据存储在本地，但在用户授权下可上传脱敏聚合数据，形成区域听力健康分布图谱。这批数据对助听器厂商（产品规划）、公共卫生部门（政策制定）、科研机构（流行病学研究）具有高价值。数据所有权归用户，上传完全自愿，且仅聚合统计不涉及个人身份。
-
【产品迭代规划】
短期（1-3个月）
中期（3-6个月）
长期（6-12个月）
迭代哲学：
始终守住"零门槛"底线——不管功能怎么加，核心体验永远是"打开网页、戴上耳机、听到声音"。高级功能是可选项，不是必经路。让"先试试"永远没有成本。
-
9.【Vibe Coding 的本质】
-
Vibe Coding 不仅是让 AI 替你写代码，还是让 AI 理解你的意图、记住你的约束、执行你的决策。开发者的精力从"怎么实现"转移到"要做什么"和"为什么这样做"，再由 AI 负责把决策变成可运行的代码。27 天 170+ 版本的迭代速度，在传统开发模式下需要至少 4-5 个月。
-
【THE END】
-
感谢 TRAE AI 创造力大赛的举办和陪伴。
-
在这里，我看到了 AI 时代有想法就能做出产品，我看到了十几岁少年的后生可畏，我看了女性力量，我看到了为社会公益做贡献的普通人，看到了百花齐放，大家的想法都非常的有意思，非常有感染力。
-
这个失业的夏天，我也是 0 成本获得了2个月从 0 开始学习和实践 vibe coding 的机会。
-
江湖再见。
-
最后的最后，希望外公身体健康，外婆早日康复，老婆顺利生产。
-
祝大家健康。
