【社会服务赛道】Urban Whisper —— 城市低声量需求雷达
1. Demo 简介
是什么
Urban Whisper 是一个 HTML 网页应用，作为城市低声量需求雷达，将居民的日常抱怨转化为可识别、可排序、可执行的社区微改造提案。
面向谁
- 普通社区居民：遇到生活中的小问题，但不知道如何表达和反馈
- 居民群管理员、社区志愿者：需要把零散意见整理成清晰的共识提案
- 物业、街道、社区工作人员：需要了解居民真实需求，发现早期弱信号
- 城市观察者、公益组织：希望推动低成本、可落地的社区微改造
主要功能
城市声音输入台
- 用户可以输入多条居民反馈
- 提供5个内置示例快速体验（夜间照明、老人数字障碍、候车设施、儿童通行、通勤遮雨）
AI 隐性需求分析
- 将口语化抱怨转译为结构化的公共服务问题
- 识别问题类型、影响人群、风险等级和改造难度
- 计算 Whisper Score 低声量指数，判断问题优先级
城市问题卡片墙
- 以卡片形式展示每个问题的完整信息
- 可视化优先级标签和进度条
- 点击卡片查看详细方案
微改造方案生成
- 为每个问题提供三种方案：低成本、中成本、长期优化
- 每种方案包含具体实施步骤和预期效果
一键生成社区提案
- 自动生成完整的社区微改造提案文档
- 包含问题概述、影响人群分析、方案建议、取证清单、共识征集文案和跟进建议
- 支持复制和下载提案内容
2. Demo 创作思路
灵感来源
城市里很多真实的不方便，并不会一开始就变成正式投诉或治理议题，而是散落在居民群、朋友圈、社区留言和日常抱怨里。比如：
- “这个路口晚上太黑了，走过去有点害怕。”
- “医院自助挂号机太复杂，我妈每次都不会用。”
- “公交站没有座椅，老人等车很累。”
这些话看起来只是普通抱怨，但背后可能是夜间安全、老年友好、无障碍设施等公共服务缺口。
想解决的问题
- 居民感受到问题，但说不清楚问题本质——很多人只会说"不方便"“太麻烦”，但很难把它转化成具体的公共服务问题
- 个人抱怨太零散，很难变成公共议题——一个人说公交站没有座椅可能被认为是个人感受，但如果很多老人、孕妇、病患都受到影响，它就应该成为社区微改造议题
- 普通居民不知道如何提出有效建议——很多反馈停留在"希望重视"“请尽快解决”，缺少问题描述、影响人群、取证材料、改造方案和跟进路径
- 基层治理容易被正式投诉牵着走，忽略早期弱信号——等问题变成集中投诉时，往往已经积累了很久
为什么做这个方向
我选择这个方向是因为：
- 社会价值明确：连接居民感受与公共行动，让城市微改造从一句低声量反馈开始
- 技术可行性高：可以用纯前端技术实现完整的体验闭环
- TRAE 能力适配：AI 分析、内容生成、交互设计都是 TRAE 的强项
- 落地潜力大：低成本可落地，不需要大规模基础设施投入
3. Demo 体验地址
已将交互式 HTML 文件上传，可直接下载体验：
index.html (81.0 KB)
核心功能体验路径
- 输入反馈 → 在输入框输入反馈或点击快速示例标签
- 分析需求 → 点击「开始分析隐性需求」按钮
- 查看卡片 → 点击「查看问题卡片」查看分析结果
- 选择问题 → 点击任意卡片查看微改造方案
- 生成提案 → 点击「一键生成社区提案」获取完整提案
- 导出提案 → 复制或下载提案内容
4. TRAE 实践过程
开发流程
第一步：需求分析与方案设计
使用 TRAE IDE 的智能规划能力，将创意文档转化为详细的实现方案，明确了：
- 核心功能模块划分
- 技术栈选择（单文件 HTML + CSS + JavaScript）
- 用户体验流程设计
第二步：UI 界面开发
利用 TRAE 的代码生成能力，快速构建了完整的 UI 界面，包括：
- 现代化的渐变设计风格
- 响应式布局，支持桌面和移动端
- 卡片式信息展示
- 进度条和优先级可视化
第三步：核心逻辑实现
实现了模拟 AI 分析引擎，包括：
- 反馈识别和分类算法
- Whisper Score 计算逻辑
- 问题优先级评估
- 微改造方案匹配
第四步：交互功能开发
完善了所有用户交互功能：
- 反馈添加和删除
- 分步界面切换
- 卡片选择和高亮
- 提案生成和导出
- 加载动画效果
第五步：测试与优化
在浏览器中进行了完整的功能测试，修复了交互问题，优化了视觉效果。
关键步骤截图（示例）
关键任务 Session ID
以下是使用 TRAE 完成关键开发任务的 Session ID：
.2697528209055568:243be27ae7a2060170271b377106095d_6a4f44b219abeab0565f746a.6a4f48e919abeab0565f746d.6a4f48e9b150537ba3e5de3c:Trae CN.T(2026/7/9 15:08:25)
.2697528209055568:3838f2a703013ceee69df054b743c0e5_6a4f44b219abeab0565f746a.6a4f4da319abeab0565f7519.6a4f4da3b150537ba3e5de3e:Trae CN.T(2026/7/9 15:28:35)
.2697528209055568:c225addfe3664e546212d59df03b2a98_6a4f44b219abeab0565f746a.6a4f4f3119abeab0565f752f.6a4f4f30b150537ba3e5de3f:Trae CN.T(2026/7/9 15:35:13)
5. 开发心得与反思
使用 TRAE 的体会
优势：
- 快速原型验证：TRAE 能够快速将创意转化为可运行的代码，大大缩短了从想法到 Demo 的时间
- 智能代码生成：根据需求描述自动生成完整的 HTML、CSS 和 JavaScript 代码
- 交互设计能力：能够理解并实现复杂的用户交互流程
- 实时反馈：开发过程中可以随时测试和调整
挑战：
- 单文件复杂度：将所有代码放在一个 HTML 文件中，后期维护难度较大（已通过模块化设计缓解）
- 模拟 AI 限制：当前 Demo 使用模拟数据，实际应用需要接入真实 AI 接口
未来规划
如果能晋级复赛，我计划：
- 接入真实的 AI 接口，实现真正的语义分析和需求识别
- 添加地图服务集成，支持问题地理位置标记
- 实现社区数据采集功能，收集真实居民反馈
- 开发提案跟踪系统，跟踪提案提交后的处理进度
6. 总结
Urban Whisper 展示了一个完整的用户体验闭环：普通抱怨 → 隐性需求 → 问题卡片 → 微改造方案 → 社区提案。
它的价值不在于替居民"写投诉"，而在于帮助城市听见那些还没有被正式看见的问题：
- 让普通人的感受变得可表达
- 让零散抱怨变成公共共识
- 让社区治理更早看到弱信号
报名帖链接：