用途:创建交互式 iOS/移动应用 UX 流程原型,以 HTML 文档呈现用户旅程与导航,包含真实感的手机外框。
主要能力:提供完整 CSS 设计系统与 SF Symbols 雪碧图,内置页面结构(页头 → 旅程行 → 手机框)、各类 iOS 组件、流程箭头与注释标注;默认采用 iOS 26 设计语言,包括 Liquid Glass 悬浮标签栏、导航/工具栏玻璃按钮,以及 SF Symbols 替代 emoji。
使用方式:将 assets/ios-design-system.css 复制进新 HTML 文件的 style,在 body 顶部粘贴一次 assets/sf-symbols.svg 雪碧图,再按页面结构组织内容。使用 .tab-bar 悬浮标签栏时,滚动屏需在 .scroll-content 上加 padding-bottom: 104px;用 .nav-glass-btn 或 .nav-glass-btn.text 做导航操作按钮;图标以 <svg class="sf"><use href="#sf-house"/></svg> 引用,glyph 继承 currentColor。
组件与限制:提供大标题/内联导航、分段控件、可滚动标签、列表行、操作卡网格、列表分组、表单卡、颜色类、分区分隔符等;手机框默认为刘海样式,改用灵动岛需加 dynamic-island-style 类并放入 dynamic-island 元素。除国旗外不应使用 emoji;需要雪碧图没有的图标时可按 24×24 viewBox 新增 symbol。更完整的组件变体见 references/ios-components.md。