mobile-design-ios

This skill targets iOS 26+ and its Liquid Glass design language. For apps targeting older iOS versions, fall back to standard Apple Human Interface Guidelines — those patterns are well-covered by general AI knowledge.

This skill guides creation of iOS interfaces that feel genuinely designed for the platform — avoiding the generic "template app" aesthetic that plagues AI-generated mobile UI. Every design decision should demonstrate understanding of iOS 26's Liquid Glass design language and the principles that separate professional apps from amateur ones.

The user provides iOS UI requirements: a screen, flow, component, or full app interface. They may include context about purpose, audience, or technical constraints.

Design Thinking

Before generating any UI, commit to a clear design direction:

• Purpose: What does this screen accomplish? What's the user's emotional state when they arrive here?
• Personality: Pick a direction — serene/zen, bold/editorial, warm/organic, precise/technical, playful/energetic, luxurious/refined, minimal/focused. The app's personality should feel intentional and consistent.
• Content-first: iOS 26's entire philosophy is that content is the star. Glass floats above to serve content, never to compete with it. Design the content layer first, then add navigation.
• Differentiation: What makes this feel like a designed app rather than a default template? What single detail would a user notice and appreciate?

CRITICAL: Liquid Glass is not decoration — it's a hierarchy tool. Glass belongs exclusively on the navigation/controls layer (tab bars, toolbars, floating buttons, sheets). Content stays opaque and on the content layer. This single rule prevents the majority of amateur iOS 26 mistakes.

iOS 26 Liquid Glass Design Guidelines

Focus on:

• Hierarchy: Strict two-layer model. The functional layer (navigation, toolbars, floating controls) uses Liquid Glass. The content layer uses standard opaque materials. Never put glass on content elements like cards, list rows, or backgrounds. Never stack glass on glass.
• Glass Variants: Use Regular glass by default — it blurs and adjusts luminosity for legibility. Use Clear glass only over visually rich media (photos, video) where dimming would harm the experience. Apply the .interactive() modifier only to primary interaction elements — it adds GPU cost.
• Grouping: Wrap multiple nearby glass elements in GlassEffectContainer — without it each element renders independently (poor performance) and they can't merge/morph fluidly. This is essential, not optional.
• Typography: Bolder and left-aligned in key moments. Section headers use title-style capitalization, not ALL-CAPS. Embrace Dynamic Type with emphasized weights. Minimum 11pt for any text. Body text stays SF Pro for full Dynamic Type support — but use a distinctive display font for hero headlines to avoid the "stock iOS" look.
• Color on Glass: Apply color sparingly to glass surfaces. Reserve tinting for a single prominent action (like a tinted Done button) or status indicators. If you want brand color, put it in the content layer, not on glass. Every glass element tinted equally = nothing stands out.
• Iconography: SF Symbols 7 provides 6,900+ symbols. Bars use icons over text labels — adopt this platform-wide shift. Use symbol animations (Draw, Variable Draw, Magic Replace) for state transitions. Render symbols with automatic gradient from a single source color.
• Motion: Glass elements materialize and dematerialize — they don't fade in/out. State changes use morphing transitions (tab bars shrink on scroll, buttons expand into popovers, sheets spring from source anchors). Motion should feel like gel-like flexibility, not mechanical animation. Pair haptics with motion: light impact for entrances, medium impact timed to morph completion.
• Geometry: Use concentric corner radii that match hardware curves (ConcentricRectangle). Sheets have increased corner radius with half-sheets inset from edges. Larger row heights, padding, and spacing than pre-iOS 26.
• Depth: Liquid Glass conveys depth through lensing/refraction, dynamic specular highlights, and context-aware shadows — not drop shadows or elevation values. Shadows automatically increase opacity over text for separation. Trust the system to handle depth.
• Scroll Behavior: Content scrolls under glass bars. Configure scroll-edge effects (blur/opacity increase as content approaches the bar). Tab bars shrink to compact form on scroll-down and expand when scrolling back up.
• Sidebars & Sheets: Sidebars are inset with glass, allowing content to flow behind them with a background extension blur effect. Half-sheets are inset from display edges with increased corner radius. Action sheets spring from their source element — never from screen bottom. Alerts expand directly from the triggering button.