在日常使用 AI 生成前端项目、3D 可视化、小游戏或者粒子动效的过程中，很多人都会遇到一个问题：

👉 同样是“AI生成代码”，为什么别人能直接生成可运行的3D项目，而自己却只能得到一些概念描述或半成品代码？

经过对大量 X 和 GitHub 开源项目的观察可以发现，一个关键差异在于：

高质量的 AI Prompt 本身就是“代码生成工程”，而不是简单的描述句子。

尤其是在 Three.js、WebGL 粒子系统、Canvas 游戏、SVG 动效等领域，开发者实际使用的 Prompt 往往具备以下特点：

• 强约束输出（单文件 / 可运行 / no explanation）
• 明确技术栈（Three.js / Canvas / GLSL / SVG）
• 明确项目结构（游戏 / 场景 / 可视化 / 动效）
• 接近真实工程任务描述，而不是“聊天式提问”

因此，这篇文章整理了一批可直接复制使用的高质量 AI Prompt 模板，覆盖：

• 🌌 3D WebGL 场景（Three.js）
• ✨ 粒子系统与 Shader 动效
• 🎮 HTML5 Canvas 游戏
• 🎨 SVG 交互动效与 UI 动画

这些 Prompt 的特点是：

👉 可以直接输入 AI（如 ChatGPT / Claude / Gemini），并生成“可运行的完整项目代码”。

1️⃣ 项目：霓虹粒子城市（Neon Particle City）

请帮我实现一个 Three.js 项目，名字叫《霓虹粒子城市》。
这是一个可运行的单文件 HTML 项目。
项目内容：
- 构建一个夜晚城市的抽象 3D 场景
- 使用粒子系统模拟城市灯光
- 建筑用简单几何体表示（box / plane）
- 城市中有缓慢流动的光线粒子
- 鼠标移动可以影响粒子流动方向
- 整体风格是赛博朋克霓虹感

技术要求：
- Three.js（CDN）
- OrbitControls
- requestAnimationFrame 动画循环

只输出完整代码，不要解释。

---

2️⃣ 项目：3D 数据星球（Data Orbit Planet）

请创建一个 Three.js 可运行项目：《数据星球 Data Orbit》。
项目效果：
- 一个中心发光球体代表“数据核心”
- 周围有多个小粒子围绕旋转轨道运动
- 粒子之间有连线形成网络结构
- 轨道运动速度不同，形成层级感
- 鼠标可以影响整体旋转速度

风格：
- 科幻数据可视化
- 类似 NASA / AI 数据中心视觉

要求：
- 单 HTML 文件
- Three.js CDN
- 只输出代码

---

3️⃣ 项目：漂浮科技 UI 空间（Floating UI Space）

请实现一个 Three.js 项目：《漂浮 UI 空间》。
效果描述：
- 在 3D 空间中漂浮多个“UI 卡片平面”
- 每个卡片缓慢旋转 + 上下浮动
- 卡片之间有光线连接
- 鼠标靠近时卡片轻微放大
- 类似未来操作系统 UI 空间

技术要求：
- Three.js
- CSS2D 或 Sprite
- OrbitControls

输出完整可运行代码

4️⃣ 项目：流体粒子实验室（Fluid Particle Lab）

请实现一个 WebGL 项目：《流体粒子实验室》。
项目效果：
- 大量粒子在画面中流动
- 粒子运动呈现流体 / 烟雾效果
- 鼠标可以“拖拽”粒子流动方向
- 粒子颜色会随速度变化
- 整体呈现实验性视觉效果

风格：
- 实验性视觉艺术
- 类似 Codepen WebGL experiment

要求：
- Three.js 或原生 WebGL
- 单 HTML 文件
- 不使用外部库（除 Three.js）

只输出代码

---

5️⃣ 项目：噪声能量场（Noise Energy Field）

请创建一个 WebGL 项目：《噪声能量场》。
项目效果：
- 屏幕中持续生成动态噪声波纹
- 类似能量场 / 电磁场流动效果
- 波纹随时间不断变化
- 鼠标影响局部扭曲
- 画面具有迷幻流动感

技术：
- GLSL shader
- 时间驱动动画

输出完整 HTML + shader 代码

6️⃣ 项目：太空生存者（Space Survivor）

请创建一个 HTML5 游戏项目：《太空生存者 Space Survivor》。
游戏玩法：
- 玩家控制一个小飞船
- 避免从四面八方飞来的陨石
- 随时间增加难度
- 撞到即结束游戏
- 显示生存时间和分数

游戏风格：
- 极简太空风
- 黑色背景 + 粒子星空

技术要求：
- Canvas
- 原生 JavaScript
- requestAnimationFrame

输出完整可运行代码

---

7️⃣ 项目：重力方块挑战（Gravity Blocks）

请实现一个 HTML5 游戏：《重力方块挑战》。
游戏机制：
- 方块会受重力影响下落
- 玩家需要控制方块落在平台上
- 平台会移动或消失
- 难度逐渐增加
- 计分系统

视觉风格：
- 极简几何风格
- 类似物理实验小游戏

只输出完整代码

8️⃣ 项目：液态 SVG Logo 动画

请创建一个 SVG 动效项目：《液态 Logo 变形》。
效果：
- 一个抽象 logo 在不同形状之间流动变形
- 类似液体融化效果
- 循环动画
- 鼠标悬停时加速变形

技术：
- SVG path morph
- CSS animation

输出单 HTML 文件代码

---

9️⃣ 项目：未来 UI Loading 系统

请创建一个 UI 动效项目：《未来加载系统》。
效果：
- 多种加载动画组合（旋转 / 波纹 / 扫描）
- 具有科技 HUD 风格
- 动态发光效果
- 循环动画系统

风格：
- 未来 UI / AI 系统界面
只输出代码