在掌握了全栈架构的宏观视野后，深入前端的微观世界同样至关重要。现代前端开发早已超越了简单的页面切图，转向了复杂的交互逻辑、高性能渲染、数据可视化以及极致的用户体验优化。
为了帮助前端开发者突破瓶颈，我们精选了五个侧重不同前端核心能力的提示词。这些项目涵盖了从 Canvas 游戏引擎、3D WebGL 场景、复杂状态管理、大数据表格性能优化到无障碍访问（a11y）等关键领域。
以下是五个专注于前端深度实践的项目提示词：
- 物理引擎贪吃蛇 (HTML5 Canvas + TypeScript)
使用 HTML5 Canvas + TypeScript 开发「物理版贪吃蛇」：摒弃网格移动，采用向量运动；蛇身由多个圆形刚体组成，通过距离约束（Distance Constraint）连接；食物生成带有引力效果；碰撞检测使用 SAT（分离轴定理）；支持鼠标/触摸控制方向；实现粒子爆炸特效；代码采用 ECS（实体-组件-系统）架构模式；单文件 HTML 交付，无外部依赖。
- 3D 产品配置器 (Three.js + React Three Fiber)
用 React + Three.js (React Three Fiber) + Drei 构建「在线球鞋定制器」：加载 GLTF 模型；支持更换鞋面、鞋底、鞋带颜色（使用 MeshStandardMaterial 的 color/roughness/metalness 属性）；环境光与聚光灯动态调整；点击模型特定部位触发材质切换 UI；支持 360 度旋转查看与缩放；集成 react-spring 实现 UI 动画过渡；导出当前配置为 JSON 格式。
- 无限滚动数据流 (Vue 3 + Virtual Scrolling)
使用 Vue 3 + Composition API 实现「高性能无限滚动新闻流」：模拟 10,000+ 条数据列表；自定义虚拟滚动组件（Virtual Scroller），仅渲染可视区域 DOM 节点；支持动态高度_item_ 的估算与修正；下拉刷新与上拉加载更多；IntersectionObserver 监听底部触底；骨架屏加载状态；内存泄漏防护（onUnmounted 清理定时器与事件监听）；CSS 使用 Scoped 样式隔离。
- 拖拽式表单构建器 (React + Dnd Kit)
用 React + @dnd-kit/core + @dnd-kit/sortable 开发「可视化表单构建器」：左侧组件库（输入框、下拉选、日期器等），中间画布，右侧属性配置面板；支持拖拽组件到画布排序；点击画布组件在右侧编辑标签、占位符、校验规则；实时预览表单效果；表单结构序列化为 JSON Schema；支持撤销/重做功能（使用 useReducer 管理历史栈）；响应式布局适配移动端预览。
- 无障碍仪表盘 (Angular + CDK + A11y)
使用 Angular + Angular CDK 构建「符合 WCAG 2.1 AA 标准的数据仪表盘」：所有交互元素具备正确的 ARIA 标签（aria-label, aria-expanded, role）；支持纯键盘导航（Tab 键顺序、Enter/Space 激活、Esc 关闭弹窗）；高对比度模式切换；屏幕阅读器友好的图表描述（使用 svg title/desc 或隐藏文本）；焦点管理（Focus Trap）在模态框中的应用；动态主题色切换并保存至 localStorage；E2E 测试包含无障碍审计步骤。
这五个前端项目提示词分别指向了不同的技术深水区：
* **Canvas + TypeScript** 挑战了对底层图形渲染和算法结构的理解；
* **Three.js** 探索了 Web 3D 交互与材质系统的复杂性；
* **虚拟滚动** 解决了大数据量下的 DOM 性能瓶颈；
* **拖拽构建器** 体现了复杂状态管理与用户交互设计的结合；
* **无障碍开发** 则强调了前端开发的社会责任与标准化规范。
通过完成这些高难度的前端专项训练，开发者将能够构建出不仅功能强大，而且性能卓越、体验流畅且包容性强的现代 Web 应用。