Pitfalls and best practices for building 3D simulation frontends with AI

The author used AI (Opus) along with Three.js to build a 3D simulation frontend for the Singapore MRT. By reusing existing structured data, using artifacts for early visual decisions, and iterating on HUD design, you can significantly boost AI-driven frontend development efficiency.

Reddit r/vibecoding/u/sudonymio

three.jsOpus 5.5Claude CodeElevenLabs

Added 2026-10-31 · originally published 2026-10-28

Key points

Prepare digitized baseline data (such as station nodes and track data) before building a new project so you can easily extend them.
Have the AI use artifacts to preview visuals before writing code, making it easier to make visual decisions upfront.
Playtest and test the simulation yourself, continuously tweaking and fixing issues based on the actual experience.
Put real effort into designing the HUD interface, iterating repeatedly on button placement and status info layout to ensure it's intuitive.

Pitfalls

It's easy to overlook interactive intuitiveness when designing the HUD, and nailing down action buttons and status layouts often takes multiple iteration cycles.

.cursorrules

- Prioritize using existing structured data as a foundation.
- Leverage artifacts or visual prototypes to preview and confirm visual decisions before writing frontend or UI code.
- Carefully design the HUD layout to ensure interactive elements like action buttons and status info are intuitive and easy to use.

Copy-ready prompt

Help me build a 3D simulation frontend project using Three.js. The data source is [insert public data source or API]. Before writing any specific code, please use artifacts to present the visual design scheme and HUD (heads-up display) layout, including the placement of action buttons and information displays. Once confirmed, proceed with development. The project must run smoothly on both [desktop and mobile devices].

View original post

#AI Frontend#Three.js#Best Practices#UI Design

Build high-quality 3D websites quickly with Claude

Generate working Three.js scenes in a single pass using refined prompts that strictly filter out useless output with Claude Code. The core technique is fast filtering rather than blindly generating numerous random versions, cutting a week of development down to a single afternoon.

Remove that AI-generated look from frontend interfaces with unslop

Fix typical AI-generated UI flaws such as purple gradients, glows, emoji labels, loud copy, and uneven spacing by using the unslop skill for step-by-step audits and multi-round refinement, transforming generic outputs into interfaces with real character.

Cure the AI look in frontend code with these skills

Websites instantly look AI-generated when they lack dedicated styling skills. You can significantly improve frontend aesthetics by installing open-source skills and having your Agent rebuild the homepage.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques