【学习工作赛道】 + 活体作品集

TRAE AI 创造力大赛 【大赛初赛专区】
,
1

【标签】学习工作/社会公益

【标题】【学习工作赛道】 + 活体作品集

0. 先和大家打个招呼吧 :waving_hand:

  • 你是谁： 我是一名个人开发者，平时会把自己的 Web 项目部署到云平台，也一直在思考如何更直观地展示这些真实在线的作品。

  • 你是怎么用 TRAE 把 Demo 做出来的： 这个项目的基础版本在参赛前已经存在。参赛期间，我把现有仓库交给 TRAE，从“第一次打开 Demo 的评审能否在 60 秒内理解项目”这个问题出发，依次完成评审视角审查、/demo 导览页实现、第二轮文案与无障碍优化，以及独立测试和生产构建验证。

  • 真实感受： TRAE 对我帮助最大的不只是写代码，而是能够先从产品体验角度指出“核心创新藏得太深”，再把问题拆解成信息架构、页面实现和独立验收三个阶段。尤其是在第二轮迭代中，它主动修正了过于技术化和不准确的描述，让我意识到 Demo 不只是能运行，还要让第一次访问的人快速看懂。

1. Demo 简介

  • 是什么：「活体作品集」是一个直接展示真实运行网站的在线作品集系统。它不再把作品压缩成静态截图，而是将已经部署上线的网站嵌入作品卡片，并同步显示在线状态和真实延迟。

  • 面向谁：

    • 已经有多个线上项目，需要集中展示的个人开发者；
    • 用作品求职、参赛、接单或建立个人品牌的学生和自由职业者；
    • 希望快速判断一个项目是否仍在真实运行的访问者。

  • 主要功能：

    • 真实网站直接展示： 作品卡片展示真实运行的网站页面，而不是预先截好的图片。
    • 在线状态与延迟： 接入 UptimeFlare，显示“运行中”“已离线”等文字状态、绿色指示灯和真实延迟。
    • 后台动态维护： 通过 Cloudflare Worker + D1 管理网站，可以配置简介、标签、技术栈、精选状态和仓库地址。
    • 公益关注： 使用公开公益数据接口，只展示真实接口返回或历史真实缓存，没有真实内容时自动隐藏。

  • 产品界面

2. Demo 创作思路

  • 灵感来源：我已经有一些部署在云平台上的网站，但过去只能通过截图、录屏或一组零散链接展示。截图只能证明页面曾经长什么样，无法证明项目现在是否仍然在线，也不能让访问者直接体验真实效果。

  • 想解决的问题：

    • 访问者很难判断作品是否仍在真实运行；
    • 多个项目链接分散，理解成本高；
    • 静态截图无法展示真实交互和当前状态；
    • 作品集获得的访问量没有被进一步用于有意义的信息传播。

  • 为什么做这个方向：

    • 我的取舍是让“真实网站本身”成为作品集主角，监控信息只承担可信度证明，而不是把页面做成复杂监控大屏。同时加入公益关注模块，希望将个人作品展示的一部分注意力转化为持续可见的公共信息曝光。
    • 技术上采用：

      • Next.js 16、React 19、TypeScript；

      • Cloudflare Pages 静态部署；

      • Cloudflare Worker + D1 管理后台；

      • UptimeFlare 在线状态监控；

      • 浏览器直连公开公益数据接口，并使用历史真实缓存容错。

3. Demo 体验地址（三选一）

4. TRAE 实践过程

这个项目的基础版本在参赛前已经存在。参赛期间，我使用 TRAE 完成了一次真实、可运行的 Demo 导览版本迭代。以下三个 Session ID 与四张截图都对应这次真实迭代。

Session 1：评审视角审查与导览方案

我让 TRAE 从第一次访问的评审视角审查现有 Demo，分析项目价值、核心创新、体验顺序、技术架构和公益数据边界是否足够清楚，并设计独立的 /demo 评审导览页。

Session ID：

1927912559481913:3e0e9ae1827b45ab381cf91bc9780a98_6a578ce8776e231b5223eece.6a578ce8776e231b5223eed1.6a578ce8776e231b5223eecf:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 21:36:40)

截图说明：TRAE 从评审视角总结当前 Demo 的理解障碍，并提出 /demo 页的信息架构和最小实施计划。

session-1-review-plan
session-1-review-plan1350×1152 63.7 KB

Session 2：导览功能实现与第二轮迭代

第二个 Session 对初版进行独立复核，修正不准确的 Bento、具体公益 API 名称和分辨率描述，完善体验入口、响应式布局、无障碍导航和回归测试。

Session ID：

1927912559481913:d4adf25c78b281d166d7a6a4307ad35c_6a5791a8776e231b5223ef94.6a5792d6776e231b5223eff0.6a5792d6776e231b5223efee:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 22:01:58)

截图说明：TRAE 列出实际修改文件，并说明文案准确性、体验入口、无障碍与回归保护的改动。

session-2-implementation
session-2-implementation1199×1105 57.3 KB

Session 3：独立验收与上线验证

第三个 Session 不默认前两个实现正确，重新检查功能内容、锚点链接、移动端、无障碍、代码边界、测试和生产构建，形成独立验收过程。

Session ID：

1927912559481913:a05a96a454adf5f2028731701b13445f_6a57983e776e231b5223f039.6a57983e776e231b5223f03c.6a57983e776e231b5223f03a:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 22:25:02)

截图说明：第三个 Session 按照独立验收清单重新读取关键文件并执行验证。

session-3-validation
session-3-validation1289×1073 46.8 KB

session-3-results
session-3-results1114×1149 54.1 KB

最终验证结果

  • /demo 专项测试：11/11 通过；

  • 作品页回归测试：11/11 通过；

  • 后台生产路径测试：35/35 通过；

  • 完整 ESLint：通过；

  • Next.js 生产构建：通过；

  • /demo 已完成静态导出并部署上线；

  • 主站、备用网址和两个导览地址均返回 HTTP 200；

  • Worker /sites API 正常返回 HTTP 200。

本次 TRAE 迭代成果

  • 新增公开 /demo 评审导览页；

  • 新增首页“评审导览”入口；

  • 提供推荐体验路线和简化技术架构；

  • 补充移动端、无障碍和减少动态效果支持；

  • 新增导览页回归测试；

  • 完成静态导出、上线部署和双域名验证。

5. 对应的报名审核通过的帖子链接

https://forum.trae.cn/t/topic/69955