社会公益 · 安心纸尿裤监督站
一个由家长发起、专家共建、公众参与的纸尿裤安全公益监督平台
标签： 社会公益
一、Demo 简介
是什么
安心纸尿裤监督站是一个面向婴幼儿家长的****公益监督网站****。平台通过公开购买、第三方公证、权威送检和结果公示，让纸尿裤产品安全接受社会监督。整个网站由 7 个页面组成，采用纯 HTML + CSS 静态实现，无需后端服务即可运行。
面向谁
核心用户是****0-3 岁婴幼儿的家长****——他们每天给孩子使用纸尿裤，却无法自行判断产品是否安全。同时，平台也面向愿意参与共建的化学家、大学教授、产业工程师、检测人员和儿科医生等专业人群。
主要功能
| 功能 | 说明 |
|---|---|
| 质检报告 | 按年月分类展示检测结果，每份报告包含品牌、批次、购买渠道、检测机构和完整检测数据 |
| 风险公示 | 检测不合格的产品进入黑名单，永久公示，震慑企业忽视质量安全的行为 |
| 五步公开流程 | 从选择品牌到结果公示，每一步都可追溯、可验证，全程公证录像 |
网站页面一览：
| 页面 | 功能 |
|---|---|
| 首页 | 使命展示、最新报告、五步流程、参与入口 |
| 质检报告 | 按年月分类展示所有检测报告，含检测详情和流程证据 |
| 风险公示 | 问题产品黑名单，永久公示 |
| 标准中心 | 国家标准查询，甲酰胺、甲醛等检测项目说明 |
| 知识库 | 产业链介绍、分龄选购建议、有害物质科普 |
| 专家认证 | 认证专家展示，专业人士可申请加入共建 |
| 互动社区 | 家长交流选购经验、反馈问题产品 |
—
二、Demo 创作思路
灵感来源
2025 年底，多家媒体曝光部分纸尿裤品牌检出甲酰胺超标。甲酰胺是一种可能通过皮肤接触进入婴幼儿体内的化学物质，长期接触存在健康风险。事件发酵几天后舆论逐渐平息，但没有一个持续追踪的渠道让家长知道"现在哪些品牌是安全的"。
作为家长，我自己也经历过这样的焦虑：超市货架上摆着十几个品牌，包装上写着各种认证标志，但没有一个独立第三方告诉你"这一批次到底检没检过"。品牌自己的检测报告你信不过，个人送检成本又太高——一次专业检测的费用够买半年纸尿裤。
想解决的问题
三个真实存在的痛点：
- 信息不透明——消费者无法判断真实质量，只能依赖品牌宣传和平台评价
- 个人检测难——专业检测成本高，普通家庭无法独立完成购买、封样、送检全流程
- 监督不持续——质量事件引发短期关注后被遗忘，缺少长期公开的社会监督机制
平台要做的事，就是把"专业检测"这件事从个人能力范围里拿出来，变成一个持续运转的公共机制。
为什么做这个方向
市面上已有不少母婴产品评测账号，但它们大多依赖品牌寄样，检测项目的选择也受商业合作影响。我想要的模式恰好相反：**平台自己买、自己检、自己发**，企业可以捐赠资金但不能提供样品、不能指定检测项目、不能影响结果发布。这种独立性是平台可信度的根基。
选择网站形态而非 App，是因为公益项目需要最低的传播门槛——一个链接发到家长群里就能打开，不需要下载安装。静态网站也意味着零服务器成本，初期靠发起人个人资金启动，后续依靠社会捐赠维持运行。
—
三、Demo 体验地址
网站预览地址: 安心纸尿裤监督站
Zip 下载链接请见社区帖附件
下载后解压，双击 `index.html` 即可在浏览器中打开体验全部 7 个页面。无需安装任何环境。
安心纸尿裤监督站.zip (195.4 KB)
—
四、TRAE 实践过程
整个网站从创意构思到最终成品，完全在 TRAE 中完成。以下是开发的关键步骤和对应的对话记录。
步骤 1：创意构思与报名帖生成
使用 TRAE 的 brainstorming skill 完善初始创意，梳理出平台的运作模式（购买渠道、检测项目确定方式、送检流程、公示机制），并生成报名帖内容和创意文档。这一步确定了平台的核心理念：检测独立、全程公证、结果公开。
截图 1：使用 brainstorming skill 进行创意构思的对话过程
> Session ID（关键任务 1）：
> ```
3700284252490900:eece1dc38089512f5f26cb080dd7cb8a_6a390d723ee27683e4c75f3e.6a390ef33ee27683e4c75f80.6a390ef33ee27683e4c75f7e:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/22 18:31:15)
> ```
步骤 2：网站架构设计与页面规划
确定了多页面网站方案，规划了 7 个页面的信息架构：首页、质检报告、风险公示、标准中心、知识库、专家认证、互动社区。同时设计了视觉系统——珊瑚橙作为主色调，薄荷青作为辅助色，营造温暖但不轻浮的公益感。
截图 2：与 TRAE 讨论页面架构和视觉系统的对话
> Session ID（关键任务 2）：
> ```
3700284252490900:cf8c34e80449bde0cf3958617e80cf14_6a390d723ee27683e4c75f3e.6a3ca164954d97a8ceb1c60e.6a3ca163954d97a8ceb1c60c:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/25 11:32:52)
> ```
步骤 3：全站页面开发
在 TRAE 中创建了共享 CSS 文件和全部 7 个 HTML 页面。每个页面包含导航栏、内容区和页脚，质检报告页面包含完整的检测数据表格和流程证据展示。这一步是开发量最大的环节，TRAE 一次性生成了所有页面的基础结构。
截图 3：TRAE 生成 HTML 页面和 CSS 样式的对话
> Session ID（关键任务 3）：
> ```
3700284252490900:cffd5d2008a8e37982e31a8600d25e5d_6a390d723ee27683e4c75f3e.6a3ca329954d97a8ceb1c644.6a3ca329954d97a8ceb1c642:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/25 11:40:25)
> ```
步骤 4：设计迭代——从拥挤到极简
初版完成后，发现首页内容过多、视觉拥挤。经过多轮迭代：
1. 用 frontend-design skill 优化布局增加呼吸感
2. 用 figma skill 添加动态效果（滚动动画、计数器、渐变背景）
3. 调整配色为更欢快的暖色调
4. 将首页从 8 个板块精简为 4 个，突出平台使命
5. 质检报告页重构为按年月分类的时间线结构
截图 4：多轮设计优化的对话过程（布局调整、配色迭代、内容精简）
> Session ID（关键任务 4）：
> ```
3700284252490900:2570fe260a9c43891f020aed609bfdae_6a390d723ee27683e4c75f3e.6a3cc7ba954d97a8ceb1c92f.6a3cc7b9954d97a8ceb1c92d:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/25 14:16:26)
> ```
—
五、报名帖链接
报名帖链接： 【 【社会公益赛道】安心纸尿裤监督站 】