iOS 27 原生界面设计

它解决什么问题

让大模型直接生成 iOS 界面，最常见的翻车点不是“做不出来”，而是做出来像网页套了层皮：自造字体、随手写 #0088FF、每个列表单元格都糊一层毛玻璃、底部飘个 Material 风格的 FAB。这类产物在真机上一眼就不对，但模型通常不会主动承认自己偏离了 HIG。@user_521ba876/ios27-design 的作用，是把一套明确的规范前置为约束，强制生成结果往 Apple 原生视觉靠拢。

核心能力与工作方式

技能的骨架是六份参考文件，生成 UI 前必须先读对应的一份：

• references/tokens.md — 色彩、字号、间距、材质、动效
• references/components.md — 21 个 UI 组件画布
• references/system-surfaces.md — 主屏、锁屏、控制中心、图标、设备边框
• references/patterns.md — 设置页、详情页、标签页、表单四类屏幕骨架
• references/platform-mapping.md — SwiftUI 与 HTML/CSS 的映射
• references/figma-source.md — Figma fileKey、nodeId 与 MCP 刷新方式

规范层面有几个硬约束：层级只分 Canvas / Surface / Glass chrome / Control 四层；排版只用系统 Text Styles，正文 17pt、行高 22pt；间距走 4pt 网格，分组列表内缩 16pt；SwiftUI 里不允许出现裸 hex，一律用 Color(.label)、.systemGroupedBackground 这类语义名；交互元素最小 44pt。

生成流程是七步清单，从“先定 SwiftUI 还是 HTML（用户没明说就问）”开始，依次套 tokens、选屏幕骨架、选组件变体（Borderless 做内联操作、Bordered - Prominent 做实底主按钮、Glass / Glass Prominent 做悬浮操作），再处理玻璃分区——导航栏、标签栏、工具栏用玻璃，列表单元格用实底分组背景。最后做无障碍检查和代码输出，SwiftUI 代码带 #available(iOS 26, *) 的玻璃降级。

适用边界

• 只服务 Apple 原生设计语言，明确拒绝 Material Design、WEUI、Ant Design 混用
• 不编造数据：没有 MCP 输出时，不得杜撰 SVG 路径、颜色或尺寸
• Text Field 没有独立画布，规格需走 library index
• 输出语言默认 SwiftUI，HTML 仅在需要浏览器预览时才提供，且用 platform-mapping.md 里的 CSS 变量
• 默认依赖系统级 WCAG 保障，超出系统默认范围的无障碍审计需配合专门的技能