iOS 27 设计规范

面向 iOS 27 / iPadOS 27 的 Apple 原生视觉语言。以内容为中心的布局，采用 Liquid Glass 系统控件、语义化颜色及符合 Human Interface Guidelines（HIG）的组件。

生成 UI 前，请先阅读对应参考文件：

1. 设计理念

1. 内容即界面 —— Liquid Glass 控件仅作为内容的框架，绝不与内容竞争视觉焦点
2. 语义优先于字面 —— 使用 Color(.label)、.systemGroupedBackground 等语义化颜色，禁用十六进制色值
3. 优先使用系统组件 —— 优先选用 Button、List、Toggle、NavigationStack 等原生组件，避免自定义复刻
4. 克制地运用 Liquid Glass —— 仅在导航栏、标签栏、工具栏及明确设计为悬浮态的元素上启用 Glass 效果
5. 每个区块仅设一个主要操作 —— 每节最多包含一个 Bordered-Prominent 或 Glass Prominent 类型的主操作按钮（CTA）
6. 最小触控尺寸为 44pt —— 所有可交互元素均须满足 HIG 触控目标要求

演进脉络：Apple HIG → iOS 26 Liquid Glass → iOS 27 进阶优化（滚动边缘效果、侧边栏配色、组件状态扩展）。

2. 设计准则

层级结构

排版规范

• 仅通过系统 Text Styles 调用 SF Pro 字体
• 每区块最多使用三级文字层级
• 正文 = 17pt 字号 / 22pt 行高（已在 Figma 中验证）
• Glass 区域内的文字标签需使用 Vibrant label 颜色

间距规则

• 基于 4pt 网格系统：8、12、16、20、24、32
• 分组列表内边距（inset）：16pt
• 按钮内部间距（图标 ↔ 文字）：4pt
• 区块间垂直间距：24pt

色彩策略

• 强调色蓝（accent blue）#0088FF 仅用于链接与主操作按钮
• 破坏性红色（destructive red）仅用于删除/取消类操作
• 禁止在 SwiftUI 中硬编码十六进制色值 —— 必须使用语义化 Color 名称
• 所有页面必须同时支持浅色模式与深色模式

3. 生成工作流

请复制以下清单并跟踪完成进度：

- [ ] 1. 明确技术栈（SwiftUI / HTML / 两者皆有）与外观模式（Light/Dark）
- [ ] 2. 加载 references/tokens.md 中的标记（tokens）
- [ ] 3. 从 references/patterns.md 中选取匹配的页面骨架
- [ ] 4. 按 references/components.md 组装组件
- [ ] 5. 将 Glass 控件层与内容层分离
- [ ] 6. 核验 44pt 触控目标、动态字体（Dynamic Type）与对比度
- [ ] 7. 依据 references/platform-mapping.md 输出对应平台代码

各步骤说明

1. 技术栈与外观模式 —— 默认使用 SwiftUI。仅当用户明确要求浏览器预览时，才额外提供 HTML 实现。若存在歧义，请主动确认。

2. 标记（Tokens） —— 应用语义化颜色与 Text Styles。禁止自行定义间距或圆角数值。

3. 页面骨架（Pattern） —— 匹配页面意图：设置页 → 分组列表（Grouped List）；详情页 → 大标题 + 主操作按钮（Large Title + CTA）；浏览页 → 标签页 + 列表（Tab + List）。

4. 组件选用 —— 参考 Figma 中的变体名称（variant names）作为指引：

• Borderless：用于行内操作（inline actions）
• Bordered - Prominent：用于纯色背景上的主操作按钮（CTA）
• Glass / Glass Prominent：用于悬浮于内容之上的操作按钮

5. Glass 层分离 —— 导航栏、标签栏、工具栏 = Glass；列表单元格 = 固态分组背景（solid grouped backgrounds）。

6. 可访问性（Accessibility） —— 确保 44pt 触控目标、使用系统级语义化颜色（符合 WCAG）、图标按钮（icon-only buttons）需添加 accessibilityLabel。

7. 代码输出 —— SwiftUI 实现需含 #available(iOS 26, *) 版本兼容逻辑，并为旧版本提供 Glass 回退方案；HTML 实现应基于 platform-mapping.md 提供的 CSS 变量。

4. Figma 对齐工作流

当用户提供 Figma 链接时，请执行以下流程：

1. 从 URL 中提取 fileKey 与 nodeId（例如 507-24673 → 507:24673）
2. 调用 get_metadata 获取符号（symbols）与变体（variants）清单
3. 对代表性变体（非全部符号）调用 get_design_context
4. 使用 figma-source.md 中提供的库 key，调用 search_design_system
5. 依据 platform-mapping.md 将结果映射至 SwiftUI / HTML 实现

严禁 编造任何未出现在 MCP 输出中的 SVG 路径、颜色或尺寸。

源文件：fileKey 96EUkf3yzeDWx72rxWfVd4 —— 21 个组件画布已完整归档（507:24670–507:24690）。完整节点索引详见 figma-source.md。

组件覆盖范围

*文本框（Text Field）规范见库索引（library index）—— 本文件中无独立画布。

5. 反模式（Anti-Patterns）

• 禁用 Material Design / Android 设计模式（如：置于 Glass 工具栏外的 FAB、涟漪动效、带阴影的卡片）
• 当 NavigationStack + 工具栏已满足需求时，禁用自定义导航栏
• 禁用为每个列表项添加 Glass 效果 —— Glass 仅适用于控件层（chrome）及明确设计为悬浮态的元素
• 禁止在 SwiftUI 中硬编码 #0088FF（应使用 .accentColor 或 Color.accentColor）
• 原生界面禁用自定义字体（如 Inter、Roboto 等）
• 内容卡片禁用投影阴影（drop shadows）—— 应通过背景层级（background stepping）与分隔线（separators）实现层次感
• 每个区块内最多仅允许一个 Bordered-Prominent / Glass Prominent 类型按钮
• 图标按钮（icon-only buttons）尺寸不得小于 44×44pt 触控区域
• 禁用 lorem ipsum 占位文本 —— 应使用符合 Apple 风格的真实示例文案
• 禁用混合 WEUI / Ant Design 等其他设计语言

6. 示例

示例 A：设置页

提示词：“生成 iOS 27 风格的设置页”

采用骨架： Pattern 1: Settings（来自 patterns.md）

NavigationStack {
    List {
        Section("General") {
            Toggle("Notifications", isOn: $notifications)
            NavigationLink("Appearance") { AppearanceView() }
        }
        Section {
            Button("Sign Out", role: .destructive) { signOut() }
        }
    }
    .listStyle(.insetGrouped)
    .navigationTitle("Settings")
}

示例 B：详情页 + 主操作按钮

提示词：“iOS 27 商品详情页，底部购买按钮”

采用骨架： Pattern 2: Detail

• 商品名称使用大标题（Large Title）
• 正文描述使用 Body 样式
• 使用 .safeAreaInset(edge: .bottom) 并配置 .borderedProminent 类型的“Buy”按钮

示例 C：Glass FAB 仪表盘

提示词：“iOS 27 dashboard with floating add button”

采用骨架： Pattern 5: Dashboard

• 使用 LazyVGrid 在 bg-secondary 背景上排列指标卡片
• 使用 .buttonStyle(.glassProminent) 实现右下角悬浮的“+”按钮

示例 E：浮层（Medium + Large）

提示词：“iOS 27 分享面板 / 编辑表单 Sheet”

采用骨架： Pattern 6: Modal Sheet —— 根据任务类型选择 detent

• 快速分享/筛选 → Medium（Liquid Glass，presentationDetents([.medium])）
• 完整编辑表单 → Large（提升式固态背景，带 × / Save 的 Glass 工具栏）
• iPad 设备 → 使用 Toolbar - Top - Sheet 的 popover（尺寸 936×852）

示例 G：带上下文菜单的三 Tab 应用

提示词：“iOS 27 三 Tab 应用，列表项长按菜单”

采用骨架： Pattern 4: Tab Root + Menu 组件

TabView {
    List {
        ForEach(items) { item in
            Text(item.name)
                .contextMenu {
                    Button("Share") { share(item) }
                    Button("Delete", role: .destructive) { delete(item) }
                }
        }
    }
    .tabItem { Label("Items", systemImage: "list.bullet") }
    // 其他 Tab...
}

示例 F：双技术栈（Dual Stack）

提示词：“设置页，SwiftUI + HTML 原型”

需交付两套实现：

1. SwiftUI View 结构体
2. 单个 index.html 文件，CSS 变量需引用自 platform-mapping.md

7. 相关技能

8. 验证清单

交付前请逐项核验：

• 符合 iOS 27 原生风格，而非泛用 Web/移动端样式
• 已明确指定浅色/深色模式，或具备自动适配能力
• Glass 效果仅应用于控件层（chrome）或明确设计为悬浮态的元素
• SwiftUI 中使用语义化颜色（无原始十六进制值）
• 图标使用 SF Symbols
• 所有可交互元素满足 44pt 触控目标
• 每个区块仅包含一个主操作按钮（CTA）
• 当 MCP 数据可用时，已采用 Figma 中的实际取值