本文作者：vitoriga，TRAE 社区用户
摘要：本文基于一位前端开发者的真实案例，展示如何借助 TraeCode 的 AI 对话能力，将一个复刻页面改造为可公开访问的 3D 作品集网站。全文涵盖项目构思、核心改造思路、TraeCode 协作技巧与提示词最佳实践。
在线体验：https://blue-eagle-archive.pages.dev/（建议在电脑端打开，支持键盘导航，加载约 3 秒后会播放 CRT 开机动画）
实践背景
对于前端开发者而言，作品集是求职中不可或缺的展示工具。传统简历难以充分呈现交互类项目的效果，而一个可在线访问的 3D 作品集网站，则能让面试官直接体验项目的运行状态。
本案例的起点是一个此前复刻的「莱因科技」档案页面。
开发者借助 TraeCode，将这一半成品改造为一个完整的、数据驱动的作品集网站：「蓝鹰科技 · 内部数据库」。以下是完整的改造过程与提示词策略，供大家参考复用。
成果概览
该项目将 8 个 GitHub 项目组织为三列档案柜中的卷宗：使用 ← → 切换分类，↑ ↓ 翻阅卷宗，按 ENTER 打开详情，可查看技术栈、项目角色、摘要、截图与演示视频。项目采用 Vite、TypeScript 与 Three.js 构建，未引入 UI 框架；站点 gzip 后约 200KB，素材约 21MB，部署于 Cloudflare Pages。
核心改造思路：复刻页到求职作品
复刻页面通常难以作为简历中的有效项目展示：它仅证明了「能照搬」而非「能设计」。
但换一个角度看，复刻页是一个质量不错的半成品：视觉风格、交互逻辑、工程链路均已就绪，只需补足三个关键环节，即可转化为有说服力的个人作品。
-
替换叙事层 ：保留原有的视觉语言体系（CRT 开机动画、档案柜、滚动编号），将品牌叙事整体替换为个人作品集的主题：「蓝鹰科技 · 内部数据库」。复刻的是结构，填入的是原创内容。
-
数据驱动架构：将全部 8 个项目收敛至一份 data.ts 配置文件，涵盖档案编号、分类列、详情文案、媒体清单等字段。新增作品只需追加一条数据记录，页面即自动渲染。这一设计本身就是面试中值得展开讨论的工程亮点。
-
可交互的作品展示：为每个项目配置截图与演示视频，点击后以全屏灯箱形式呈现，无需跳转即可查看项目运行效果。部署上线后，面试官通过公开链接即可直接体验。
TraeCode 如何辅助完成关键决策
整个开发过程以对话式协作为主。以下三个片段分别对应需求澄清、边界设计与问题定位，能够代表 TraeCode 在项目迭代中的典型用法。
场景一：媒体展示方案设计
开发者提出了一个开放式需求：
「我想要给作品集里面的作品一个展示，比如图片或者视频，可以怎么做？」
TraeCode 并未直接动手实现，而是先分析了现有代码与数据文件，随后抛出三组结构化选项：展示位置（详情页画廊 / 总览缩略图 / 两者兼具）、素材形式（图片加视频 / 仅图片 / 外链）、素材来源（先搭占位结构 / 直接填充素材）。
我在逐项选定后，TraeCode 才开始编码。这种「先对齐方案再动手」的模式，有效避免了返工，并帮助我在实现前完成产品层面的思考。
场景二：边界情况的主动补全
确定方案后，TraeCode 主动增加了一条未被要求的逻辑：当某个档案的 media 字段为空时，自动隐藏媒体展示区域。
这确保了网站在素材尚未完全就绪时，也不会暴露半成品状态------架子可以先搭好，素材逐步填充，访客始终看到的是完整页面。
场景三：基于量化数据的精准 Debug
新增预览地址按钮后，详情页底部被页脚遮挡。TraeCode 没有凭直觉调整间距，而是启动无头浏览器加载真实页面，精确测量 DOM 几何数据：按钮区底边 912 px，页脚顶部 948 px，重叠 36 px。定位根因为一个固定宽度 105 px 的按钮在小屏下被挤到换行。
修复后再次测量验证，用数据确认问题彻底解决。
提示词最佳实践
基于本案例的实际经验，我总结了五条行之有效的提示词策略。核心原则是：只描述目标和约束，不规定实现步骤。
实践一：用「可以怎么做」代替「帮我做」
❌ 帮我加一个图片展示功能
✅ 我想要给作品集里面的作品一个展示，比如图片或者视频，可以怎么做？
前者将未经验证的方案锁死，后者让 AI 先分析现有代码再给出方案选项。
把设计权交给 AI，判断权留给自己，协作效率更高。
实践二：提供素材清单，不规定执行步骤
❌ 先把视频压缩，再抽一帧做封面，然后统一转 webp。
✅ X-008 的那个演示视频，把声音去掉，其他的素材都给了。
22 张截图加 3 个视频，最大 97 MB，均以一句话指令传递。压缩转码、抽帧封面、统一命名等步骤由 TraeCode 自动编排。
手动规定工序反而容易引入错误。
实践三：明确说明真实用途
❌ 把这个视频转个格式
✅ 这是用于面试的作品集，要部署到 Cloudflare，把这个视频转成 GIF
当 AI 了解真实用途后，会基于实际约束进行权衡：网页播放的 faststart 参数、体积压缩策略、编码档位选择。
同一操作在不同用途下，最优方案往往不同。
实践四：修改时附带理由
✅ X-001 改名叫 ASCIIStudio，描述希望更加偏向 ASCII 功能上
只说「改名」，AI 仅修改标题。补充修改意图后，AI 会沿着整条链路同步更新：摘要、亮点描述、首屏文案一并调整，旧名称的残留也会被清理干净。
实践五：主动对齐颗粒度
在与 TraeCode 对话时，定期要求「跟我对齐颗粒度」。这一指令会让 AI 暂停执行，转而提供若干选项供确认，从而及时发现理解偏差，避免代码被过度修改或偏离预期方向。
成果展示
在线体验 ：blue-eagle-archive.pages.dev/
建议在电脑端打开，支持 ← → ↑ ↓ 键盘导航，按 ENTER 打开档案详情
动态演示：
详情页展示------档案元数据、影像记录画廊与项目摘要：
Three.js 作品的档案详情页：
写在最后
对于前端开发者而言，复刻页面不必停留在练手阶段。只要替换叙事、建立数据驱动架构、让作品可交互可访问，它就能转化为一个完整的、有说服力的个人项目。
与 AI 协作的关键不在于打字速度，而在于提问质量和方案判断力。
善用 TraeCode 的对话能力，从需求澄清到工程落地，每一步都可以获得结构化的辅助。
期待看到更多人可以用这一思路打造属于自己的作品集！