p【标签】 按所选赛道选择话题标签:生活娱乐/学习工作/社会服务/硬件交互,必须四选一;参加附加赛题的还可加选 社会公益 标签。(需要跟报名通过的赛道保持一致)
【标题】【生活娱乐赛道】+spider-verse-website
【正文】 我是一名准大二学生,起初是ai智能课程让我接触到了Trae这个软件,我承认我起初没有认识到它的强大,直到我开始做自己的这个网站,我做的第一个是可以让审美积累者拼贴的网站,刚开始接触让我技术不太熟练,制作出来的作品也不是很理想,后来由于我的爱好,我想打造一个属于蜘蛛侠的网站,我慢慢开始以朋友的方式和Trae聊天,我会问它知不知道蜘蛛侠的动漫电影,然后和它讲我想打造一个属于蜘蛛侠的网站,它会告诉我非常炫酷,我认为我的trae真的非常聪明,当他帮我打造出第一个蜘蛛侠框架的时候,我会发现原来这么简单,因为我真的很满意,可能还会有一些细枝末节需要我再次去和他聊,不顺的地方可能就是我对于他的开发程度还不是特别多,在我想为我的网站插入音乐的时候,我发现无论怎样音乐都无法播放,后来我发现是要把网站以及网站内部我所插入的图片和音频都得打包在一个文件夹里面,这样才会在网站里面显示,后来我和我的Trae搭配的越来越熟练,只要告诉它一点我的想法,它也完全可以理解我的感受。
这是一个以《蜘蛛侠:超越宇宙》为灵感的沉浸式互动网站,融合动漫电影的视觉体验与社交功能,为蜘蛛侠粉丝打造一个专属的"平行宇宙"数字空间。用户可以在这里装扮自己的蜘蛛侠身份、记录日记、发布朋友圈、观看超炫剪辑视频,在压力大的时候来这里当一会儿超级英雄,面向:18-35岁的蜘蛛侠电影/漫画粉丝以及社交压力较大、渴望个性化表达空间的年轻人,电影上映前后讨论剧情、日常压力大时放松心情、记录生活点滴、与同好互动(下面展示图片)
功能一:个性化身份装扮系统
- 选择专属蜘蛛侠头像(8款预设表情 + 自定义上传图片)
- 设置昵称和个性签名
- 日记记录功能,用超级英雄的视角记录每一天
- 数据本地保存,下次打开依然在
功能二:蜘蛛朋友圈(SPIDER MOMENTS)
粉丝专属社交广场,点击了导航栏的friend还可以添加好友
发布动态:文字 + 图片,分享你的"多元宇宙日常
- 点赞互动:为其他蜘蛛伙伴的动态点赞
灵感来源:
2027年《蜘蛛侠:超越宇宙》即将在中国大陆上映,作为蜘蛛侠迷内心充满期待与激动。蜘蛛侠代表的不仅是超级英雄,更是一种"每个人都可以是英雄"的信念——平凡的人也能拥有属于自己的超能力时刻。但我发现,当代年轻人的社交压力越来越大:朋友圈要考虑人设、点赞数带来焦虑、真实的情绪无处安放。如果有一个地方,能让大家"换上蜘蛛战衣",在平行宇宙里做真实的自己,该有多好?
于是就有了这个想法——给每个蜘蛛侠迷一个属于自己的平行宇宙。
想解决的问题
| 痛点 | 具体表现 |
|---|---|
| 社交压力大 | 传统社交平台需要维持人设,无法真实表达情绪 |
| 缺乏归属感 | 蜘蛛侠粉丝分散在各个平台,没有专属的沉浸式社区 |
| 内容形式单一 | 普通社交界面枯燥,缺乏与IP结合的视觉体验 |
| 情怀无处安放 | 对蜘蛛侠的热爱和情怀,缺少一个承载的数字空间 |
简单说就是:当代年轻人的朋友圈太累了,不如来蜘蛛宇宙当一会儿超级英雄。
为什么做这个方向
- 时机刚好:2027年《超越宇宙》上映,粉丝热情高涨,需要一个聚集的阵地
- 视觉差异化:用漫画分镜+电影感特效做社交,和普通朋友圈完全不一样的体验
- 情感价值:不只是一个工具,而是一个"情绪避难所"——压力大的时候来这里,换上战衣,你就是蜘蛛侠
- 技术可实现:纯前端网站,HTML/CSS/JS就能实现丰富的视觉效果和交互,不需要复杂后端
取舍判断:
- 没有做复杂的后端登录系统 → 用本地存储,保护隐私,打开即用
- 没有堆很多功能 → 聚焦"空间装扮+朋友圈+漫画剧场"三个核心体验
- 优先保证视觉沉浸感 → 电影级背景、玻璃态导航、漫画分镜动画,第一眼就要有"哇"的感觉
我相信我会在后期把这个网站做得越来越完善!
评委您好,由于此zip超过20MB,所以我上传至百度网盘,打开后会自动生成提取码,解压后即可查看,我的主网站就是名为index的那一个
通过百度网盘分享的文件:spider-v…zip
链接: 百度网盘 请输入提取码
复制这段内容打开「百度网盘APP 即可获取」
步骤图
Session ID .2807528173078320:a78910d8ee6fbf83e163fa23e8cf53f2_69f1dc7364596695e1e6be94.69f2b118821872a121028271.69f2b1183b89c866213fd27a:Trae CN.T(2026/4/30 09:32:08)
.2807528173078320:6acd9cf4dbfc0dff89ee615663cf22f4_69f1dc7364596695e1e6be94.69f2b70f821872a1210282c3.69f2b70e3b89c866213fd27e:Trae CN.T(2026/4/30 09:57:35)
.2807528173078320:9edd8b740b8178fd636f36558bf06505_69f1dc7364596695e1e6be94.69f2b63a821872a1210282b3.69f2b63a3b89c866213fd27d:Trae CN.T(2026/4/30 09:54:02)
.2807528173078320:e01063d9be68e012ced0db4611e81f77_69f1dc7364596695e1e6be94.69f2b9d0821872a1210282d6.69f2b9d03b89c866213fd27f:Trae CN.T(2026/4/30 10:09:20)
.2807528173078320:15fc0d71926fbf587b1e0c95e0278f0f_69f1dc7364596695e1e6be94.69f2bb5d821872a1210282f8.69f2bb5d3b89c866213fd280:Trae CN.T(2026/4/30 10:15:57)
.2807528173078320:66d732bc15cd00cb7677d978cd0a3107_69f1dc7364596695e1e6be94.69f2bf0b821872a121028337.69f2bf0a3b89c866213fd281:Trae CN.T(2026/4/30 10:31:39)
.2807528173078320:7cda13c988885db4da10eb0bbf94d486_69f1dc7364596695e1e6be94.69f2c36f821872a121028426.69f2c36f3b89c866213fd286:Trae CN.T(2026/4/30 10:50:23)
.2807528173078320:a6ec76a3a2cf4110eeaa17b03a48e331_69f1dc7364596695e1e6be94.69f2c6e6821872a1210284a4.69f2c6e63b89c866213fd28c:Trae CN.T(2026/4/30 11:05:10)
.2807528173078320:05f299d533dc91a55b77e646d4ff7b61_69f1dc7364596695e1e6be94.69f2ca2d821872a1210284cc.69f2ca2d3b89c866213fd28e:Trae CN.T(2026/4/30 11:19:09)
.2807528173078320:55f7b7e52daf7a314316bd8ab7301f6f_69f1dc7364596695e1e6be94.69f2cc55821872a1210284fa.69f2cc553b89c866213fd28f:Trae CN.T(2026/4/30 11:28:21)
.2807528173078320:12d8d5f0cd059c7a231ae5de85307c19_69f1dc7364596695e1e6be94.6a0029e9c0d6556a73c96e65.6a0029e97de358d1b050778a:Trae CN.T(2026/5/10 14:47:05)
.2807528173078320:4d0bf453f7a8fc4034e53dd243632c06_69e985a5fb276135c1693aa4.6a053e6cd31759b3ea5b82ff.6a053e6c2724fa10c492248c:Trae CN.T(2026/5/14 11:15:56)
.2807528173078320:97e2fe28a63c7d0c4d13c3812bf4bf6c_69e985a5fb276135c1693aa4.6a29fd578dd2b1e72e802042.6a29fd57ba19102685bbbc13:Trae CN.T(2026/6/11 08:12:07)
.2807528173078320:47bfe0e183a0651e5a934012aed05399_69e985a5fb276135c1693aa4.6a4e4a6083e41773b6de3f7b.6a4e4a60c6141f158cc9ba6d:Trae CN.T(2026/7/8 21:02:24)
.2807528173078320:630d9ee0c68aec85db41b43bf7b6b0ec_69e985a5fb276135c1693aa4.6a4e56e7592270f88e5b52d2.6a4e56e787f1a3f47f1e0351:Trae CN.T(2026/7/8 21:55:51)
3. Demo 体验地址(三选一)
-
部署随时可公开访问的体验链接;
-
交互式可体验的HTML格式文件,请使用Zip格式打包上传到社区;
-
硬件交互赛道可用演示视频替代在线体验(视频请上传第三方平台后附公开链接)。
4. TRAE 实践过程
-
清晰展示用 TRAE 完成 Demo 开发的完整流程;
-
附开发关键步骤截图(不少于 3 张);
-
附关键任务对话的 Session ID(不少于 3 个),用于证明作品由 TRAE 开发完成。
5. 对应的报名审核通过的帖子链接
Session ID 在哪找? Session ID 是 TRAE 每段对话任务的唯一标识,用来证明作品确实由 TRAE 开发完成。请在创作时保留关键任务的对话记录,发帖时附上对应 Session ID——双击 TRAE 的对话复制出来即可。(如下图)










