iOS Mobile Design: free AI skill for design

What the skill covers

The sections of its instructions, in order.

01 When to Use This Skill
02 Core Concepts
1. Human Interface Guidelines Principles
2. SwiftUI Layout System
3. Navigation Patterns
4. System Integration
5. Visual Design
03 Quick Start Component
04 Best Practices
05 Common Issues

Reference files

3 files Phở can open while it uses the skill.

references/hig-patterns.md
references/ios-navigation.md
references/swiftui-components.md

More in Frontend and UI design

Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design System Patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching…
Interaction Design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or…
Android Mobile Design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's…
React Native Design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns…
Responsive Design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces…
Visual Design Foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or…
Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries…
Next.js App Router Patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…
React Native Architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native…
React State Management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state…
Tailwind Design System (v4)
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design…
Screen Reader Testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring…
WCAG Audit Patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations…

Similar design skills

Frequently asked questions

What does iOS Mobile Design do?

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.

Is iOS Mobile Design free to use?

Yes. iOS Mobile Design is published by Seth Hobson under the MIT licence, and you can use it with a free Phở account.

How do I use iOS Mobile Design in Phở?

Press Open in Phở, then Try to apply it to your next message, or add the Frontend and UI design set so Phở loads it whenever a request matches.

Does iOS Mobile Design need other tools?

No. It works in a normal Phở chat with what you type or upload.