用 AI 做 3D 模拟前端的避坑指南
作者使用 AI（Opus）结合 Three.js 制作了新加坡地铁 3D 模拟前端。通过复用已有结构化数据、利用 artifacts 提前做视觉决策，并注意迭代优化 HUD 界面设计，能够有效提升 AI 前端开发效率。
Reddit r/vibecoding/u/sudonymio
three.jsOpus 5.5Claude CodeElevenLabs
收录于 2026-10-31 · 原文发布于 2026-10-28
要点
- 在构建新项目前，准备好已数字化的基础数据（如站点节点和轨道数据），方便在此基础上直接扩展。
- 让 AI 使用 artifacts（制品）在正式编写代码前展示视觉效果，方便在构建前做出视觉决策。
- 亲自试玩和测试模拟效果，根据实际体验不断调整和修复问题。
- 花心思精心设计 HUD（抬头显示器）界面，反复迭代来确定操作按钮和位置信息的布局，确保直观易用。
坑点
- 设计 HUD（抬头显示器）时容易忽视交互直观性，确定操作按钮和位置信息需要耗费多次迭代成本。
.cursorrules
- 优先使用已有的结构化数据作为基础。 - 在编写前端或 UI 代码前，利用 artifacts 或视觉原型先展示并确认视觉决策。 - 精细设计 HUD 界面布局，确保操作按钮和状态信息的交互直观易用。
可复制提示词
请帮我使用 three.js 开发一个 3D 模拟前端项目。数据来源为 [填入公开数据源或API]。在开始写具体代码前，请先使用 artifacts 展示界面视觉方案与 HUD（抬头显示器）的设计，包括操作按钮和信息展示的位置，确认无误后再进行开发。项目需支持在 [桌面端和移动端] 均能良好运行。
#AI前端#Three.js#避坑指南#界面设计
相关方法
内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。