# IOS UX Prototype
> Create interactive iOS/mobile app UX flow prototypes as HTML documents with realistic phone mockups. Use when: (1) Visualizing user journeys and navigation flows, (2) Creating mobile app wireframes, (3) Documenting screen-to-screen navigation patterns, (4) Presenting iOS UI designs with annotations, (5) Prototyping app architecture before implementation. Generates self-contained HTML files with iOS-native styling, phone frames, flow arrows, and callout annotations.
- Skill: `tddworks/ios-ux-prototype` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add tddworks/ios-ux-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tddworks/ios-ux-prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tddworks (https://skillmd.com/u/tddworks)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tddworks/ios-ux-prototype
---
# iOS UX Prototype
Create interactive HTML prototypes showing mobile app user journeys with realistic iPhone mockups.
## Quick Start
1. Copy CSS from `assets/ios-design-system.css` into a new HTML file
2. Paste the sprite from `assets/sf-symbols.svg` once near the top of ``
3. Structure: page header → journey rows → phone frames with content
4. Add flow arrows between screens and annotations for callouts
## iOS 26 Design (default)
Target the current iOS 26 design language — **Liquid Glass** surfaces and
**SF Symbols**. Apply these by default unless the user asks for an older look:
- **Liquid Glass floating tab bar** — use `.tab-bar` (now a translucent,
blurred capsule detached from the screen edges; the active tab gets its own
glass "lens" pill). Give scrolling screens `padding-bottom: 104px` on
`.scroll-content` so rows clear the floating bar.
- **Liquid Glass nav/toolbar buttons** — use `.nav-glass-btn` (circular) or
`.nav-glass-btn.text` (pill) for trailing actions, instead of plain text.
- **SF Symbols over emoji** — never use emoji for UI affordances, list icons,
tab icons, or actions. Reference glyphs from the sprite:
``. Glyphs inherit `currentColor`.
- Country flags are the *only* allowed emoji (SF Symbols has no flag glyphs).
- Need a glyph that isn't in the sprite? Add a new `` (24×24 viewBox)
following the existing pattern.
- Glassy segmented controls and translucent system alerts come for free in the CSS.
```html
```
**Note:** The phone frame uses a notch-style bezel by default. To use Dynamic Island style instead, add the `dynamic-island-style` class to `.phone-frame` and include a `` element.
### Flow Arrow
```html
```
### Annotation Callout
```html
Tap here →
```
## Navigation Patterns
### Large Title Nav
```html
My Apps
```
### Inline Nav with Back
```html
Back
TitleEdit
```
### Segmented Control (3-5 options)
```html
Tab 1
Tab 2
Tab 3
```
### Scrollable Tabs (many options)
```html
iPhone 6.7"
iPhone 6.5"
iPad Pro
```
## Content Components
### App List Row
```html
```
## Resources
- `assets/ios-design-system.css` - Complete CSS design system (copy into HTML)
- `assets/sf-symbols.svg` - SF Symbol sprite sheet (paste once into ``)
- `references/ios-components.md` - Full component documentation with all variants