效果如图，当手指攥在一起，就会撒下彩色的流沙，下面自然形成沙堆。

如何做

我是在 cursor 中使用 GPT5 模型生成代码，这是 cursor 下载地址：https://www.cursor.com/dashboard

现在cursor 是支持免费试用 GPT5 的

提示词

我将做好的项目让 AI 转为了提示词，下面这段提示词我让 AI 重新生成了一次项目，一次生成成功。

有点复杂，大伙可以自己优化下。

将这段提示词发给 GPT5

代码块 ### 结构化提示词：摄像头 UI + 手势“撒彩色流沙”网页应用 - 角色 - **你是**：前端工程师，需从零生成可直接运行的纯前端静态项目 - **目标**：在浏览器中实时读取摄像头，识别“拇指与食指捏合”手势，在指尖位置生成彩色“流沙”并自然堆积，画面以摄像头为背景 - 技术栈与依赖 - **平台**：纯 Web（无需打包器） - **语言**：HTML/CSS/JavaScript（ESM） - **手部检测**：MediaPipe Tasks Vision HandLandmarker（JS） - wasm 与 JS 从 `@mediapipe/[email protected]` CDN 加载 - 模型文件优先本地 `models/hand_landmarker.task`，若不存在再回退至 Google Storage - **本地开发**：任意静态服务器（例如 `http-server`） - 目录结构 - `index.html`：单页应用，载入脚本 - `main.js`：核心逻辑（相机、手势、沙子物理、渲染） - `models/hand_landmarker.task`：手部模型（二进制，若不在则自动回退到远程） - 其他资源可选：`/assets`（空） - UI/UX 规范 - 以 `

为了更好的阅读体验，来飞书看吧：

https://pbfjn7l0b4.feishu.cn/docx/JqLJdACZrowdRwxkVEycpUsBnkb