【TRAE 求职作品秀】把复刻的莱因科技页面改成了我的 3D 作品集，过程和提示词都放这了
在线体验：https://blue-eagle-archive.pages.dev/
建议电脑打开（有键盘导航），加载约 3 秒，会先播一段 CRT 开机动画
原项目：[LBEILC/RhineLabUI](https://github.com/LBEILC/RhineLabUI)（RHINE LAB · ANALYSIS OS，莱茵生命风格档案界面，TypeScript + Three.js，MIT 协议，734
）
我的关系：fork 后二次开发，不是从零原创
我的版本：https://blue-eagle-archive.pages.dev/
建议电脑打开（有键盘导航），会先播一段 CRT 开机动画
〇、先把最重要的说清楚
这个站的视觉和交互框架不是我的原创。
它来自一个 734 星的开源项目 RhineLabUI，作者是 [LBEILC](https://github.com/LBEILC)，用 TypeScript 和 Three.js 复刻了明日方舟莱茵生命风格的档案界面，MIT 协议开源。我 fork 了它，在这个底子上做了内容重构、数据驱动改造、媒体系统、性能与加载优化，最后部署上线。
一、我是谁，我在准备什么
我是一名前端方向的学生，正在准备实习的求职。
作为一个搞前端的，有许多作品都需要展示出来。一般的简历没办法给我完美展示，所以我想到以前找的一个莱因科技的档案，所以把作品放到了这个档案里面，TRAECode帮我完成了绝大多数的工作。
下面把改造过程和提示词都贴出来。有些做法是我踩完坑才想明白的，希望你能少绕点路。
二、先看成果
一个 3D 作品集网站：我的 8 个 GitHub 项目被做成三列档案柜里的卷宗，← → 切分类，↑ ↓ 翻卷宗，ENTER 打开档案，能看到技术栈、我的角色、摘要，还有截图和演示视频。技术栈是 Vite + TypeScript + Three.js，没用 UI 框架，整站 gzip 后 200KB 左右，素材 21MB，跑在 Cloudflare Pages 上。
三、复刻页凭什么能变成求职作品
复刻页一般不敢写进简历，理由很简单：抄的东西，说明不了你会做。但我后来觉得，复刻页其实是个半成品。视觉、交互、工程链路都是现成的，差的是三件事，补上就行。
第一件，换叙事。我没有推翻重做，莱因科技 PV 的视觉语言（CRT 开机、档案柜、滚动编号）都留着，把里面的品牌叙事整个换成了我自己的「蓝鹰科技 · 内部数据库」。练手时抄的是它的壳，这次填进去的全是我自己的内容。
第二件，数据驱动。我把 8 个项目全部收进一个 data.ts：档案编号、在哪个分类列、详情页文案、媒体清单，都从这份数据推导。以后再加作品，就是往文件里添一段数据，页面自动多一格。面试聊到这一段的时候，基本都会被追问细节，这部分恰恰是我最想讲的。
第三件，让作品能被打开。静态截图说服力有限，所以每个作品下面挂了截图和演示视频，点开是全屏灯箱，不用跳走就能看到项目跑起来的样子。然后部署上线，拿一个公开链接。面试官点开，项目就在那。
四、我的思路是怎么被 TRAECode 理清的
整个过程是纯对话完成的。挑三个片段说说，我觉得这三个时刻比功能本身更值得讲。
第一个是媒体展示。当时我只说了一句：
「我想要给作品集里面的作品一个展示，比如图片或者视频，可以怎么做？」
注意我问的是「可以怎么做」。TRAE 先自己读了我的数据文件和详情页代码，然后没有动手，反过来给我出了三组选择题：展示位置（详情页画廊 / 总览缩略图 / 两者都要）、素材形式（图片加视频 / 仅图片 / 外链）、素材来源（先搭占位结构 / 直接填素材）。我逐个选完，它才开工。说实话，我自己都没想清楚的事，被它的问题问清楚了。
第二个是它多想的那一步。选完方案，它主动加了一条我没要求的规则：media 为空的档案，不显示媒体区。意思是架子可以先搭好，素材慢慢喂，访客永远不会看到半成品。功能谁都会写，这种细节我原先是想不到要提的。
第三个是修 bug。加了预览地址按钮之后，详情页底部被页脚挡住了。TRAE 没有凭感觉改间距，而是起了个无头浏览器跑真实页面，量 DOM 几何：按钮区底边 912px，页脚顶部 948px，重叠实锤。根因是一个写死 105px 宽的按钮被挤到换行。修完它又量了一遍，把数字给我看。我以前修这种问题是肉眼对截图的，对比之下差距有点大。
五、我的提示词，四个可以抄的习惯
先说结论：我写提示词基本不写步骤，只说目标和约束。拆开看有四个习惯。
-
问「可以怎么做」，不问「直接帮我做」
帮我加一个图片展示功能
我想要给作品集里面的作品一个展示，比如图片或者视频，可以怎么做？
第一种问法，等于把你自己的方案（可能还是错的）焊死了。第二种，AI 会先看你的代码再提方案，你只做选择。设计权交给它，判断权留给你，两边都省力。 -
报菜名式给素材，不给步骤
先把视频压缩，再抽一帧做封面，然后统一转 webp
X-008 的那个演示视频，把声音去掉，其他的素材都给了
22 张截图加 3 个视频，最大的 97MB，我都是一句话丢过去的。压缩转码、抽帧封面、统一命名，步骤全是它自己排的。你替它排工序，反而容易排错。 -
把真实用途说出来
把这个视频转个格式
这是用于面试的作品集，要部署到 Cloudflare，把这个视频转成 GIF
AI 知道用途，才会按真实约束去权衡：网页播放要 faststart，体积要压，档位选多少。同一件事，用途不同，答案就不同。 -
改结论时，把「为什么」一起说
X-001 改名叫 ASCIIStudio，描述希望更加偏向 ASCII 功能上
只说「改名」，AI 就只改标题。补上后半句，它会把摘要、亮点描述、首屏占位文案整条链路一起改掉，旧名字的残留也会被扫干净。 -
经常说：跟我对齐颗粒度
这样可以防止AI滥改代码、朝着自己预料之外的地方瞎做，对齐颗粒度，就要求AI停下来，给你几个选项，然后通过选项可以发掘AI的理解跟你是否有误差，以及自己的说法可以如何补充
六、成果展示
在线体验：https://blue-eagle-archive.pages.dev/ （电脑打开，先看开机动画，然后 ← → ↑ ↓ 逛，ENTER 读取）
动态演示：
详情页，档案元数据、影像记录画廊、摘要：
Three.js 作品的档案页：
七、附
实际使用的之后因为我的电脑性能相对比较好，但一些面试官的电脑性能可能没那么好，打开这个网页会比较吃力，所以需要对项目性能进行优化。
最后
跟 AI 协作这件事，重要的不是打字速度。会不会提问，会不会在它给的方案里做判断，才决定你拿到的是样板间还是自己的房子。
祝大家金九银十，offer 拉满 (・∀・)
PS:那个键盘看着好美丽，但好像有一点点瑕疵，因为我有点近视，所以可能看错了。发我家里，我仔细检查一下
。
