在构建前端模型评测集或进行高阶前端练习时，Prompt 的质量直接决定了产出的代码深度。依据最新抓取规范，我们拒绝简单的静态页面生成，转而聚焦于本地状态管理、Canvas/WebGL 渲染、复杂交互逻辑及性能优化。
以下是5条符合“中等”至“复杂”难度的纯前端 Prompt，可直接用于测试或开发参考。
1. 【非3D-复杂】本地化智能密码管理器（安全与状态管理）
难度定位：复杂非3D前端。重点考察本地存储加密模拟、复杂表单逻辑、模块化架构及安全UI设计。
技术栈：HTML5, CSS3, Native JavaScript (ES6+), Web Crypto API (模拟)
Prompt 内容:
请开发一个名为“本地智能密码管理器”的单页应用（SPA），所有数据仅存储在浏览器 localStorage 中，严禁后端交互。
核心功能要求：
1. 密码生成器模块：支持配置长度（8-64位）、字符类型（大小写、数字、特殊符号），实时生成高强度密码，并提供“复制”功能。
2. 密码库模块：实现本地 CRUD（增删改查）。每条记录包含：网站名称、用户名、加密后的密码（使用 Web Crypto API 进行简单 AES 加密模拟）、安全评分。支持关键词搜索和按安全评分排序。
3. 安全评估模块：用户输入任意密码，实时计算强度评分（基于熵值算法模拟），并给出风险提示（如“常见弱口令”）。
4. UI/UX 要求：采用极客安全风格的深色主题，强调色为霓虹绿（#00ff41）或警示红。需适配移动端响应式布局。
5. 代码规范：单文件 HTML 结构，使用 ES6 模块风格组织 JS 逻辑。关键加密算法和状态管理逻辑需添加中文注释。禁止使用任何外部库（如 jQuery, Bootstrap）。
6. 安全性提示：在页面显著位置标注“数据仅存储于本地，清除缓存将丢失数据”。
2. 【3D-中等】Three.js 交互式产品展示厅（光照与相机控制）
难度定位：中等 3D 前端。重点考察 Three.js 基础场景搭建、模型加载、光照系统及鼠标交互。
技术栈：Three.js, GLTFLoader, OrbitControls
Prompt 内容：
使用 Three.js 构建一个 3D 产品展示区，用于展示一款科幻风格的耳机模型。
具体要求：
1. 场景搭建：创建包含环境光（AmbientLight）和方向光（DirectionalLight）的场景，启用阴影映射（ShadowMap）。背景设置为深空渐变或星空粒子效果。
2. 模型加载：使用 GLTFLoader 加载一个内置的 glTF 模型（若无法加载外部文件，请使用 Three.js 原生几何体组合成一个抽象的耳机形状作为替代）。
3. 交互控制：集成 OrbitControls，允许用户旋转、缩放查看模型。
4. 动态效果：
- 鼠标悬停在模型特定部位（如耳罩）时，该部分材质 emissive 属性高亮显示。
- 页面加载时，模型从远处平滑飞入视野中心（使用 GSAP 或 Tween.js 辅助动画，或手动编写 lerp 插值）。
5. 性能优化：确保渲染循环高效，窗口 resize 时正确更新相机宽高比和 renderer 尺寸。
6. 代码结构：单文件 HTML，引入 Three.js CDN。代码需包含清晰的中文注释，解释光照设置和相机控制逻辑。
3. 【游戏-复杂】HTML5 Canvas 俯视角射击游戏（对象池与物理碰撞）
难度定位：复杂游戏前端。重点考察 Canvas 高性能渲染、对象池模式、实体组件系统（ECS）雏形及碰撞检测。
技术栈：HTML5 Canvas, Vanilla JS
Prompt 内容：
使用 HTML5 Canvas 和原生 JavaScript 开发一个单文件的俯视角太空射击游戏。
核心玩法：
1. 玩家控制：使用 WASD 移动飞船，鼠标瞄准并点击射击。飞船具有惯性移动效果。
2. 敌人系统：生成不同类型的外星敌人（直线移动、追踪玩家、螺旋移动）。敌人被击中后产生粒子爆炸效果。
3. 武器系统：玩家拥有三种武器（普通子弹、散射激光、导弹），通过数字键 1-3 切换。导弹具备简单的追踪逻辑。
4. 性能优化：
- 必须实现“对象池”（Object Pooling）管理子弹和粒子，避免频繁 GC。
- 使用 requestAnimationFrame 进行渲染循环。
5. 游戏状态：包含开始界面、游戏进行中（显示分数、生命值）、游戏结束界面（显示最高分，存储于 localStorage）。
6. 视觉风格：赛博朋克霓虹风格，深色背景，发光特效（利用 canvas shadowBlur）。
7. 代码要求：单文件 HTML。代码结构需模块化（分为 InputHandler, EntityManager, Renderer, GameLoop 等类或对象）。关键算法（如碰撞检测、对象池复用）需添加详细中文注释。
4. 【非3D-复杂】门店销售数据分析看板（可视化与联动筛选）
难度定位：复杂非3D前端。重点考察复杂数据流处理、图表库集成、多级联动筛选及静态数据模拟。
技术栈：React (or Vue3), ECharts, TailwindCSS (or native CSS)
Prompt 内容：
构建一个“门店销售分析看板”单页应用，所有数据来自本地硬编码的 JSON 数组，无后端 API。
数据源要求：
在代码中定义一个包含 100+ 条记录的 salesData 数组，字段包括：日期（2025-01 至 2025-06）、省份、城市、销售额、门店类型（旗舰店/标准店/便利店）、品类。
功能模块：
1. 筛选器区域：
- 一级下拉：选择省份（含“全部”）。
- 二级下拉：根据所选省份动态联动显示城市列表（含“全部”）。
- 日期范围选择器：选择起始和结束月份。
2. 图表展示区（使用 ECharts 或 Chart.js）：
- 柱状图：展示筛选后“各月份总销售额”趋势。
- 饼图：展示筛选后“各门店类型销售额占比”。
- 折线图：展示筛选后“Top 3 品类”的销售对比。
- 注意：图表切换数据时禁用动画，以实现快速响应。
3. 数据表格：
- 展示筛选后的明细数据，支持分页（每页 10 条）。
- 支持点击表头按“销售额”升序/降序排列。
4. UI 要求：深色主题，卡片式布局，响应式设计适配大屏和笔记本。
5. 代码规范：若使用 React，请使用 Function Components + Hooks；若使用 Vue，请使用 Composition API。代码需清晰分离数据逻辑与视图逻辑，关键数据处理函数需加中文注释。
5. 【3D-简单/中等】CSS 3D 翻转作品集首页（微交互与滚动触发）
难度定位：简单至中等 3D 前端（非 WebGL，纯 CSS/DOM）。重点考察 CSS 3D 变换、GSAP 滚动触发及视觉层次感。
技术栈：HTML, CSS3, GSAP (ScrollTrigger)
Prompt 内容：
使用 HTML/CSS/GSAP 开发一个个人作品集首页，重点展示 CSS 3D 变换能力。
设计要求：
1. 头部 Hero 区：标题文字具备轻微的 3D 视差效果，随鼠标移动而反向偏移。
2. 项目展示区：
- 采用网格布局展示 6 个项目卡片。
- 每个卡片正面为项目截图，背面为项目简介和技术栈。
- 初始状态下，卡片以随机角度分散在屏幕外。
3. 滚动交互：
- 使用 GSAP ScrollTrigger 插件。
- 当用户向下滚动时，项目卡片依次以“3D 翻转 + 淡入”的效果入场，最终整齐排列。
- 鼠标悬停卡片时，卡片沿 Y 轴翻转 180 度展示背面信息（纯 CSS transition 实现）。
4. 背景动效：使用原生 Canvas 绘制少量缓慢漂浮的几何粒子，不干扰主要内容阅读。
5. 响应式：在移动端禁用复杂的 3D 滚动入场动画，改为简单的淡入上浮，保证性能。
6. 代码要求：单文件 HTML。CSS 需使用变量管理颜色。GSAP 代码需清晰标注时间轴逻辑。
💡 提示词设计说明（符合规范 V3）
1. 真实性与落地性：所有 Prompt 均指向可独立运行的前端应用，不依赖私有 API 或复杂后端，符合“纯前端”定义。
2. 难度分布：
* Prompt 1 & 4 属于**非3D-复杂**，涉及复杂逻辑和数据流。
* Prompt 2 & 3 属于**3D/游戏-中等至复杂**，涉及 WebGL/Canvas 底层渲染和优化。
* Prompt 5 属于**3D-简单/中等**，侧重 CSS 3D 和动效库使用。
3. **技术栈现代性**：摒弃 jQuery 等陈旧技术，推荐使用 ES6+、Three.js、GSAP、React/Vue3 等现代标准。
4. **细节充实**：每个 Prompt 都明确了数据结构、交互细节、性能要求（如对象池、禁用图表动画）和代码规范（中文注释、单文件限制），避免了描述空泛。
