SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-ios

design-ios

设计与创作

查看项目

更新于 10-26 16:23

技能介绍

用途

design-ios 用于为 Apple 平台设计屏幕或流程。适用平台包括 iPhone（含 iPhone Duo）、iPad、Mac、Apple Watch、Apple TV 和 Vision Pro。它的交付物是带边框的 HTML 模型稿，以及一份面向 SwiftUI 的交接规格，包含命名令牌、文本样式、语义颜色、尺寸、状态和间距。该技能不编写 SwiftUI 代码，实现环节交给 swift-expert 或 Apple 平台开发者。

前置条件与输入

使用时机：在设计系统令牌已经存在之后。

输入包括：

  • design-system.md —— OKLCH 调色板、排版方向、动效个性。
  • 要设计的屏幕/流程以及目标平台。

需要先选择平台参考：

  • iPhone：下方步骤 + references/dynamic-type.md
  • iPad、可调整大小的窗口、iPhone Duo：+ references/ipados-iphone-duo.md
  • Mac：+ references/macos.md、references/type-scales-other.md
  • Apple Watch、Apple TV、Vision Pro：+ references/watch-tv-vision.md、references/type-scales-other.md

主要能力与工作步骤

  1. 将令牌映射到平台角色。排版映射到平台 HIG 文本样式名称（iOS/iPadOS Dynamic Type：Body 17 pt … Caption 2 11 pt；macOS 固定样式：Body 13 pt … Large Title 26 pt；tvOS/watchOS 表格），见 dynamic-type.md、type-scales-other.md。颜色映射到语义角色，绝不使用原始十六进制，见 semantic-colors.md。

  2. 按尺寸类而非设备选择画布：至少包含紧凑宽度、常规宽度，以及关键屏幕在 AX5 文本大小下的版本。HIG 不再公布设备点尺寸，需从 Xcode Device Hub 获取并记录来源，见 viewports.md。

  3. 构建 HTML 模型稿：按记录的点尺寸设置边框（1 pt = 1 CSS px），使用 viewport-fit=cover、env(safe-area-inset-*) 处理 Dynamic Island / home indicator，见 mockup.md。macOS 使用标准系统窗口边框，绝不使用自定义 chrome，见 macos.md。

  4. Liquid Glass 仅用于功能层（标签栏、工具栏、侧边栏、关键控件），绝不用于内容。默认使用 regular 变体，文本密集界面也使用 regular；仅在富媒体之上使用 clear，并在明亮内容上叠加 35% 暗色遮罩；强调色用于主要操作的背景，且要克制。没有公布的圆角半径，改用同心嵌套，见 liquid-glass.md。

  5. 验证目标尺寸与对比度：平台控件尺寸（iOS 44×44 pt、macOS 28×28、tvOS 66×66、visionOS 60×60、watchOS 44×44）与间距，见 touch-targets.md。对比度最低 4.5:1（≥18 pt 或粗体为 3:1），自定义颜色和小文本目标 7:1，需在浅色、深色和 Increase Contrast 下检查，见 semantic-colors.md。来源：https://developer.apple.com/design/human-interface-guidelines/dark-mode 和 https://developer.apple.com/design/human-interface-guidelines/accessibility。

  6. 侧边栏不超过 2 层。更深层级应使用分栏视图，在侧边栏和详情视图之间加入内容列表，而不是第三层展开。iPad 上优先考虑标签栏。来源：https://developer.apple.com/design/human-interface-guidelines/sidebars。

  7. 平台专项处理：应用上面选择的平台参考（macOS 桌面着色仅在 graphite 强调色下；tvOS 60/80 pt 安全区域和焦点放大；visionOS 装饰仅用于控件；watchOS 每行不超过 3 个字形按钮；iPhone Duo 控件在侧面以及折叠保留区域）。

  8. 查看渲染结果：对每个画布截图（浅色、深色、AX5），在宣布模型稿完成前读取 PNG；修复看到的问题，然后交给 design-review。

  9. 按 handoff-swiftui.md 编写交接规格：仅使用命名令牌、按名称指定文本样式、语义颜色、尺寸（fixed/hug/fill）、所有状态（disabled/pressed/focused，macOS 另加指针样式，tvOS 加焦点）、以 pt 为单位的间距、画布来源。

失败处理

  • 截图工具不可用：在报告中说明（视觉检查：未运行），并用精确 pt 值描述模型稿；绝不声称运行了未运行的视觉检查。
  • 所需值不在参考中或引用的 HIG 页面上：标记为“需在 developer.apple.com 上再次确认”；绝不编造数字。Apple 未公布数字间距或圆角网格，不要强加 8-pt 网格；所选值属于项目令牌。

输出

  • 每个画布的带边框 HTML 模型稿，以及它们的截图。
  • handoff.md，包含命名令牌、文本样式、语义颜色、尺寸、状态、间距、画布来源，可直接交给 swift-expert。

下一步 → design-review（以模型稿为范围：截图、对比度，不做完整站点审计循环）。

参考文件

  • references/dynamic-type.md：iOS/iPadOS Dynamic Type（Large + AX5），默认/最小尺寸 —— HIG Typography
  • references/type-scales-other.md：macOS、tvOS、watchOS 文本样式；visionOS 说明 —— HIG Typography
  • references/semantic-colors.md：语义角色，对比度 4.5/3/7:1，增强对比度，base/elevated —— HIG Color、Dark Mode
  • references/viewports.md：尺寸类、安全区域、通过 Device Hub 确定画布尺寸 —— HIG Layout
  • references/liquid-glass.md：Liquid Glass 分层、变体、颜色、各平台 —— HIG Materials、Color
  • references/touch-targets.md：所有平台的控件尺寸 + 间距 —— HIG Accessibility
  • references/macos.md：窗口边框、固定字体、桌面着色、指针、侧边栏 —— HIG
  • references/ipados-iphone-duo.md：iPadOS + iPhone Duo 姿态、保留区域、垂直控件 —— HIG
  • references/watch-tv-vision.md：watchOS、tvOS、visionOS 基础 —— HIG
  • references/mockup.md：设备边框 HTML/CSS 技术（安全区域、viewport-fit）
  • references/handoff-swiftui.md：面向 SwiftUI 的交接规格格式