【Code with SOLO】用 TRAE SOLO 零基础爆改硬核《甄嬛传》后宫 MBTI 测试
1. 摘要
最近 SBTI（牛马测试）在各大平台爆火，借着这股热潮，我使用 TRAE SOLO 将原版测试完全重构，并包装成了沉浸式的《后宫甄嬛传》主题测试（ZHBT）。从 15 个性格维度的后宫化映射、27 个角色的现代热梗匹配，到前端 UI 宫廷风改造、真实剧照的 Python 爬取替换，再到生成带二维码的分享截图，全流程均由 SOLO 辅助完成。最终实现了一个好玩、易分享且具备完整前端交互的 Web 应用。
2. 背景
我是一名后端开发，并不精通前端，但根据个人兴趣爱好，平时喜欢搞些好玩的互动项目。面对最近网上大火却千篇一律的 MBTI 测试，我一直想做一个“如果穿越到甄嬛传你能活几集”的硬核版本。但碍于没有前端基础，像 HTML2Canvas 截图分享、CSS 样式重绘、甚至爬取并下载 27 个人物照片这种纯前端和爬虫的活儿，原本对我来说门槛不低。于是，我决定利用 TRAE SOLO 来帮我把这个兴趣爱好快速落地。
3. 实践过程
整个过程我并没有写一行复杂的代码，完全是扮演“产品经理”的角色，通过对话让 SOLO 帮我拆解并执行：
第一步：逻辑拆解与文案重构（企划阶段）
- 关键 Prompt：
“开发成电视剧甄嬛传的版本，内容换成甄嬛传的人物和剧情，最终的人格也设置成甄嬛传的角色，性格维度数量和人格数理要和原来数量一致，先做好计划与设计。先不要实现！！！” - SOLO 的表现：它帮我把原版的 15 维拆解为了“宫斗生存模型”（例如将“自尊自信”映射为“圣恩自信”），并给 27 个人格精准匹配了角色（如“硬核掀桌党 - 叶澜依”）。它主动输出了完整的
plan.md，让我可以先审查逻辑。
第二步：前端代码改造与 UI 升级
- 关键操作：在确认文案后，让 SOLO 替换原有的 HTML/JS 代码，并增加了一个独立的后宫图鉴页（
gallery.html）。 - 踩过的坑：一开始让它加图鉴，它直接改乱了主页的结构。我通过
“不要乱改index文件呀，可以新增一个文件页面，展示所有的人格”及时纠正，它立刻撤回并在新文件中完美实现了网格图鉴。
第三步：自动化脚本解决图片痛点
- 痛点：27 个人物的剧照找起来太麻烦，且 AI 生成的图片没有灵魂。
- 关键 Prompt：
“从网上找一下所有人的照片，用真实的剧照或者海报” - SOLO 的表现：它没有让我自己去找，而是直接写了一个 Python 爬虫脚本（
fetch_images.py），利用 urllib 去 Bing 搜图并抓取链接，最后批量下载到本地real_images/文件夹。为了解决网图 403 报错，它还贴心地给 HTML 加上了<meta name="referrer" content="no-referrer">标签。
第四步：一键分享与截图生成
- 关键 Prompt：
“答题结束的人格展示页面，增加一个分享按钮，然后生成当前页面的截图加上二维码，二维码指向当前链接” - SOLO 的表现：它引入了
html2canvas和qrcodejs。为了交互体验更好，在生成截图后，它没有生硬地直接下载，而是做了一个带有半透明遮罩的预览层，提示用户“长按保存分享图”，完美适配了移动端的传播场景。
4. 成果展示
最终产出了一个双页面的纯前端 Web 应用，无需复杂部署，双击即可运行。
-
测试页：包含 30+2 道甄嬛传专属测试题，进度条与结算动画。
-
结果页：展示宫斗存活率、角色匹配图、15 维雷达分析，以及带有二维码的分享图生成。
-
图鉴页：27 位娘娘/王爷的高清剧照墙(隐藏，仅作开发展示或者隐藏彩蛋)。
5. 效果与总结
- 提效显著：原本如果让我自己去学 html2canvas、写 Python 爬虫下图片、调 CSS 样式，可能需要 2-3 天的业余时间。而现在，整个改版只花了 不到 2 小时。
- SOLO 的价值：它不仅是一个代码生成器，更像是一个“带脑子的全栈外包”。它能理解“先设计后执行”的工作流（通过 plan.md 约束），能用 Python 脚本解决素材收集问题，还能顺带处理前端防盗链和跨域的坑。
- 复用经验：强推这种工作流：先让 SOLO 写 Plan/Spec → 确认逻辑无误 → 再让其分步修改代码 → 遇到素材问题直接让它写脚本爬取。不要一次性给出所有指令，步步为营的“对话式产品迭代”才是最高效的。
