- 已经推出【纯享模式】,在【纯享模式】中,可以畅享HTML DEMO学习!
0. 先和大家打个招呼吧 ![]()
-
你是谁: 一个活跃的TRAE友,热爱AI Coding~
-
你是怎么用 TRAE 把 Demo 做出来的:先后TRAE WORK沟通需求,出系统的设计之后再让TRAE WORK根据系统设计来开发这个系统,用Github CLI来实现项目的动态维护,并最终部署在Github Pages,整个项目从灵感到开发到部署都在TRAE Work的同一个聊天窗口中进行。
1. Demo 简介
-
是什么: 一个纯静态的 Demo 聚合展示网站(Web),自动从 TRAE 中文社区大赛报名专区爬取所有灵感帖,提取 HTML Demo 附件,以卡片形式按赛道分类展示,支持在线查看 Demo 和跳转社区原帖。
-
面向谁:
- 大赛参赛者:浏览他人创意产物,寻找灵感
- 大赛评委/组织者:快速了解整体参赛情况和赛道分布
- TRAE 社区用户:一键发现有趣的 AI 创意 Demo
-
主要功能:
| 功能 | 说明 |
|---|---|
| 自动爬取 & 增量更新 | Discourse API 三层提取策略,每日定时增量拉取 |
| 赛道分类 & 多维筛选 | 五大赛道标签筛选 + 关键词搜索 + 时间/浏览量/点赞排序 |
| 在线体验 & 一键跳转 | HTML Demo 新窗口直接打开,社区原帖一键直达 |
2. Demo 创作思路
-
灵感来源:
- 在浏览大赛报名专区时,发现大量优秀的 HTML Demo 被埋在帖子列表里。每次想看一个 Demo 都要:点进帖子 → 找到附件 → 下载 → 本地打开。上千个作品,没有一个统一的聚合入口。这本身就是一个值得用 TRAE 解决的社区问题。
- 此外,在技术上,突然想到TRAE的社区帖子支持爬虫,而大家报名的初赛材料都需要提交一个HTML文件,再结合之前TRAE DEMO HALL的灵感,我就想到了能不能实现一个聚合项目用来把这些灵感帖子都组合在一起,因此就想到了做这个项目。
-
想解决的问题:
- 报名帖分散,没有按赛道分类的统一展示
- HTML Demo 需要逐帖下载,无法在线直接体验
- 无法快速了解整体参赛情况和赛道分布
- 新作品没有实时更新机制,信息滞后
-
为什么做这个方向:
- 大赛的核心是「展示创意」,但展示渠道本身却不够高效。与其做一个新的创意产物,不如先解决「如何让所有创意产物被看见」这个基础设施问题。这个项目也是「用 TRAE 构建 TRAE 社区工具」的最佳实践。
3. Demo 体验地址
- IDEA HTML卡片:
- 打开原始IDEA的灵感介绍页面:
4. TRAE 实践过程
- 和TRAE WORK打磨灵感:
2302836371624771:1c83df0f5f176681363b3762d797b0cf_6a3463fd30b17024f81277d8.6a3463ff64c365a3ca5f1af7.6a3463fd30b17024f81277d9:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 06:03:34)
- 多轮对话确定技术方案选型:
2302836371624771:a4eac0c2f7ff3b1b7b36ac2d3dedebdb_6a3463fd30b17024f81277d8.6a34d24989ccab1496b5b32e.6a34d2497022fcf0538c38aa:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 13:23:55)
- 深挖数据爬取方案:
2302836371624771:23b2fdd58ea96372f76a0114bfa3c804_6a3463fd30b17024f81277d8.6a34d2bf89ccab1496b5b33d.6a34d2bef4ac54cb8f4cba51:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 13:26:06)
- 提供具体案例以帮助完善爬虫逻辑设计:
2302836371624771:0b2f56ccf7b39568c9b6665793eaff3b_6a3463fd30b17024f81277d8.6a34d45b89ccab1496b5b358.6a34d45af4ac54cb8f4cba81:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 13:37:46)
- 前端设计,指定TRAE DEMO Hall风格:
2302836371624771:108813ba637183ff9acc021f53402042_6a3463fd30b17024f81277d8.6a34d71589ccab1496b5b3c9.6a34d71565e3b68f98ae0bdf:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 13:44:56)
- 设计自动化流水线:
2302836371624771:5e096cfce6bf454c5141e9ab9ede9754_6a3463fd30b17024f81277d8.6a34d76289ccab1496b5b3e1.6a34d7627665a139a40eaea2:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 13:45:43)
- 执行开发计划:
2302836371624771:e89eb0839985727895e313c713dbdf6b_6a3463fd30b17024f81277d8.6a34eff489ccab1496b5b41e.6a34eff4f72bb451b3edf93a:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 15:55:52)
- 把项目提交到Github代码仓库:
2302836371624771:5547cc4b6561dc79876116703a063c14_6a3463fd30b17024f81277d8.6a34f78d89ccab1496b5b4cd.6a34f78c5aac1a8925fe9f7b:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 16:04:34)
- 启动Github Pages上线项目:
2302836371624771:bd8d7fb7197011cfa6d07a7925f516a3_6a3463fd30b17024f81277d8.6a34facd89ccab1496b5b542.6a34facd247c0cb99340daea:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 16:17:59)
- 更新README.md定初步版本:
2302836371624771:094f995beabcd739a16e415bf8f968c2_6a3463fd30b17024f81277d8.6a350bcb89ccab1496b5b6f3.6a350bcb35dbc60c3c310b80:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 17:30:54)
- (new!) 每天更新麻烦,切换为更新一次成功后撰写update.md文件,后续让TRAE根据这份文件自动执行爬取任务,有问题修复后不断更新update.md,实现Agent自动运维。
CN.2302836371624771:760bef78903433d377d6d0df03deac71_6a3e71ba24c3382477e1eff6.6a423e0f1e0fbac314c93eb1.6a423e0eeacdc3f5996b1b4b:TRAE Work CN.1.0.0.1830.8905b409-722a-4bc5-b164-bf5780ccfdd1.no_ppe.T(2026/6/29 19:13:08)
























