在构建前端模型评测集或进行高阶前端练习时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, OrbitControlsPrompt 内容使用 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 JSPrompt 内容使用 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 代码需清晰标注时间轴逻辑。 提示词设计说明符合规范 V31. 真实性与落地性所有 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 都明确了数据结构、交互细节、性能要求如对象池、禁用图表动画和代码规范中文注释、单文件限制避免了描述空泛。