mobile-ios-designавтор Seth Hobson

Mobile iOS Design Skill.

Навык для Claude Code и Codex в области дизайна мобильных приложений: нативный iOS UI в соответствии с Apple Human Interface Guidelines и SwiftUI.

Мобильные приложения
UI-код

Скачать OpenDesign Инструкция по использованию

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

Преамбула и заголовки разделов прочитаны из исходного файла 14 сентября 2026 года · 6 921 символ в полном виде

01 Что делает

Что делает Skill mobile-ios-design в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill учит iOS Human Interface Guidelines и паттернам SwiftUI для создания нативных iOS-приложений, соответствующих принципам дизайна Apple. Он охватывает ясность, сдержанность и глубину как ключевые принципы HIG, системы макетов SwiftUI на основе стеков и сеток, паттерны навигации, включая NavigationStack и TabView, интеграцию с системой через SF Symbols и Dynamic Type, а также визуальный дизайн с использованием семантических цветов и материалов.

Skill рассматривает особенности платформ iOS, iPadOS и visionOS, уделяя внимание интерфейсам, ориентированным на касание, адаптивным макетам для разных размеров экрана, доступности и автоматической поддержке светлого/тёмного режима через семантические стили.

Что он выдаёт

Код SwiftUI-представлений с макетами на основе стеков, паттернами навигации и системной интеграцией

Смотрите пример запроса ↗

Как это работает

01
Применяйте принципы HIG
Создавайте интерфейсы в соответствии с принципами ясности (читаемый контент, точные иконки), сдержанности (UI помогает пользователям воспринимать контент, не конкурируя с ним) и глубины (визуальные слои передают иерархию).
02
Компонуйте с помощью Stack и Grid Layouts
Используйте VStack и HStack с параметрами alignment и spacing, либо LazyVGrid с адаптивными или гибкими колонками GridItem для структурирования view.
03
Реализуйте паттерны навигации
Используйте NavigationStack с navigationDestination для иерархической навигации, либо TabView с Tab для верхнеуровневых разделов приложения.
04
Интегрируйте системные ресурсы
Используйте SF Symbols с режимами рендеринга и эффектами, а также семантические шрифты, учитывающие Dynamic Type, вместо фиксированных размеров.
05
Применяйте семантическое оформление
Используйте семантические цвета, такие как .primary и .secondary, которые автоматически адаптируются к светлой и тёмной теме, а также системные материалы для эффектов размытия.

02 Определите своё применение

Когда использовать skill mobile-ios-design

Используйте навык mobile-ios-design в Claude Code или Codex, когда задача — дизайн мобильного приложения такого рода. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

Проектирование интерфейсов приложений iOS в соответствии с Apple HIG
Создание представлений и макетов с SwiftUI
Реализация паттернов навигации iOS (NavigationStack, TabView, sheets)
Создание адаптивных макетов для iPhone и iPad
Создание доступных интерфейсов для iOS

Знайте границы

Использование жёстко заданных цветов, которые не адаптируются к светлой и тёмной теме
Создание замыканий с сильными циклическими ссылками, вызывающими утечки памяти

03 Внутри скилла

Правила, которые skill mobile-ios-design задаёт Claude Code и Codex

4 конкретные инструкции, значения по умолчанию и ограничения, которые SKILL.md задаёт агенту — та часть файла, которая влияет на результат.

Всегда используйте семантические цвета
Используйте .primary, .secondary и .background вместо жёстко заданных цветов, чтобы автоматически поддерживать светлую и тёмную тему.
Используйте семантические шрифты для Dynamic Type
Применяйте семантические шрифты, такие как .body и .headline, вместо фиксированных размеров, чтобы текст масштабировался в соответствии с настройками пользователя.
Учитывайте безопасные зоны
Используйте safeAreaInset и избегайте жёстко заданных отступов у краёв экрана, чтобы контент не перекрывался.
Используйте LazyVStack для длинных списков
Используйте LazyVStack или LazyHStack вместо обычных stack для прокручиваемых списков, чтобы избежать проблем с производительностью.

04 Применение

Установите mobile-ios-design в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте mobile-ios-design в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Общий формат CLI skills для plugins/ui-design/skills/mobile-ios-design/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по дизайну мобильного приложения

Написано в терминах самого 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 импортируйте mobile-ios-design по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Seth Hobson
Repository: github.com/wshobson/agents Ветка main
Файл skill: plugins/ui-design/skills/mobile-ios-design/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 4236bb9
License: MIT Из LICENSE.
Звёзды репозитория: 39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 навыков в этом каталоге. Не является рейтингом или счётчиком использования mobile-ios-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использовать этот skillПеречисляет сценарии, включая дизайн интерфейсов iOS, представления SwiftUI, паттерны навигации, адаптивные макеты и доступность
Основные концепцииОхватывает принципы HIG, систему макетов SwiftUI, паттерны навигации, системную интеграцию и визуальный дизайн
Принципы Human Interface GuidelinesОпределяет принципы ясности, сдержанности и глубины с учётом особенностей платформ iOS, iPadOS и visionOS
Система макетов SwiftUIПоказывает макеты на основе стеков с VStack и HStack, а также сеточные макеты с LazyVGrid
Паттерны навигацииДемонстрирует NavigationStack с navigationDestination и TabView с Tab для iOS 16 и 18
Системная интеграцияОбъясняет SF Symbols с режимами рендеринга и эффектами, а также Dynamic Type с семантическими шрифтами
Визуальный дизайнОхватывает семантические цвета, системные материалы для эффектов размытия и тени для глубины
Компонент быстрого стартаПредоставляет полный пример представления FeatureCard с иконкой, заголовком, описанием и оформлением
Best PracticesПеречисляет восемь правил, включая семантические цвета, SF Symbols, Dynamic Type, доступность, безопасные зоны и тестирование
Частые проблемыВыявляет проблемы с нарушением макета, производительностью, навигацией, тёмным режимом, доступностью и утечками памяти с решениями

Собственное описание skill

"Освойте iOS Human Interface Guidelines и паттерны SwiftUI для создания нативных iOS-приложений. Используйте при проектировании интерфейсов iOS, реализации представлений SwiftUI или обеспечении соответствия приложений принципам дизайна Apple."

Описание из front-matter в SKILL.md. Полный файл содержит около 6 921 символа. Прочитайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill mobile-ios-design

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Какой паттерн навигации использовать для iOS 16 и новее?

Используйте NavigationStack с navigationDestination для иерархической навигации. NavigationStack принимает параметр path и использует navigationDestination(for:) для определения целевых представлений для разных типов значений. Для навигации верхнего уровня используйте TabView с синтаксисом Tab, доступным в iOS 18+.

Как сделать так, чтобы текст масштабировался в соответствии с настройками доступности пользователя?

Используйте семантические шрифты, такие как .body и .headline, вместо фиксированных размеров. Эти шрифты учитывают Dynamic Type и автоматически масштабируются в соответствии с предпочтениями пользователя. Для собственных шрифтов используйте параметр relativeTo, чтобы привязать шрифт к семантическому текстовому стилю.

Mobile iOS Design

Запустите mobile-ios-design на реальной задаче дизайна мобильного приложения.

Загрузите OpenDesign, импортируйте mobile-ios-design по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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