随着前端技术的不断演进，开发者面临的挑战已从简单的页面展示转向构建功能完备、交互复杂的单页应用。以下五个场景涵盖了多媒体处理、大数据可视化、开发工具构建、富文本编辑以及地理信息系统，展示了现代前端工程师在综合技术应用上的深度与广度。
首先，多媒体交互是提升用户沉浸感的重要手段，音乐播放器不仅涉及音频控制，更包含细腻的视觉反馈：
Prompt: 创建一个音乐播放器 UI 组件。包含播放/暂停、上一首/下一首、进度条拖拽、音量控制。使用 HTML5 Audio API 播放本地 MP3 文件（或提供的公共 CDN 链接）。进度条随播放时间实时更新，支持点击跳转。界面需美观，带有专辑封面旋转动画（播放时旋转，暂停时停止）。
这一组件要求开发者熟练掌握 HTML5 Media API 的事件监听机制，并通过 CSS 动画与 JavaScript 状态的同步，实现视听一致的流畅体验。
在处理大规模数据时，性能优化与多维交互成为核心考量，财务仪表盘正是此类需求的典型代表：
Prompt: 构建一个"个人财务仪表盘"。数据源为硬编码的大型 JSON 数组（500+ 条交易记录）。功能包括：1. 使用 ECharts 绘制月度支出折线图和类别饼图（静态数据，无动画入场）；2. 多级筛选器：按日期范围、交易类型（收入/支出）、标签筛选；3. 数据表格：展示筛选后的记录，支持分页（前端分页）和按金额排序；4. 导出功能：将当前筛选结果生成 CSV 文件并触发下载。要求界面布局自适应，图表与表格联动更新。
该场景考验开发者在前端进行数据清洗、状态管理以及图表联动的能力，同时需确保在大量数据渲染下的页面响应速度。
对于开发者工具而言，实时性与安全性至关重要，在线代码编辑器需要巧妙平衡执行环境与控制逻辑：
Prompt: 开发一个在线代码编辑器预览工具（Mini CodePen）。左侧为 HTML/CSS/JS 三个文本输入框，右侧为 iframe 实时预览区。实现防抖（Debounce）机制，用户停止输入 500ms 后自动更新预览。支持简单的语法高亮（可引入 Prism.js 或 Highlight.js CDN）。提供"保存"功能，将代码内容保存到 localStorage，并生成一个唯一的 ID 用于下次加载（模拟路由哈希）。
通过 iframe 隔离执行环境，结合防抖策略优化性能，再利用本地存储模拟持久化，这个工具展示了如何构建一个轻量级但功能完整的开发辅助平台。
富文本编辑则是前端领域公认的难点之一，它直接操作 DOM 且需兼顾多浏览器兼容性：
Prompt: 实现一个富文本编辑器核心功能。使用 contenteditable div。工具栏包含：加粗、斜体、下划线、插入链接、插入图片（Base64）、撤销/重做。需处理浏览器兼容性差异，实现自定义的命令执行逻辑。支持快捷键操作（Ctrl+B, Ctrl+Z 等）。输出内容为干净的 HTML 字符串。界面模仿现代 Notion 或 Medium 的风格，简洁优雅。
这不仅涉及 document.execCommand 或 Selection API 的底层操作，还要求对 DOM 结构有深刻理解，以确保生成的 HTML 干净可用，同时提供符合现代审美的高效编辑体验。
最后，地理信息系统的应用将数据与空间位置结合，提供了宏观的数据视角：
Prompt: 构建一个交互式地图应用（非 Google Maps API，使用 Leaflet.js + OpenStreetMap）。功能：1. 加载本地 GeoJSON 数据（城市区域边界）；2. 点击区域显示详细信息弹窗；3. 搜索框：输入城市名，地图飞渡（FlyTo）到该位置并高亮；4. 图层控制：切换显示"人口密度"热力图（使用 Leaflet.heat 插件，数据本地生成）和"标记点"图层。要求处理大量标记点的聚类（MarkerCluster）。
通过集成 Leaflet 及其插件生态，开发者能够处理复杂的地理空间数据，实现从微观标记点到宏观热力图的多层级信息展示，体现了前端在 GIS 领域的强大潜力。
从音频控制的细腻动画到地理数据的宏观呈现，这五个 Prompt 勾勒出了前端开发在垂直领域的专业化趋势。它们表明，现代前端工程师不仅是界面的构建者，更是复杂交互逻辑、数据处理算法以及第三方库整合能力的集大成者。