MBTI性格测试网页：一键生成前端代码
提示词描述：
适用于前端开发者快速搭建趣味测试页面。生成的代码可直接运行，包含完整的测试逻辑、动画效果和响应式设计，适合用于个人项目展示或社交媒体分享。
提示语关键词：
前端代码生成,MBTI测试网页,HTML网页制作,AI写代码,JavaScript交互,网页设计代码
提示词内容：
请帮我用HTML+CSS+JavaScript开发一个MBTI性格测试网页。
页面结构：顶部标题区、中间题目区、底部结果区。整体采用圆角卡片设计，背景色使用#F0F4F8，主色调为#6C5CE7。
题目要求：设计4道经典MBTI测试题，每题4个选项（E/I、S/N、T/F、J/P各对应两个选项）。点击选项后自动跳转下一题，带滑动过渡动画。
结果展示：根据用户选择计算MBTI类型，显示类型名称、性格描述、代表人物、适合职业。结果页带渐变背景，不同MBTI类型对应不同配色方案。
交互细节：选项hover时缩放1.05倍，点击后有涟漪效果。进度条实时显示测试进度。结果页提供"重新测试"按钮。
代码要求：单文件实现，内联CSS和JS。使用CSS变量管理主题色。添加完整注释。确保移动端适配，使用flex布局。
上一页：生成MBTI主题配色方案代码
下一页：Vue零基础入门：AI辅助学习Vue组件