Skip to main content

Claude/ChatGPT Prompt to Design Spatial Computing UI/UX

Design spatial computing UIs for Apple Vision Pro and Meta Quest: 3D windows, eye tracking, hand gestures, and depth hierarchy done right.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Design a spatial computing application for collaborative whiteboard and brainstorming tool on Apple Vision Pro (visionOS).

Interaction model: eyes + hands (no controllers)
Content type: spatial canvas with sticky notes, connections, multimedia embeds

**Industry Design Rules (Spatial Computing):**
- Pattern: Floating windows in 3D space, eye-gaze + hand gesture interaction, depth-layered information hierarchy
- Style Priority: Clarity at variable distances, glanceable content, comfortable over extended sessions
- Color Mood: Translucent/glass materials (visionOS), subtle shadows for depth, high contrast text on frosted backgrounds
- Typography: SF Pro Rounded (visionOS) or system font, large (users view from varying distances), high contrast on glass
- Key Effects: Depth of field blur for background, parallax on window hover, smooth window repositioning, eye-gaze highlight
- Anti-Patterns: DO NOT use flat 2D patterns (wastes spatial medium). NO tiny text or UI elements (comfort zone). NO rapid movements (causes motion sickness). NO ignoring the user's physical environment. NO requiring controller for basic navigation.

Generate:
1. **App window** — floating panel design with glass material, proper depth placement, resize handles
2. **Navigation** — tab bar/sidebar adapted for spatial, ornament-style controls
3. **Content layout** — information hierarchy using depth (primary, secondary, ornament layers)
4. **Interaction zones** — eye-trackable targets (min size), hand gesture affordances (tap, pinch, drag)
5. **Immersive experience** — partial/full immersion toggle, environment blend, passthrough integration
6. **Multi-window** — window management in 3D space, snap positions, group behavior
7. **Accessibility** — voice control, pointer/switch alternatives, reduced motion mode
8. **SwiftUI + RealityKit (visionOS SDK) guidelines** and SwiftUI code for the primary app window with proper glass material

What this prompt does

This prompt generates a complete spatial computing UI specification across eight distinct output zones: window design, navigation, content hierarchy, interaction zones, immersion modes, multi-window management, accessibility, and a [framework]-keyed SwiftUI code block for the primary app window. It does not just ask for "a VR interface" — it encodes the actual constraints of the medium (eye-gaze target sizing, motion sickness avoidance, glass material rendering) directly into the generation rules, so the output skips beginner mistakes and starts from platform-correct assumptions.

What makes the template structurally sound is the anti-patterns block. Spatial computing has a short list of specific failure modes — tiny tap targets, flat 2D layouts ported unchanged from mobile, rapid camera movements — and baking them in as explicit constraints means the AI spends its tokens on spatial-native solutions rather than recycling responsive web patterns into a headset context.

The [framework] variable also pulls through to a SwiftUI code output, so you get an actionable starting point for the primary window, not just a design brief you still have to translate.

When to use it

  • You are prototyping a visionOS app and need a defensible UX foundation before writing any SwiftUI.
  • A client wants a Meta Quest productivity app and you need to communicate spatial design rationale to a team that has only shipped mobile.
  • You are designing a training or simulation tool and need to spec out partial/full immersion transitions.
  • You want to audit an existing spatial app concept against industry anti-patterns before dev starts.
  • You are writing a design document for a pitch and need a concrete, structured UI breakdown with interaction zones called out.

Example output

For app_purpose: surgical procedure reference, platform: Apple Vision Pro, interaction_model: eye-gaze + indirect pinch, content_type: 3D anatomical overlays + step-by-step text:

App Window:
- Floating glass panel, 60cm depth placement, 800×600pt base size
- Frosted visor material, 80% opacity, 1pt border highlight
- Resize handle: ornament-style corner grips, 44pt minimum touch target

Navigation:
- Bottom ornament tab bar: 5 tabs, SF Symbols 4+, label + icon
- Eye-gaze highlight: system-controlled hover dwell, subtle rim glow on focus

Interaction Zones:
- Primary tap targets: minimum 60×60pt (comfort zone at 60cm)
- Pinch-to-expand: 3D model scale gesture, spring animation 0.4s
- Drag threshold: 8pt deadzone before window repositioning begins

Pro tips

  • Set [platform] to a single target. Mixing visionOS and Quest in one generation produces watered-down output that fits neither platform's material system or input model.
  • For [interaction_model], be specific about direct vs. indirect touch — "hand tracking (direct pinch at surface)" behaves very differently from "eye-gaze + indirect pinch" and the prompt uses this distinction to size interaction zones and choose gesture affordances correctly.
  • Pair the generated SwiftUI window code with Apple's RealityKit documentation for the immersive space layer — the prompt outputs the 2D ornament UI correctly but 3D anchor placement needs RealityKit primitives the template does not cover.
  • If your [content_type] is data-dense (dashboards, medical, engineering), add "progressive disclosure" to the interaction model field. The prompt will then distribute information across depth layers rather than cramming everything into one window — which is the correct spatial answer to information overload, not smaller text.
  • Eye-gaze dwell timing in visionOS is system-controlled and intentionally not exposed as a developer constant. If the output suggests hardcoding a specific ms value, treat it as a design intent annotation only — implement the system hover API and let the OS handle timing so it respects user accessibility preferences.

Frequently Asked Questions

Does this prompt generate actual SwiftUI code or just design specs?
Both. The template explicitly requests SwiftUI code for the primary app window with glass material in output section 8, keyed to your [framework] variable. Set that to 'visionOS' and you get a working RealityView/WindowGroup scaffold. The other seven sections are design specs, not code.
Can I use this for Meta Quest instead of Apple Vision Pro?
Yes — set [platform] to 'Meta Quest 3' and [framework] to 'Unity XR / OpenXR'. The color and material rules shift from visionOS glass to Quest's passthrough blend approach, and the hand gesture affordances map to Meta's Interaction SDK conventions (direct pinch, palm-facing-camera gestures) rather than visionOS indirect pinch. Keep platforms separate across runs for clean output — mixing them in a single generation degrades both.
The minimum interaction zone sizes seem arbitrary — where do those come from?
They are derived from Apple's Human Interface Guidelines for visionOS, which set a minimum comfortable tap target of 60×60pt at a nominal 60cm viewing distance, and the anti-patterns block in the prompt enforces this constraint. If your content type forces smaller targets (dense data grids, for example), the pro tip about progressive disclosure applies — layer the detail behind a reveal gesture rather than shrinking the targets below the comfort threshold.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Emerging Tech UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support