【标签】
社会服务
【标题】
【社会服务赛道】城市说明书修复局 Demo
【正文】
- 先和大家打个招呼吧
大家好，我是一名普通参赛者。平时在生活里经常会看到各种通知、公告和办事说明，也经常遇到一种很微妙的情况：每个字都认识，但看完还是不知道自己到底该做什么。
这次参加 TRAE AI 创造力大赛，我想做一个离真实生活很近的小工具。一开始我只有一个模糊想法：能不能把那些难懂的公共通知，变成普通人能照着做的说明书？后来我把这个想法一句句讲给 TRAE，它帮我把想法拆成了产品页面、核心功能、交互流程和最终可上传的 Demo 文件。
我原本以为做一个网页 Demo 会很复杂，要会写很多代码、处理很多部署问题。但这次和 TRAE 配合下来，我发现只要把目标说清楚，它就能帮我把创意变成可运行的 HTML Demo。最让我有成就感的一步，是看到“输入一段难懂通知，页面自动生成行动步骤和修复建议”真的跑起来了。这个过程让我感觉，普通人也可以把脑子里的想法做成一个能被别人体验的作品。
- Demo 简介
《城市说明书修复局》是一个可交互体验的 HTML 网站 Demo。
它面向看不懂公共通知、办事流程、医院指引、学校公告、社区说明的普通用户，也面向需要发布通知的社区、学校、医院、物业和政务服务人员。
主要功能有 3 个：
- 难懂通知翻译：用户输入一段公共通知后，Demo 会把它转成“我现在要做什么、要带什么、去哪办、什么时候截止、看不懂该问谁”。
- 人群模式切换：支持普通人版、老人版、外地人版、学生版、发布者版，让同一段通知可以用不同人群更容易理解的方式呈现。
- 可读性修复报告：系统会指出原文里容易误解或缺失的信息，并生成一版更清楚的通知版本，帮助发布者改进表达。
产品截图：
这里我会附上 Demo 首页截图，展示产品名称和核心定位。
这里我会附上输入原始通知后的生成结果截图，展示“难懂通知”如何被转成可执行步骤。
这里我会附上切换到“发布者版”后的修复报告截图，展示系统如何帮助发布者改写通知。
- Demo 创作思路
这个创意来自日常生活里经常看到的公共通知。很多社区、医院、学校、政务大厅的通知写得很正式，但普通人读完之后还是不知道自己该做什么。
比如这类句子：“请相关人员携带有效证件于规定时间内完成核验，逾期将影响后续办理。”它看起来很完整，但里面其实有很多模糊点：谁算相关人员？规定时间是哪天？有效证件包括哪些？去哪里核验？后续办理具体指什么？如果错过了还能不能补办？
我想解决的问题是公共信息的可读性。很多通知并不是缺少信息，而是没有把信息组织成普通人能照着做的步骤。用户如果看不懂，就只能反复问人、打电话、跑现场，甚至因为没理解通知而错过时间、带错材料、白跑一趟。发布通知的一方也可能不知道自己的表达哪里不清楚，最后造成更多咨询和沟通成本。
我选择这个方向，是因为它不是常见的“老人助手”“情绪陪伴”或“错题工具”，而是抓住了一个更底层的问题：城市里的信息经常被发布出来，但不一定真的被看懂。一个好的公共通知，不应该只是完成发布，而应该让人读完后知道下一步怎么做。
这个 Demo 的取舍是先不做“大而全的城市服务平台”，而是聚焦一个很具体的体验：输入一段难懂通知，选择不同读者模式，生成一份能照着做的城市说明书。这样评审打开 HTML 后，不需要登录、不需要部署，就能马上体验产品价值。
- Demo 体验地址
体验形式：交互式可体验的 HTML 文件，已使用 Zip 格式打包上传社区。
附件名称：
城市说明书修复局-Demo.zip (11.7 KB)
打开方式：下载并解压 Zip 后，双击 index.html 即可体验，不需要部署服务器。
- TRAE 实践过程
这个 Demo 使用 TRAE 完成了从创意拆解、产品设计、页面开发、交互逻辑实现到作品帖整理的完整过程。
完整流程如下：
- 我先把已经报名通过的创意方向告诉 TRAE，并让它阅读初赛 Demo 作品帖要求，确认作品需要做到“可交互、能体验”。
- TRAE 根据官方要求，建议我使用交互式 HTML Demo，并用 Zip 包上传社区，这样不需要部署服务器，也能让评审直接体验。
- 我和 TRAE 一起把《城市说明书修复局》拆成核心体验：输入难懂通知、选择人群模式、生成行动步骤、风险提醒和修复报告。
- TRAE 帮我生成并完善了 index.html、styles.css、app.js，让 Demo 可以离线运行。
- 我们继续优化了页面结构和交互体验，让评审打开后能直接看到项目定位，并立刻在“公共通知修复台”里试用核心功能。
- TRAE 检查了脚本语法，确认文件结构正常，并把 Demo 打包成可以上传社区的 Zip 文件。
- 最后，TRAE 帮我整理了作品帖正文，让提交内容能对应官方要求，包括 Demo 简介、创作思路、体验方式、实践过程、截图和 Session ID。
开发关键步骤截图：
TRAE 根据初赛要求梳理 Demo 交付形式和核心功能。
TRAE 生成并完善 HTML、CSS、JavaScript 文件。
TRAE 检查文件结构、验证脚本并打包 Zip。
截图 1：
截图 2：
截图 3：
关键任务对话 Session ID：
Session ID 1：269813283032935:98136aa42221404cd0a073f8d130ace3_6a4cd64ed96c3cfc84d8d7d4.6a4ce0aad96c3cfc84d8d8e5.6a4ce0aad96c3cfc84d8d8e3:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 19:19:06)
Session ID 2：269813283032935:f23936d4bd0e840cbe3f7dd9abb78ff0_6a4cd64ed96c3cfc84d8d7d4.6a4edd10ed1288190db74785.6a4edd10ed1288190db74783:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 07:28:16)
Session ID 3：269813283032935:684d0f44b288b132737eecde4d619a60_6a4cd64ed96c3cfc84d8d7d4.6a4ee491ed1288190db74882.6a4ee491ed1288190db74880:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 08:00:17)
- 对应的报名审核通过的帖子链接
城市说明书修复局：把看不懂的公共信息，修复成每个人都能执行的说明书 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区