$npx -y skills add ehmo/platform-design-skills --skill visionosApple Human Interface Guidelines for Apple Vision Pro. Use when building spatial computing apps, implementing eye/hand input, or designing immersive experiences. Triggers on tasks involving visionOS, RealityKit, spatial UI, or mixed reality.
| 1 | # visionOS Design Guidelines |
| 2 | |
| 3 | Comprehensive design rules for Apple Vision Pro based on Apple Human Interface Guidelines. These rules ensure spatial computing apps are comfortable, intuitive, and consistent with platform conventions. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Spatial Layout [CRITICAL] |
| 8 | |
| 9 | Spatial layout determines user comfort and usability. Poor placement causes neck strain, disorientation, or inaccessible content. |
| 10 | |
| 11 | ### Rules |
| 12 | |
| 13 | **SL-01: Center content in the field of view.** |
| 14 | Place primary windows and content directly ahead of the user at eye level. The comfortable vertical viewing range is approximately 30 degrees above and below eye level. Content outside this range requires head movement and causes fatigue. |
| 15 | |
| 16 | **SL-02: Maintain comfortable distance.** |
| 17 | Position content at a natural distance from the user, typically 1-2 meters for windows. Content too close feels invasive; content too far is hard to read. The system default placement is approximately 1.5 meters. Respect this unless there is a strong reason to override. |
| 18 | |
| 19 | **SL-03: Never place content behind the user.** |
| 20 | Users cannot see content behind them without physically turning around. All UI elements must appear within the forward-facing hemisphere. If content must surround the user, provide clear navigation to rotate or reposition. |
| 21 | |
| 22 | **SL-04: Respect personal space.** |
| 23 | Do not place 3D objects or windows closer than arm's length (~0.5 meters) from the user's head. Objects inside personal space cause discomfort and a feeling of intrusion. Direct-touch interactions are the exception, where objects are intentionally within reach. |
| 24 | |
| 25 | **SL-05: Use Z-depth to establish hierarchy.** |
| 26 | Elements closer to the user appear more prominent and interactive. Push secondary or background content further back. Use subtle depth offsets (a few centimeters) between layered elements rather than dramatic separation that fragments the interface. |
| 27 | |
| 28 | **SL-06: Manage multiple windows thoughtfully.** |
| 29 | When displaying multiple windows, arrange them in a gentle arc around the user rather than stacking or overlapping. Each window should be individually repositionable. Avoid spawning too many simultaneous windows that overwhelm the space. |
| 30 | |
| 31 | **SL-07: Anchor content to the environment, not the head.** |
| 32 | Windows and objects should stay fixed in world space as the user moves their head. Head-locked content (content that follows head movement) causes discomfort and motion sickness. Only use head-relative positioning for brief, transient elements like tooltips. |
| 33 | |
| 34 | --- |
| 35 | |
| 36 | ## 2. Eye & Hand Input [CRITICAL] |
| 37 | |
| 38 | visionOS uses indirect interaction as its primary input model: users look at a target and pinch to select. This is fundamentally different from touch or mouse input. |
| 39 | |
| 40 | ### Rules |
| 41 | |
| 42 | **EH-01: Design for look-and-pinch as the primary interaction.** |
| 43 | The standard interaction is: user looks at an element (eyes provide targeting), then pinches thumb and index finger together (hand provides confirmation). Design all primary interactions around this model. Users do not need to raise their hands or point at objects. |
| 44 | |
| 45 | **EH-02: Minimum interactive target size is 60pt.** |
| 46 | Eye tracking has inherent imprecision. All tappable elements must be at least 60 points in diameter to be reliably targeted by gaze. This is larger than iOS touch targets (44pt). Smaller targets cause frustration and mis-selections. |
| 47 | |
| 48 | **Correct:** |
| 49 | ```swift |
| 50 | // visionOS — button meeting 60pt minimum |
| 51 | Button(action: confirmAction) { |
| 52 | Label("Confirm", systemImage: "checkmark") |
| 53 | .frame(minWidth: 60, minHeight: 60) |
| 54 | .padding(.horizontal, 16) |
| 55 | } |
| 56 | .buttonStyle(.borderedProminent) |
| 57 | ``` |
| 58 | |
| 59 | **Incorrect:** |
| 60 | ```swift |
| 61 | // visionOS — 32pt button too small for reliable gaze targeting |
| 62 | Button(action: confirmAction) { |
| 63 | Image(systemName: "checkmark") |
| 64 | .frame(width: 32, height: 32) // Below 60pt minimum; unreliable with eye tracking |
| 65 | } |
| 66 | ``` |
| 67 | |
| 68 | **EH-03: Provide hover feedback on gaze.** |
| 69 | When the user's eyes rest on an interactive element, show a visible highlight or subtle expansion to confirm the element is targeted. This feedback is essential because there is no cursor. Without hover states, users cannot tell what they are about to select. |
| 70 | |
| 71 | **EH-04: Support direct touch for close-range objects.** |
| 72 | When 3D objects or UI elements are within arm's reach, allow direct touch interaction (physically reaching out and tapping). Direct touch should feel natural: provide visual and audio feedback on contact. Use direct touch for immersive experiences where it enhances presence. |
| 73 | |
| 74 | **EH-05: Never track gaze for content purposes.** |
| 75 | Eye position is used exclusively for system interaction targeting. Do not use gaze direction to in |