0. 先和大家打个招呼吧 
-
你是谁： 我是feng，一名关注信息无障碍传播的独立开发者，致力于用技术弥合聋人与健听人之间的信息鸿沟。
-
你是怎么用 TRAE 把 Demo 做出来的： 作为一个非专业前端开发者，我之前从未系统学习过网页开发。TRAE 让我能够用"讲故事"的方式把脑海里的想法变成现实。我只需要描述"我想要一个按钮，它是圆形的，点击会弹出一个框"，TRAE 就能帮我生成完整的代码。最神奇的是，当我描述"为聋人用户设计"时，它立刻理解了信息无障碍的重要性，并主动建议加入"情绪感受"和"场景案例"这些原本我没想到的交互细节。整个过程中最大的惊喜是词库扩充环节——原本以为要手动输入1000+个概念是项不可能完成的任务，但通过和 TRAE 协作，我们把这件事拆解成"每批50个、分10批"的小任务，最终成功扩充到1736个概念。
1. Demo 简介
-
是什么：一个单页 HTML 网站（聋听桥），专为聋人用户设计的 AI 概念转译工具 —— 让复杂概念通过视觉化、情感化的方式一听就懂；
-
面向谁：聋人及听障用户、需要理解抽象概念、学习新知识的人群、教育工作者（用于向学生解释复杂概念）；
-
主要功能：
- 整句转译 - 将抽象概念用一句话简单解释
- 逐词拆解 - 分解每个字的含义，帮助理解词汇构成
- 今日打卡 - 记录学习进度，养成学习习惯
2. Demo 创作思路
-
灵感来源："聋听桥"这个名字象征着聋人与健听人之间的沟通桥梁。在信息爆炸时代，聋人用户常常因为"听不懂"或"理解不了"而错过重要的信息；
-
想解决的问题：
- 聋人用户难以理解抽象概念（如"内卷"、“复利”、“画大饼”）
- 现有词典工具缺少针对聋人认知习惯的解释方式
- 缺少"情绪感受"和"场景案例"来帮助理解；
- 为什么做这个方向：
- 刚需性 - 聋人群体对概念理解工具有真实需求
- 无障碍性 - 解决聋人与健听人之间的信息不对称问题
- 可扩展性 - 词库可不断扩充，覆盖更多领域。
- 界面截图
3. Demo 体验地址
-
交互式可体验的HTML格式文件：
demo聋听桥.zip (153.8 KB)
4. TRAE 实践过程
- 完整流程：
第1步：需求沟通
- 描述"为聋人用户创建概念转译工具"的想法
- 确定产品名称：聋听桥（聋人与健听人之间的桥梁）
- 讨论核心功能：整句转译、逐词解释、场景案例、行动步骤、今日打卡
第2步：技术方案确定
- 确定使用单页 HTML + TailwindCSS + JavaScript
- 采用玻璃态设计，支持深色/浅色主题
- 使用本地 conceptDB 对象存储概念词库
第3步：UI 开发
- 设计输入框、转译按钮、结果展示区域
- 优化玻璃态视觉效果
- 实现深色主题切换功能
第4步：词库扩充
- 分10批添加金融类概念（从银行储蓄到股票证券）
- 添加医疗健康类概念
- 总概念数量：1736个
第5步：功能完善
- 添加账户登录系统
- 创建使用说明弹窗
- 优化导航栏布局
- 开发关键步骤截图1:
-
Session ID 1:
-
2803081072360520:433eabe77a60e355792ecbb3a9637c2c_6a3927513ffe2debbf536108.6a3a70d13ffe2debbf5362e6.6a3a70d13ffe2debbf5362e4:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/23 19:41:05)
-
开发关键步骤截图2:
-
Session ID 2:
-
2803081072360520:00d2d79638bd22e80951e91b6db7733e_6a3927513ffe2debbf536108.6a3927513ffe2debbf53610b.6a3927513ffe2debbf536109:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/22 20:15:13)
-
开发关键步骤截图3:
-
Session ID 3:
-
2803081072360520:076afb93c9b6a51e8710a987a38adc75_6a3927513ffe2debbf536108.6a3a788d42da830df3ee48e0.6a3a788d42da830df3ee48de:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/23 20:14:05)
5. 对应的报名审核通过的帖子链接：【社会服务赛道】聋听桥（DeafBridge）——由聋人发起、面向聋人的成长知识转译系统设计