0. 先和大家打个招呼吧 
-
你是谁： 一个活跃的TRAE友 / AI Builder，喜欢制作小而美的产品；
-
你是怎么用 TRAE 把 Demo 做出来的： 在TRAE Work的一个会话中，逐步完成初赛web类作品爬取，网站设计与实现，UI风格修改，Github托管与网站上线循环迭代的流程；主要是在前期的TRAE Idea Hall的实践中踩了挺多坑，所以在做这个产品的时候，进一步采用了前端框架和分页式的懒加载的策略，在实现类似效果的同时拥有更极致的性能体验。
1. Demo 简介
是什么： 一个网站（Web App），通过 Python 爬虫自动采集 TRAE 论坛中的初赛参赛作品，将所有网页/前端类作品以卡片式画廊呈现，用户无需下载即可在页面内直接 iframe 预览和体验每一个 Demo。
面向谁：
-
参赛者 — 浏览其他人的作品、学习前端实现思路、获取创作灵感
-
TRAE 爱好者 — 了解 TRAE 能做出什么水平的作品
-
评委/组织者 — 高效浏览和评审大量参赛作品
核心功能：
| 功能 | 说明 |
|---|---|
| 自动数据采集 | Python 爬虫遍历 Discourse 论坛 JSON API，自动识别 web/前端作品，生成结构化索引 |
| 搜索筛选排序 | 支持关键词搜索、标签分类筛选，按浏览量/点赞数/时间排序 |
| 即时预览体验 | 详情页以 16:9 iframe 沙盒直接运行作品 Demo，支持外部链接和本地部署双模式 |
| 懒加载 | 首屏仅加载轻量索引，滚动时通过 IntersectionObserver 按需分页，每次增量 12 条 |
| 粒子动效背景 | Canvas 2D 粒子系统，80 粒子 + 鼠标吸引 + 距离连线 |
| 打字机品牌标题 | 导航栏品牌文字循环打字机效果，纯 JS setTimeout 实现 |
| 液态玻璃导航 | 滚动感知 backdrop-filter: blur() 强度变化 |
产品界面展示：
以下截图展示了网站的核心界面与交互流程。
首页 — 作品画廊
详情页 — 即时预览
搜索与筛选
2. Demo 创作思路
-
灵感来源：
我在参赛过程中发现，TRAE 论坛中已经积累了大量优秀的前端/网页作品，但这些作品散落在不同页面的帖子中，逐一翻阅效率极低。更关键的是，很多作品只提供了文字描述和截图，用户必须手动下载附件、解压、本地打开才能看到实际效果。整个链路太长，大部分人在看完标题后就划走了。
-
想解决的问题：
- 发现难 — 论坛帖子按时间排列，没有分类和搜索，找到感兴趣的作品全靠运气
- 体验难 — 作品需要手动下载附件才能预览，很多用户看完标题就放弃了
- 学习难 — 想参考某个作品的实现方式，但帖子中往往没有提供在线 Demo 链接
-
为什么做这个方向：
这些作品本质都是网页，为什么不把它们直接变成「可体验」的？TRAE Demo Wall 将数百个作品的浏览成本从「逐帖翻阅 + 下载解压」降低到「打开网站 → 筛选 → 点击即体验」。对于参赛者而言，这个平台本质上是一个 TRAE 前端作品的「活教材」——每一个作品都可以直接在 iframe 中运行体验，用户不仅能看到最终效果，还能通过查看原帖深入理解创作者的实现思路。这种「看到效果 → 产生兴趣 → 深入学习」的闭环，是静态截图无法提供的。
同时，这个平台本身也是用 TRAE 构建的，从爬虫到前端全链路均由 TRAE 辅助完成，本身就是 TRAE 生产力的最佳证明。
3. Demo 体验地址
- 部署随时可公开访问的体验链接：https://luoqianshi.github.io/trae-demo-wall/
4. TRAE 实践过程
- 灵感注入与需求明确：
CN.2302836371624771:f81f37e8b1a00308bec779a45fc29fb3_6a3c0a6d8158042a7f7a12f7.6a3c0a6f031398b4a49b5993.6a3c0a6d8158042a7f7a12f8:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 00:50:43)
- UI风格确定
CN.2302836371624771:078252c639d5690d284208fcf337e34c_6a3c0a6d8158042a7f7a12f7.6a3c0b4d031398b4a49b5a19.6a3c0b4db8082fdef6ade2e5:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 00:57:55)
- 功能设计文档定稿
CN.2302836371624771:cc0666f1de33555c19cb4e8d23397af9_6a3c0a6d8158042a7f7a12f7.6a3c0cfd031398b4a49b5a65.6a3c0cfdc101710f1019724f:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 01:01:11)
- 执行计划生成
CN.2302836371624771:ab1604aabefe7bf7751ad10e09f81d34_6a3c0a6d8158042a7f7a12f7.6a3c0d73031398b4a49b5a89.6a3c0d7340050918c3fbf672:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 01:04:39)
- 然后是对原型的UI的多次迭代调整，直到最终可用
CN.2302836371624771:b408562541cc230838ab34246cccff96_6a3c0a6d8158042a7f7a12f7.6a3cb2ad4d8eeb1ca7b1fe1a.6a3cb2ad44e7881ca2b6ddbc:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 12:54:10)
- 初版定形，产出README.md文件
CN.2302836371624771:13e32d1df40bd0143930e688e3e7ce52_6a3c0a6d8158042a7f7a12f7.6a3d0477f89a33b20b6e59e8.6a3d047644e7881ca2b6e421:TRAE Work CN.1.0.0.1780.0f3d0ffc-d61e-479a-b7e2-575a483bfb63.no_ppe.T(2026/6/25 18:49:03)
- 基于`frontend-design`等技能，在保留TRAE元素的基础上进行UI/UX质感升级：
CN.2302836371624771:6acd432d911475045793e329a4c3936d_6a4a2fc50d1d40504ecb5c8c.6a4b3a6cc2f27e753aa8a7b7.6a4b3a6b0b83751d3d5e8f8f:TRAE Work CN.1.0.0.2009.4a537511-f749-4695-8a91-6adf243fbc4d.no_ppe.T(2026/7/6 13:20:25)
5. 对应的报名审核通过的帖子链接
