mobile-ios-design作者 Seth Hobson

Mobile iOS Design Skill.

用于移动应用设计的 Claude Code 和 Codex skill：遵循 Apple Human Interface Guidelines 的原生 iOS UI，使用 SwiftUI。

Mobile Apps
UI 代码

wshobson/agents · plugins/ui-design/skills/mobile-ios-design/SKILL.mdSKILL.md

--- name: mobile-ios-design description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles. --- ## When to Use This Skill ## Core Concepts ## Quick Start Component ## Best Practices

从上游文件读取的前置内容和章节标题，2026-09-14 · 完整内容共 6,921 字符

01 功能说明

mobile-ios-design skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

此 skill 讲解 iOS 人机界面指南（HIG）和 SwiftUI 模式，用于构建遵循 Apple 设计原则的原生 iOS 应用。内容涵盖清晰性、遵从性和深度这三大 HIG 核心原则、SwiftUI 基于堆叠和网格的布局系统、包括 NavigationStack 和 TabView 的导航模式、通过 SF Symbols 和 Dynamic Type 实现的系统集成，以及使用语义颜色和材质的视觉设计。

该 skill 涉及 iOS、iPadOS 和 visionOS 平台的具体考量，聚焦于触控优先的界面、适配不同屏幕尺寸的自适应布局、无障碍支持，以及通过语义化样式实现的自动浅色/深色模式支持。

它产出什么

包含基于堆叠布局、导航模式和系统集成的 SwiftUI 视图代码

查看示例提示词 ↗

工作方式

01
应用 HIG 原则
遵循清晰性（清晰的文字、精确的图标）、遵从性（UI 帮助用户理解内容而不与其竞争）和层次感（视觉层次传达信息层级）来构建界面。
02
使用 Stack 和 Grid 布局进行组合
使用带有对齐和间距参数的 VStack 和 HStack，或使用带有 adaptive 或 flexible GridItem 列的 LazyVGrid 来构建视图结构。
03
实现导航模式
使用带有 navigationDestination 的 NavigationStack 实现层级导航，或使用带有 Tab 的 TabView 实现顶层应用分区。
04
集成系统资源
使用带有渲染模式和效果的 SF Symbols，以及遵循 Dynamic Type 的语义化字体，而非固定尺寸。
05
应用语义化样式
使用能自动适配浅色和深色模式的语义化颜色，例如 .primary 和 .secondary，以及用于模糊效果的系统材质。

02 找到适合场景

何时使用 mobile-ios-design Skill

在 Claude Code 或 Codex 中使用 mobile-ios-design skill 来完成此类移动应用设计工作。适用范围和限制来自该 skill 自己的文件。

适合场景

遵循 Apple HIG 设计 iOS 应用界面
构建 SwiftUI 视图和布局
实现 iOS 导航模式（NavigationStack、TabView、sheets）
为 iPhone 和 iPad 创建自适应布局
构建无障碍的 iOS 界面

了解边界

使用不适配浅色和深色模式的硬编码颜色
创建带有强引用循环的闭包，导致内存泄漏

03 Skill 内部

mobile-ios-design Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 4 条具体指令、默认值和限制——正是文件中真正改变结果的部分。

始终使用语义化颜色
使用 .primary、.secondary 和 .background 而非硬编码颜色，以自动支持浅色和深色模式。
为 Dynamic Type 使用语义化字体
应用 .body 和 .headline 等语义化字体而非固定尺寸，使文字随用户偏好缩放。
遵循安全区域
使用 safeAreaInset，避免在屏幕边缘硬编码内边距，以防内容被遮挡。
为长列表使用 LazyVStack
在滚动列表中使用 LazyVStack 或 LazyHStack 而非常规 stack，以避免性能问题。

04 投入使用

在 Claude Code 或 Codex 中安装 mobile-ios-design

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 mobile-ios-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

针对 plugins/ui-design/skills/mobile-ios-design/SKILL.md 的通用 skills CLI 形式；具体仓库可能会说明其自身路径。

给 Skill 第一个移动应用设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Build a feature list screen for an iOS app using NavigationStack. Each feature should be displayed in a card with an SF Symbol icon, title, and description. The cards should use semantic colors for automatic dark mode support and include proper accessibility labels. Add a detail view that shows when tapping a feature card, and ensure the layout adapts properly for both iPhone and iPad in split view mode.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

在真实设备上测试，以获得完整的触感反馈和性能体验

在 OpenDesign 中通过其 SKILL.md 链接导入 mobile-ios-design：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Seth Hobson
Repository: github.com/wshobson/agents 分支 main
Skill 文件: plugins/ui-design/skills/mobile-ios-design/SKILL.md 内容校验和已在验证时记录；commit 4236bb9
License: MIT 来自 LICENSE。
仓库星标数: 39,635 GitHub 快照拍摄于 2026-09-14，来自 wshobson/agents 仓库全部内容，该仓库在此目录中包含 18 个 skill。不是 mobile-ios-design 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

何时使用此 Skill列出包括 iOS 界面设计、SwiftUI 视图、导航模式、自适应布局和无障碍功能等使用场景
核心概念涵盖 HIG 原则、SwiftUI 布局系统、导航模式、系统集成和视觉设计
人机界面指南原则定义清晰、遵从和层次原则，并结合 iOS、iPadOS 和 visionOS 的平台考量
SwiftUI 布局系统展示使用 VStack 和 HStack 的堆栈式布局，以及使用 LazyVGrid 的网格布局
导航模式演示适用于 iOS 16 和 18 的 NavigationStack 与 navigationDestination，以及 TabView 与 Tab
系统集成说明带渲染模式和效果的 SF Symbols，以及带语义字体的 Dynamic Type
视觉设计涵盖语义颜色、用于模糊效果的系统材质，以及用于呈现层次的阴影
快速入门组件提供一个完整的 FeatureCard 视图示例，包含图标、标题、描述和样式
最佳实践列出八条规则，包括语义颜色、SF Symbols、Dynamic Type、无障碍、安全区域和测试
常见问题识别布局崩溃、性能、导航、深色模式、无障碍以及内存泄漏问题并给出解决方案

Skill 自身的描述

"掌握 iOS Human Interface Guidelines 和 SwiftUI 模式，用于构建原生 iOS 应用。在设计 iOS 界面、实现 SwiftUI 视图或确保应用遵循 Apple 的设计原则时使用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 6,921 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 mobile-ios-design Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

iOS 16 及更高版本应使用哪种导航模式？

使用 NavigationStack 配合 navigationDestination 实现层级导航。NavigationStack 接受一个 path 参数，并使用 navigationDestination(for:) 为不同的值类型定义目标视图。对于顶层导航，请使用 iOS 18+ 中提供的 Tab 语法的 TabView。

如何确保文本随用户的无障碍设置进行缩放？

使用如 .body 和 .headline 这样的语义字体，而不是固定大小。这些字体遵循 Dynamic Type，并根据用户偏好自动缩放。对于自定义字体，可使用 relativeTo 参数将字体与语义文本样式绑定。

Mobile iOS Design

在真实的移动应用设计任务上运行 mobile-ios-design。

下载 OpenDesign，从其 SKILL.md 链接导入 mobile-ios-design，粘贴上面的提示词，并在生成结果前阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design